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

2021年2月現在、Reactの公式ドキュメントで紹介されているチュートリアルのサンプルアプリケーション（三目並べ）はJavaScriptで書かれています。
今回、サンプルアプリケーションのTypeScript版を作成したので紹介します。

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

1 アプリケーションのひな型をローカル環境に準備する
2 アプリケーションのモック作成する
3 データをProps経由で渡す
4 インタラクティブなコンポーネントを作る
5 Stateのリフトアップ
6 手番の処理
7 ゲーム勝者の判定
8 着手の履歴の保存
9 タイムトラベルの実装
10 まとめ

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

create-react-appを利用してアプリケーションのひな型を作成します。
--templateオプションを利用するとcreate-react-appで作成されるひな型のカスタマイズができます。

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

### アプリケーションのひな形を作成
npx create-react-app tic-tac-toe-ts --template typescript

### srcディレクトリのファイルを削除
$ cd 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のことはなにも考えず、Reactチュートリアルで用意されているモックをそのままコピー&ペーストしてみましょう。
なお、ファイルの拡張子は.tsxになるので注意をしてください。

src/index.tsx

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

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square />;
  }

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

class Game extends React.Component {
  render() {
    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')
);

アプリケーションを起動しようとするとコンパイルが失敗するため以下のようなエラーが表示されます。

コンパイルエラーの原因はrenderSquare(i)のiの型が未定義だからです。

以下のようにして型の定義をします。

- renderSquare(i) {
+ renderSquare(i: number) {

コンパイルエラーが解消され、以下のように三目並べの表が表示されればOKです。

データをProps経由で渡す

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

Reactチュートリアル通り、以下のように修正してみます。

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

class Board extends React.Component {
  renderSquare(i: number) {
    return <Square value={i} />;
  }
  (以下略)

先ほどと同様にコンパイルエラーとなります。

Property 'value' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.  TS2339

     7 |     return (
     8 |       <button className="square">
  >  9 |         {this.props.value}
       |                     ^
    10 |       </button>
    11 |     );
    12 |   }

クラスコンポーネントをTypeScriptで記述する場合、react.d.tsで型定義されているReact.Component<Props, State>を継承する必要があります。Propsはprops用の、Stateはstate用の独自の型です。

<Props, State>はジェネリクスと呼ばれるもので、<>で指定された型が引数として利用できることを意味します。
ですので、React.Component<Props,State>は「React.Componentの引数にはProps型とState型が利用可能」という意味になります。

this.props.valueで発生したエラーは以下のように修正します。

type SquareProps = {
  value: number;
};

class Square extends React.Component<SquareProps> {
  (以下略)

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

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

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

前項のpropsと同様、stateも型定義がされていないとコンパイルエラーになります。
TypeScriptでstateを利用する場合は以下のようになります。

type SquareProps = {
  value: number;
};

type SquareState = {
  value: string | null;
};

class Square extends React.Component<SquareProps, SquareState> {
  constructor(props: SquareProps) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => this.setState({ value: "X" })}>
        {this.state.value}
      </button>
    );
  }
}

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

Stateのリフトアップ

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

SquareコンポーネントをTypeScriptで記述した時と同様に、Boardコンポーネントにもpropsとstateの型を定義します。
また、SquareコンポーネントにonClickというpropsメソッドが追加されたため、SquarePropsの型にonClickを追加します。

type SquareProps = {
  value: string | null;
  onClick: () => void;
}

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

type BoardState = {
  squares: Array<string | null>;
}

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

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

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

  render() {
    const status = "Next player: X";
    (以下略)

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

手番の処理

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

『X』の番かどうかを判定するxIsNextというstateがBoardコンポーネントに追加されたため、ロジックとあわせてBoardStateも修正します。
また、マスにはXあるいはOしか記入されないため、string | nullの代わりにSquareTypeというマスの型を用意します。

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

type BoardState = {
  squares: Array<SquareType>;
  xIsNext: boolean;
}

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

  handleClick(i: number) {
    const squares = this.state.squares.slice();
    squares[i] = this.state.xIsNext ? "X" : "O";

    this.setState({
      squares: squares,
      xIsNext: !this.state.xIsNext,
    });
  }

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

  render() {
    const status = "Next player: " + (this.state.xIsNext ? "X" : "O");
    (以下略)

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

ゲーム勝者の判定

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

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

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

type BoardState = {
  squares: Array<SquareType>;
  xIsNext: boolean;
}

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

  handleClick(i: number) {
    const squares = this.state.squares.slice();

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

    this.setState({
      squares: squares,
      xIsNext: !this.state.xIsNext,
    });
  }

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

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

    return (
      (以下略)

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

着手の履歴の保存

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

着手の履歴を管理するhistory stateにも型が必要です。今回はHistoryDataという型を定義しました。
全体的な修正は以下の通りです。

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

class Board extends React.Component<BoardProps> {
  renderSquare(i: number) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
  }

  render() {
    return (
    (以下略)

type HistoryData = {
  squares: Array<SquareType>;
}

type GameState = {
  history: HistoryData[];
  xIsNext: boolean;
}

class Game extends React.Component<{}, GameState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      history: [
        {
          squares: Array(9).fill(null),
        },
      ],
      xIsNext: true,
    };
  }

  handleClick(i: number) {
    const history = this.state.history;
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? "X" : "O";
    this.setState({
      history: history.concat([
        {
          squares: squares,
        },
      ]),
      xIsNext: !this.state.xIsNext,
    });
  }

  render() {
    const history = this.state.history;
    const current = history[history.length - 1];
    const winner = calculateWinner(current.squares);

    let status;
    if (winner) {
      status = "Winner: " + winner;
    } else {
      status = "Next player: " + (this.state.xIsNext ? "X" : "O");
    }
    return (
      <div className="game">
        <div className="game-board">
          <Board
            squares={current.squares}
            onClick={(i) => this.handleClick(i)}
          />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

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

タイムトラベルの実装

どの時点（stepNumber）に移動するかを管理するstateを新たに作成します。

ロジックを修正し、GameState型にstepNumberを追加します。全体的な修正は以下の通りです。

type HistoryData = {
  squares: Array<SquareType>;
}

type GameState = {
  history: HistoryData[];
  xIsNext: boolean;
  stepNumber: number;
}

class Game extends React.Component<{}, GameState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      history: [
        {
          squares: Array(9).fill(null),
        },
      ],
      stepNumber: 0,
      xIsNext: true,
    };
  }

  handleClick(i: number) {
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? "X" : "O";
    this.setState({
      history: history.concat([
        {
          squares: squares,
        },
      ]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext,
    });
  }

  jumpTo(step: number) {
    this.setState({
      stepNumber: step,
      xIsNext: step % 2 === 0,
    });
  }

  render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);

    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={() => this.jumpTo(move)}>{desc}</button>
        </li>
      );
    });

    let status;
    if (winner) {
      status = "Winner: " + winner;
    } else {
      status = "Next player: " + (this.state.xIsNext ? "X" : "O");
    }
    return (
      <div className="game">
        <div className="game-board">
          <Board
            squares={current.squares}
            onClick={(i) => this.handleClick(i)}
          />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <ol>{moves}</ol>
        </div>
      </div>
    );
  }
}

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

まとめ

クラスコンポーネントをTypeScriptで記述する場合は『React.Component<Props, State>』を継承する
クラスコンポーネントをTypeScriptで記述する場合はコンポーネント独自のpropsとstateの型定義をする
コンパイルエラーになった場合は型定義がされているかチェックする

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

あわせてよみたい

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

2021年3月24日

メニュー

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

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

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

データをProps経由で渡す

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

Stateのリフトアップ

手番の処理

ゲーム勝者の判定

着手の履歴の保存

タイムトラベルの実装

まとめ

プロフィール

オススメ記事

カテゴリー

アーカイブ

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

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

データをProps経由で渡す

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

Stateのリフトアップ

手番の処理

ゲーム勝者の判定

着手の履歴の保存

タイムトラベルの実装

まとめ

プロフィール

オススメ記事

人気の記事

カテゴリー

アーカイブ

タグ