終了判定の部分がバグっていたりしたので2時間ほど眠ってからまた3時間ほどかけてデバッグ。翌日にまた約1時間かけて調整をして一応出来ました。
合計8時間もかかってますね。 汗)
何せ初めてのReactなので。
クリックすると別ウィンドウでRunstant Liteが開きます。
https://goo.gl/Psx5fl
使ったツール
@phi_jp さん作成の「Runstant Lite」素晴らしいです。
ソースコードをエンコードしてURLに保存するというアイデアには脱帽しました。
初めてReact.jsで書いてみた感想
実は今AngularJSも勉強中ですが、それと比べるとReactの方が覚えないと行けない事が圧倒的に少ないので精神的に楽です。
まず親コンポーネントをとりあえず作って四角いDIVを表示する事が出来れば、そこに一つずつ子コンポーネントを付け足して行く感じでUIの作成はそれほど苦労せずに出来ました。
今回は
- Board (盤面の背景を描画)
- Cell (個々のセルを描画)
- StatusPanel (「X」の番です、などゲームの状態を表示)
- ResultPanel (「X」の勝ち!、引き分け、などの結果を表示)
の4つのコンポーネントを作成しました。
最初は個々のCellにStateを持たせてクリック時の表示の更新をCellの内部で行っていました。でもそれだとBoard全体としての処理(終了判定など)との連携が面倒になる事に気付いて、Reactの世界の外側に作ったAppクラスで全ての状態を管理する様にしました。
ReactはあくまでView担当なので、Modelは自分で作らないとダメなんですよね。
そうなると今度は
1. Reactのコンポーネント内で発生するイベント(クリックされた、など)をModel側に伝える方法
2. 逆にModel側で発生するイベント(勝敗が着いた、など)をReactコンポーネント側に伝える方法
が必要になります。
前者の場合は単純にonClickなどのハンドラからAppクラスの関数を直接呼ぶ事も出来るのですが、後者のやり方が分からずにちょっと悩みました。
そこでFlux関係の解説を読み漁って、「とにかくPubSubで疎結合にしろ」という事なのかな〜と理解しました。
その結果、自分なりにEventEmitterもどき(?)を作って、Reactコンポーネントとモデルが必ずそれを経由して対話する様な形になりました。よくFluxで言われる「単方向のフロー」にはなっていない様な気もしますが、一応「PubSubで疎結合」にはなっているのではないかと思います。
こういうのはやっぱり自分で作って試行錯誤して見ないと腹の底から理解する事は出来ないですね。
単純な◯☓ゲームでしたがとりあえず作ってみて、Reactへの理解を少し深める事が出来たと思います。Android版のReact Nativeも出て来た事だし、これからもさらにReactに時間を投資して見ようかなと思います。
※追記
きちんとFluxに則って作られたきれいな◯☓ゲームを見つけました。コードも見た目もきれいです。これは参考になります。
https://github.com/hackhat/tic-tac-toe-flux
ついでに、Reactで作られたゲームの一覧もありました。
36 Game Examples with ReactJS
http://react.rocks/tag/Game
React.jsの勉強のために読んだ本
参考になったサイト
reactjs - Reactデザインパターン - すべてがeになる - Qiita
http://qiita.com/shunjikonishi/items/ba6d981880e316131836
Flux – Dispatcher【日本語訳】と実装のポイント | mae's blog
http://mae.chab.in/archives/2738
一人React.js Advent Calendar 2014 - Qiita
http://qiita.com/advent-calendar/2014/reactjs
チュートリアル | React
https://facebook.github.io/react/docs/tutorial-ja-JP.html
.