ClojureScriptでReactチュートリアルやってみた (2)

はじめに

この記事の続き。

公式チュートリアルの「Wrapping Up」の章(最後)まで進めてみました。部品の大部分をBoardコンポーネントからGameコンポーネントに移し、historyに盤面を保存していくように変更しています。

全ソースはこちら。

1. 実装

(defn square [{:keys [on-click value]}]
  [:button.square
    {:on-click #(on-click)}
    value])

(defn board [& {:keys [squares on-click]}]
  (letfn
    [(render-square [i]
       [square {
         :value (squares i)
         :on-click #(on-click i)
       }])]
        [:div
          [:div.board-row
            (render-square 0)
            (render-square 1)
            (render-square 2)]
          [:div.board-row
            (render-square 3)
            (render-square 4)
            (render-square 5)]
          [:div.board-row
            (render-square 6)
            (render-square 7)
            (render-square 8)]]))

(defn game []
  (let [state (r/atom {:history (vec [{:squares (vec (repeat 9 ""))}])
                       :x-is-next? true})]
    (fn []
      (letfn
        [(handle-click [i]
          (let [history (get @state :history)
                current (last history)
                squares (get current :squares)
                x-is-next? (get @state :x-is-next?)]
            (when (and (= (calculate-winner squares) nil) (= (squares i) ""))
                  (swap! state
                         assoc :history
                         (conj history
                               (assoc-in current [:squares i] (if x-is-next? "X" "O"))))
                  (swap! state assoc :x-is-next? (not x-is-next?)))))]
            (let [history (get @state :history)
                  current (last history)
                  squares (get current :squares)
                  winner (calculate-winner squares)
                  status (if (= winner nil)
                              (str "Next player: " (if (get @state :x-is-next?) "X" "O"))
                              (str "Winner: " winner))]
                    [:div.game
                      [:div.game-board
                        [board :squares squares
                               :on-click handle-click]
                        ]
                    [:div.game-info
                      [:div status]
                    [:ol
                    ;"todo"
                    ]]])))))

2.ClojureScriptコーディングあれこれ

2.1. last

(last history)

lastはcollectionの最後の要素を取得する。

2.2. conj

(conj history
      (assoc-in current [:squares i] (if x-is-next? "X" "O")))

conjはcollectionの最後に要素を追加する。

続き

こちら