スポンサーリンク

タイムトラベル機能?

機能概要

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

チュートリアルの最後の練習としてタイムトラベル(時間を巻き戻す)を実装する。どんな機能かというと、

  • 着手履歴を表示する
  • 上記をクリックするとその時点まで戻る

なんか難易度が高そうだ。実現するためにコンポーネントBoardで管理していた情報や機能をGameへ移動する。そしてコンポーネントGameでタイムトラベル機能を実装する。イメージは次のような感じだ。

手順

上位のコンポーネントに変数や機能を実装する(リフトアップ)方法はコンポーネントSquareからBoardで経験済みだ。大まかな流れは次のようになる。

  • Gameのコンストラクタで履歴、手番の情報を初期化
  • Boardのクリック情報設定関数(handleClick)をGameへ移動
  • Gameに移動したクリック情報設定関数(handleClick)の機能を履歴情報へ格納するように変更
  • GameからBoardを呼び出す際に現在のクリック情報、クリック情報設定関数を受け渡す
  • BoardでGameから受け渡された情報を利用するように変更
  • Boardで不要になった変数(クリック、手番情報)を削除
  • Gameでゲームステータス情報を表示
  • Boardで不要になったゲームステータス情報表示を削除
  • Gameで勝者判定関数(calculateWinner)を呼び出し終了を判断する

詳細はReactチュートリアル」を確認してください。

いやーこのリフトアップって本当に面倒な作業だ。これは別コンポーネントのstateをハンドリングしづらいのが原因と思われる。ここはチュートリアルのソースをチラ見する程度の確認でコピペで対応する。

前へ<ーーー>つづく

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