Reactチュートリアルをやっていってみるその12

これは

Reactチュートリアルをやっていく記事です。

参考

ja.reactjs.org

タイムトラベル機能の追加

操作履歴の保存

squaresをイミューテートで作成しているため、非常に簡単に実装できるようになっています。
squaresにはコピーした結果が入っているため、まずsquaresをhistory配列に保存するようにします。
history配列のイメージは以下のようになっていく想定で作っていきます。

history = [
  // 初期状態
  {
    squares: [
      null, null, null,
      null, null, null,
      null, null, null,
    ]
  },
  // 最初の動作後
  {
    squares: [
      null, null, null,
      null, 'X', null,
      null, null, null,
    ]
  },
  // 2手目
  {
    squares: [
      null, null, null,
      null, 'X', null,
      null, null, 'O',
    ]
  },
  // ...
]

明日は実装に移っていきます。

少ないですが今日はここまで。