【React】公式のチュートリアルをやってみる～⑤関数コンポーネントの続きです。
まだ盤面にXしか表示されていません。 Oを追加して、交互にプレイできるようにしましょう。

プレイヤーを追加する

stateに手番を判定する変数を追加する

class Board extends React.Component {
  // コンストラクタ
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
+     xIsNext: true,
    }
  }
  (略)
}

stateにxIsNext変数を追加して、次のプレイヤーはXかどうかを判定する
デフォルトではtrue = 先手を“X にする

マス目がクリックされる度に手番を変更する

class Board extends React.Component {
  (略)
  handleClick(i) {
    const squares = this.state.squares.slice();
-   squares[i] = 'X';
+   squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      squares: squares,
+     xIsNext: !this.state.xIsNext,
    });
  }
  renderSquare(i) {
    return (
      <Square 
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }
  (略)
}

マス目をクリックしたときに呼ばれるhandleClick関数内で、画面に描画する値と次のプレイヤーを判定する真偽値を設定する
- 画面に描画する値は、プレイヤーごとに設定する
  - xIsNextがtrueだった場合（Xがプレイヤー）は、Xを設定する
  - xIsNextがfalseの場合（Oがプレイヤー）は、Oを設定する
- 次のプレイヤーを判定する真偽値は、現在のxIsNextの値を逆にして設定する
  - xIsNextがtrueだった場合（Xがプレイヤー）は、falseに設定する（Oがプレイヤーになる）
  - xIsNextがfalseだった場合（Oがプレイヤー）は、trueに設定する（Xがプレイヤーになる）

条件演算子について(JavaScript)

条件 (三項) 演算子とは、JavaScriptで唯一、3 つのオペランドをとる演算子
- if文の代替としてよく用いられる
構文は、condition ? exprIfTrue : exprIfFalse
- condition: 条件式
- exprIfTrue: condition が真値 (trueと等しいか、trueに変換できる値) と評価された場合に評価される式
- exprIfFalse: condition が偽値 (falseと等しいか、false に変換できる値) と評価された場合に評価される式

次のプレイヤーを表示する

class Board extends React.Component {
  (略)
  render() {
-   const status = 'Next player: X';
+   const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');

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

次のプレイヤーを表示するstatus変数を動的に設定する
- xIsNextがtrueだった場合（Xがプレイヤー）は、Xを表示する
- xIsNextがfalseだった場合（Oがプレイヤー）は、Oを表示する

ついに、盤面にOが登場しました～
マス目をクリックすると、OとXが交互に表示されて、次のプレイヤーは誰かも表示されるようになりました。
完成が近づいてきました～

参考文献