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

はじめに

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

第4回は、 Boardクラスでの変数State管理、イベントハンドラによるSquareクラスからのBoardクラス変数stateの更新を行いました。

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

React Code “Squreクラスを関数へ変更する”

今回も、チュートリアルに従いすすめます。これまでコードをいじってきたSqureクラスを捨てて、Squre関数に変更します。よりシンプルに実装できることが理由とのことです。

せっかく作ったSqureクラスを消すのは惜しい気もしますので、Squreクラスはそのままにして、関数の方をSqure_fとして進めたいと思います。

・Squreクラス

class Square extends React.Component {
  render() {
    return (       
      <button
        className="square"
        onClick={() => this.props.onClick()}>{this.props.value}
      </button>
    );
  }
}

・Squre_f関数

関数の引数が、”props”になっています。propsは、onClick()時のハンドラとvalueの二つのパラメータを渡すように見えます。

function Square_f(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

React Code “先手”X”と後手”O”の実装”

現時点では、盤面をクリックしたら、常に”X”を表示しています。交互に”X”と”O”を表示しないとゲームにはなりません。

まずは、先手を”X”と決めてしまします。

Boardクラスに、つぎの表示文字を決める変数xIsNextを新設し、初期値をTrueとします。

class Board extends React.Component {

constructor(props) {  //constructor
    super(props);       //call super class
    this.state = {      //init state val
      squares: Array(9).fill(null),
      xIsNext: true, //boolean data 
    };
  }

renderSqure()メソッドからsqure_f()関数を呼ぶように書き換えます。

renderSquare(i) {
    return( <Square_f
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />);

    }

つぎに、マウスクリック時のハンドラ handleClick()を書き換えます。

xIsNextがTrueであれば、”X”をFalseであれば、”O”をsquares[i]に格納します。

そして、xIsNextを現在の値を反転させます。

  handleClick(i) {
    const squares = this.state.squares.slice();
    //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
    });
  }

render()処理も、次の順番が”X”か”O”かを示すように書き換えます。

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

先手”X”と後手”O”が交互に表示されるようになりました。

また、つぎの順番も”Next Player”として表示されるようになりました。

まとめ

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

引き続き、Reactの勉強を進めたいと思います。