Reactで書かれた囲碁ボードをReagentで作ってみる（Core編）

あとは作ったViewsとLogicを組み合わせるだけなので非常に簡単。

まずは状態を管理するreagent atomをdefonceしておく。

(defonce game-state (r/atom (l/new-game-state 9)))

defではなくdefonceなのは、defだとコードに変更を加える度にfigwheelで表示されているページの状態がリセットされてしまうため。

次は点にクリックされた時にこのratomをlogicに記述されているplay-moveで更新する関数：

(defn click [coord]
  (swap! game-state #(l/play-move % coord)))

パスボタンがクリックされた時の関数：

(defn pass []
  (swap! game-state l/pass))

viewsに定義されているGameコンポーネントにratomの状態（あくまでimmutableなデータ）と上記の定義された関数二つを渡す：

(defn app []
  [v/Game @game-state click pass])

考えてみたらviewsは本当に渡されたimmutableなデータを元にimmutableなデータ構造を返すだけだ。reagentをインポートすらしていないし、ratomに対して何かをするというロジックも組み込まれていない。

そういうデザインができるのはアプリが非常に単純だからでもあるけど、こういう風に綺麗にコードの分割が実現できると気持ちが良い。clojurescriptとreagentを使っている醍醐味の一つだろう。

あとはreagentでレンダするだけ：

(r/render
  [app]
  (js/document.getElementById "container"))

さて、一旦チュートリアルをベースに作ってみたが、その経験を元に一から作り直してみたい。特にデータ構造の定義をlogicとは別のところでやって、clojure.specを使い倒してみようと思う。

Arantium Maestum