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

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

はじめに

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

サンプル
https://github.com/Julia0709/ts-react-app

0. 事前準備

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

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

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

完了したら作成されたディレクトリ内に移動します。

$ cd my-app

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

$ 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するように指示しています。

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/

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
• Configuring TSLint
• Prettier 入門 ～ESLintとの違いを理解して併用する～