お問い合わせ
お問い合わせ
ホーム > JavaScript > ESLintとは？JavaScriptのコード品質を向上させるツール

ESLintとは？JavaScriptのコード品質を向上させるツール

JavaScript
ESLintによるJavaScriptコードの静的解析と品質向上をイメージしたイラスト
ESLintは、JavaScriptやTypeScriptのコードを解析し、エラーやルール違反を検出することで、保守性と品質の高い開発を支援する静的解析ツールです。

JavaScriptの開発では、文法ミスや書き方のばらつきによって、予期しない不具合や保守性の低下が発生することがあります。

そのような問題を未然に防ぐために利用されているのが「ESLint」です。

ESLintを導入すると、コードの誤りやルール違反を自動的に検出できるため、品質の高いコードを維持しやすくなります。

この記事では、ESLintの基本から導入方法、よく使われるルール、Prettierとの違いまでをわかりやすく解説します。

ESLintとは

ESLint（エスリント）は、JavaScriptやTypeScriptのコードを解析し、文法エラーやコーディングルール違反を検出する静的解析ツールです。

コードを実行する前に問題を発見できるため、バグの予防やコード品質の向上に役立ちます。

ESLintには以下のような特徴があります。

  • 文法エラーを検出できる
  • 不要なコードを発見できる
  • コーディングスタイルを統一できる
  • 自動修正機能を利用できる
  • チーム開発でルールを共有できる

JavaScriptの基本から学びたい場合は、

「JavaScriptの基本と仕組みを理解する」

も参考になります。

なぜESLintが必要なのか

JavaScriptは自由度の高い言語であるため、人によって書き方が異なります。

例えば、次のような問題が起こりやすくなります。

  • セミコロンの有無が統一されていない
  • インデントがバラバラになっている
  • 使用していない変数が残っている
  • 間違った書き方をしている

このような問題を放置すると、コードの可読性や保守性が低下します。

ESLintを導入することで、統一されたルールに従ってコードを書けるようになり、ミスの削減にもつながります。

ESLintでできること

文法エラーを検出する

ESLintは、未定義の変数などの問題を検出できます。

console.log(userName);

上記のコードでは、userName が定義されていない場合、エラーとして検出されます。

未使用の変数を検出する

使われていない変数も警告として表示できます。

const message = "Hello";

変数を定義しただけで利用していない場合、

「定義されているが使用されていない」

という警告が表示されます。

コーディングルールを統一する

ESLintでは、次のようなルールを設定できます。

  • シングルクォーテーションを使う
  • セミコロンを付ける
  • インデントを2文字にする
  • 改行位置を統一する

複数人で開発する場合でも、コードの書き方を統一しやすくなります。

自動修正を行う

ESLintは修正可能な問題を自動で修正できます。

npx eslint . --fix

このコマンドを実行すると、ルール違反の一部を自動的に修正できます。

ESLintのインストール方法

ESLintを利用するには、Node.js環境が必要です。

Node.jsやnpmについては、

もあわせて読むと理解しやすくなります。

ESLintをインストールする

まず、ESLintを開発用パッケージとしてインストールします。

npm install --save-dev eslint

初期設定を行う

続いて、設定ファイルを作成します。

npx eslint --init

質問に回答すると、プロジェクトに合わせた設定ファイルが生成されます。

eslint.config.jsとは

ESLint v9以降では、eslint.config.js を利用するFlat Config形式が標準になっています。

基本的な設定は以下のようになります。

import js from "@eslint/js";

export default [
  js.configs.recommended
];

この設定では、ESLintの推奨ルールが有効になります。

よく使われるルール

no-unused-vars

使用していない変数を検出するルールです。

const name = "Tom";

console.log("Hello");

この場合、name は使われていないため警告が表示されます。

semi

セミコロンの有無を統一するルールです。

const message = "Hello";

quotes

引用符を統一するルールです。

const text = "JavaScript";

indent

インデントを統一するルールです。

function hello() {
  console.log("Hello");
}

ESLintとPrettierの違い

ESLintと混同されやすいのがPrettierです。

それぞれ役割が異なります。

ツール主な役割
ESLintエラー検出・品質向上
Prettierコード整形

一般的には、

  1. ESLintで問題を検出する
  2. Prettierでコードを整形する

という組み合わせで利用されます。

Prettierについては、

「Prettierとは？コードを自動整形する便利ツールを解説」

も参考になります。

VS CodeでESLintを使う方法

Visual Studio Codeでは、ESLint拡張機能を導入することで、コードを書きながらリアルタイムにエラーを確認できます。

導入手順は以下の通りです。

  1. 拡張機能を開く
  2. 「ESLint」を検索する
  3. インストールする
  4. VS Codeを再起動する

エラーが即座に表示されるため、効率よく開発を進められます。

VS Codeの基本操作については、

もあわせて読むと便利です。

ESLintを導入するメリット

ESLintを導入することで、以下のようなメリットがあります。

  • バグを未然に防げる
  • コード品質が向上する
  • 可読性が向上する
  • コードレビューの負担を減らせる
  • チーム全体でルールを統一できる
  • 保守しやすいコードになる

個人開発からチーム開発まで幅広く利用されています。

まとめ

ESLintは、JavaScriptやTypeScriptのコード品質を向上させるための静的解析ツールです。

文法エラーや不要なコードを自動で検出できるため、バグの予防や保守性の向上につながります。

また、自動修正機能やVS Codeとの連携によって、効率的な開発環境を構築できます。

JavaScript開発を行う場合は、早い段階からESLintを導入しておくことで、読みやすく品質の高いコードを書きやすくなります。

関連記事