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

JavaScript

2021年2月現在、Reactの公式ドキュメントで紹介されているチュートリアルのサンプルアプリケーション(三目並べ)はクラスコンポーネントとJavaScriptで書かれています。

前回、サンプルアプリケーションを関数コンポーネントに書き換えたもの、TypeScriptに書き換えたものをそれぞれ紹介しました。

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

2021年2月11日

ReactチュートリアルをTypeScriptで書き換えてみた

2021年2月11日

今回は関数コンポーネントかつTypeScriptを利用したサンプルアプリケーションの作成方法について紹介します。

TypeScriptや関数コンポーネントについてはある程度知っている前提で話を進めますので、前提知識があるか不安な方は以前の記事もあわせて読んでいただければと思います。

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

公式ドキュメントの手順に従ってアプリケーションのひな型を作成します。
--templateオプションを利用するとcreate-react-appで作成されるひな型のカスタマイズができます。

TypeScriptベースのアプリケーションを作成する場合は--template typescriptを利用します。
なお、テンプレートはnpm上にcra-template-*という名前で公開されているので、『cra-template-*』で検索すればさまざまなテンプレートが見つかります。

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

### srcディレクトリのファイルを削除
$ cd functional-tic-tac-toe-ts
$ 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;
}

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

公式ドキュメントで紹介されているモックを関数コンポーネントかつTypeScriptで書き換えると以下のようになります。
renderSquare(i)iの型定義を忘れないようにしましょう。

src/index.tsx

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: number) => {
    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です。

データをProps経由で渡す

BoardコンポーネントからSquareコンポーネントに対してデータを渡せるようにします。

関数コンポーネントをTypeScriptで書く場合、React.FC (React.FunctionComponentのエイリアス) という型が利用できます。
関数コンポーネントでpropsを利用する場合はReact.FCの引数にpropsの型を渡します。

クラスコンポーネントはpropsとstateを受け取ることができます。
そのため、クラスコンポーネントで利用するReact.ComponentではReact.Component<Props,State>というようにpropsとstateの型を引数に指定できます。

一方、関数コンポーネントではpropsのみ受け取れます。そのためReact.FCではReact.FC<Props>というようにpropsの型のみ引数に指定できます。

関数コンポーネントかつTypeScriptでデータ渡しをする方法は以下の通りです。

type SquareProps = {
  value: number;
}

const Square: React.FC<SquareProps> = ({ value }) => {
  return <button className="square">{value}</button>;
};
const Board: React.FC = () => {
  const renderSquare = (i: number) => {
    return <Square value={i} />;
  };
  (以下略)

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

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

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

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

// 引数分割束縛を利用しない場合
type SquareProps = {
  value: number;
}

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

const Square: React.FC<SquareProps> = ({ value }) => {
  return <button className="square">{value}</button>;
};

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

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

関数コンポーネントでstateを管理するにはステートフック(useState)を利用します。
TypeScriptでuseStateを利用する場合は[state名, stateを更新する関数] = useState<stateの型>(初期値)という記述になります。

import React, { useState } from "react";

type SquareType = "O" | "X" | null;

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

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

Stateのリフトアップ

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

Boardコンポーネントで管理するstateを新たにuseStateとして定義し、onClickのイベントをprops経由で伝搬させることで実現できます。
また、SquareコンポーネントにonClickというpropsメソッドが追加されたため、SquarePropsの型にonClickを追加します。

type SquareType = "O" | "X" | null;

type SquareProps = {
  value: SquareType;
  onClick: () => void;
}

const Square: React.FC<SquareProps> = ({ value, onClick }) => {
  return (
    <button className="square" onClick={() => onClick()}>
      {value}
    </button>
  );
};
const Board: React.FC = () => {
  const [squares, setSquares] = useState<Array<SquareType>>(
    Array(9).fill(null)
  );

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

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

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

手番の処理

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

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

const Board: React.FC = () => {
  const [squares, setSquares] = useState<Array<SquareType>>(
    Array(9).fill(null)
  );
  const [xIsNext, setXIsNext] = useState<boolean>(true);

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

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

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

ゲーム勝者の判定

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

勝敗を判定するメソッド(calculateWinner)を追加します。メソッドの引数の型を指定しないとコンパイルエラーになるので注意しましょう。

type SquareType = "O" | "X" | null;

function calculateWinner(squares: Array<SquareType>) {
  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: React.FC = () => {
  const [squares, setSquares] = useState<Array<SquareType>>(
    Array(9).fill(null)
  );
  const [xIsNext, setXIsNext] = useState<boolean>(true);

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

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

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

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

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

着手の履歴の保存

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

着手の履歴を管理するhistory stateの管理をuseStateで行います。
また、Boardコンポーネントで利用するpropsとhistory stateの型定義を追記します。

全体の修正は以下の通りです。

type SquareType = "O" | "X" | null;

type BoardProps = {
  squares: Array<SquareType>;
  onClick: (i: number) => void;
}

const Board: React.FC<BoardProps> = ({ squares, onClick }) => {
  const renderSquare = (i: number) => {
    return <Square value={squares[i]} onClick={() => onClick(i)} />;
  };
  (以下略)
type HistoryData = {
  squares: Array<SquareType>;
}

const Game: React.FC = () => {
  const [history, setHistory] = useState<Array<HistoryData>>([
    { squares: Array(9).fill(null) },
  ]);
  const [xIsNext, setXIsNext] = useState<boolean>(true);
  const handleClick = (i: number) => {
    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を新たに作成します。

全体の修正は以下の通りです。

const Game: React.FC = () => {
  const [history, setHistory] = useState<Array<HistoryData>>([
    { squares: Array(9).fill(null) },
  ]);
  const [stepNumber, setStepNumber] = useState<number>(0);
  const [xIsNext, setXIsNext] = useState<boolean>(true);
  const handleClick = (i: number) => {
    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: number) => {
    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です。

まとめ

  • 関数コンポーネントをTypeScriptで書く場合はReact.FCを利用する
  • React.Componentではpropsとstateの型が、React.FCではpropsの型が引数として指定できる

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