スポンサーリンク

React-チュートリアル終了

時間を巻き戻す

※Reactを学習したい人は「Reactチュートリアル」で学習してみてください。このブログはこのチュートリアルで感じたことや自分のメモを記述していきます。

前回履歴表示が完了した。今回は履歴をクリックするとその時点まで手番が戻るようにする。実装を次の方法で行う。

  1. 進行中の履歴位置を保持
  2. 履歴をクリックした時点で履歴位置を更新する
  3. 履歴位置情報に基づき表示を行う
  4. 実装

    履歴位置情報stepNumberをコンポーネントGameのコンストラクタで初期化する。

    履歴がクリックされた際に呼び出す関数jumpToを記述する。これにより履歴情報を更新し時間を巻き戻す。

    4行目は手番情報xIsNext(×か○)を設定している。手番が奇数の場合は×、偶数の場合は○のため、クリックされた際は次の手番(奇数の場合は○、偶数の場合は×)にする必要がある。そこで手番が2で割り切れる場合は、xIsNextにtrue(×)、そうでない場合はfalseで(○)を設定している。

    次にマス目をクリックした際に呼び出される関数handleClickを次のように変更する。

    2行目で履歴位置情報stepNumberを基に履歴情報をコピーしている。これにより不要な未来の履歴を除去することになる。

    最後に履歴位置情報stepNumberを基に表示するように変更。

    さぁ実行だ

    うゎーい、できた!パチパチパチ・・。これでチュートリアルが完成だ!

    無事に終了したのだが、少々試してみたいことがある。もう少しだけ続ける。

    前へ<ーーー>つづく

タイトルとURLをコピーしました