React Tutorial: Tic-Tac-Toe ①

:::note
[github](https://github.com/mori-tt/react-tic-tac-toe)
:::
:::note
[React Tutorial: Tic-Tac-Toe](https://react.dev/learn/tutorial-tic-tac-toe)
:::

### 1. コード全体

```javascript
import { useState } from 'react';

function Square({value, onSquareClick}) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

export default function Board() {
  const [xIsNext, setXIsNext] = useState(true);
  const [squares, setSquares] = useState(Array(9).fill(null));

  function handleClick(i) {
    if (squares[i]) {
      return;
    }
    const nextSquares = squares.slice();
    if (xIsNext) {
      nextSquares[i] = 'X';
    } else {
      nextSquares[i] = 'O';
    }
    setSquares(nextSquares);
    setXIsNext(!xIsNext);
  }

  return (
    <>
      <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>
    </>
  );
}

```

### 2. `Square`コンポーネント

```javascript
function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}
```
- `Square`はボードの各マスを表すコンポーネントです。
- `value`はそのマスに表示される値（'X'または'O'）、`onSquareClick`はマスがクリックされたときに呼び出される関数です。
- ボタンがクリックされると、`onSquareClick`が実行されます。

### 3. `Board`コンポーネント

```javascript
export default function Board() {
  const [xIsNext, setXIsNext] = useState(true);
  const [squares, setSquares] = useState(Array(9).fill(null));
```
- `Board`はゲームボード全体を管理するコンポーネントです。
- `xIsNext`は次に'X'が来るかどうかを示すブール値です。
- `squares`は9つのマス（0から8）の状態を保持する配列で、初期値はすべて`null`です。

### 4. `handleClick`関数

```javascript
function handleClick(i) {
  if (squares[i]) {
    return;
  }
  const nextSquares = squares.slice();
  if (xIsNext) {
    nextSquares[i] = 'X';
  } else {
    nextSquares[i] = 'O';
  }
  setSquares(nextSquares);
  setXIsNext(!xIsNext);
}
```
- `handleClick`は、特定のマスがクリックされたときに実行されます。
- クリックされたマスがすでに埋まっている場合、何もしません。
- `nextSquares`は現在の` squares`のコピーで、そこに新しい値（'X'または'O'）をセットします。
- 最後に、`setSquares`で新しい状態を設定し、`setXIsNext`で次のプレイヤーを切り替えます。

### 5. ボードのレンダリング

```javascript
return (
  <>
    <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>
  </>
);
```
- ボードは3行（各行に3つのマス）で構成されており、各`Square`コンポーネントに`value`と`onSquareClick`を渡しています。
- それぞれのマスがクリックされると、`handleClick`が呼び出され、ゲームの状態が更新されます。