ESLintとは？JavaScript・TypeScriptの品質を保つための必須ツール

フロントエンド開発•2025/1/24

はじめに

皆さんはJavaScriptやTypeScriptでコードを書くときに、ちょっとしたミスを見逃してしまった経験はありませんか。思いがけないスペルミスや、コーディングスタイルのばらつきが原因でバグを引き起こすことは、意外と多いものです。

そんなときに役立つのが ESLint です。 ESLintはJavaScriptやTypeScriptのコードを静的解析し、バグやスタイルの乱れを早期に発見するための仕組みを提供します。チーム開発でも重宝されるこのツールは、コードレビューの負担を軽減し、メンバー間で統一されたコーディングスタイルを確立するうえで重要な存在となっています。

本記事では、ESLintの概要や導入の流れ、実務での活用シーンを中心に解説します。皆さんのプロジェクトにESLintを取り入れることで、コード品質を高めるきっかけになれば嬉しいですね。

ESLintとは何か

ESLintはJavaScriptやTypeScriptで書かれたコードを検証し、文法エラーやスタイル違反などを警告・エラーとして教えてくれるツールです。プログラムが実行される前に問題点を指摘してくれるため、開発の早い段階でバグや書式の不整合を修正できます。

同様の機能を持つツールはいくつか存在しますが、ESLintはルール設定の柔軟性が高いことが特徴です。プロジェクトの方針やチームの好みに合わせてルールをカスタマイズしやすく、コミュニティの提供するプラグインも多彩です。 React向けのルールセットやTypeScript用のプラグインなどを導入することで、フロントエンドからサーバーサイドまで幅広く適用できるのが魅力です。

一方で、過度に厳しいルールを設定すると警告が多発してしまい、開発効率を下げる要因になることもあります。そのため、実際には必要十分な範囲でルールを作り込み、チーム全体で守りやすいスタイルを定義しておくと良いでしょう。

なぜESLintが必要なのか

開発現場では、コードを書けば書くほどミスが生まれるリスクが高まります。特にJavaScriptやTypeScriptは動的に動く部分があるため、気付きにくいエラーがあとから大きな不具合につながることも考えられます。そこでESLintを導入しておくと、以下のようなメリットが得られます。

細かなミスの早期発見
書き忘れや書式のズレを即座に警告
チームメンバー全員が同じスタイルでコードを書ける

コードが統一されると、レビューがしやすくなり、保守性も上がります。さらに、エディタと連携すればリアルタイムに警告を表示してくれるため、修正の手間を最小限に抑えることが可能です。こうした理由から、実務ではESLintを標準的に導入するケースが増えています。

実務での活用シーン

ESLintは個人開発だけでなく、チーム開発でも活躍します。実務では、以下のような場面で特に重宝されるでしょう。

1. コードレビューの効率化

自動でスタイルや文法エラーを検知するため、コードレビューではロジックの妥当性などに集中できます。

2. チームルールの管理

たとえば変数名の命名規則を統一したり、使用を避けたい構文を禁止したりといった形で、チームの規約をコード上で enforce できます。

3. 複数プロジェクトでの一貫性

同じルールセットをベースに運用すれば、異なるプロジェクトでも混乱しにくくなります。大規模な組織で複数の開発チームが動いている場合でも、共通のルールを共有しやすいです。

プルリクエストを出した時点でESLintが警告を出すように設定しておけば、問題のあるコードが本番に混ざるリスクを減らせます。また、プロジェクトの規模が大きくなるほど、ルールの徹底は開発の円滑化に役立つはずです。

ESLintの導入と基本的な使い方

ESLintを使い始めるための手順はシンプルです。 Node.jsがインストールされている環境で、まずはパッケージをインストールします。


npm install eslint --save-dev

その後、初期設定を行うために、下記のようにコマンドを実行します。


npx eslint --init

対話形式で以下のような質問が表示されるため、プロジェクトに合ったオプションを選択しましょう。

今回のコードがどの環境で動作するか（ブラウザ、Node.jsなど）
JavaScript以外にTypeScriptを使うか
どのスタイルガイドをベースにするか

完了すると「.eslintrc.js」や「.eslintrc.json」などのファイルが生成され、ここでカスタマイズができるようになります。

生成された設定ファイルがこちらのようなイメージです（JSON形式の場合）:


{
  "env": {
    "browser": true,
    "node": true,
    "es2023": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "no-unused-vars": "warn",
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

この設定では、ブラウザとNode.jsの両方で実行されることを想定し、最新のECMAScript仕様に合わせています。あとはコマンドラインで npx eslint . のように実行すれば、プロジェクト配下のファイルをチェックしてくれます。

ルールを厳しくし過ぎると警告やエラーが多くなり、かえって修正に時間がかかってしまうケースもあります。はじめは標準的な推奨ルール（eslint:recommendedなど）を導入し、徐々にプロジェクトに合った設定を追加する方法がおすすめです。

TypeScriptを含めた設定例

JavaScriptだけでなく、TypeScriptのコードにもESLintを適用すると、型の不一致や書式の乱れを早期に発見できます。 TypeScriptを含めた設定を行うには、追加で公式のプラグインやパーサーを導入しましょう。


npm install --save-dev typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

設定ファイルには、以下のように追記します。


{
  "env": {
    "browser": true,
    "node": true,
    "es2023": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "rules": {
    "no-unused-vars": "warn",
    "semi": ["error", "always"],
    "quotes": ["error", "double"],
    "@typescript-eslint/no-explicit-any": "warn"
  }
}

ここでは plugin:@typescript-eslint/recommended を利用して、TypeScript特有のルールを有効化しています。また "parser": "@typescript-eslint/parser" を設定することで、TypeScriptの文法を正しく解析できるようになります。

この設定を適用すれば、単なる文法ミスだけでなく、型に対する誤った使い方も検知してくれるでしょう。特に複数人でTypeScriptを使う場合は、型関連の警告を見逃さないので役立ちます。

CI/CDでの活用方法

ESLintはローカルだけでなく、CI/CDパイプラインに組み込んで自動チェックを行うことも一般的です。これによって、コードをリポジトリにプッシュした時点でスタイル違反やエラーを検出できます。

たとえばGitHub Actionsを使う場合は、ワークフローファイルを以下のように設定します。


name: Lint Check

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  lint:
    runs-on: ubuntu-latest

    steps:
      - name: Check out repository
        uses: actions/checkout@v2

      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Run ESLint
        run: npx eslint .

この例では、mainブランチへのプッシュやプルリクエストが作成されたタイミングでESLintが走ります。もしルール違反があれば警告やエラーを出し、早い段階で修正を促せるので安心です。

CI/CDにESLintを組み込むと、ローカル環境では見落としていた細かな違反も防げます。チーム全員が同じレベルの品質チェックを受けるため、コードの統一感が保ちやすくなります。

まとめ

ESLintは、JavaScriptやTypeScriptの開発においてコードの品質を確保するための大きな助けとなります。導入することで、文法エラーやスタイルの不整合が見つかりやすくなり、チーム全体のコーディングルールも守りやすくなるでしょう。

特に複数人で作業するときは、コーディングスタイルやルールのすり合わせを明確化することが大切です。 ESLintとプラグインを組み合わせれば、初心者の皆さんでもスムーズに統一ルールを導入しやすくなります。

初期設定は eslint:recommended や plugin:@typescript-eslint/recommended などをベースにすると、必要なルールをひと通りカバーできます。それを土台にプロジェクト特有のルールを少しずつ追加すれば、扱いやすさと整合性を両立できるはずです。

コードをビルドする前に問題点を洗い出し、チーム全員が見やすく、保守しやすいコードを書くための仕組みとして、ESLintは強い味方になります。ぜひ皆さんの開発フローに取り入れてみてはいかがでしょうか。