【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が交互に表示されて、次のプレイヤーは誰かも表示されるようになりました。
完成が近づいてきました～