Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
286
Help us understand the problem. What are the problem?

create-react-appで React + Typescript な環境を構築する

はじめに

facebook社公式のReactプロジェクト生成ツールである create-react-app
2018/10/29リリースの v2.1.0 でTypeScriptをサポートするようになりました。

とても簡単に React + Typescript の開発環境を構築できるようになっているので、その方法をまとめています。
よりよい方法やバグ等ございましたら、アドバイスいただけると光栄です。

尚、執筆時のバージョンは以下のようになっております。
最新の方法について知りたい方は 公式ドキュメント をご覧ください。

$ node -v
v13.9.0

$ yarn -v
1.22.0

$ npx create-react-app --version
3.3.0

環境構築

0. 事前準備

各種インストールの確認をします。

0-1. Node.js

下記コマンドで、Node.js がインストールされているか確認します。

$ node -v
v13.9.0

まだインストールされていない場合は、公式ドキュメント を参照の上、インストールしてください。

※ MacOSの方は以下の方法もおすすめです。
MacにNode.jsをインストール(anyenv + nodenv編) - Qiita

0-2. yarn

パッケージマネジャーは yarn を使用するため、
下記コマンドで、yarn がインストールされているか確認します。

$ yarn -v
1.22.0

まだインストールされていない場合は、公式ドキュメント を参照の上、インストールしてください。

1. 新規プロジェクトを作成

実際に create-react-app でプロジェクトを作成します。

1-1. create-react-app

以下のコマンドを叩くだけでプロジェクトを作成できます。

$ npx create-react-app {プロジェクト名} --template typescript

{プロジェクト名}には、自分のつけたいプロジェクト名を設定してください。
例えば、react-ts-app というプロジェクトを作成したい場合は、以下のコマンドを入力します。

例)
$ npx create-react-app react-ts-app --template typescript

Happy hacking! という文字が表示されれば完了です。

1-2. プロジェクトを起動

作成したプロジェクトのディレクトリに移動し、起動します。

$ cd {プロジェクト名}
$ yarn start

先ほどの例に挙げた react-ts-app というプロジェクトを作成した場合は、以下のコマンドを入力します。

例)
$ cd react-ts-app
$ yarn start

http://localhost:3000 がブラウザで開き、以下のような画面が表示されれば完了です。
image.png

一度、Ctrl + C で終了します。

2. 開発環境設定

開発するに当たり便利な各種設定をします。

2-1. コミット時にコードを自動整形する

コミット時にコードを自動整形したいので、下記3つをインストールします。

  • husky
  • lint-staged
  • prettier

以下のコマンドを入力すれば、インストールができます。
開発時のみに必要なライブラリなので、-D を付けてすべて devDependencies としてインストールします。

$ yarn add -D husky lint-staged prettier

※ dependencies と devDependencies の違いについては、下記を参照ください。
package.jsonにおけるdependenciesとdevDependenciesの違い(超シンプルに) - Qiita

インストールが完了したら、package.json を開いて必要なものを足していきます。

2-1-1. lint-staged

拡張子が ts または tsx の場合に、prettier を走らせてから git add するように、package.json の最後あたりに下記を追記します。

pakege.json
{
  ...,
  "lint-staged": {
    "*.{ts,tsx}": [
      "prettier --write"
    ]
  }
}
※2020/11/20追記

更新しようとしたら、下記のようなメッセージが出ました。

husky > pre-commit (node v12.18.3)
⚠ Some of your tasks use `git add` command. Please remove it from the config since all modifications made by tasks will be automatically added to the git commit index.

No staged files match any of provided globs.
[master 1234***] 修正前
 1 file changed, 8 insertions(+), 5 deletions(-)

「git add commandは不要だから取り除いてね」 と警告が出ています。
とりあえず削除してみました。

husky > pre-commit (node v12.18.3)
No staged files match any of provided globs.
[master 4567***] git add を削除
 1 file changed, 1 insertion(+), 2 deletions(-)

いい感じみたいですね。
サンプルも変更しました。

2-1-2. husky

precommit 時に上記の lint-staged が実行されるように設定します。

※2021/04/01追記

huskyのv5から設定方法がガラッと変わったようで、バージョンによって別の設定が必要になりました。

----- v5以降 ------

下記コマンドを実行します。

$ npx husky install
$ npx husky add .husky/pre-commit "yarn lint-staged"

package.jsonscripts に下記を追記します。

pakege.json
{
  ...,
  "scripts": {
    ...,
    "prepare": "husky install",
    "lint-staged": "lint-staged"
  }
}
----- v4以前 -----

package.json の最後あたりに下記を追記します。

pakege.json
{
  ...,
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

2-1-3. prettier

コードフォーマット関連の設定を追加します。
こちらも、package.json の最後あたりに下記を追記します。

pakege.json
{
  ...,
  "prettier": {
    "semi": false,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "all"
  }
}

ここでは以下のような設定をしています。

  • semi : 末尾にセミコロンをつけるかどうか
  • singleQuote : シングルクォートに変換するかどうか
  • tabWidth : インデントのスペースの数
  • trailingComma : 複数行の場合に末尾にカンマをつけるか

※ その他のオプションについては、prettierの 公式ドキュメント で確認できます。

2-2. 型チェックによる安全性を最大化する

せっかく TypeScript を使用しているので、

  • 型チェックによる安全性を最大化したい
  • あわよくば、不要なコードも怒ってくれるとうれしいなー

ということで、tsconfig.jsoncompilerOptions に下記を追加します。

tsconfig.json
{
  "compilerOptions": {
    ...,
    strict: true,
    ...,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
  },
  ...
}

ここでは、下記のオプションを追加しました。

  • strictNullChecks : nullやundefinedが「一人前の型」になる。
  • noImplicitAny : 暗黙のany型を禁止する。
  • noImplicitThis : thisに型を指定していない場合にエラーを発生させる。
  • noImplicitReturns : 関数内のすべての経路で、返り値の型があっているかをチェックする。
  • noUnusedLocals : 宣言して、一度も使われないローカル変数があると、コンパイルエラーになる。
  • noUnusedParameters : 一度も使われないパラメータがあると、コンパイルエラーになる。

※ その他のオプションについては、TypeScriptの 公式ドキュメント で確認できます。

※2020/11/20追記

確認したところ、すでに strict オプションが true になっていました。
このオプションは 公式ドキュメント で以下のような説明があります。

Enable all strict type checking options.
Enabling --strict enables --noImplicitAny, --noImplicitThis, --alwaysStrict, --strictBindCallApply, --strictNullChecks, --strictFunctionTypes and --strictPropertyInitialization.

どうやらこのオプションには、 下記オプションが含まれているとのことです。

  • noImplicitAny
  • noImplicitThis
  • alwaysStrict
  • strictBindCallApply
  • strictNullChecks
  • strictFunctionTypes
  • strictPropertyInitialization

下記が被っているので設定から外しておきます...
noImplicitAnynoImplicitThisstrictNullChecks

2-3. import を絶対パスにする

相対パスで import するのは色々と面倒なので、絶対パスで指定できるようにします。

以下のように tsconfig.json ファイルの compilerOptionsbaseUrl を追加します。

tsconfig.json
{
  "compilerOptions": {
    ...,
    "baseUrl": "src"
  },
  ...
}

これで、絶対パス使えるようになりました。
例えば、src/components/Button.tsx にあるモジュールをインポートする場合、以下のようにインポートできます。

例)
import Button from 'components/Button'

※ 詳しい方法は 公式ドキュメント で確認できます。

終わりに

いかがでしょうか?
これを基に快適な React + TypeScript ライフを楽しんでください!

また、こちらの方法で作成したプロジェクトのサンプルをGitHubに公開していますので、よろしければ参照ください。

最後まで読んでいただいてありがとうございます。
添削や過不足あれば、お気軽にご指摘ください。

※2021/04/01追記

huskyのv5以降の場合のブランチを作成しました。
最新版で作成された場合はこちらを参照してください。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
286
Help us understand the problem. What are the problem?