React Tutorial: Tic-Tac-Toe ①

github

React Tutorial: Tic-Tac-Toe

1. コード全体

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コンポーネント

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

• Squareはボードの各マスを表すコンポーネントです。
• valueはそのマスに表示される値（'X'または'O'）、onSquareClickはマスがクリックされたときに呼び出される関数です。
• ボタンがクリックされると、onSquareClickが実行されます。

3. Boardコンポーネント

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関数

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. ボードのレンダリング

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が呼び出され、ゲームの状態が更新されます。