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

Javascript
2022.01.23

はじめに

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

第3回は、 ReactのDebug環境である、 React DevTools の導入を行いました。

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

React Code “９個のStateの管理”

チュートリアルに従いすすめます。第二回で、Squreクラスに、State変数を導入しました。変数の数はSqure数分で９個です。今回は、それぞれのSqureの状態を１箇所で管理できるようにすることです。

あるSqureから隣のSqureへStateを問い合わせるようにプログラムをすることもできると思いますが、考えただけでも複雑になることは間違いありません。

そこで、親のBoardクラスでそれぞれのSqureのStateを管理し、必要に応じて、それぞれのSqureへStateを通知すれば、効率的で美しいコードが書けそうです。

Boardクラスのコンストラクタを追加し、ここに、配列型の変数squresを定義して、’null’で初期化しています。

class Board extends React.Component {
  constructor(props) {  //constructor
    super(props);       //call super class
    this.state = {      //init state val
      squares: Array(9).fill(null),
    };
  }

renderSqure()メソッドも、数字’i’を各Squreクラスに渡していましたが、これを、State “state.squres[i]”を渡すように変更します。現時点では、”null”が入っているsquares[]の値を渡しています。

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

コードの更新がさらに続きます。マス目がクリックされたときに、Stateを書き換える必要があります。

マス目のクリックの検出は、それぞれのSqureクラスにて検出され、Stateは親クラスのBoardで管理しているので、工夫が必要になります。

renderSqure()メソッドをさらに書き換えます。何だか急に難しく感じてきました。マウスクリック時に、this.handleClick(i)を呼んでもらうようにするコード（コールバック関数）だと思います。

しかし、現時点では、handleClick()関数は出てきていません。チュートリアルでは、handleClick()関数を実装しないで、先に進みますが、ここで、空の関数だけでも用意しておきたいと思います。

今回は、handlClick()関数は、開発者コンソール画面に、”hdl-click”を表示するようにしました。

  renderSquare(i) {
//    return <Square value={i} />;
//    return <Square value={this.state.squares[i]} />;
    return( <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />);
    }
  handleClick(i) {//call back function
    console.log('hdl-click')
  }

次にSqureクラスの変更です。

Squreクラスのコンストラクターの削除。Squreクラスでstate管理は行わないため、初期化が不要になりました。複数行のコメントアウトは、/* */で行いました。

マウスクリックハンドラの変更 onClick={() => this.setState({value: ‘X’})}> を onClick={() => this.props.onClick()}>　に変更。this.props.onClick()は、Boardクラスで渡されたhandleClick(i)関数と理解しています。

class Square extends React.Component {
/*  
  constructor(props) {  //constructor
    super(props);       //call super class
    this.state = {      //init state val
      value: null,
    };
  }
*/
/*
    return (       
      <button
        className="square"
        onClick={() => this.setState({value: 'X'})}>
        {this.state.value}
      </button>
    );
*/
  render() {
    return (       
      <button
        className="square"
        onClick={() => this.props.onClick()}>
        {this.props.value}
      </button>
    );
  }
}

React Code “handleClick()関数の実装”

空の関数にしていたhandleClick()関数の実装を行います。

.slice()は、データを切り取るメソッドとのことです。引数なしで、slice()を使うと、squres[]のコピーを作成する処理になります。

コピーしたsquares[]に対して、’X’を設定していますね。変更後のsquares[]を、元のsqures[]にコピーしています。このようにするメリットは、後々出てくるのだと考えられます。

まとめると、マウスクリック処理で、SqureクラスからBoardクラスのStateを書き変えています。

  handleClick(i) {
    console.log('hdl-click')
    const squares = this.state.squares.slice();
    squares[i] = 'X';
    this.setState({squares: squares});
  }

処理結果は、第二回の結果を変わりませんが、クラスの実装がかなり変わりました。

まとめ

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

今後、不足している知識もどんどん出てくると思いますので、適宜、補いながら、Reactの勉強を進めたいと思います。

コメント

タイトルとURLをコピーしました