Reactの公式チュートリアルの三目並べには以下のように続きがあります。

Now, you’ve made a tic-tac-toe game that:

  • lets you play tic-tac-toe,
  • indicates when one player has won the game,
  • stores the history of moves during the game,
  • allows players to jump back in time to see older versions of the game board.

Nice work! We hope you now feel like you have a decent grasp on how React works. If you have extra time or want to practice your new skills, here are some ideas for improvements you could make, listed in order of increasing difficulty:

  1. Display the move locations in the format “(1, 3)” instead of “6”.
  2. Bold the currently-selected item in the move list.
  3. Rewrite Board to use two loops to make the squares instead of hardcoding them.
  4. Add a toggle button that lets you sort the moves in either ascending or descending order.
  5. When someone wins, highlight the three squares that caused the win.

前回は基本の三目並べを作ったので、今回はこの続きをやってみます。

最終的な成果物はこちら↓

react-tic-tac-toe-next

1. 位置の表示

各手番でどこにXまたはOをおいたのかを履歴に表示します。

GameコンポーネントのhandleClick()でクリック後に新しいstateをセットするとき、そこに位置も計算してセットします(locationの部分)。

あとはレンダリングするときにこれを表示してあげます。

2. 今のステップを強調

render()の中で、こんな感じ。

3. マスのハードコーディングの修正

Boardコンポーネントでマスをハードコーディングしていたので、それの修正。

renderRow()を定義して、render()の中で呼びます。

4. 履歴の表示順序

やることはざっとこんな感じです。

  • 履歴の表示順序をトグルするボタンを設置
  • stateに昇順か降順かの状態を持たせる
  • render()stateに応じて履歴の表示順序を切り替え

5. 勝利ラインのハイライト

これはちょっと面倒ですが、Squareコンポーネントに 勝利に起因したかマスかどうかを伝える必要があります。

まずSquareコンポーネントは以下のように、propsによってハイライトするかどうか受けられるようにします。

それでGameコンポーネントでは次のように、valueだけでなくハイライトするかどうかを表す値highlightedも保持するようにします。

あとは勝利判定のときにこの値を変えて、Squareまで渡るようにすればOKです。

大まかなアイデアはこんな感じで、ソースコードはGistに上げたのでこちらを確認してください。