React入門４: リファクタリング [リフトアップ編]

はじめに

私自身の復習兼、備忘録的な意味もあり、複数回の記事に渡って React を用いてマルバツゲーム(三目並べ)を開発していきたいと思います。

• React
• CodeSandbox(公式)
• CodeSandbox(非公式)

シリーズの一覧

1. React入門１: 環境構築 [オンライン版]
   • React入門1.5: 環境構築 [ローカル版-番外編]
2. React入門２: 盤面の作成
3. React入門３: インタラクションの実装
4. React入門４: リファクタリング [リフトアップ編] (今回)
5. React入門５: リファクタリング [インタラクション編]
6. React入門６: 手番の実装
7. React入門７: ゲームの勝利判定
8. React入門８: テキストの実装
9. React入門９: タイムトラベル(1)
10. React入門10: タイムトラベル(2)
11. React入門11: タイムトラベル(3)

目的について

全体の目的

React公式のチュートリアルで公開されているマルバツゲームを 3x3 のマスで実装していきます。

今回の目的

ゲームの勝利判定をするために、全マスの状態を Board コンポーネントで把握できるように、プログラムを変更していきます。

リファクタリング

リファクタリング(refactoring)とは次のことを意味します。

• プログラムに機能を追加すること
• ソースコードを管理しやすいものへと修正すること

次のページで、前回のソースファイルを確認できます。

• 前回の内容はコチラから！

マスの状態を管理するコンポーネント

ここで、現在のプログラムを振り返ってみます。

• Board コンポーネントと Square コンポーネントは親子関係にある (第2回の記事を参照)
  • Board コンポーネントが9つの Square コンポーネントを呼び出している
• 9つのマスの状態は Square コンポーネントによってそれぞれ制御されている
  • マスの状態は state 型の value 変数が示す

勝利条件が成り立っているか否かを判定するには、盤面すなわち全てのマスの状態を取得する必要があります。そこで、マスの状態を Square コンポーネントから親の Board コンポーネントで管理ができるようにプログラムを変更していきます。このようなリファクタリングをリフトアップといいます。

マスの状態をリフトアップするために、App.js に次の変更を加えましょう。

• Square コンポーネントの変更
  • state 型の value 変数を削除する
  • プロパティとして value を追加する
  • handleClick() 関数を削除する
  • <button> 要素の onClick プロパティを削除する
• Board コンポーネントの変更
  • state 型の squares 配列を宣言する
    • 配列の要素数は9個とし、各要素の初期値は null とする
    • setSquares という関数を呼び出すと squares 配列を更新できるようにする
  • 各 Square コンポーネントの value プロパティに squares 配列の要素を渡す

App.js

import { useState } from "react";
import "./styles.css";

function Square({ value }) {
  return <button className="square">{value}</button>;
}

export default function Board() {
  const [squares, setSquares] = useState(Array(9).fill(null));

  return (
    <>
      <div className="board-row">
        <Square value={squares[0]} />
        <Square value={squares[1]} />
        <Square value={squares[2]} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} />
        <Square value={squares[4]} />
        <Square value={squares[5]} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} />
        <Square value={squares[7]} />
        <Square value={squares[8]} />
      </div>
    </>
  );
}

動作結果を次に示します。Square コンポーネントの変更にて <button> 要素の onClick プロパティを削除したため、マスに対してマウスクリックをしても、「X」は表示されません。しかし、各 Square コンポーネントは、value プロパティを通じて Board コンポーネントから squares 配列の要素を受け取っています。

リフトアップの事例

state 型の変数について、リフトアップが行われる場面としては次が挙げられます。

1. 子コンポーネント同士で情報を共有させたいとき
2. 複数の子コンポーネントの情報を取得したいとき

各場面をオセロで例えてみました。

なお、マルバツゲームで行ったリフトアップは「複数の Square コンポーネントからマスの情報を取得したい」ため、2つ目の場面に該当します。このようなときには、親コンポーネントで state 型の変数もしくは配列を宣言して、子コンポーネントを呼び出すときにプロパティで情報を渡します。

おわりに

今回は、マスの状態を Board コンポーネントで管理できるように変更しました。次のページに現段階のソースファイルを示します。

次回は、今回のリファクタリングで失ってしまったマウスクリックのインタラクションを再実装していきます。