はじめに
昨年9月に [TypeScript] create-react-appで始めるだいたいストレスフリーな開発環境の構築という記事を投稿しました。しかし現在は公式のcreate-react-appがTypeScriptをサポートし、上記の方法は非推奨になりました。(create-react-app-typescriptのリポジトリもすでにアーカイブされています。)上記の記事に最近も閲覧やいいねを頂いているようなので、改めて公式を使ったReact+TypeScriptプロジェクトのセットアップ方法も書くことにしました。これから始める方はこちらを参考にしていただければと思います。
サンプル
https://github.com/Julia0709/ts-react-app2
0. 事前準備
Node.jsがインストールされているか確認します。下記コマンドを実行したときにv10.16.0などの数字が現れれば大丈夫です。
$ node -v
Node.jsがインストールされていなかった場合は、下記よりOSに合ったインストーラをダウンロードして実行してください。
https://nodejs.org/ja/download/
1. 新規プロジェクトを作成
1-1. create-react-app
下記コマンドを実行します。my-app部分はプロジェクト名になるので、任意の名前に変更してください。npxを先頭に付けると、グローバルにインストールされていなくてもcreate-react-appが使えます。
$ npx create-react-app my-app --typescript
1-2. プロジェクトを起動
完了したらHappy hacking!という文字が出ているはずですので、作成されたディレクトリ内に移動します。
$ cd my-app
プロジェクトを起動します。推奨されているyarnを使用していきますが、npmの場合はyarnをnpmに置き変えてください。
$ yarn start
http://localhost:3000がブラウザで開き、Welcome to Reactと表示されれば成功です。
停止させる場合はcontrol + cです。
2. gitの設定
立ち上がることを確認したので、ここでgitを設定し一度コミットしておきます。Initial commitは任意のコミットメッセージに変更してください。必要であればここでGithubのリポジトリを作成して連携させます。
$ git init
$ git add .
$ git commit -m "Initial commit"
3. 開発環境設定
ここがこの記事の本題です。作業を始める前に便利な設定をしておきます。
3-1. devDependencies(package.json)
下記の3つ、husky、lint-staged、prettierをインストールすれば、コミット時にコードを自動整形してくれるようになります。プロダクションには必要ないので、-Dを付けてすべてdevDependenciesとしてインストールします。
$ yarn add -D husky lint-staged prettier
package.jsonをエディタで開いて必要なものを足していきます。個人的にはscriptsをdependenciesの上に置きたいので、このときに位置を入れ替えます。
最後の}の直前あたりに下記のlint-stagedコマンドを追記します。これは拡張子がtsまたはtsxの場合に、prettierを走らせてからgit addするように指示しています。
{
...
"lint-staged": {
"*.{ts,tsx}": [
"prettier --write",
"git add"
]
}
}
そしてprecommit時に上記のlint-stagedが実行されるように、package.jsonの最後あたりに下記を追記します。
{
...
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
}
}
prettierのルールを変更したい場合はpackage.json内に下記のように設定を追加してください。私は基本的にダブルクォートをシングルクォートに変更します。また"trailingComma": "all"にして、コミットで余計な差分が出ないようにすべての行にカンマを付けるときもあります。その他のオプションについてはprettierの公式ドキュメントで確認できます。
{
...
"prettier": {
"tabWidth": 2,
"singleQuote": true,
"trailingComma": "all"
}
}
3-2. tslint.json
TSLintはESLintに統合されたため、必要であればESLintをインストールしてください。TypeScriptではエラーがあるとまずコンパイルが通らないので、prettierを使用していて、かつメンバーがTypeScriptに慣れていれば特に設定をする必要はないと思っています。しかし不要な変数を教えてくれるルール等、コードをスッキリできるものは必要に応じてあると良いかもしれません。ESLintについては自分の中でルールが固まったら別の記事で共有したいです。
3-3. tsconfig.json
ここでsrc内にcomponentsやcontainersなどのディレクトリを作成してファイルを整理します。
tsconfig.jsonのcompilerOptions内にpathsを追加して、@ディレクトリ名で読み込めるようにしておくと記述するパスが短くなりますし、ディレクトリ構造を変更をしてもここのパスを変更するのみで済むのでおすすめです。
おわりに
後は必要に応じてStyleライブラリやStorybookを導入したり、precommit時にテストを走らせたりもしていきます。他にもオススメ設定があれば教えてください。ハッピーReact+TypeScriptライフ！