React公式チュートリアルの三目並べに追加機能を実装してみた #2（ループ処理でボードを表示しろ！編）

## はじめに
こちらは[前回の記事](https://qiita.com/Ryukuu0919/items/50dc599c4f5acf4478b9)の続きとなっております。
前回はReactの公式チュートリアルの三目並べに現在のターンを示す機能を追加いたしました。

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

▼原文
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/41f6dea1-1b8a-e5b0-ada6-d9c872540a5e.png)

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


## 実装

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

```
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/`で見てみると、なにやら警告が出てることに気づくかと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/f7d250b1-a38f-dafc-ede4-8cf5606ee059.png)

`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>
    </>
  );
```

![Animation.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3577451/d1d49bc7-7f63-3b28-e2e4-b79e440b3e49.gif)

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

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

### 次の記事↓
[React公式チュートリアルの三目並べに追加機能を実装してみた #3（トグルボタンを追加しろ！編）](https://qiita.com/Ryukuu0919/items/f22b4d6d13095b305cd3)

### 他の関連記事↓
[React公式チュートリアルの三目並べに追加機能を実装してみた #1（現在のターンを示せ！編）](https://qiita.com/Ryukuu0919/items/50dc599c4f5acf4478b9)
[React公式チュートリアルの三目並べに追加機能を実装してみた #4（勝利のマスを強調しろ！編）](https://qiita.com/Ryukuu0919/items/c44c5649d1f08b8e31f7)
[React公式チュートリアルの三目並べに追加機能を実装してみた #5（各ターンで打った手を記憶しろ！編）](https://qiita.com/Ryukuu0919/items/cdcd08987f6b727798f9)
[React公式チュートリアルの三目並べに追加機能を実装してみた #6（AWSで公開しろ！編）](https://qiita.com/Ryukuu0919/items/eec4be8768b57601f27a)