フロントエンド - ビルド・ツール

ESLint いーえすりんと

静的解析JavaScriptリンターコード品質TypeScriptコーディング規約

ESLintについて教えて

簡単に言うとこんな感じ！

ESLintは「コードの文法チェッカー」だよ！ Wordの赤波線みたいに、JavaScriptのコードの問題点を実行前に自動で指摘してくれるツールなんだ。「ここ絶対バグになるよ」「チームのルールと違うよ」って教えてくれる、開発チームの見えない先輩みたいな存在！

ESLintとは

ESLint（イーエスリント）は、JavaScript・TypeScriptのソースコードを実行せずに解析し、バグの原因になりそうな記述やコーディング規約違反を検出する静的解析ツール（リンター）です。「ES」はJavaScriptの正式規格名「ECMAScript」、「Lint」はプログラムの問題点を検出するツールの総称に由来します。

プログラムを実際に動かす前に問題を見つけられるのが最大の強みです。たとえば「使っていない変数が宣言されている」「== の代わりに === を使うべき場所がある」「セキュリティ上危険なコードパターンがある」といったことを、ファイルを保存した瞬間や、コードをリポジトリに取り込む前に自動でチェックできます。

開発チームが複数人になると「人によって書き方がバラバラ」という問題が必ず起きます。ESLintにコーディング規約をルールとして設定しておけば、機械が均一にチェックしてくれるため、コードレビューの負担軽減と品質の均一化を同時に実現できます。

ESLintの仕組み

ESLintは大きく3ステップでコードをチェックします。

ステップ	処理内容	例え
① パース	コードを「構文木（AST）」に変換	文章を単語・文節に分解する
② ルール適用	ASTに対して設定ルールを1つずつ照合	文法書と照らし合わせる
③ レポート	違反箇所を警告（warn）またはエラー（error）で報告	先生が赤ペンを入れる

AST（抽象構文木）とは

AST（Abstract Syntax Tree）とは、コードを「木構造のデータ」に変換したものです。人間が読むテキストをコンピュータが解析しやすい形に直したイメージで、ESLintはこのASTを見てルール違反を判定しています。

エラーレベルの分類

レベル	値	意味	実務での扱い
`off`	0	チェックしない	不要なルールを無効化
`warn`	1	警告（ビルドは通る）	推奨だが必須ではない
`error`	2	エラー（CIで止まる）	必ず直さないと進めない

歴史と背景

2013年 — Nicholas C. Zakas が開発・公開。「どのルールを有効にするかを完全にカスタマイズできる」設計で従来ツールと差別化
2015年 — ES2015（ES6）の普及とともに一気に広まる。eslint:recommended の提供開始
2016年 — AirbnbがESLint設定（eslint-config-airbnb）を公開。事実上の業界標準として普及
2019年 — TypeScript向けパーサー・プラグイン（@typescript-eslint）が成熟し、TypeScript対応が本格化
2022年 — eslint-plugin-import や eslint-plugin-react などエコシステムが爆発的に拡大
2024年 — 設定ファイル形式が従来の .eslintrc から Flat Config（eslint.config.js） へ刷新。より直感的な設定が可能に

設定ファイルと主要プラグイン

ESLintの動作はプロジェクトルートの設定ファイルでカスタマイズします。

設定ファイル（Flat Config形式・新方式）

// eslint.config.js
import js from "@eslint/js";
import tseslint from "typescript-eslint";

export default [
  js.configs.recommended,          // JS標準ルール一式
  ...tseslint.configs.recommended,  // TypeScript用ルール
  {
    rules: {
      "no-unused-vars": "warn",  // 未使用変数は警告
      "eqeqeq": "error",         // == の代わりに === を強制
    },
  },
];

主要プラグイン一覧

プラグイン名	用途
`@typescript-eslint`	TypeScript専用ルールの追加
`eslint-plugin-react`	React特有のルールチェック
`eslint-plugin-import`	importの順序・未解決モジュール検出
`eslint-plugin-jsx-a11y`	アクセシビリティ（a11y）チェック
`eslint-plugin-security`	セキュリティリスクのある記述を検出
`eslint-config-airbnb`	Airbnb社のコーディング規約セット
`eslint-config-prettier`	Prettierとのルール競合を解消

ESLint と Prettier の関係

よく混同されますが、役割が異なります。

実務での使われ方

CI/CDパイプラインへの組み込み

ESLintはローカルだけでなく、CI/CD（継続的インテグレーション）パイプラインに組み込んで使うのが現代のスタンダードです。

開発者がコードをpush
       ↓
GitHub Actions / GitLab CI が起動
       ↓
npm run lint（ESLintを実行）
       ↓
エラーがあれば❌ → マージ・デプロイをブロック
エラーがなければ✅ → 次のステップへ進む

VS Codeとの連携

エディタにESLint拡張機能を入れると、ファイルを保存するたびにリアルタイムで問題箇所に赤線が表示されます。「保存したら自動修正」も設定可能で、開発体験が大幅に向上します。