ESLintは「敵」ではなく「最も優秀なペアプログラマー」である
こんにちは。開発環境の設計と運用を専門とするアーキテクトです。
現場でコードレビューをしていると、必ずと言っていいほど目にする光景があります。それは、ESLintの警告を消すために、深く考えずに `// eslint-disable-next-line` を乱用するエンジニアの姿です。
一見、エラーが消えて開発がスムーズに進んでいるように見えますが、これは「未来の自分への高利貸し」です。コードの品質という資産を切り売りし、やがてその負債が利息を伴って返済を求めてきたとき、プロジェクトは崩壊の危機に瀕します。
今回は、なぜ「いい加減な抑制」が致命的なのか、そしてESLintとPrettierを真に活用して「コードを書くだけで品質が担保される」環境をどう構築するかを解説します。
—
1. なぜ「警告」を無視してはいけないのか
ESLintの警告は、単なる「好みの押し付け」ではありません。それは、過去の何万という開発者が踏んできた「バグの地雷原」を避けるための生存戦略です。
- 意図しない挙動の防止: `eqeqeq`（厳密等価演算子の強制）を無視すれば、JavaScript特有の型変換によるバグが紛れ込みます。
- 認知的負荷の増大: 統一性のないコードは、脳に余計な解析コストを強います。
- 技術的負債の雪だるま: 一度 `eslint-disable` を許すと、それが「例外処理のテンプレ」として定着し、チーム全体が警告を軽視する文化が生まれます。
警告を抑制する際は、「なぜ警告が出ているのか」を理解し、コードを修正して警告を解消するのが大原則です。どうしても抑制が必要な場合は、`// eslint-disable-next-line @typescript-eslint/no-explicit-any` のように、具体的なルール名を指定し、なぜ必要なのかのコメントを添えるのが、プロフェッショナルの作法です。
—
2. 構築の極意：ESLintとPrettierの「棲み分け」
多くの初心者が混乱するのは「ESLintとPrettierの役割」です。
- ESLint: 「コードの品質とバグの予兆」をチェックする（論理的な正しさ）。
- Prettier: 「コードの見た目（インデント、改行、クォート）」を整える（可読性）。
この2つを正しく連携させないと、お互いにルールが衝突し、無限ループのように警告が出続ける地獄を見ることになります。
環境構築のステップ
以下のコマンドで、必要なパッケージを導入します。
必要なライブラリを一括インストール
eslint-config-prettierは「Prettierと衝突するESLintのルール」を無効化する必須設定です
npm install –save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
設定ファイルの心臓部：`.eslintrc.json`
ここが最も重要です。設定は「引き算」が基本です。
{
“extends”: [
“eslint:recommended”, // 基本的な推奨ルール
“plugin:prettier/recommended” // Prettierと連携し、競合するルールを無効化する
],
“rules”: {
“no-console”: “warn”, // console.logは本番環境に残したくないので警告
“eqeqeq”: “error” // == ではなく === を強制（厳格な型チェック）
}
}
—
3. HelloWorldで体験する「自動化の威力」
設定が完了したら、実際にその強力さを体験しましょう。以下のコードを `app.js` として保存してください。
// あえて汚く書いたコード
const user_name = “Alice”
if (user_name == “Alice”) { // == を使っている (警告対象)
console.log(“Hello”) // console.log を使っている (警告対象)
}
この状態で、ターミナルから以下のコマンドを打ちます。
npx eslint app.js –fix
何が起きたか？
1. ESLintの判定: `==` が `===` に自動修正されました。
2. Prettierの介入: インデントやセミコロンがプロジェクトの基準に揃えられました。
3. 結果: あなたが修正せずとも、ツールが「最も堅牢なコード」に書き換えました。
—
終わりに：ツールを「飼い慣らす」ということ
開発において、最も大切なのは「思考のリソースをどこに割くか」です。
コードの空白や括弧の位置を気にする時間は、ビジネス価値を生む時間ではありません。ESLintとPrettierを正しく設定し、「警告が出たら修正する」というリズムをルーチン化してください。
最初は警告に追いかけられているように感じるかもしれません。しかし、数週間もすれば、ツールがあなたの背後で常にコードを磨き上げ、バグを未然に防いでくれる心強い相棒になっていることに気づくはずです。
「警告を放置しない」。たったこれだけの規律が、あなたのコードを世界レベルの品質へと押し上げます。さあ、今すぐあなたのプロジェクトにこの規律をインストールしましょう。