実は2011年に「Androidでオセロゲームを作る」というのをやった事があります。5回のブログ記事に分けて少しずつ作り込んで行ったのですが、このシリーズが今でも結構アクセスされているみたいです。これを読み返しながら、ふと「今だったら、ReactでWeb版を作っておけばネイティブアプリ化も結構簡単に出来るし色々と応用が効くのでは?」と思い付きました。そこで、作り始めて見ました。現時点で動作しているものはこちらで試せます。https://reversi-d1kqojbar.now.sh/タイトル画面ゲーム画面ソースコードはこちら:https://github.com/mikehibm/reversi-react/tree/blog-1まだ画面をクリックして石を置くことが出来るようになっただけでゲームのルールが何も実装されていません。リバーシゲーム作りは楽しいですね!以下、ここまでに書いたコードの大まかな説明です。今のところ下のような階層になっています。ファイルで一括管理しています。継承しており、状態に変更があったときにイベントを発生(emit)することでそれを各コンポーネントに通知して、各コンポーネントが画面を更新するという流れになっています。いうイベントを発生させています。メニュー画面を表示するのかゲーム画面を表示するのかを切り替えています。ボードとセルの描画Boardコンポーネントでは、SVGを使ってボードの緑色の背景や縦と横の罫線などを描画しています。重要なのは、Cellコンポーネントの配列を作成してそれを子コンポーネントとして描画していることです。64個のCellコンポーネントが配置されることになります。Cellコンポーネントでは、propsとして渡された座標値にしたがってSVGのRectangleを描画します。このRectangleがマウスのクリックイベントを受け取る入り口になります。propsのひとつとしてcolorが渡されますが、これはそのセルが空白なのか、黒の石が配置されているのか、または白の石が配置されているのか、を示します。Cellコンポーネントではその値によって黒または白の円を描画する処理を行っています。あるセル上でマウスがクリックされた時は、次の流れで最終的にセルに石が描画されるようになっています。handleClick()メソッドが呼ばれる。setStone()メソッドが呼ばれる。colorプロパティを現在の手番の色に変更する。Storeクラスが'board_changed'イベントを発生する。Boardコンポーネントがイベントを受け取り、ボード全体を再描画する。クリックされた場所に対応するCellコンポーネントが石を描画する。こんな感じで、ひとまずボードの描画と石の配置までは出来るようになりました。