Webアプリ開発 React.js フロントエンド環境 Part(6) 3つ並べゲーム(6)

Contents

はじめに
React Code “ゲーム勝者の判定処理”
React Code “判定処理の埋め込み”
まとめ

はじめに

こんにちわ、swim-loverです。初心者向けのWebアプリ開発記事です。フロントエンド環境にReact.jsを使用しています。今の目標は、出席簿アプリを作ることです。

第5回は、 SqureクラスからSqure_f()関数への切り替え、先手”X”と後手”O”の表示切替を実装しました。

今回も引き続き ‘CodePen’に保存したProject 三つ並べゲーム ‘My Tic Tac Toy’のサンプルを使って、Reactの勉強したいと思います。

React Code “ゲーム勝者の判定処理”

ゲームの勝者の判定処理を実装します。calculateWinner()をという関数は何を行っているのでしょうか？

配列 lines[]から一行ずつ取り出し、x,y,xに代入する。x=0,y=1,z=2(i=0のとき) x=3,y=4,z=5(i=1のとき)といった値が入っていく
引数として渡されたsquaresの値をチェックする。例えば最初の x=0,y=1,z=2(i=0のとき) では、squres[0],squres[1],squres[2]の値をチェックする。
この場合、勝者の判定条件は、以下の３つを満たすことです。
squres[0]に値が入っている(True) かつ(&&)
squres[0]とsqures[1]の文字が等しい(===)　かつ(&&)
squres[2]とsqures[3]の文字が等しい(===)

なお、チュートリアルでは、a,b,cという変数名が使われていましたが、変数っぽくないと感じましたので、x,y,xに変えています。

===は厳密等価演算子というのを初めて知りました。（例：文字数字１と数値１を同じに判定しない）

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],//1st line
    [3, 4, 5],//2nd line
    [6, 7, 8],//2rd line
    [0, 3, 6],//1st Columm
    [1, 4, 7],//2nd columm
    [2, 5, 8],//3rd columm
    [0, 4, 8],//1st diagonal line
    [2, 4, 6],//2nd diagonal line
  ];
  for (let i = 0; i < lines.length; i++) {
    const [x, y, z] = lines[i];
    if (squares[x] && squares[x] === squares[y] && squares[x] === squares[z]) {
      return squares[x];
    }
  }
  return null;
}

React Code “判定処理の埋め込み”

BoardクラスのRenderから判定処理calculateWinner()を呼び出します。

  render() {
//    const status = 'Next player: X';
//    const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
    const winner = calculateWinner(this.state.squares);
    let status;
    if (winner) {
      status = 'Winner: ' + winner;
    } else {
      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
    }

これで、勝者判定はできました。しかし、現状では、勝者の判定がついても、クリックして、X,Oを表示することができます。

  handleClick(i) {
    const squares = this.state.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    //squares[i] = 'X';
    squares[i] = this.state.xIsNext ? 'X' : 'O'; //set data 'X' or 'O'
    this.setState({
      squares: squares,
      xIsNext: !this.state.xIsNext, //turn flag value
    });
  }

この実装で、勝敗がついたあとは、クリックしても何もしないようになります。