LoginSignup
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@tseno

ESLint/Prettierで始めるコード品質管理 - チーム開発を効率化する設定とベストプラクティス

Last updated at Posted at 2025-07-03

はじめに

チーム開発において、コードの品質と統一性は重要な課題です。ESLintとPrettierを適切に設定することで、バグの早期発見、コードの可読性向上、そして開発チーム全体の生産性向上を実現できます。

この記事では、ESLintとPrettierの基本的な設定から、実際のプロジェクトで使える実践的な設定例まで、段階的に解説していきます。

ESLintとPrettierの役割

ESLint：コード品質の番人

  • 静的解析ツールとして、コードの潜在的な問題を検出
  • バグの原因となりやすいパターンの発見
  • チーム内でのコーディング規約の統一
  • カスタムルールによる柔軟な品質管理

Prettier：コードフォーマットの統一

  • コードフォーマッターとして、見た目の統一
  • インデント、改行、スペースの自動調整
  • 開発者間でのコードスタイルの違いを解消
  • 保存時の自動フォーマットで効率化

環境構築

必要なパッケージのインストール

ESLintとPrettierを効果的に使用するため、プロジェクトの種類に応じて必要なパッケージを段階的にインストールします。

1. 基本パッケージ

# ESLintとPrettierの本体
npm install --save-dev eslint prettier

各パッケージの役割：

  • eslint: JavaScript/TypeScriptのコード解析・品質チェックツール
  • prettier: コードフォーマッター（見た目の統一）

--save-devを使う理由：

  • 開発時のみ必要なツール（本番環境では不要）
  • devDependenciesに追加され、npm install --productionでは除外される

2. TypeScriptプロジェクトの場合

# TypeScript用のパーサーとルールセット
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

各パッケージの詳細：

@typescript-eslint/parser:

  • TypeScriptのコードをESLintが理解できる形式に変換
  • .ts、.tsxファイルの構文解析を担当
  • 型情報も含めた解析が可能

@typescript-eslint/eslint-plugin:

  • TypeScript特有のルールセットを提供
  • 例：@typescript-eslint/no-unused-vars、@typescript-eslint/no-explicit-any
  • 100以上のTypeScript専用ルールを含む

3. Reactプロジェクトの場合

# React用のルールセット
npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks

各パッケージの詳細：

eslint-plugin-react:

  • React特有のルールセットを提供
  • JSX構文のチェック
  • Reactのベストプラクティス強制

eslint-plugin-react-hooks:

  • React Hooks専用のルールセット
  • Hooksの使用ルール強制（重要！）

4. ESLintとPrettierの統合

# ESLintとPrettierの競合を解決し、統合する
npm install --save-dev eslint-config-prettier eslint-plugin-prettier

各パッケージの詳細：

eslint-config-prettier:

  • ESLintのフォーマット関連ルールを無効化
  • Prettierと競合するESLintルールを自動的に無効化
  • 重要: extends配列で最後に指定する必要がある

eslint-plugin-prettier:

  • PrettierをESLintルールとして実行
  • Prettierのフォーマット結果と異なる場合にESLintエラーを発生
  • 保存時にESLintの自動修正でPrettierが実行される

インストール方法の選択

おすすめ：段階的インストール

# 1. 基本パッケージから始める
npm install --save-dev eslint prettier

# 2. プロジェクトに応じて追加
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

# 3. 必要に応じてReactサポートを追加
npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks

# 4. 最後に統合パッケージを追加
npm install --save-dev eslint-config-prettier eslint-plugin-prettier

段階的インストールの利点：

  • 理解しやすい：各パッケージの役割を理解しながら進められる
  • トラブル対応：問題が発生した場合に原因を特定しやすい
  • 必要最小限：不要なパッケージを入れずに済む
  • 学習効果：依存関係や設定の仕組みを理解できる

一括インストール（経験者向け）

# React + TypeScript プロジェクトの場合
npm install --save-dev eslint prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier

推奨アプローチ：

  • 初回導入時：段階的インストールで理解を深める
  • 経験者：一括インストールで効率化
  • チーム導入：段階的にルールを追加してチーム全体で慣れる

インストール後の確認：

# インストールされたパッケージの確認
npm list --depth=0 --dev

# ESLintが正常に動作するか確認
npx eslint --version

# Prettierが正常に動作するか確認
npx prettier --version

インストール時の注意点：

  • 段階的導入：基本パッケージから始めて、必要に応じて追加
  • バージョン互換性：各パッケージのバージョンが互換性を持つか確認
  • プロジェクト特性：不要なパッケージは入れない（例：React使わないならeslint-plugin-react不要）

5. 全部まとめてインストール

# 一括インストール例（React + TypeScript プロジェクト）
npm install --save-dev \
  eslint prettier \
  @typescript-eslint/parser @typescript-eslint/eslint-plugin \
  eslint-plugin-react eslint-plugin-react-hooks \
  eslint-config-prettier eslint-plugin-prettier

6. インストール後の確認

# インストールされたパッケージの確認
npm list --depth=0 --dev

# ESLintが正常に動作するか確認
npx eslint --version

# Prettierが正常に動作するか確認
npx prettier --version

インストール時の注意点：

  • パッケージの順序: 依存関係を考慮した順序でインストール
  • バージョン互換性: 各パッケージのバージョンが互換性を持つか確認
  • プロジェクトタイプ: 不要なパッケージは入れない（例：React使わないならeslint-plugin-react不要）

基本設定ファイル

設定ファイルの配置場所

プロジェクトのディレクトリ構造:

my-project/
├── package.json
├── eslint.config.js          # ESLint v9以降の設定ファイル
├── .eslintrc.js             # ESLint v8以前の設定ファイル（非推奨）
├── .prettierrc              # Prettierの設定ファイル
├── .prettierignore          # Prettierが無視するファイル
├── .eslintignore            # ESLintが無視するファイル
├── src/
│   ├── index.js
│   ├── components/
│   └── utils/
├── tests/
├── node_modules/
└── README.md

設定ファイルの役割:

  • eslint.config.js: ESLintの動作を制御する設定ファイル（プロジェクトルートに配置）
  • .prettierrc: Prettierのフォーマット規則を定義するファイル（プロジェクトルートに配置）
  • .eslintignore: ESLintがチェックしないファイル・ディレクトリを指定
  • .prettierignore: Prettierがフォーマットしないファイル・ディレクトリを指定

ESLint v9以降：Flat Config（推奨）

eslint.config.jsを作成：

// ESLint v9の新しい設定形式（Flat Config）
import js from '@eslint/js';
import prettier from 'eslint-config-prettier';
import prettierPlugin from 'eslint-plugin-prettier';
import typescriptEslint from '@typescript-eslint/eslint-plugin';
import typescriptParser from '@typescript-eslint/parser';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';

export default [
  // JavaScript基本設定（ESLint推奨ルールを適用）
  js.configs.recommended,
  
  // TypeScript用の設定
  {
    // 対象ファイルを指定（TypeScriptファイルのみ）
    files: ['**/*.{ts,tsx}'],
    
    // 言語パーサーの設定
    languageOptions: {
      parser: typescriptParser,        // TypeScriptパーサーを使用
      parserOptions: {
        ecmaVersion: 2021,             // ECMAScript 2021の機能を使用
        sourceType: 'module',          // ES Modulesを使用
        ecmaFeatures: {
          jsx: true,                   // JSX構文を有効化
        },
      },
    },
    
    // 使用するプラグインを登録
    plugins: {
      '@typescript-eslint': typescriptEslint,  // TypeScript用ルール
      'prettier': prettierPlugin,              // Prettier統合
      'react': react,                          // React用ルール
      'react-hooks': reactHooks,               // React Hooks用ルール
    },
    
    // 適用するルールの設定
    rules: {
      // TypeScriptの推奨ルールを適用
      ...typescriptEslint.configs.recommended.rules,
      
      // Prettierのフォーマット違反をエラーとして扱う
      'prettier/prettier': 'error',
      
      // 未使用変数をエラー扱い（_で始まる変数は除外）
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
      
      // React 17+では不要なルールを無効化
      'react/react-in-jsx-scope': 'off',
      'react/prop-types': 'off',
      
      // React Hooks関連のルール
      'react-hooks/rules-of-hooks': 'error',        // Hooksの呼び出しルールを強制
      'react-hooks/exhaustive-deps': 'warn',        // useEffectの依存配列をチェック
    },
    
    // React関連の設定
    settings: {
      react: {
        version: 'detect',          // Reactバージョンを自動検出
        runtime: 'automatic',       // React 17+の新JSX Transformを使用
      },
    },
  },
  
  // Prettier設定（必ず最後に配置してフォーマット競合を回避）
  prettier,
];

Flat Configの特徴：

  • ESモジュール形式：import/exportを使用した現代的な書き方
  • 配列ベース：設定を配列で管理し、順序で優先度を制御
  • より直感的：設定の構造が分かりやすい
  • 将来性：ESLint v9以降の標準形式

設定形式の選択指針

ESLint v9以降を使用する場合：

  • Flat Config（eslint.config.js）を使用することを強く推奨
  • より直感的で保守しやすい設定
  • 将来的な互換性を考慮

ESLintバージョンの確認：

# ESLintのバージョンを確認
npx eslint --version

# v9.0.0以降ならFlat Configを推奨

Prettierの設定ファイル

.prettierrcとは、Prettierのフォーマット規則を定義する設定ファイルです。

Prettierとは：

  • 自動コードフォーマッター：コードの見た目を統一するツール
  • 設定可能：インデント、クォート、改行などのスタイルをカスタマイズ
  • 言語対応：JavaScript、TypeScript、CSS、HTML、JSON等に対応

.prettierrcファイル形式：

{
  "semi": true,              // 文末にセミコロンを追加
  "trailingComma": "es5",    // ES5で有効な場所に末尾カンマを追加
  "singleQuote": true,       // シングルクォートを使用
  "printWidth": 80,          // 1行の最大文字数を80文字に制限
  "tabWidth": 2,             // インデントを2スペースに設定
  "useTabs": false,          // タブではなくスペースを使用
  "endOfLine": "lf"          // 改行コードをLF（Unix形式）に統一
}

各設定項目の詳細：

  • semi: セミコロンの有無（true=つける、false=つけない）
  • trailingComma: 末尾カンマ（"es5"=ES5準拠、"all"=すべて、"none"=なし）
  • singleQuote: クォートの種類（true=シングル、false=ダブル）
  • printWidth: 1行の最大文字数（推奨：80-120文字）
  • tabWidth: インデントの幅（推奨：2または4スペース）
  • useTabs: インデント方法（true=タブ、false=スペース）
  • endOfLine: 改行コード（"lf"=Unix、"crlf"=Windows、"auto"=自動）

.prettierrcの他の形式：

// prettier.config.js（JavaScript形式）
module.exports = {
  semi: true,
  trailingComma: 'es5',
  singleQuote: true,
};

// package.jsonに埋め込み
{
  "name": "my-project",
  "prettier": {
    "semi": true,
    "singleQuote": true
  }
}

実践的な設定例

チーム開発向けのESLint設定

以下は実際のプロジェクトで使用している、より詳細な設定例です：

eslint.config.js:

// チーム開発向けの詳細なESLint設定（Flat Config形式）
import js from '@eslint/js';
import prettierConfig from 'eslint-config-prettier';
import prettierPlugin from 'eslint-plugin-prettier';
import typescriptEslint from '@typescript-eslint/eslint-plugin';
import typescriptParser from '@typescript-eslint/parser';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';

export default [
  // JavaScript基本設定
  js.configs.recommended,
  
  // TypeScript + React設定
  {
    files: ['**/*.{js,jsx,ts,tsx}'],
    
    languageOptions: {
      parser: typescriptParser,
      parserOptions: {
        ecmaVersion: 2021,
        sourceType: 'module',
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    
    plugins: {
      '@typescript-eslint': typescriptEslint,
      prettier: prettierPlugin,
      react: react,
      'react-hooks': reactHooks,
    },
    
    rules: {
      // === コード品質に関するルール ===
      // console.logを警告レベルに（本番前に削除推奨）
      'no-console': 'warn',
      
      // debuggerステートメントを禁止（本番環境で問題となるため）
      'no-debugger': 'error',
      
      // 基本の未使用変数ルールをオフ（TypeScriptルールを使用）
      'no-unused-vars': 'off',
      
      // TypeScriptの未使用変数チェック（_から始まる変数は除外）
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
      
      // === 可読性向上のルール ===
      // 再代入されない変数はconstを強制
      'prefer-const': 'error',
      
      // varの使用を禁止（letまたはconstを使用）
      'no-var': 'error',
      
      // オブジェクトのプロパティ短縮記法を強制
      'object-shorthand': 'error',
      
      // === React固有のルール ===
      // React 17+では不要なルールを無効化
      'react/jsx-uses-react': 'off',
      'react/react-in-jsx-scope': 'off',
      
      // Hooksのルールを強制
      'react-hooks/rules-of-hooks': 'error',
      
      // useEffectの依存配列を警告
      'react-hooks/exhaustive-deps': 'warn',
      
      // === TypeScript固有のルール ===
      // 戻り値の型定義を任意に
      '@typescript-eslint/explicit-module-boundary-types': 'off',
      
      // any型の使用を警告
      '@typescript-eslint/no-explicit-any': 'warn',
      
      // ?? 演算子の使用を推奨
      '@typescript-eslint/prefer-nullish-coalescing': 'error',
      
      // ?. 演算子の使用を推奨
      '@typescript-eslint/prefer-optional-chain': 'error',
      
      // === Prettier統合 ===
      // Prettierルール違反をエラー扱い
      'prettier/prettier': 'error',
    },
    
    settings: {
      react: {
        version: 'detect',
        runtime: 'automatic',
      },
    },
  },
  
  // Prettier設定（必ず最後に配置）
  prettierConfig,
];

設定の意図：

  • 段階的な導入：warnから始めて、チームが慣れてからerrorに変更
  • TypeScript重視：型安全性を高めるルールを積極的に採用
  • React最新仕様対応：React 17+の新JSX Transformに対応
  • 実用性重視：厳しすぎるルールは避け、開発効率を重視

プロジェクト別Prettier設定

フロントエンド向け

{
  "semi": true,              // TypeScriptとの相性を考慮してセミコロンを使用
  "trailingComma": "es5",    // 古いブラウザ対応のためES5準拠
  "singleQuote": true,       // JSXの属性との区別を明確化
  "printWidth": 100,         // モダンなモニターサイズに合わせて拡張
  "tabWidth": 2,             // フロントエンドの標準的なインデント
  "useTabs": false,          // チーム間でのタブ設定の違いを避ける
  "endOfLine": "lf",         // Gitでの改行コード問題を回避
  "arrowParens": "avoid",    // 単一引数の場合は括弧を省略してスッキリ
  "bracketSpacing": true,    // オブジェクトの可読性を向上
  "jsxSingleQuote": true     // JSXでもシングルクォートで統一
}

フロントエンド設定の特徴：

  • 可読性重視：100文字まで許可してコードの分割を減らす
  • JSX対応：React開発に最適化した設定
  • ブラウザ互換性：ES5準拠の末尾カンマで古いブラウザに対応

Node.js/サーバーサイド向け

{
  "semi": true,              // サーバーサイドでは明確な文の終了を重視
  "trailingComma": "all",    // Node.jsは新しいためES2017+の末尾カンマを活用
  "singleQuote": true,       // 文字列の統一性を保つ
  "printWidth": 120,         // サーバーサイドでは長い行も許可
  "tabWidth": 2,             // 標準的なインデント
  "useTabs": false,          // スペースで統一
  "endOfLine": "lf"          // Unix系サーバーの標準改行コード
}

サーバーサイド設定の特徴：

  • 高密度コード：120文字まで許可してファイルサイズを削減
  • モダンJS活用：新しいNode.jsの機能を最大限活用
  • サーバー環境最適化：Unix系環境に最適化した設定

VS Code統合設定

settings.json

{
  // デフォルトのフォーマッターをPrettierに設定
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  // ファイル保存時に自動でフォーマットを実行
  "editor.formatOnSave": true,
  
  // 保存時にESLintで修正可能なエラーを自動修正
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  
  // ESLintを適用するファイルタイプを指定
  "eslint.validate": [
    "javascript",      // .js ファイル
    "javascriptreact", // .jsx ファイル
    "typescript",      // .ts ファイル
    "typescriptreact"  // .tsx ファイル
  ]
}

VS Code設定の効果：

  • 自動化：保存するだけでフォーマット＋ESLint修正が実行
  • リアルタイム：コーディング中にエラーが即座に表示
  • 統一性：チーム全体で同じフォーマットが適用される

推奨拡張機能

  • ESLint
  • Prettier - Code formatter
  • Error Lens（ESLintエラーの見やすい表示）

Git Hooksとの連携

Git Hooksとは

Git Hooksは、Gitの特定のアクション（コミット、プッシュなど）が実行される前後に、自動的にスクリプトを実行する仕組みです。これを活用することで、コミット前に自動的にコード品質チェックを行えます。

Huskyとlint-stagedの役割

Husky：Git Hooksを簡単に管理

Huskyとは：

  • Git Hooksを簡単に設定・管理できるツール
  • package.jsonで設定を管理
  • チーム全体で同じフックを共有可能

Huskyなしの場合：

# .git/hooks/pre-commit ファイルを手動で作成・管理
# チームメンバーが各自で設定する必要がある
# 設定が複雑で管理が困難

Huskyありの場合：

# package.jsonで設定を管理
# npm installで自動的に設定される
# チーム全体で統一された設定

lint-staged：効率的なファイル処理

lint-stagedとは：

  • Gitでステージング（git add）されたファイルのみを処理
  • プロジェクト全体ではなく、変更されたファイルのみをチェック
  • 高速で効率的なリント・フォーマット実行

lint-stagedなしの場合：

# プロジェクト全体をチェック（時間がかかる）
npx eslint src/  # 全ファイルをチェック

# 変更していないファイルも処理される
# 大きなプロジェクトでは非常に時間がかかる

lint-stagedありの場合：

# 変更されたファイルのみをチェック（高速）
# 例：src/component.jsを変更した場合
npx eslint src/component.js  # 変更されたファイルのみ

実践的な設定例

Huskyでコミット前チェック

# Huskyとlint-stagedのインストール
npm install --save-dev husky lint-staged

# Huskyの初期化
npx husky install

# pre-commitフックを作成
npx husky add .husky/pre-commit "npx lint-staged"

何が起こるか：

  1. git commitを実行
  2. Huskyがpre-commitフックを実行
  3. lint-stagedが変更されたファイルのみを処理
  4. ESLint + Prettierが実行される
  5. 問題があればコミットが中断される

package.json設定

{
  // lint-stagedの設定：ステージされたファイルのみを処理
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",      // ESLintで修正可能なエラーを自動修正
      "prettier --write",  // Prettierでフォーマット
      "git add"            // 修正されたファイルを再度ステージング
    ]
  },
  "scripts": {
    // プロジェクト全体のリント実行
    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
    
    // リント実行＋自動修正
    "lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
    
    // 全ファイルのフォーマット実行
    "format": "prettier --write src/**/*.{js,jsx,ts,tsx,json,css,md}"
  }
}

実際の動作例

Step 1: コードを編集

// src/example.js を編集
var userName='John';  // 問題のあるコード

Step 2: ファイルをステージング

git add src/example.js

Step 3: コミット実行

git commit -m "Add user name"

Step 4: 自動実行される処理

# Huskyが以下を自動実行
npx lint-staged

# lint-stagedが以下を自動実行
eslint --fix src/example.js     # ESLintで修正
prettier --write src/example.js # Prettierでフォーマット
git add src/example.js          # 修正されたファイルを再ステージング

Step 5: 修正された結果

// src/example.js が自動修正される
const userName = 'John';  // 修正されたコード

設定の詳細説明

スクリプトの使い分け：

  • lint: コードレビュー前のチェック用
  • lint:fix: 開発中の問題修正用
  • format: プロジェクト全体の整理用

lint-stagedの処理順序：

  1. eslint --fix: 自動修正可能な問題を修正
  2. prettier --write: コードフォーマットを統一
  3. git add: 修正されたファイルを再度ステージング

導入のメリット

開発効率向上：

  • コミット前に自動的に品質チェック
  • 手動でのリント実行を忘れる心配がない
  • チーム全体で統一された品質基準

パフォーマンス向上：

  • 変更されたファイルのみを処理（高速）
  • 大規模プロジェクトでも快適に動作
  • CI/CDの負荷軽減

品質保証：

  • 問題のあるコードがリポジトリに入るのを防止
  • 一貫したコードフォーマット
  • チームメンバー間でのコード品質統一

CI/CDパイプラインでの活用

GitHub Actions設定例

name: Code Quality Check

on: [push, pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
      
      - run: npm ci
      - run: npm run lint
      - run: npm run format -- --check

パフォーマンス最適化

ESLintキャッシュの活用

# .eslintcacheファイルでキャッシュを有効化
npx eslint --cache src/

除外設定の最適化

.eslintignore

node_modules/
dist/
build/
*.min.js
coverage/

.prettierignore

node_modules/
dist/
build/
package-lock.json
*.min.js
*.min.css

トラブルシューティング

よくある問題と解決策

実際の開発現場でよく遭遇する問題と、その解決方法を詳しく解説します。

1. ESLintとPrettierの競合

問題の症状：

  • 保存時にESLintとPrettierが互いにコードを修正し合う
  • 同じファイルで無限にフォーマットが変更される
  • 「Expected 1 space after ','」のようなフォーマット関連のエラーが頻発

解決策：

// eslint.config.js
import js from '@eslint/js';
import prettier from 'eslint-config-prettier';
// 他のインポート...

export default [
  js.configs.recommended,
  // 他の設定...
  prettier, // 🔥 重要：必ず最後に配置
];

なぜ最後に配置するのか：

  • Flat Configでは配列の順序で優先度が決まる
  • prettier設定がESLintのフォーマット関連ルールを無効化
  • これにより、フォーマットはPrettierに完全に委任される

2. TypeScriptパースエラー

問題の症状：

  • Parsing error: Cannot read file '***'
  • TypeScript固有の構文でESLintエラーが発生
  • 型情報を必要とするルールが正常に動作しない

解決策：

// eslint.config.js
import typescriptParser from '@typescript-eslint/parser';

export default [
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      parser: typescriptParser,
      parserOptions: {
        // TypeScriptの設定ファイルを明示的に指定
        project: './tsconfig.json',
        
        // tsconfig.jsonの基準ディレクトリを指定
        tsconfigRootDir: process.cwd(),
        
        // ECMAScript設定
        ecmaVersion: 2020,
        sourceType: 'module',
      },
    },
    // その他の設定...
  },
];

3. React 17+でのJSX Transform対応

問題の症状：

  • React 17+で import React from 'react' が不要なのにESLintエラー
  • 「'React' is not defined」エラーが発生
  • 新しいJSX Transformが認識されない

解決策：

// eslint.config.js
export default [
  {
    files: ['**/*.{jsx,tsx}'],
    settings: {
      react: {
        version: 'detect',        // Reactバージョンを自動検出
        runtime: 'automatic',     // 🔥 新しいJSX Transformを使用
      },
    },
    rules: {
      // React 17+では不要なルールを無効化
      'react/react-in-jsx-scope': 'off',
      'react/jsx-uses-react': 'off',
    },
  },
];

🚀 実践ハンズオン：15分で体験するESLint/Prettier

理論だけでなく、実際に手を動かしてESLint/Prettierの効果を体験してみましょう。

Step 1: プロジェクトの準備

# 新しいプロジェクトを作成
mkdir eslint-prettier-demo
cd eslint-prettier-demo

# package.jsonを生成
npm init -y

# package.jsonにESモジュールサポートを追加
npm pkg set type="module"

# 必要なパッケージをインストール
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier @eslint/js

注意: ESLint v9以降では、設定ファイルにESモジュール形式を使用するため、package.jsonに"type": "module"を追加する必要があります。

Step 2: 問題のあるコードを作成

まず、意図的に問題のあるコードを作成して、ESLint/Prettierの効果を確認します。

src/sample.jsを作成：

// 意図的に問題のあるコード
var userName='John Doe';
const   userAge=25
let isActive =    true;

function getUserInfo( ){
  console.log('Getting user info...');
  if(isActive){
    return{name:userName,age:userAge,active:isActive}
  }
  return null
}

const users=['Alice','Bob','Charlie',];
users.forEach(user=>{
  console.log(`Hello ${user}`)
})

// 未使用の変数
const unusedVariable = 'This will not be used';

Step 3: ESLint設定を作成

eslint.config.jsを作成：

import js from '@eslint/js';
import prettier from 'eslint-config-prettier';
import prettierPlugin from 'eslint-plugin-prettier';

export default [
  // JavaScript基本設定
  js.configs.recommended,
  
  // 全ファイルに適用する設定
  {
    files: ['**/*.js'],
    plugins: {
      prettier: prettierPlugin,
    },
    rules: {
      'prettier/prettier': 'error',
      'no-unused-vars': 'error',
      'no-console': 'warn',
      'prefer-const': 'error',
      'no-var': 'error',
    },
  },
  
  // Prettier設定（最後に配置）
  prettier,
];

Step 4: Prettier設定を作成

.prettierrcを作成：

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

Step 5: 問題を確認する

# ESLintでコードをチェック
npx eslint src/sample.js

# 実際に出力されるエラー例
# src/sample.js
#   1:1   error  Unexpected var, use let or const instead  no-var
#   1:13  error  Replace `'John·Doe'` with `'John·Doe'`     prettier/prettier
#   2:17  error  Missing semicolon                         prettier/prettier
#   5:1   error  'unusedVariable' is assigned a value but never used  no-unused-vars

Step 6: 自動修正を体験

# ESLintで自動修正可能な問題を修正
npx eslint src/sample.js --fix

# 修正後のコードを確認
cat src/sample.js

修正後のコード： （自動修正である程度エラーが消えますが、プログラムの構造上手動で修正しないといけないエラーが残ります）

// 自動修正された結果
const userName = 'John Doe';
const userAge = 25;
let isActive = true;

function getUserInfo() {
  console.warn('Getting user info...');
  if (isActive) {
    return { name: userName, age: userAge, active: isActive };
  }
  return null;
}

const users = ['Alice', 'Bob', 'Charlie'];
users.forEach((user) => {
  console.log(`Hello ${user}`);
});

// 未使用の変数（手動削除が必要）
const unusedVariable = 'This will not be used';

Step 7: package.jsonにスクリプトを追加

{
  "scripts": {
    "lint": "eslint src --ext .js",
    "lint:fix": "eslint src --ext .js --fix",
    "format": "prettier --write src/**/*.js"
  }
}

Step 8: 実際の開発フローを体験

  1. コードを書く：
// src/newFile.js
const message="Hello World"
console.log(message)
  1. チェックする：
npm run lint
  1. 修正する：
npm run lint:fix
  1. 結果を確認：
// 自動修正後
const message = 'Hello World';
console.log(message);

🎯 ハンズオンで学んだこと

ESLintの効果：

  • コードの潜在的な問題を発見
  • 統一されたコーディング規約の適用
  • 自動修正による効率化

Prettierの効果：

  • 一貫したコードフォーマット
  • 手動でのフォーマット調整が不要
  • チーム間でのスタイルの統一

実際の開発での活用：

  • 保存時の自動修正
  • コミット前の品質チェック
  • 継続的な品質維持

このハンズオンを通じて、ESLint/Prettierの基本的な使い方と効果を体験できました。

理解度チェッククイズ

記事の理解度を確認するクイズです。答えは記事内容を参考にしてください。

Q1. ESLintとPrettierの役割分担

問題： ESLintとPrettierの主な役割の違いを説明してください。

答えを見る

答え：

  • ESLint: コードの品質管理（バグの発見、コーディング規約の統一、潜在的問題の検出）
  • Prettier: コードフォーマットの統一（見た目の整形、インデント・改行・スペースの調整）

ESLintは「コードの意味や品質」を、Prettierは「コードの見た目」を管理します。

Q2. 設定ファイルの優先順位

問題： eslint.config.jsの配列で、なぜprettierConfigを最後に配置する必要があるのでしょうか？

答えを見る

答え：
Flat Configでは配列の順序で優先度が決まるため、prettierConfigを最後に配置することで、ESLintとPrettierの競合するルールを無効化できます。これにより、フォーマットに関するルールはPrettierに任せ、ESLintは品質管理に集中できます。

Q3. Git Hooksの活用

問題： lint-stagedを使用する利点を2つ挙げてください。

答えを見る

答え：

  1. パフォーマンス向上: ステージされたファイルのみを処理するため、プロジェクト全体を処理するより高速
  2. 品質保証: コミット前に自動的にリント・フォーマットが実行されるため、問題のあるコードがリポジトリに入るのを防げる

その他の利点：チーム全体でのコード品質統一、手動でのリント実行忘れ防止など

Q4. TypeScript設定の理解

問題： 以下の設定の意図を説明してください。

'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }]
答えを見る

答え：
この設定は「未使用変数をエラーとして扱うが、アンダースコア（_）で始まる変数は除外する」という意味です。

  • 'error': 未使用変数をエラーレベルで検出
  • { argsIgnorePattern: '^_' }: 「_」で始まる変数名はチェック対象外

これにより、意図的に使用しない変数（例：const [_, setValue] = useState()）でエラーが発生しなくなります。

Q5. 実践的な設定選択

問題： フロントエンド開発とサーバーサイド開発で、PrettierのtrailingComma設定が異なる理由を説明してください。

  • フロントエンド: "trailingComma": "es5"
  • サーバーサイド: "trailingComma": "all"
答えを見る

答え：

  • フロントエンド（es5）: 古いブラウザ（IE11など）との互換性を考慮。ES5で有効な場所のみに末尾カンマを追加
  • サーバーサイド（all）: Node.js環境では新しいECMAScript機能が使用可能。ES2017+の末尾カンマを活用してコード変更時のdiff を見やすくする

環境の制約に応じて、適切な設定を選択することが重要です。

チャレンジ問題：
あなたの開発環境に最適なESLint/Prettier設定を考えて、実際に設定してみましょう！

まとめ

ESLintとPrettierの適切な設定により、以下の効果が期待できます：

  • コード品質の向上：潜在的なバグの早期発見
  • 開発効率の向上：自動フォーマットによる時間短縮
  • チーム生産性の向上：統一されたコーディング規約
  • メンテナンスコストの削減：可読性の高いコードベース

継続的なコード品質管理には、チーム全体での運用ルール策定と、定期的な設定見直しが重要です。プロジェクトの特性に合わせて設定をカスタマイズし、より良い開発体験を実現していきましょう。

参考資料

2
4
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?