機能概要
※Reactを学習したい人は「Reactチュートリアル」で学習してみてください。このブログはこのチュートリアルで感じたことや自分のメモを記述していきます。
チュートリアルの最後の練習としてタイムトラベル(時間を巻き戻す)を実装する。どんな機能かというと、
- 着手履歴を表示する
- 上記をクリックするとその時点まで戻る
なんか難易度が高そうだ。実現するためにコンポーネントBoardで管理していた情報や機能をGameへ移動する。そしてコンポーネントGameでタイムトラベル機能を実装する。イメージは次のような感じだ。
手順
上位のコンポーネントに変数や機能を実装する(リフトアップ)方法はコンポーネントSquareからBoardで経験済みだ。大まかな流れは次のようになる。
- Gameのコンストラクタで履歴、手番の情報を初期化
- Boardのクリック情報設定関数(handleClick)をGameへ移動
- Gameに移動したクリック情報設定関数(handleClick)の機能を履歴情報へ格納するように変更
- GameからBoardを呼び出す際に現在のクリック情報、クリック情報設定関数を受け渡す
- BoardでGameから受け渡された情報を利用するように変更
- Boardで不要になった変数(クリック、手番情報)を削除
- Gameでゲームステータス情報を表示
- Boardで不要になったゲームステータス情報表示を削除
- Gameで勝者判定関数(calculateWinner)を呼び出し終了を判断する
詳細はReactチュートリアル」を確認してください。
いやーこのリフトアップって本当に面倒な作業だ。これは別コンポーネントのstateをハンドリングしづらいのが原因と思われる。ここはチュートリアルのソースをチラ見する程度の確認でコピペで対応する。
