タイムトラベル機能の追加｜Stateのリフトアップ、再び

squaresを配列historyに保存しておき、あとで参照できるようにしていきます。

これまで、stateはBoardコンポーネントに実装していましたが、これをGameコンポーネントに移し、Boardにはpropsを渡すことによってアクセスできるようにします。

Gameコンポーネント

まず、GameコンポーネントにstateのhistoryとxIsNextを設定します。

const [history, setHistory] = useState([{ squares: Array(9).fill(null) }]);
const [xIsNext, setXIsNext] = useState(true);

historyは括弧が多く少々分かりづらいですが、{squares: Array()}を要素に持つ配列です。

次に、handleClickメソッドをBoardコンポーネントからGameコンポーネントに移動します。
stateがsquaresからhistoryに変わったので、それに対応するように編集します。

const handleClick = (i: number): void => {
    const current = history[history.length - 1];
    const squaresSlice = current.squares.slice();

    // 勝者確定かマスが埋まっていたら、クリックしてもマスが変化しないようにする
    if (calculateWinner(squaresSlice) || squaresSlice[i]) {
      return;
    }

    squaresSlice[i] = xIsNext ? 'X' : 'O';
    setHistory(
      history.concat([
        {
          squares: squaresSlice,
        },
      ]),
    );
    setXIsNext(!xIsNext);
  };

まず、historyから最新のBoardの状態をcurrentで抜いて勝者判定をし、Boardが更新された後の状態squaresSliceをhistoryに追加し、concatでhistoryにくっつけてstateにセットしています。

最後にGameコンポーネントの残りの部分です。

  const current = history[history.length - 1];
  const winner = calculateWinner(current.squares);
  const status = winner
    ? `Winner: ${winner}`
    : `Next player: ${xIsNext ? 'X' : 'O'}`;

  return (
    <div className="game">
      <div className="game-board">
        <Board squares={current.squares} onClick={(i) => handleClick(i)} />
      </div>
      <div className="game-info">
        <div>{status}</div>
        <ol>{/* TODO */}</ol>
      </div>
    </div>
  );

こちらも、handleClickと同様に、これまでBoardを直接参照していたところを、historyから最新の状態をcurrentに格納するようにしています。

また、状態をGameコンポーネントで管理するようになったので、Boardにはこれをpropsで渡せるようにします。

<Board squares={current.squares} onClick={(i) => handleClick(i)} />

squaresは今のBoardの状態、onClickはO/Xを配置する関数です。

ついでに、Boardに渡すpropsの型も定義しておきます。こちらはファイルの頭に追加します。

type BoardProps = {
  squares: FillSquare[];
  onClick: (i: number) => void;
};

Boardコンポーネント

まず、propsを受け取るようにしたいので、

const Board: VFC<BoardProps> = (props) => {
  const { squares, onClick } = props;
︙

のように変更します。

さらに、公式チュートリアルと同じく、

Board の renderSquare にある this.state.squares[i] を this.props.squares[i] に置き換える。 Board の renderSquare にある this.handleClick(i) を this.props.onClick(i) に置き換える。

ことをします。

そして編集後は下のようになります。

const Board: VFC<BoardProps> = (props) => {
  const { squares, onClick } = props;

  const renderSquare = (i: number): ReactElement => (
    <Square value={squares[i]} onClick={() => onClick(i)} />
  );

  return (
    <div>
      <div className="board-row">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
      </div>
      <div className="board-row">
        {renderSquare(3)}
        {renderSquare(4)}
        {renderSquare(5)}
      </div>
      <div className="board-row">
        {renderSquare(6)}
        {renderSquare(7)}
        {renderSquare(8)}
      </div>
    </div>
  );
};

編集後のindex.tsx

githubはこちら

import { VFC, useState, ReactElement } from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// Squareの中身の型、XかOか空（null）の3通り
type FillSquare = 'X' | 'O' | null;

type SquareProps = {
  value: FillSquare;
  onClick: () => void;
};

type BoardProps = {
  squares: FillSquare[];
  onClick: (i: number) => void;
};

const calculateWinner = (squares: FillSquare[]) => {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i += 1) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }

  return null;
};

const Square: VFC<SquareProps> = (props) => {
  const { value, onClick } = props;

  return (
    <button type="button" className="square" onClick={onClick}>
      {value}
    </button>
  );
};

const Board: VFC<BoardProps> = (props) => {
  const { squares, onClick } = props;

  const renderSquare = (i: number): ReactElement => (
    <Square value={squares[i]} onClick={() => onClick(i)} />
  );

  return (
    <div>
      <div className="board-row">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
      </div>
      <div className="board-row">
        {renderSquare(3)}
        {renderSquare(4)}
        {renderSquare(5)}
      </div>
      <div className="board-row">
        {renderSquare(6)}
        {renderSquare(7)}
        {renderSquare(8)}
      </div>
    </div>
  );
};

const Game: VFC = () => {
  const [history, setHistory] = useState([{ squares: Array(9).fill(null) }]);
  const [xIsNext, setXIsNext] = useState(true);

  const handleClick = (i: number): void => {
    const current = history[history.length - 1];
    const squaresSlice = current.squares.slice();

    // 勝者確定かマスが埋まっていたら、クリックしてもマスが変化しないようにする
    if (calculateWinner(squaresSlice) || squaresSlice[i]) {
      return;
    }

    squaresSlice[i] = xIsNext ? 'X' : 'O';
    setHistory(
      history.concat([
        {
          squares: squaresSlice,
        },
      ]),
    );
    setXIsNext(!xIsNext);
  };

  const current = history[history.length - 1];
  const winner = calculateWinner(current.squares);
  const status = winner
    ? `Winner: ${winner}`
    : `Next player: ${xIsNext ? 'X' : 'O'}`;

  return (
    <div className="game">
      <div className="game-board">
        <Board squares={current.squares} onClick={(i) => handleClick(i)} />
      </div>
      <div className="game-info">
        <div>{status}</div>
        <ol>{/* TODO */}</ol>
      </div>
    </div>
  );
};

// ========================================

ReactDOM.render(<Game />, document.getElementById('root'));