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

※2019.06.10追記
[[TypeScript] create-react-appで始めるだいたいストレスフリーな開発環境の構築2](https://qiita.com/Julia0709/items/dfce1eed86e82c484040)
これから新しくプロジェクトを作成する方は更新版の上記の記事をご覧ください。この方法は現在非推奨です。

# はじめに

TypeScriptは素晴らしいのですが、create-react-appで始めるとルールが厳しすぎて心が折れます。かといってtslintの推奨設定をすべて取ってしまうのも抵抗があるので…安全かつある程度快適な開発のために、私がいつも最低限やっている事をメモしておきます。

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


# 0. 事前準備

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

```
$ 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 --scripts-version=react-scripts-ts
```

### 1-2. プロジェクトを起動
完了したら作成されたディレクトリ内に移動します。

```
$ cd my-app
```

プロジェクトを起動します。推奨されているyarnを使用していきます。

```
$ yarn start
```

[http://localhost:3000](http://localhost:3000)がブラウザで開き、Welcome to Reactと表示されれば成功です。
![react_env_01.png](https://qiita-image-store.s3.amazonaws.com/0/89544/29f83805-46dc-2b65-83d9-e77a47328ee8.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"`をscriptsの最後あたりに追記します。`precommit`で上記の`lint-staged`が実行できるようになります。

```package.json
{
  "scripts": {
    ...
    "precommit": "lint-staged"
  },
  ...
}
```

prettierはルールを変更したい場合は`lint-staged`の後あたりに、下記のように追加してください。私は基本的にダブルクォートをシングルクォートに変更します。また`"trailingComma": "all"`にして、コミットで余計な差分が出ないようにすべての行にカンマを付けるときもあります。

```package.json
{
  ...
  "prettier": {
    "singleQuote": true,
	  "trailingComma": "all"
  }
}
```

### 3-2. tslint.json
`tslint.json`をエディタで開き、最後の`}`の直前に`rules`を追加します。チェックしてほしくないものだけをここで上書きしていきます。

```tslint.json
{
  ...
  "rules": {
    "interface-name": false,
    "member-access": false,
    "no-console": false,
    "object-literal-sort-keys": false,
    "ordered-imports": false,
  }
}
```

**interface-name**
型定義のときに、毎回先頭に`I`を付けたくないので外します。

**member-access**
renderの前などに`public`と明示する必要はないと思っているので外します。私は`private`のものだけ明記するようにしています。

**no-console**
開発中は`console.log`を色んな所で使いたいのでfalseにしておきます。falseではなく`{ "severity": "warning" }`とすると、ビルドは通ってwarningとしてエラーが表示されます。

**object-literal-sort-keys**
オブジェクトのkeyの並びをアルファベット順以外にしたいことがあるので外しておきます。

**ordered-imports**
import文はアルファベット順ではなく関連度順にしておきたいのでfalseにします。

また`"defaultSeverity": "warning"`を指定しておけば、tslintがエラーの場合でもビルドが行われて、warningにエラー内容が表示されるのみになります。

```tslint.json
{
  ...
  "defaultSeverity": "warning"
}
```

詳しくはTSLintのConfigurationに説明があります。
[https://palantir.github.io/tslint/usage/configuration/](https://palantir.github.io/tslint/usage/configuration/)

### 3-3. tsconfig.json
ここで`src`内に`components`や`containers`などのディレクトリを作成してファイルを整理します。

`tsconfig.json`の`compilerOptions`内に`paths`を追加して、`@ディレクトリ名`で読み込めるようにしておくと記述するパスが短くなりますし、ディレクトリ構造を変更をしてもここのパスを変更するのみで済むのでおすすめです。

```tsconfig.json
{
  "compilerOptions": {
    ...
    "paths": {
      "@containers": ["src/containers"],
    }
  },
  ...
}
```

するとコンポーネント内では下記のように読み込めるようになります。

``` src/index.tsx
import { App } from '@containers';
```

ここまでできたら`yarn start`でプロジェクトを再起動してみて、無事表示されれば完了です。

## おわりに
後は必要に応じてSassを導入したり、precommit時にtslintやテストも走らせたりしていきます。他にもオススメ設定があれば教えてください！

## 参考URL
- [GitHub - Microsoft/TypeScript-React-Starter](https://github.com/Microsoft/TypeScript-React-Starter)
- [Configuring TSLint](https://palantir.github.io/tslint/usage/configuration/)
- [Prettier 入門 ～ESLintとの違いを理解して併用する～](https://qiita.com/soarflat/items/06377f3b96964964a65d)