開発チームでコードレビューを担当していると、同じような指摘を何度も繰り返していませんか？「この変数名は分かりにくい」「未使用の import がある」「セミコロンが抜けている」...。これらの指摘は大切ですが、手動で行うには時間がかかりすぎます。

ESLint を使った自動化により、人間が本来注力すべき「設計の妥当性」や「ビジネスロジックの正確性」に集中できるようになります。この記事では、ESLint を活用してコードレビューを自動化する実践的なワークフローをご紹介します。

ESLint とは

ESLint は、JavaScript や TypeScript のコードを静的解析し、潜在的な問題やコーディング規約違反を自動的に検出するツールです。2013 年に Nicholas Zakas 氏によって開発され、現在では JavaScript 開発の標準的な品質管理ツールとして広く採用されています。

ESLint の特徴は、ルールベースの解析システムにあります。各ルールは独立しており、プロジェクトの要件に応じて有効/無効を切り替えることができます。また、カスタムルールの作成も可能で、チーム固有のコーディング規約にも対応できます。

自動化のメリット

コードレビューの自動化には、以下のような大きなメリットがあります。

時間の節約 手動レビューでは、フォーマットや基本的なコーディング規約のチェックに多くの時間を費やします。ESLint による自動化により、レビュアーは設計やロジックの妥当性に集中できます。

一貫性の確保 人間のレビューでは、レビュアーによって指摘内容が異なることがあります。ESLint は設定されたルールに従って一貫したチェックを行い、チーム全体のコード品質を統一します。

早期発見 開発中にリアルタイムでエラーを検出できるため、問題の早期発見と修正が可能になります。これにより、後工程でのバグ修正コストを大幅に削減できます。

学習効果 ESLint のエラーメッセージは教育的で、開発者がコーディング規約やベストプラクティスを学ぶ機会を提供します。

基本的なセットアップ

まず、プロジェクトに ESLint を導入する基本的な手順をご紹介します。

1. ESLint のインストール

プロジェクトのルートディレクトリで以下のコマンドを実行します。

bashCopy code# ESLintの基本パッケージをインストール
yarn add -D eslint

# TypeScriptプロジェクトの場合
yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

# Reactプロジェクトの場合
yarn add -D eslint-plugin-react eslint-plugin-react-hooks

2. 設定ファイルの作成

プロジェクトルートに.eslintrc.jsファイルを作成します。

javascriptCopy codemodule.exports = {
  // 解析対象のファイル拡張子
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    'plugin:react/recommended',
  ],

  // パーサーの設定
  parser: '@typescript-eslint/parser',

  // プラグインの設定
  plugins: ['@typescript-eslint', 'react'],

  // 環境設定
  env: {
    browser: true,
    es2021: true,
    node: true,
  },

  // ルールの設定
  rules: {
    // セミコロンの強制
    semi: ['error', 'always'],

    // 未使用変数の警告
    'no-unused-vars': 'warn',

    // 一重引用符の強制
    quotes: ['error', 'single'],
  },
};

3. package.json にスクリプトを追加

jsonCopy code{
  "scripts": {
    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix"
  }
}

これで基本的なセットアップは完了です。yarn lintコマンドでコードチェックを実行できます。

GitHub Actions での自動化

GitHub Actions を使用して、プルリクエスト時に自動的に ESLint チェックを実行するワークフローを構築しましょう。

1. ワークフローファイルの作成

.github​/​workflows​/​eslint.ymlファイルを作成します。

yamlCopy codename: ESLint Check

on:
  pull_request:
    branches: [main, develop]
  push:
    branches: [main, develop]

jobs:
  eslint:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'yarn'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Run ESLint
        run: yarn lint

2. プルリクエストでの自動チェック

このワークフローにより、プルリクエストが作成されるたびに自動的に ESLint チェックが実行されます。エラーがある場合は、GitHub の UI 上で詳細を確認できます。

3. ステータスチェックの設定

リポジトリの設定で、ESLint チェックを必須のステータスチェックとして設定することで、エラーがあるプルリクエストのマージを防ぐことができます。

カスタムルールの作成

チーム固有の要件に対応するため、カスタムルールを作成する方法をご紹介します。

1. カスタムルールの基本構造

javascriptCopy code// rules/custom-import-order.js
module.exports = {
  meta: {
    type: 'suggestion',
    docs: {
      description: 'Import文の順序を強制する',
      category: 'Stylistic Issues',
      recommended: false,
    },
    fixable: 'code',
    schema: [],
  },

  create(context) {
    return {
      Program(node) {
        const imports = node.body.filter(
          (n) => n.type === 'ImportDeclaration'
        );

        // 順序チェックのロジック
        for (let i = 1; i < imports.length; i++) {
          const prev = imports[i - 1].source.value;
          const current = imports[i].source.value;

          if (prev > current) {
            context.report({
              node: imports[i],
              message:
                'Import文はアルファベット順に並べてください',
            });
          }
        }
      },
    };
  },
};

2. カスタムルールの登録

.eslintrc.jsにカスタムルールを追加します。

javascriptCopy codemodule.exports = {
  // ... 既存の設定 ...

  // カスタムルールの読み込み
  rules: {
    // ... 既存のルール ...
    'custom/import-order': 'error',
  },
};

チーム開発での活用

チーム全体で ESLint を効果的に活用するためのベストプラクティスをご紹介します。

1. ルールの合意形成

チームで以下の点について合意を形成することが重要です。

• どのルールを有効にするか
• エラーレベル（error/warn/off）の設定
• 例外処理の方針

2. 段階的な導入

一度にすべてのルールを有効にすると、既存コードの修正に時間がかかります。以下の段階で導入することをお勧めします。

Phase 1: 基本的なルール

javascriptCopy code// 最初に導入する基本的なルール
rules: {
  'no-console': 'warn',
  'no-debugger': 'error',
  'no-unused-vars': 'warn'
}

Phase 2: コーディング規約

javascriptCopy code// コーディング規約のルール
rules: {
  'semi': ['error', 'always'],
  'quotes': ['error', 'single'],
  'indent': ['error', 2]
}

Phase 3: 高度なルール

javascriptCopy code// より厳密なルール
rules: {
  'complexity': ['warn', 10],
  'max-lines': ['warn', 300],
  'no-magic-numbers': 'warn'
}

3. チーム内での共有

ESLint の設定やルールについて、チーム内で定期的にレビューを行い、改善を継続することが重要です。

トラブルシューティング

ESLint の導入や運用でよく遭遇する問題とその解決方法をご紹介します。

1. よくあるエラーと解決方法

エラー: "Parsing error: Unexpected token"

javascriptCopy code// 解決方法: パーサーの設定を確認
module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
};

エラー: "Definition for rule 'xxx' was not found"

javascriptCopy code// 解決方法: プラグインのインストールと設定を確認
yarn add -D eslint-plugin-react
// .eslintrc.js
plugins: ['react'],
extends: ['plugin:react/recommended']

エラー: "Cannot read config file"

bashCopy code# 解決方法: 設定ファイルの構文を確認
node -c .eslintrc.js

2. パフォーマンスの最適化

大規模プロジェクトでは、ESLint の実行時間が問題になることがあります。

javascriptCopy code// .eslintrc.js
module.exports = {
  // キャッシュの有効化
  cache: true,

  // 並列実行の設定
  cacheLocation: '.eslintcache',

  // 特定のファイルを除外
  ignorePatterns: ['dist/', 'node_modules/', '*.min.js'],
};

3. エディタとの連携

VSCode での ESLint 連携設定例です。

jsonCopy code// .vscode/settings.json
{
  "eslint.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

まとめ

ESLint によるコードレビューの自動化は、開発チームの生産性とコード品質を大幅に向上させます。手動レビューでは見落としがちな細かな問題を自動的に検出し、開発者が本来注力すべき設計やロジックのレビューに集中できるようになります。

重要なのは、一度に完璧な設定を目指すのではなく、段階的に改善を重ねていくことです。チームの状況に応じてルールを調整し、継続的に最適化していくことで、より効果的な自動化ワークフローを構築できます。

ESLint の導入により、コードレビューの負担を軽減し、チーム全体の開発効率を向上させましょう。小さな改善の積み重ねが、大きな成果につながることを忘れないでください。

関連リンク

• ESLint 公式サイト
• ESLint Getting Started
• TypeScript ESLint
• GitHub Actions 公式ドキュメント
• ESLint Rules