Reactチュートリアルを関数コンポーネントで書き換えてみた

JavaScript

2021年2月現在、Reactの公式ドキュメントで紹介されているチュートリアルのサンプルアプリケーション(三目並べ)はクラスコンポーネントで作られています。
今回、サンプルアプリケーションの関数コンポーネント版を作成したので紹介します。

なお、サンプルアプリケーションの概要を知っている前提で話を進めますので、概要を知らない方は公式ドキュメントとあわせて読んでいただければと思います。

アプリケーションのひな形をローカル環境に準備する

公式ドキュメントの手順に従ってアプリケーションのひな形を作成します。

### create-react-appを利用してアプリケーションを作成
$ npx create-react-app functional-tic-tac-toe

### srcディレクトリのファイルを削除
$ cd functional-tic-tac-toe
$ rm -rf src/*

以下のCSSを作成します。

src/index.css

body {
  font: 14px "Century Gothic", Futura, sans-serif;
  margin: 20px;
}

ol, ul {
  padding-left: 30px;
}

.board-row:after {
  clear: both;
  content: "";
  display: table;
}

.status {
  margin-bottom: 10px;
}

.square {
  background: #fff;
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
}

.square:focus {
  outline: none;
}

.kbd-navigation .square:focus {
  background: #ddd;
}

.game {
  display: flex;
  flex-direction: row;
}

.game-info {
  margin-left: 20px;
}

アプリケーションのモック作成する

公式ドキュメントで紹介されているモックを関数コンポーネントに書き換えてみます。
関数コンポーネントを利用するとrenderthisがなくなります。

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

/* ------------------------------
Square
------------------------------ */
const Square = () => {
  return <button className="square">{/* TODO */}</button>;
};

/* ------------------------------
Board
------------------------------ */
const Board = () => {
  const renderSquare = (i) => {
    return <Square />;
  };
  const status = "Next player: X";
  return (
    <div>
      <div className="status">{status}</div>
      <div className="board-row">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
      </div>
      <div className="board-row">
        {renderSquare(3)}
        {renderSquare(4)}
        {renderSquare(5)}
      </div>
      <div className="board-row">
        {renderSquare(6)}
        {renderSquare(7)}
        {renderSquare(8)}
      </div>
    </div>
  );
};

/* ------------------------------
Game
------------------------------ */
const Game = () => {
  return (
    <div className="game">
      <div className="game-board">
        <Board />
      </div>
      <div className="game-info">
        <div>{/* status */}</div>
        <ol>{/* TODO */}</ol>
      </div>
    </div>
  );
};

// ========================================

ReactDOM.render(<Game />, document.getElementById("root"));

以下のように三目並べの表が表示されればOKです。

なお、今回は関数コンポーネントを作成するにあたりアロー関数を利用しています。アロー関数を利用しない場合との比較は以下の通りです。

// アロー関数を利用した場合
const Square = () => {
  return <button className="square">{/* TODO */}</button>;
};

// アロー関数を利用しない場合
const Square = function () {
  return <button className="square">{/* TODO */}</button>;
};

データをProps経由で渡す

BoardコンポーネントからSquareコンポーネントに対してデータを渡せるようにします。
関数コンポーネントを利用したデータ渡しは以下の通りです。

const Square = ({ value }) => {
  return <button className="square">{value}</button>;
};
const Board = () => {
  const renderSquare = (i) => {
    return <Square value={i} />;
  };
  (以下略)

以下のように三目並べの表に文字が表示されていればOKです。

なお、Squareコンポーネントの引数の記述はES2015の引数分割束縛(argument destructuring)(MDNで説明されているところの分割代入 (Destructuring assignment))のテクニックを利用しています。

引数分割束縛を利用することでpropsのプロパティを直接渡せるため記述がシンプルになります。

引数分割束縛を利用せずprops自身を渡すこともできます。比較は以下の通りです。

// 引数分割束縛を利用しない場合
const Square = (props) => {
  return <button className="square">{props.value}</button>;
};

// 引数分割束縛を利用した場合
const Square = ({ value }) => {
  return <button className="square">{value}</button>;
};

インタラクティブなコンポーネントを作る

クリックに応じて三目並べのマスが変化するようにします。

関数コンポーネントでstateを管理するにはステートフック(useState)を利用します。

useState[state名、stateを更新する関数] = useState(初期値)という記述で表現されます。

import React, { useState } from "react";

const Square = () => {
  const [value, setValue] = useState(null);
  return (
    <button className="square" onClick={() => setValue("X")}>
      {value}
    </button>
  );
};

上記の関数コンポーネントは以下のクラスコンポーネントと同義です。

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

三目並べのマスをクリックして『X』が表示されるようになればOKです。

Stateのリフトアップ

三目並べのマス(Squareコンポーネント)のクリックに応じてBoardコンポーネントのstateが変化するようにします。

Boardで管理するstateを新たにuseStateで定義し、onClickのイベントをprops経由で伝搬させることで実現できます。

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

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

  const handleClick = (i) => {
    const _squares = squares.slice();
    _squares[i] = "X";
    setSquares(_squares);
  };

  const renderSquare = (i) => {
    return <Square value={squares[i]} onClick={() => handleClick(i)} />;
  };
  (以下略)

前項と同様、三目並べのマスをクリックして『X』が表示されるようになればOKです。

手番の処理

クリックで表示される値が『X』『O』交互になるようにします。

『X』の番かどうかを判定する真偽値をuseStateで定義することで実現できます。

const Board = () => {
  const [squares, setSquares] = useState(Array(9).fill(null));
  const [xIsNext, setXIsNext] = useState(true);

  const handleClick = (i) => {
    const _squares = squares.slice();
    _squares[i] = xIsNext ? "X" : "O";
    setSquares(_squares);
    setXIsNext(!xIsNext);
  };

  const renderSquare = (i) => {
    return <Square value={squares[i]} onClick={() => handleClick(i)} />;
  };
  const status = "Next player: " + (xIsNext ? "X" : "O");
  (以下略)

三目並べのマスをクリックするたびにNext playerの表記およびマスの値が『X』『O』と交互になればOKです。

ゲーム勝者の判定

三目並べの勝敗を判定できるようにします。

勝敗判定のメソッドを追加してBoardコンポーネントのロジックを修正するだけですので、クラスコンポーネントと同様の修正になります。

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

const Board = () => {
  const [squares, setSquares] = useState(Array(9).fill(null));
  const [xIsNext, setXIsNext] = useState(true);

  const handleClick = (i) => {
    const _squares = squares.slice();

    // 勝者が決定した or 既に埋まっているマスにクリックした場合 はクリックしてもなにも起こらないようにする
    if (calculateWinner(_squares) || _squares[i]) {
      return;
    }
    _squares[i] = xIsNext ? "X" : "O";
    setSquares(_squares);
    setXIsNext(!xIsNext);
  };

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

  // 勝者の判定
  const winner = calculateWinner(squares);
  let status;
  if (winner) {
    status = "Winner: " + winner;
  } else {
    status = "Next player: " + (xIsNext ? "X" : "O");
  }
  (以下略)

勝者の判定が正しくできればOKです。

着手の履歴の保存

三目並べのマスの状態を表現するsquareを複数管理することで着手の履歴が保存できるようにします。

着手の履歴を管理するhistory stateの定義をuseStateで行っている点以外はクラスコンポーネントの場合と同様の修正になります。

const Board = ({ squares, onClick }) => {
  const renderSquare = (i) => {
    return <Square value={squares[i]} onClick={() => onClick(i)} />;
  };
  (以下略)
const Game = () => {
  const [history, setHistory] = useState([{ squares: Array(9).fill(null) }]);
  const [xIsNext, setXIsNext] = useState(true);
  const handleClick = (i) => {
    const _history = history;
    const current = _history[_history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = xIsNext ? "X" : "O";

    setHistory(_history.concat([{ squares: squares }]));
    setXIsNext(!xIsNext);
  };

  const _history = history;
  const current = _history[_history.length - 1];
  const winner = calculateWinner(current.squares);
  let status;
  if (winner) {
    status = "Winner: " + winner;
  } else {
    status = "Next player: " + (xIsNext ? "X" : "O");
  }

  return (
    <div className="game">
      <div className="game-board">
        <Board squares={current.squares} onClick={(i) => handleClick(i)} />
      </div>
      <div className="game-info">
        <div>{status}</div>
        <ol>{/* TODO */}</ol>
      </div>
    </div>
  );
};

前項と同様に、勝者の判定が正しく行えていればOKです。

タイムトラベルの実装

どの時点(stepNumber)に移動するかを管理するstateを新たに作成します。
stateの管理にuseStateを利用する、コンポーネントのメソッドを利用する際にthisが不要になる、という点以外はクラスコンポーネントの場合と同じ修正になります。

const Game = () => {
  const [history, setHistory] = useState([{ squares: Array(9).fill(null) }]);
  const [xIsNext, setXIsNext] = useState(true);
  const [stepNumber, setStepNumber] = useState(0);
  const handleClick = (i) => {
    const _history = history.slice(0, stepNumber + 1);
    const current = _history[_history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = xIsNext ? "X" : "O";

    setHistory(_history.concat([{ squares: squares }]));
    setStepNumber(_history.length);
    setXIsNext(!xIsNext);
  };
  const jumpTo = (step) => {
    setStepNumber(step);
    setXIsNext(step % 2 === 0);
  };
  const _history = history;
  const current = _history[stepNumber];
  const winner = calculateWinner(current.squares);
  let status;
  if (winner) {
    status = "Winner: " + winner;
  } else {
    status = "Next player: " + (xIsNext ? "X" : "O");
  }
  const moves = history.map((step, move) => {
    // step: squaresの状態
    // move: 手番
    // desc: description
    const desc = move ? "Go to move #" + move : "Go to game start";
    return (
      <li key={move}>
        <button onClick={() => jumpTo(move)}>{desc}</button>
      </li>
    );
  });

  return (
    <div className="game">
      <div className="game-board">
        <Board squares={current.squares} onClick={(i) => handleClick(i)} />
      </div>
      <div className="game-info">
        <div>{status}</div>
        <ol>{moves}</ol>
      </div>
    </div>
  );
};

タイムトラベル機能のついた三目並べが完成すればOKです。

まとめ

  • 関数コンポーネントではpropsは引数で定義する
  • 関数コンポーネントでstateを利用する場合はuseStateを利用する
  • 関数コンポーネントにはconstructor, render, thisは存在しない

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです!