[TypeScript] create-react-appで始めるだいたいストレスフリーな開発環境の構築2

# はじめに

昨年9月に [[TypeScript] create-react-appで始めるだいたいストレスフリーな開発環境の構築](https://qiita.com/Julia0709/items/f4bd953f8f96e11b678a)という記事を投稿しました。しかし現在は公式のcreate-react-appがTypeScriptをサポートし、上記の方法は非推奨になりました。([create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript)のリポジトリもすでにアーカイブされています。)上記の記事に最近も閲覧やいいねを頂いているようなので、改めて公式を使ったReact+TypeScriptプロジェクトのセットアップ方法も書くことにしました。これから始める方はこちらを参考にしていただければと思います。

サンプル
[https://github.com/Julia0709/ts-react-app2](https://github.com/Julia0709/ts-react-app2)


# 0. 事前準備

Node.jsがインストールされているか確認します。下記コマンドを実行したときに`v10.16.0`などの数字が現れれば大丈夫です。

```
$ node -v
```

Node.jsがインストールされていなかった場合は、下記よりOSに合ったインストーラをダウンロードして実行してください。
[https://nodejs.org/ja/download/](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](http://localhost:3000)がブラウザで開き、Welcome to Reactと表示されれば成功です。
![react_env_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/89544/5e6db910-ecab-6d8f-6dc4-bb3f0b9fd241.png)
停止させる場合は`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`するように指示しています。

```package.json
{
  ...
  "lint-staged": {
    "*.{ts,tsx}": [
      "prettier --write",
      "git add"
    ]
  }
}
```

そして`precommit`時に上記の`lint-staged`が実行されるように、`package.json`の最後あたりに下記を追記します。

```package.json
{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}
```

prettierのルールを変更したい場合は`package.json`内に下記のように設定を追加してください。私は基本的にダブルクォートをシングルクォートに変更します。また`"trailingComma": "all"`にして、コミットで余計な差分が出ないようにすべての行にカンマを付けるときもあります。その他のオプションについては[prettierの公式ドキュメント](https://prettier.io/docs/en/options.html)で確認できます。

```package.json
{
  ...
  "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`を追加して、`@ディレクトリ名`で読み込めるようにしておくと記述するパスが短くなりますし、ディレクトリ構造を変更をしてもここのパスを変更するのみで済むのでおすすめです。~~ 公式のcreate-react-appではサポートされていないようで、できなくなりました😢


## おわりに
後は必要に応じてStyleライブラリやStorybookを導入したり、precommit時にテストを走らせたりもしていきます。他にもオススメ設定があれば教えてください。ハッピーReact+TypeScriptライフ！

## 参考URL
- [Adding TypeScript · Create React App](https://facebook.github.io/create-react-app/docs/adding-typescript)
- [Prettier 入門 ～ESLintとの違いを理解して併用する～](https://qiita.com/soarflat/items/06377f3b96964964a65d)