はじめに
「レビューのたびに、インデントやクォートの指摘で時間を取られる」「チームメンバーごとにコードの書き方がバラバラで読みにくい」——こうした悩みを抱えたことはないでしょうか。
コードの品質やスタイルを人力でチェックするのは、非常にコストがかかります。しかも見落としも起きやすく、レビュアーの負担も増えるばかりです。こうした問題を解決してくれるのが、JavaScript/TypeScriptエコシステムで事実上の標準となっている静的解析ツール「ESLint」です。
さらに近年は、長らく複雑さの象徴とされてきた設定ファイル（.eslintrc.*）が刷新され、シンプルな「Flat Config」形式に生まれ変わりました。本記事では、ESLintの基本的な使い方から、この新しい設定方式、実践的な導入パターンまでを解説します。
ESLintとは
ESLintは、JavaScriptおよびTypeScriptのコードを静的に解析し、構文エラーやバグにつながりやすいパターン、スタイルの不統一を検出するリンター（静的解析ツール）です。プラグイン機構によって柔軟にルールを拡張できることから、React・Vue・Node.jsなど、あらゆるフロントエンド／バックエンドプロジェクトで広く採用されています。
主な特徴
- 豊富なルールセット - 潜在的なバグの検出からコードスタイルの統一まで、数百に及ぶルールが標準・プラグインとして提供されています
- 自動修正機能 -
--fixオプションを使えば、多くの違反を自動的に修正できます - 高い拡張性 -
typescript-eslintやeslint-plugin-reactなど、フレームワーク・言語ごとのプラグインを組み合わせて使えます - エディタ連携 - VS Codeをはじめとする主要エディタと連携し、コーディング中にリアルタイムで警告を表示できます
- Flat Config - v9以降は
eslint.config.jsによるシンプルなJavaScriptベースの設定が標準になり、継承関係の分かりにくさが解消されました
インストール
npmを使う場合は、以下のコマンドで導入できます。
npm install --save-dev eslint
初期設定を対話形式でセットアップしたい場合は、公式の初期化コマンドが便利です。
npm init @eslint/config@latest
pnpmやyarnを使っている場合は、それぞれ以下のように置き換えてください。
# pnpm
pnpm add -D eslint
# yarn
yarn add -D eslint
基本的な使い方
まずはプロジェクトルートにeslint.config.js（Flat Config）を作成します。従来の.eslintrc.jsonと異なり、配列に設定オブジェクトを並べていくシンプルな形式です。
// eslint.config.js
import js from "@eslint/js";
export default [
js.configs.recommended,
{
files: ["**/*.js"],
rules: {
"no-unused-vars": "warn",
"eqeqeq": "error",
},
},
];
設定ができたら、対象ファイルを指定して実行します。
npx eslint src/
自動修正が可能な違反は、--fixオプションで一括修正できます。
npx eslint src/ --fix
実践的なユースケース
TypeScriptプロジェクトへの導入
typescript-eslintを組み合わせることで、TypeScript特有の型情報を活用したチェックが可能になります。
// eslint.config.js
import js from "@eslint/js";
import tseslint from "typescript-eslint";
export default tseslint.config(
js.configs.recommended,
...tseslint.configs.recommended,
{
files: ["**/*.ts", "**/*.tsx"],
rules: {
"@typescript-eslint/no-explicit-any": "warn",
},
}
);
CIパイプラインでの品質ゲート
プルリクエストのたびに手動でチェックするのではなく、CI上でESLintを実行し、違反があればビルドを失敗させることで、コード品質を機械的に担保できます。
# .github/workflows/lint.yml
name: Lint
on: [pull_request]
jobs:
eslint:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 20
- run: npm ci
- run: npx eslint .
package.jsonへのスクリプト登録
開発中に手軽に実行できるよう、package.jsonにスクリプトとして登録しておくと便利です。
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix"
}
}
まとめ
ESLintは、単なるスタイルチェッカーにとどまらず、バグの早期発見やチーム全体のコード品質を底上げしてくれる強力なツールです。特にFlat Configの登場により、設定ファイルの複雑さという長年の課題が解消され、以前よりもずっと導入しやすくなりました。
まだ.eslintrc.*のままのプロジェクトを運用している方は、この機会にFlat Configへの移行を検討してみてはいかがでしょうか。エディタ連携やCI組み込みまで含めて整備すれば、レビューの負担を減らしながら、コードベース全体の品質を安定させることができるはずです。