【React】チュートリアルやってみた③

環境

Windows10Pro

目次

①Reactのプロジェクトを作成し、Webからアクセスできることを確認する。
https://zenn.dev/taka_tech/articles/773da5de8c822a
②クリックしたマスに×を表示させる。
https://zenn.dev/taka_tech/articles/17600f9bc5d4b5
③手番を追加し、クリック時に〇と×が交互に表示されるようにする←ここ
④勝利判定を実装する。
https://zenn.dev/taka_tech/articles/d52991cdb0cbfd
⑤履歴機能を実装する。
https://zenn.dev/taka_tech/articles/141760436bef12

最終目標

Reactチュートリアルの三目並べゲームを作成する
https://ja.reactjs.org/tutorial/tutorial.html

目標③

手番を追加し、クリック時に〇と×が交互に表示されるようにする

実践

Boardのstateにプレイヤーを示す真偽値の変数を用意する

Boardコンポーネントのコンストラクタでstateに真偽値をセットする処理を追加する。

index.js

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

クリックしたときに手番をもつプレイヤーが反転するようにする

プレイヤーがクリックするたびに、手番を持つプレイヤーを変更するために、上で作った真偽値を反転させるようにする。
BoardコンポーネントのhandleClickメソッドで、stateの真偽値を反転させる処理を追加する。

index.js

    handleClick(i) {
        const squares = this.state.squares.slice();
+        squares[i] = this.state.xIsNext ? 'X' : 'O';
        this.setState({
            squares: squares,
+            xIsNext: !this.state.xIsNext,
        });
    }

次のプレイヤーがどちらなのかを示すため、renderメソッドの中のステータスが真偽値を使って変更されるように修正する。

index.js

 render() {
 +       const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
        return (

ブラウザで試してみる

〇と×が交互に表示されるのが確認できる。
まだ勝利判定ができていないので、次回実施する。