はじめに

こちらは前回の記事の続きとなっております。
前回はReactの公式チュートリアルの三目並べに現在のターンを示す機能を追加いたしました。

React公式から出された追加機能のお題は全部で5つ。
今回追加する機能はそのうちの2つ目である「Rewrite Board to use two loops to make the squares instead of hardcoding them.」(日本語訳：正方形をハードコーディングするのではなく、2 つのループを使用して正方形を作成するように Board を書き換えてください。)です！

▼原文

それでは早速実装していきましょう！

実装

さて、まずはボードのマス目を表示している記述を探してみます。

function Board({ xIsNext, squares, onPlay }) {

***省略***

  return (
    <>
      <div className="status">{status}</div>
      <div className="board-table">
        <div className="board-row">
          <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
          <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
          <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
        </div>
        <div className="board-row">
          <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
          <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
          <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
        </div>
        <div className="board-row">
          <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
          <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
          <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
        </div>
      </div>
    </>
  );
}

ここを見ると確かにボードの横列を表している.board-row要素が三列、Squareコンポーネントがその中に三個ずつハードコーディングされ、3×3のボードが表示されていますね。

公式からもわざわざ「2回」ループを使ってボードを表示する用に指示されているので.board-row要素とSquareコンポーネントをループで作成してあげるようにしましょう。

ループ処理を実装したものがこちらです。

const boardRows = [];
  for (let row = 0; row < 3; row++) {
    const squaresInRow = [];
    for (let col = 0; col < 3; col++) {
      const squareIndex = row * 3 + col;
      squaresInRow.push(
        <Square
          value={squares[squareIndex]}
          onSquareClick={() => handleClick(squareIndex)}
        />
      );
    }
    boardRows.push(
      <div className="board-row">
        {squaresInRow}
      </div>
    );
  }

  return (
    <>
      <div className="status">{status}</div>
      <div className="board-table">{boardRows}</div>
    </>
  );

こちらをhttp://localhost:3000/で見てみると、なにやら警告が出てることに気づくかと思います。

keyがどうのこうの言ってますね(@_@。

Reactではリストを描画するときにkeyを設定してあげて、リストのアイテム一つ一つがユニークなオブジェクトであるとReactに認識させてあげるとパフォーマンスが向上するようです。

こちらの方の記事がわかりやすくで参考になりました。↓
https://progtext.net/programming/react-key/

なのでkeyを追加してあげましょう！

const boardRows = [];
  for (let row = 0; row < 3; row++) {
    const squaresInRow = [];
    for (let col = 0; col < 3; col++) {
      const squareIndex = row * 3 + col;
      squaresInRow.push(
        <Square
          key={squareIndex}
          value={squares[squareIndex]}
          onSquareClick={() => handleClick(squareIndex)}
        />
      );
    }
    boardRows.push(
      <div key={row} className="board-row">
        {squaresInRow}
      </div>
    );
  }

  return (
    <>
      <div className="status">{status}</div>
      <div className="board-table">{boardRows}</div>
    </>
  );

はい、ちゃんと表示されてますね！

これでボードをループ処理で表示させることができました。
それでは引き続き追加機能の実装をしていきましょう！

次の記事↓

React公式チュートリアルの三目並べに追加機能を実装してみた #3（トグルボタンを追加しろ！編）

他の関連記事↓

React公式チュートリアルの三目並べに追加機能を実装してみた #1（現在のターンを示せ！編）
React公式チュートリアルの三目並べに追加機能を実装してみた #4（勝利のマスを強調しろ！編）
React公式チュートリアルの三目並べに追加機能を実装してみた #5（各ターンで打った手を記憶しろ！編）
React公式チュートリアルの三目並べに追加機能を実装してみた #6（AWSで公開しろ！編）