We want to hear from you!Take our 2021 Community Survey!
このサイトの更新は終了しました。ja.react.dev へ
React
v18.2.0 LanguagesGitHub

静的型チェック

この記事は古くなっており、今後更新されません。新しい React 日本語ドキュメントである ja.react.dev をご利用ください。

React TypeScript cheatsheet で TypeScript を使って React を書く方法が学べます。

Flow や TypeScript のような静的型チェッカーを使用することでコードを実行する前の早期段階に型不整合等の問題を検知することができます。他にも型解析言語を使用することで補完などの機能が追加され、開発体験を上げることができます。これらの理由から、大きいコードベースでは PropTypes の代わりに Flow や TypeScript を使うことをおすすめします。

Flow

Flow は JavaScript 用の静的型チェック機能です。Facebook で開発されており、React と一緒に使われることが多いです。変数、関数や React コンポーネントに型を足すことができ、型不整合を早期に発見できるようになります。はじめての Flow に基本情報が記載されているので、それを読むと良いでしょう。

Flow を使用するには以下の手順を踏みます：

  • Flow をプロジェクトの dependency に入れる。
  • Flow の型定義をコンパイル時にコードから剥がすように設定する。
  • 型定義を追加し、Flow を起動して確認する。

順を追って説明します。

Flow をプロジェクトに追加する

まず、ターミナル上であなたのプロジェクトが含まれているディレクトリに入り、以下のコマンドを入力してください。

Yarn を使っている場合：

yarn add --dev flow-bin

npm を使っている場合：

npm install --save-dev flow-bin

このコマンドによって Flow の最新版をあなたのプロジェクトに入れることができます。

次に、package.json の "scripts" に flow を追加しましょう。これで、ターミナルで Flow を実行できるようになります。

{
  // ...
  "scripts": {
    "flow": "flow",    // ...
  },
  // ...
}

最後に、以下のコマンドを実行します：

Yarn を使っている場合：

yarn run flow init

npm を使っている場合：

npm run flow init

このコマンドで Flow の設定ファイルを生成することができます。この設定ファイルはバージョン管理しましょう。

Flow の型定義をコンパイル時にコードから剥がす

Flow は JavaScript 言語を拡張し、型定義のための特殊な記法を使えるようにします。しかし、ブラウザはその記法について知らない為、ブラウザに送信されるコンパイル後の JavaScript バンドルに含まれないようにしなければいけません。

剥がす方法は使用している JavaScript のコンパイルツールによって変わってきます。

Create React App

もし、あなたのプロジェクトが Create React App によって生成されている場合、おめでとうございます！ 既にビルド時に Flow の型定義は剥がされる設定になっているため、このステップで何もする必要はありません。

Babel

補足:

以下の手順は Create React App で React をセットアップしている方向けではありません。Create React App も内部で Babel を使用していますが、既に Flow を使えるように設定されています。以下の手順は Create React App を使っていない場合のみ実行してください。

もし、あなたが手動で Babel の設定を行っていた場合、以下のコマンドで Flow 用の Babel プリセットをインストールする必要があります。

yarn を使っている場合：

yarn add --dev @babel/preset-flow

npm を使っている場合：

npm install --save-dev @babel/preset-flow

そして、flow のプリセットを Babel の設定ファイル に追加してください。例えば、Babel の設定を .babelrc ファイルで行っている場合は以下のようになります。

{
  "presets": [
    "@babel/preset-flow",    "react"
  ]
}

これであなたのコードで Flow の型定義が使えるようになります。

補足:

Flow を使うためには必ず react のプリセットが必要というわけではありません。ただ、よく組み合わせて使われています。Flow はそのままでも JSX のシンタックスを認識できます。

他のビルド設定

もし、Create React App も Babel も使用していない場合、flow-remove-types を使って Flow の型定義を剥がすことができます。

Flow の実行

もし、今までの手順を踏んでいる場合、以下のコマンドで Flow が実行されます。

yarn flow

npm を使っている場合：

npm run flow

以下のようなメッセージが表示されます。

No errors!
✨  Done in 0.17s.

Flow の型定義の追記

Flow の初期設定では、以下のコメントが含まれているファイルのみ型チェックを行います。

// @flow

上記コメントは基本的にファイルの頭に記載します。あなたのプロジェクトのいくつかのファイルに足してみて、yarn flow や npm run flow を実行して Flow が何か問題を検知するかどうかを確認してみましょう。

Flow の型チェックを、コメントが含まれているかにかかわらず全てのファイルに対してかける設定も存在します。これは既存のプロジェクトに対してかけると確認箇所が大量に出てしまいますが、新規プロジェクトの立ち上げで全てのファイルに型を入れたい場合は合理的な選択でしょう。

これで準備は整いました！ Flow についてより深く知りたい場合には以下の資料が役立つでしょう。

TypeScript

TypeScript は Microsoft によって開発されたプログラミング言語です。型を所有した JavaScript のスーパーセットで、独自のコンパイラを所持しています。TypeScript は型言語であるため、実行前のビルド時にエラーやバグを検知することができます。React と TypeScript を組み合わせて使うことに関しては、ここにも詳しく記載されています。

TypeScript を使うためには以下のことを行います。

  • TypeScript をプロジェクトの dependency に入れる。
  • TypeScript のコンパイラの設定を行う。
  • TypeScript 用のファイル拡張子を使用する。
  • 使用するライブラリの型定義をインストールする。

順を追って説明します。

Create React App で TypeScript を使用する

Create React App には最初から TypeScript のサポートが含まれています。

TypeScript サポートが含まれている新規プロジェクトを作成するには、以下のコマンドを実行します。

npx create-react-app my-app --template typescript

この資料に記載されているように、既存の Create React App のプロジェクトにも TypeScript のサポートを追加することができます。

補足:

もし、Create React App を使っている場合、以下の記述は全て飛ばして大丈夫です。Create React App を使用していない場合のセットアップ手順について記載しています。

TypeScript をプロジェクトに追加する

全ては TypeScript をインストールするところから始まります。プロジェクトが入っているフォルダで以下のコマンドを入力してください。

Yarn を使っている場合：

yarn add --dev typescript

npm を使っている場合：

npm install --save-dev typescript

おめでとうございます！ これで最新の TypeScript があなたのプロジェクトにインストールされました。これによって、tsc コマンドが使えるようになります。設定をする前に、まずは tsc を package.json の "scripts" に追加しましょう。

{
  // ...
  "scripts": {
    "build": "tsc",    // ...
  },
  // ...
}

TypeScript コンパイラの設定

コンパイラはこちらから設定しないと無価値です。TypeScript ではコンパイラの設定は tsconfig.json というファイルで定義します。このファイルを生成するには以下のコマンドを実行してください。

Yarn を使っている場合：

yarn run tsc --init

npm を使っている場合：

npx tsc --init

新しく生成された tsconfig.json を見てみると、コンパイラ設定用の様々なオプションがあることがわかります。これら全てのオプションの詳細に関してはこちらを参照してください。

たくさんの設定の中から rootDir と outDir に注目します。本来、コンパイラは TypeScript のファイルから JavaScript のファイルを生成します。しかし、既存のソースコードと生成されたコードが混合してしまうことは避けるべきです。

以上の問題を 2 つの手順によって対応します。

  • まず、プロジェクトの構成を以下のように変更しましょう。全てのソースコードを src ディレクトリに移動します。
├── package.json
├── src
│   └── index.ts
└── tsconfig.json
  • 次に、tsconfig.json を編集してコンパイラにソースコードの場所と生成する場所を設定します。
// tsconfig.json

{
  "compilerOptions": {
    // ...
    "rootDir": "src",    "outDir": "build"    // ...
  },
}

素晴らしい！ これで build のスクリプトを実行した際、コンパイラが生成したコードは build ディレクトリに格納されます。他の設定に関しては、TypeScript React Starter に React プロジェクト始めるのにおすすめな tsconfig.json を提供しているので、そちらを参照してください。

基本的に、生成された JavaScript のコードはバージョン管理するべきではありません。build フォルダは .gitignore に追記しましょう。

ファイル拡張子

React ではおそらくコンポーネントを .js ファイルに書いていたと思います。TypeScript には 2 種類のファイル拡張子が存在します。

.ts がデフォルトの拡張子で、JSX が含まれているファイルは .tsx を使います。

TypeScript の実行

上記の手順を踏んでいれば、以下のコマンドで TypeScript を実行することができます。

yarn build

npm を使っている場合：

npm run build

実行結果に何も表示されない場合は、正常に完了したと言うことです。

型宣言

他のライブラリを使用している時の型エラーやヒントを表示させるために、コンパイラは型宣言ファイルを参照します。型宣言ファイルにはそのライブラリが使用する全ての型の情報が含まれています。これを使うことによって、npm 等から取得した JavaScript のライブラリをそのまま使うことができます。

ライブラリの型宣言ファイルを取得するには主に以下の 2 つの方法があります。

Bundled - これはライブラリ自体が型宣言ファイルを所有している場合です。この場合、ライブラリをインストールするだけでそのまま使用することができます。ライブラリが型宣言ファイルを所有しているかどうか確認するには、プロジェクトに index.d.ts ファイルがあるかどうかを見ます。一部のライブラリは package.json の typings、または types の下に型宣言ファイルのパスを指定しています。

DefinitelyTyped - DefinitelyTyped には型宣言ファイルがバンドルされていない様々なライブラリのための型定義が用意されています。これらの型定義はクラウドソースにより Microsoft とオープンソースのコントリビュータが管理しています。例えば、React には型宣言ファイルが含まれておりませんが、DefinitelyTyped から取得することができます。取得するにはターミナルに以下のコマンドを入力してください。

# yarn
yarn add --dev @types/react

# npm
npm i --save-dev @types/react

ローカル型定義 もし、使用しているライブラリに型宣言ファイルが含まれておらず、DefinitelyTyped にも該当する型宣言ファイルがない場合、自前で型宣言ファイルを作成することができます。それを行うには declarations.d.ts をソースディレクトリのルートに作成します。型宣言は以下のように行なえます。

declare module 'querystring' {
  export function stringify(val: object): string
  export function parse(val: string): object
}

これでコードを書く準備は整いました！ TypeScript についてより深く知りたい場合には以下の資料が役立つでしょう。

ReScript

ReScript は JavaScript にコンパイルされる型付き言語です。コアの機能として、保証付きの 100% 型カバレッジ、高度な JSX サポート、専用の React 対応コードが含まれており、既存の JS / TS を使った React コードベースと結合することができます。

既存の JS / React コードベースに ReScript を統合するための情報はこちらで参照可能です。

Kotlin

Kotlin は JetBrains により開発された静的型言語です。JVM、Android、LLVM、や JavaScript といったプラットフォームを対象としています。

JetBrains は React bindings や Create React Kotlin App のような様々な React コミュニティの為のツールの開発、運営を行っています。後者は React アプリをビルド設定いらずで Kotlin で書き始めることができます。

他の言語

JavaScript にコンパイルされ、React にも活用できる静的型言語は他にも存在します。例えば、F#/Fable と elmish-react の組み合わせです。詳細はそれぞれのサイトを確認してください。他にも React を活用できる静的型言語があれば、ぜひこのページに追記してください！

Is this page useful?このページを編集する