ReactやTypeScriptで開発していると、

コーディングスタイルが人によって違う
型エラーに実行時まで気付けない
レビューで毎回同じ指摘が入る

ということがあります。

そこで導入したのが、

ESLint
Prettier
TypeScript（tsc）

です。

どれも開発では定番のツールですが、役割は少しずつ異なります。

この記事では、それぞれの役割や導入方法、実際に使って感じたことを紹介します。

それぞれの役割

ツール	役割
ESLint	バグになりそうなコードやルール違反を検出
Prettier	コードフォーマットを統一
TypeScript（tsc）	型エラーを検出

似ているようで、それぞれ見ているポイントは異なります。

ESLint

ESLintは静的解析ツールです。

例えば、

const value = 10

if (value == "10") {
    console.log("same")
}

ESLintでは

==ではなく===を使う
セミコロン
未使用変数
import順

などをチェックできます。

実行すると

npm run lint

警告やエラーとして表示されます。

自動修正

多くのルールは自動修正できます。

npm run lint -- --fix

細かい修正を手作業でする必要がなくなります。

Prettier

Prettierはフォーマッターです。

役割は非常にシンプルで、

コードを自動できれいに整形する

ことです。

例えば

修正前

function hello(name:string){return"Hello "+name}

実行後

function hello(name: string) {
  return "Hello " + name;
}

インデントや改行などを統一してくれます。

なぜESLintとPrettierを両方使うの？

役割が違うためです。

ESLint

このコードは危ない

Prettier

このコードは読みやすく整える

という違いがあります。

最近ではESLintは品質チェック、Prettierはフォーマット専用という使い分けが一般的です。

TypeScript（tsc）

TypeScriptコンパイラは、

型が正しいか

をチェックします。

例えば

function add(a: number, b: number) {
  return a + b;
}

add("1", 2);

実行すると

Argument of type 'string' is not assignable to parameter of type 'number'.

というエラーになります。

実際にアプリを起動する前に問題を見つけられます。

tscはビルドだけではない

多くのプロジェクトでは

npx tsc --noEmit

を実行しています。

--noEmitを付けることで、

JavaScriptは生成しない
型チェックだけ実施

できます。

CIでもよく使われる方法です。

GitHub Actionsに組み込む

Pull Request時に実行する例です。

- name: Type Check
  run: npm run typecheck

- name: ESLint
  run: npm run lint

- name: Prettier
  run: npm run format:check

問題があればCIが失敗します。

package.json例

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier . --write",
    "format:check": "prettier . --check",
    "typecheck": "tsc --noEmit"
  }
}

ローカルでもCIでも同じコマンドを利用できます。

導入して感じたこと

一番変わったのはレビューの内容でした。

以前は

インデント
セミコロン
import順
ダブルクォート

といった細かい指摘が多くありました。

導入後は自動で解決できるようになり、

レビューでは

設計
実装方針
命名
パフォーマンス

など、本来確認したい部分に時間を使えるようになりました。

また、TypeScriptの型チェックがあることで、実行前に不具合へ気付ける場面も増えました。

AIとの相性も良い

最近はAIでコードを書く機会が増えています。

便利な一方で、

import漏れ
型の間違い
未使用変数
フォーマット崩れ

が混ざることもあります。

ESLint・Prettier・TypeScriptをCIに組み込んでおけば、AIが生成したコードも一定の品質でチェックできます。

まとめ

3つのツールは役割が重複しているようで、それぞれ違います。

ツール	防げること
ESLint	実装ミス・ルール違反
Prettier	フォーマットのばらつき
TypeScript	型エラー

テストは実行して初めて分かることを検証します。

一方で、ESLint・Prettier・TypeScriptはコードを書いた直後に問題を検出できます。

開発を続けるほど、小さな差が積み重なってレビュー効率や品質に大きく影響すると感じています。