エンジニアなら誰しも経験があるはず。夜中に渾身のコードを書き上げ、いざ動かしてみたらインデントがガタガタ、変数名のスペルミス、未使用の変数だらけ…そんな経験、ありますよね？ 完璧な人間なんていませんから、コードの品質を維持するためには、ツールに頼るのが一番賢い選択です。
スタンフォード大学の研究によると、コードレビューにおける人的ミスは、平均して15%に達することが報告されています。つまり、人間の目だけでは見落としてしまうバグや非効率な部分が存在するということです。だからこそ、静的解析ツールの導入は、AI開発における品質向上、ひいては開発効率向上に不可欠なのです。
そこで今回は、JavaScript/TypeScript開発において非常に重要な静的解析ツールであるESLintとPrettierを徹底的に比較します。それぞれの特徴、メリット・デメリット、設定方法、そして実際の使用例を、2026年時点での最新情報に基づいて解説します。
※この記事にはPRが含まれます
ESLint vs Prettier：静的解析ツールの基礎知識
静的解析ツールとは？
静的解析ツールは、プログラムを実行せずにソースコードを解析し、潜在的なバグ、コーディング規約違反、セキュリティ上の脆弱性などを検出するツールです。コードの品質を向上させ、開発効率を高めるために役立ちます。近年、AIによる解析精度の向上により、より高度なチェックが可能になっています。
ESLintとは？
ESLintは、JavaScript/TypeScriptのコードを解析し、コーディング規約や潜在的なエラーを検出するためのツールです。設定ファイル（.eslintrc.jsなど）でルールを定義し、それに違反するコードを指摘します。ESLintの最大の強みは、カスタマイズ性の高さです。プロジェクトごとに異なるコーディング規約に対応できます。
例えば、Reactプロジェクトであれば、`eslint-plugin-react`を導入することで、JSXの書き方に関するルールを適用できます。
Prettierとは？
Prettierは、コードのフォーマットを自動で行うツールです。インデント、空白、改行などを自動的に調整し、コードの見た目を統一します。ESLintとは異なり、コーディング規約の違反を検出する機能はありません。Prettierの目的は、コードの見た目を美しく保ち、可読性を向上させることです。設定ファイル（.prettierrc.jsなど）でフォーマットルールを定義します。
例えば、1行の文字数を80文字に制限したり、シングルクォートを使用したりするルールを設定できます。
ESLintとPrettierの連携：最強のコード品質保証
なぜESLintとPrettierを連携させるべきか？
ESLintとPrettierは、それぞれ異なる役割を持っています。ESLintはコードの品質をチェックし、Prettierはコードのフォーマットを整えます。この2つを連携させることで、コードの品質と見た目を両方とも向上させることができます。具体的には、以下のメリットがあります。
- 一貫性のあるコードスタイルを維持できる
- 潜在的なバグを早期に発見できる
- コードレビューの時間を短縮できる
- 開発チーム全体のコード品質を底上げできる
ESLintとPrettierの連携方法
ESLintとPrettierを連携させるには、いくつかの設定が必要です。ここでは、一般的な連携方法を解説します。
- 必要なパッケージをインストールする
npm install --save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier - ESLintの設定ファイル（.eslintrc.js）を編集する
module.exports = { extends: [ 'eslint:recommended', 'plugin:react/recommended', 'plugin:prettier/recommended' // Prettierとの連携を有効にする ], plugins: [ 'react', 'prettier' // Prettierプラグインを追加 ], rules: { 'prettier/prettier': 'error' // Prettierのルールに違反した場合にエラーを出す } }; - Prettierの設定ファイル（.prettierrc.js）を編集する
module.exports = { semi: false, // セミコロンを削除する singleQuote: true, // シングルクォートを使用する trailingComma: 'all', // 最後にカンマを付ける printWidth: 80, // 1行の文字数を80文字に制限する }; - package.jsonにスクリプトを追加する
{ "scripts": { "lint": "eslint . --ext .js,.jsx,.ts,.tsx", "format": "prettier --write ." } }
上記の設定を行うことで、`npm run lint`コマンドでESLintによるコードチェック、`npm run format`コマンドでPrettierによるコードフォーマットを実行できます。
ESLintとPrettierの具体的な使用例
ESLintの使用例：no-unused-varsルール
ESLintの`no-unused-vars`ルールは、未使用の変数を検出するためのルールです。例えば、以下のコードは`unusedVariable`という未使用の変数が定義されているため、ESLintによってエラーが検出されます。
const unusedVariable = 123;
console.log('Hello, world!');
このルールを有効にすることで、無駄な変数定義を防ぎ、コードの可読性を向上させることができます。
Prettierの使用例：インデントの自動調整
Prettierは、コードのインデントを自動的に調整します。例えば、以下のコードはインデントがバラバラですが、Prettierを実行することで、自動的に正しいインデントに修正されます。
function myFunction() {
if (true) {
console.log('Hello');
}
}
Prettierを実行後：
function myFunction() {
if (true) {
console.log('Hello');
}
}
このように、Prettierはコードの見た目を自動的に整え、可読性を向上させます。
ESLintとPrettierの最新トレンド：AIによるルール提案
近年、ESLintとPrettierは、AI技術を活用した新しい機能が開発されています。例えば、AIがソースコードを解析し、プロジェクトに最適なESLintルールを提案する機能や、Prettierによるフォーマット設定を自動的に調整する機能などが登場しています。これらの機能を利用することで、より効率的にコード品質を向上させることができます。
2026年現在、ESLintとPrettierの公式プラグインとして、AIによるルール提案機能が試験的に導入されており、今後の発展が期待されています。
まとめ：ESLintとPrettierでコード品質を向上させよう
今回は、静的解析ツールであるESLintとPrettierについて、その特徴、連携方法、使用例、そして最新トレンドを解説しました。ESLintとPrettierを効果的に活用することで、コードの品質を向上させ、開発効率を高めることができます。ぜひ、あなたのプロジェクトにも導入してみてください。
AI技術の進化により、静的解析ツールはますます高度化していくことが予想されます。常に最新情報をキャッチアップし、より効果的なツール活用を目指しましょう。
