コードの品質を自動でチェック！ESLint 入門ガイド

「動くけど、なんだか読みにくいコード」を書いてしまった経験はありませんか？ 使っていない変数、到達しない条件分岐、意図しない型変換――こうした問題を自動で見つけてくれるのが ESLint です。

この記事では、ESLint の基本的な役割から導入方法、ルールの設定方法までをまとめて紹介します。

ESLint とは？

ESLint は JavaScript / TypeScript 向けの 静的解析ツール（リンター） です。コードを実行する前に潜在的な問題を検出し、警告やエラーとして教えてくれます。

ESLint が見つけてくれる問題の例

• バグになりうるコード ― 未使用の変数、定義前の参照、=== と == の混同など

• 可読性の低いコード ― ネストが深すぎる条件分岐、一貫性のない命名など

• 非推奨な書き方 ― var の使用、arguments オブジェクトの直接操作など

Prettier が「見た目」を整えるツールだとすれば、ESLint は「中身の品質」を守るツールです。この2つを組み合わせて使うのが現在の主流になっています。

インストール方法

npm または yarn でプロジェクトにインストールします。

# npm の場合
npm install --save-dev eslint

# yarn の場合
yarn add --dev eslint

初期設定ファイルを作成する

インストール後、以下のコマンドで対話形式の初期セットアップを実行できます。

npx eslint --init

いくつかの質問に答えると、プロジェクトに合った設定ファイルが自動生成されます。質問の内容は「構文チェックだけにするか」「フレームワークは何を使うか」「TypeScript を使うか」といったものです。

基本的な使い方

コマンドラインで実行する

# 特定のファイルをチェック
npx eslint src/index.js

# src ディレクトリ配下をまとめてチェック
npx eslint "src/**/*.{js,ts,jsx,tsx}"

# 自動修正できるものは修正する
npx eslint --fix "src/**/*.{js,ts,jsx,tsx}"

--fix を付けると、ルールに応じて自動修正が行われます。ただし、すべてのエラーが自動修正できるわけではありません。手動で直す必要があるものはターミナルに表示されます。

VS Code でリアルタイムにチェックする

1. 拡張機能「ESLint」をインストール

2. settings.json に以下を追加（保存時に自動修正する場合）

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

これでファイルを保存するたびに、修正可能なエラーが自動的に直されます。

設定ファイルの書き方

ESLint v9 以降では eslint.config.js（Flat Config）が標準の設定形式になっています。

import js from "@eslint/js";

export default [
  js.configs.recommended,
  {
    rules: {
      "no-unused-vars": "warn",
      "no-console": "off",
      "eqeqeq": "error",
    },
  },
];

ルールの重要度は3段階

値 意味 "off" または 0 ルールを無効にする "warn" または 1 警告として表示する（ビルドは止まらない） "error" または 2 エラーとして表示する（CI を落とす用途に便利）

よく使うルールの例

ルール名 説明 no-unused-vars 使っていない変数を検出 no-undef 未定義の変数の使用を検出 eqeqeq == ではなく === の使用を強制 no-console console.log の残し忘れを検出 curly if 文などで中括弧の省略を禁止 no-var var の代わりに let / const を強制 prefer-const 再代入がない変数に const の使用を推奨

ルールの全一覧は ESLint の公式ドキュメント（Rules Reference）で確認できます。

共有設定（Shareable Config）を使う

ルールを一つずつ設定するのは大変です。実際の開発では、あらかじめルールがまとまった共有設定パッケージを使うのが一般的です。

# 例：eslint-config-airbnb-base を導入
npm install --save-dev eslint-config-airbnb-base

import airbnbBase from "eslint-config-airbnb-base";

export default [
  ...airbnbBase,
  {
    rules: {
      // プロジェクト固有の上書き
      "no-console": "off",
    },
  },
];

チームやプロジェクトの方針に合った共有設定を選び、必要な部分だけ上書きするのがおすすめです。

TypeScript で使う場合

TypeScript プロジェクトでは typescript-eslint を追加します。

npm install --save-dev typescript-eslint

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

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
);

これで TypeScript 固有のルール（型に関するチェックなど）も有効になります。

特定のファイルを除外する

チェック対象から除外したいファイルは、設定ファイル内の ignores で指定します。

export default [
  {
    ignores: ["dist/", "build/", "node_modules/", "*.min.js"],
  },
  // ...その他の設定
];

Prettier との併用

ESLint と Prettier を同時に使うと、フォーマット系のルールが競合することがあります。eslint-config-prettier を導入して、ESLint 側のフォーマット系ルールを無効化しましょう。

npm install --save-dev eslint-config-prettier

import js from "@eslint/js";
import prettierConfig from "eslint-config-prettier";

export default [
  js.configs.recommended,
  prettierConfig,
  {
    rules: {
      // プロジェクト固有のルール
    },
  },
];

こうすることで、見た目の整形は Prettier に、コード品質のチェックは ESLint に、と役割をきれいに分担できます。

package.json にスクリプトを登録する

よく使うコマンドは package.json にまとめておきましょう。

{
  "scripts": {
    "lint": "eslint \"src/**/*.{js,ts,jsx,tsx}\"",
    "lint:fix": "eslint --fix \"src/**/*.{js,ts,jsx,tsx}\""
  }
}

# チェックのみ
npm run lint

# 自動修正付き
npm run lint:fix

まとめ

ESLint を導入するメリットを改めて整理すると、次の3点です。

1. バグを未然に防げる ― 実行前にコードの問題を検出してくれる

2. チーム全体でコード品質を統一できる ― 共有設定でルールを揃えられる

3. Prettier と組み合わせれば最強 ― 見た目と品質の両方を自動で管理できる

Prettier の記事と合わせて、ぜひプロジェクトへの導入を検討してみてください。「動くコード」から「良いコード」へ、ESLint が後押ししてくれるはずです。