はじめに

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

シリーズの一覧

目的について

全体の目的

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

今回の目的

盤面上にあるマスをマウスクリックすると「X」が表示されるようにしていきます。

インタラクションの実装

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

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

イベントの設定

Square コンポーネントを次のように書き換えましょう。

コンポーネント内に handleClick() 関数を実装する
- 仮引数はなし
- コンソールにクリックされた旨を出力させる
<button> 要素に onClick プロパティを追加して、 handleClick 関数を指定する

Square()コンポーネント

function Square({ value }) {
  function handleClick() {
    console.log("clicked!");
  }

  return (
    <button className="square" onClick={handleClick}>
      {value}
    </button>
  );
}

コンソールを表示させて( 表示方法: [画面の内容 > プレビュー > (A)] 参照 )、実行結果を確認しましょう。いずれかのマスをクリックするとコンソール上に「clicked!」と表示されます。

情報の記憶

Square コンポーネントに、クリックされたことを記憶して「X」マークを表示するようにしていきます。そこで、React が提供している state コンポーネントと useState() 関数を実装していきます。

`state` コンポーネントと `useState()` 関数

それぞれ、React 独自の概念で少し難しいので、ここでは state という変数の型があり、useState() 関数で state 型の変数を宣言できるとイメージしてください。次のページから、state の挙動が一般的な JavaScript の変数と異なることを確認できます。

state 型の変数の初期化は次のような構文となります。まず、useState 関数を利用するには、ファイルインポートが必要です。宣言について、set関数 は、変数名 の値を変更する際に呼び出す関数のことです。これは「 set + 変数名(頭文字は大文字) 」と名付けれられることが多いです。set 関数を実行すると、そのコンポーネントは再レンダーされます(第5回の記事に関わる内容でかなり重要です)。

import { useState } from 'react';

// state型変数の宣言
const [変数名, set 関数] = useState(初期値);

// state型変数の値更新
set 関数(値)

では、App.js に次の変更を加えましょう。

React から useState 関数をインポートする
Square コンポーネントの変更
- value プロパティを削除する
- state 型の value 変数を宣言する
  - 初期値は null とする
  - setValue という関数を呼び出すと value 変数の値を更新できるようにする
- クリックされると value 変数の値が 'X' に更新される
  - コンソールへ出力する処理は削除する
Board コンポーネントの変更
- 全ての Square コンポーネントから value プロパティを削除する

App.js

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

function Square() {
  const [value, setValue] = useState(null);

  function handleClick() {
    setValue("X");
  }

  return (
    <button className="square" onClick={handleClick}>
      {value}
    </button>
  );
}

export default function Board() {
  return (
    <>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
    </>
  );
}

動作結果の動画を次に示します。これで、空白のマスをクリックすると「X」が表示されるようになりました。

おわりに

今回は、マスに対してクリックすると「X」が表示されるインタラクションを実装しました。次のページに現段階のソースファイルを示します。

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