ClojureScriptでReact 2019 #JavaScript

こんにちは。

普段はClojureとClojureScriptだけ書いていてJavaScriptは書かないのですが、いつもより広い範囲のオーディエンスにClojureの良さを語りたくなったので参加させていただきました。

この記事ではshadow-cljsというClojureScript用のツールによって

node&jvmさえあればClojureScriptでの開発を始められる
既存のnodeモジュールを簡単に利用できる
=> ClojureScriptでReactプロジェクト作るのめっちゃ楽しい!

という点を今回作った小さなプロジェクトを添えて主張しようと思います。

ClojureScriptとは

狭義のClojureはRich Hickeyが作ったJVM上で動く言語です。概要は @223kazuki さんの書いたキメるClojure高速開発がオススメです。

そのヤバめな言語であるClojureをソースとして読み、JavaScriptを吐き出すコンパイラがClojureScriptです。言語の特徴以外ではGoogle Closure Compilerに依存しており、プロダクションビルドの際にその圧縮力の恩恵を受けることが期待できる点がアピールポイントです。

(ClojureとClosureで名前が衝突する点もよく話題に上がります。)

開発環境事情

ClojureScriptは良い物だとして、素のClojureScriptコンパイラにはいくつか課題があります。

ClojureScriptコンパイラ自体はClojureライブラリ => Clojureを動かす環境のインストールが必要
ホットリローディングが無い
nodeモジュールを使うのが煩雑
- + Google Closure Compilerによって行なわれる変数リネームによってプロダクションビルドで壊れがち

この辺りをナイスにケアしてくれるshadow-cljsというツールが数年前に登場し、nodeとJavaランタイムさえあればClojureScriptを始められる時代が来ています。

shadow-cljsを使う

shadow-cljs自体はnpmでインストールできるcliなので使い始める敷居が低いのが特徴です。

インストール

前提となるnodeとjvmがインストール済みの前提でそこら辺のライブラリと同じようにpackage.jsonに足すなりnpm installするなりするだけ!

shadow-cljs.edn

各ビルドの設定やClojureScriptの依存ライブラリを書くファイルです。

開発ビルド

npx shadow-cljs watch <build-name> とshellに打つとコンパイルされ、開発用のwebサーバーが起動します。この状態ではソースの変更が監視されており、cljsのソースを触る度に最新のコードがブラウザにwebsocketで配信されます。最新の動作を確認するためにブラウザの更新ボタンを押す必要がない幸せを得る機能がデフォルトで付属しているのは嬉しいポイント。

React/node moduleでデモ

今回はボタンを押すとnodeが追加、node間をドラッグするとedgeが追加される物をvis-networkとReagentというReactラッパーで作りました。

コードはこちら

(ns my.dev
  (:require
   [reagent.core :as reagent]
   ["vis-network" :as vis]))

(defn graph [{:keys [nodes edges
                     on-edge-add
                     add-edge-mode]}]
  [:div
   {:ref (fn [dom]
           (when dom
             (let [parent-dom (.-parentElement dom)
                   nw (vis/Network.
                       dom
                       #js {:nodes (vis/DataSet. (clj->js nodes))
                            :edges (vis/DataSet. (clj->js edges))}
                       (clj->js
                        {:layout {:randomSeed 111} ;;Make deterministic
                         :edges {:arrows "to"
                                 :color "red"
                                 :physics false}
                         :manipulation
                         {:addEdge (fn [data callback]
                                     (on-edge-add {:from (.-from data)
                                                   :to (.-to data)})
                                     (callback data))}}))]
               (when add-edge-mode
                 (.addEdgeMode nw))
               (doto nw
                 (.setSize
                  (.-clientWidth parent-dom)
                  (.-clientHeight parent-dom))
                 (.fit (clj->js (map :id nodes)))))))}])

(defn view []
  (reagent/with-let
    [state (reagent/atom {})]
    [:div
     [:button
      {:on-click #(swap! state
                         update
                         :nodes
                         conj
                         {:id (count (:nodes @state))
                          :label (str (count (:nodes @state)))})}
      "Add Node"]
     [graph {:nodes (:nodes @state)
             :edges (:edges @state)
             :add-edge-mode true
             :on-edge-add (fn [edge]
                            (swap! state update :edges conj edge))}]]))

(defn render-view []
  (reagent/render [view]
                  (js/document.getElementById "root")))

(defn ^:dev/after-load start []
  (js/console.log "start")
  (render-view))

(defn ^:export init []
  ;; init is called ONCE when the page loads
  ;; this is called in the index.html and must be exported
  ;; so it is available even in :advanced release builds
  (js/console.log "init")
  (render-view))

;; this is called before any code is reloaded
(defn ^:dev/before-load stop []
  (js/console.log "stop"))

細かい解説は需要があれば足しますが、ポイントは

nodeモジュールが特別なことをしなくても使える
reagentというReactラッパーが広く使われている
ホットリローディングがデフォルト

という点です。

もしClojure/ClojureScriptに興味を持っていただいた方は、twitterでつぶやくと捕捉されやすいです。あとはdosync radioというClojureの日本語ポッドキャストを今年から始めているので聴いてみてください。では良いお年を!