Django+Reactで学ぶプログラミング基礎(22): Reactチュートリアル(stateを親コンポーネントで管理)

[前回] Django+Reactで学ぶプログラミング基礎(21): Reactアプリのデバッグ

はじめに

前回は、Reactアプリのデバッグ方法を勉強しました。
今回は、チュートリアルに戻り、ゲームを完成させます。

今回の内容

• ゲームを完成させる
  • 子コンポーネントのstateを親コンポーネントに移譲
  • 子コンポーネントを親コンポーネントの制御下に置く

子コンポーネントのstateを親コンポーネントに移譲

現時点で、stateの課題

• それぞれのSquareコンポーネントがゲームの状態を保持している
• どちらが勝利したかチェックするためには、9個のマス目の値を1カ所で管理する必要あり

解決案

• 案1

  • Boardコンポーネントが、各Squareコンポーネントに、現時点の stateを問い合わせる
    • デメリット
      • コードが分かりにくくなる
      • リファクタリングしづらい

• 案2(ベスト解決策)

  • 親となるBoardコンポーネントが、各Squareの代わりにゲームの状態を保持
    • 子コンポーネント間で互いにやりとりが可能となる
  • Boardコンポーネントから、それぞれのSquareにpropsを渡すことで、何を表示すべきか指示する

• 子コンポーネントのstateを親コンポーネントに移譲するメリット

  • 複数の子コンポーネントからデータを集めて管理可能
  • 子コンポーネント同士、または親との間で常に同期が可能

コード修正

• Boardにコンストラクタを追加
  • 初期stateとして、9個のマス目に対応する9個のnull値をセット

  [
    null, null, null,
    null, null, null,
    null, null, null,
  ]
  

  • 後で盤面が埋まっていくと、this.state.squares配列は以下のようになる

  [
    'O', null, 'X',
    'X', 'X', 'O',
    'O', null, null,
  ]
  

src/index.js

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

  renderSquare(i) {
    return <Square value={i} />;
  }

• propsを渡すメカニズムを実装
  • Boardを書き換え、それぞれのSquareに現在の値X/O/null(空のマス目)を伝える
  • BoardのrenderSquareは、コンストラクタで定義されたsquares配列の値を読み込む
  • それぞれのSquareがvalueプロパティX/O/null(空のマス目)を受け取る

src/index.js

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

• F5でデバッグ実行すると、ブラウザにReactアプリが表示される
  

子コンポーネントを親コンポーネントの制御下に置く

マス目がクリックされた時の挙動を変更

• 現在、Boardがどのマス目に何が入っているか管理している

  • Squareがクリックされたら、Boardのstateを更新する必要あり

• stateは定義されているコンポーネント内でプライベート

  • よって、SquareからBoardのstateを直接書き換えることはできない

• 解決策: BoardからSquareに関数を渡す

  • マス目がクリックされたら、Squareがその関数を呼び出すように、renderSquareメソッドを修正
  • BoardからSquareにprops2つ渡される
    • value
    • onClick

src/index.js

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

• Squareを以下のように修正
  • Squareのrenderメソッド内のthis.state.valueを this.props.valueに書き換える
  • Squareのrenderメソッド内のthis.setState()を this.props.onClick()に書き換える
  • Squareはゲームの状態を管理しなくなったので、Squareのconstructorを削除

src/index.js

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

• BoardクラスにhandleClickを定義
  • マス目をクリックしたら、handleClickが呼び出されるように

src/index.js

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

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

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

  render() {
    const status = 'Next player: X';

    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>
    );
  }
}

• F5を押してデバッグ起動
  • マス目をクリックすると値が書き込まれるようになる
    

これで、BoardコンポーネントがSquareコンポーネントを制御するようになった

• ゲーム状態は個々のSquareコンポーネントではなく、Boardコンポーネント内に保存される
• Boardのstateが変更されると
  • 個々のSquareコンポーネントも自動的に再レンダリングされる
• 全てのマス目の状態をBoardコンポーネント内で保持することで
  • どちらが勝者か判定できるようになる

Squareをクリックすると、Boardから渡されたonClick関数がコールされるメカニズム

• 組み込みDOMコンポーネント<button>にonClickプロパティを設定
  • Reactは、ここでクリックに対するイベントリスナーを設定
• <button>がクリックされると
  • Reactは、Squareのrender()メソッド内に定義されているonClickイベントハンドラ(アロー関数)をコール
• イベントハンドラがthis.props.onClick()をコール
  • SquareのonClickプロパティは、Boardから渡されたもの
• BoardがSquareに渡したonClickプロパティは
  • onClick={() => this.handleClick(i)}
    • よって、Squareをクリックしたら、BoardのhandleClick(i)が呼び出される

おわりに

子コンポーネントのstate管理を親コンポーネントに委ねました。
そして、子コンポーネントは親により制御されるようになりました。
次回も続きます。お楽しみに。

[次回] Django+Reactで学ぶプログラミング基礎(23): Reactチュートリアル(イミュータビリティ/関数コンポーネント)