Arantium Maestum

プログラミング、囲碁、読書の話題

Reagent

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

前々回、前回からの続き。 あとは作ったViewsとLogicを組み合わせるだけなので非常に簡単。 まずは状態を管理するreagent atomをdefonceしておく。 (defonce game-state (r/atom (l/new-game-state 9))) defではなくdefonceなのは、defだとコードに変更を加…

Reactで書かれた囲碁ボードをReagentで作ってみる(Views編)

前回からの続き。 Reagentコンポーネントを定義するviews.cljsの説明。 まずは点の大きさを表すGRID_SIZEを定義し、盤上の「点」をコンポーネント化する。 (def GRID_SIZE 40) (defn BoardIntersection [[row col] color click-fn] (let [style {:top (* row…

Reactで書かれた囲碁ボードをReagentで作ってみる(Logic編)

こういう記事を発見した。 React beginner tutorial: implementing the board game Go | Chris LaRose, Software Developer JSとReactで簡単な囲碁のボードを作成する、というもの。コードとしても非常に簡単だったのでClojurescriptとReagentで書いてみた。…

Clojure Web Development勉強 - Devcards(その1)最低限の設定

CSSをいじりたおす根気がなかった・・・ ということで話題を変えてFigwheelの作者でもあるBruce Haumanが作ったツールであるDevcardsについて書く。 Devcardsとは DevcardsはClojureScript+Reactで作ったコンポーネントの動作を試すための環境を提供するツー…

Clojure Web Development勉強 - ReactチュートリアルをReagentでやってみる(その5)

ReactチュートリアルのShowing the Movesから最後のImplementing Time Travelまで。 Showing the Moves https://facebook.github.io/react/tutorial/tutorial.html#showing-the-moves 前回作成したhistoryデータを使って過去の動きを表示するようにする。 Ja…

Clojure Web Development勉強 - ReactチュートリアルをReagentでやってみる(その4)

最後までやるつもりだったのだが、長くなったので今回はStoring a Historyだけ。 https://facebook.github.io/react/tutorial/tutorial.html#storing-a-history これまでReactチュートリアルでは、まずSquareを状態を持ったコンポーネントとして実装し、その…

Clojure Web Development勉強 - ReactチュートリアルをReagentでやってみる(その3)

公式チュートリアルのFunctional ComponentsからDeclaring a Winnerまで。 Functional Components 前回散々JavaScript版が明示的じゃない、ボイラープレートが多いと煽っていたが、実際にはJSでも純粋関数的に書くとより簡潔になる: function Square(props)…

Clojure Web Development勉強 - ReactチュートリアルをReagentでやってみる(その2)

React公式チュートリアルを進める。今回はPassing Data Through PropsからLifting State Upまで。 Passing Data Through Props https://facebook.github.io/react/tutorial/tutorial.html#passing-data-through-props 親コンポーネント(つまり呼び出し側の…

Clojure Web Development勉強 - ReactチュートリアルをReagentでやってみる(その1)

Reactの公式ページに基本概念などの説明のためのチュートリアルがある: facebook.github.io これをClojureScript/Reagentでやっていきたい。 最終的な成果物は簡単な○×ゲーム。 HTMLやCSS、そしてReact Componentの大枠はすでに出来上がっていて、チュート…

Clojure Web Development勉強 - Reagent(その3)状態の管理

Reagentでは、Hiccup構文を使ったコンポーネント関数とReagent Atomを使って、複雑な状態を持つクライアントサイド・アプリケーションを作成できる。 前回の例ではコードをなるべく単純に留めるために、トップレベルでReagent Atomを定義し、各コンポーネン…

Clojure Web Development勉強 - Reagent(その2)Reagent Atom

さて、Reagentの二大要素の二つ目であるReagent Atomについて。 Reagentでは、コンポーネントの可変な状態を保持するために特殊なAtomを用意している。 と言っても概念・機能は通常のClojureのAtomとほとんど同じで、Immutableなデータ構造へのポインタのよ…

Clojure Web Development勉強 - Reagent(その1)概要とHiccup構文

ReactのClojureScript WrapperであるReagentライブラリについて。 前回書いたとおり、ClojureScriptには有名なReact Wrapperが三つある。Om/Om-Next、Quiescent、そしてこのReagentである。 最初の二つの特徴を非常にざっくりと要約するなら: Om/Om-Nextは…