Pockit
Back

ESLint 10 マイグレーションガイド：史上最大アップデートのすべて

ESLint 10がリリースされました。マイナーアップデートじゃないですよ。ずっとしがみついてた.eslintrc設定システム？完全削除—deprecatedじゃなくて削除。--envフラグ？なくなりました。Node.js 18？もうサポートしてません。

ESLintチームの結論：flat configだけが唯一の道。

マイグレーション先延ばしにしてたなら、2026年1月がデッドラインです。ESLint 9はもうメンテナンスモード。ESLint 10が現在。このガイドでCIパイプライン壊さずに移行しましょう。

ESLint 10の新機能

マイグレーションの前に何が変わったか見ていきましょう。

Node.js 20.19.0+必須

ESLint 10はNode.js 18、19、21、23のサポートを終了。必要なもの：

  • Node.js ^20.19.0（20.xで20.19.0以上）
  • Node.js ^22.13.0（22.x LTSで22.13.0以上）
  • Node.js >=24.0.0（24.x Current）

CI/CDパイプラインを確認してください。古いNodeバージョンだとビルドがすぐ壊れます。

node --version  # v20.19.0以上である必要がある

.eslintrc完全削除

これが目玉です。ESLint 10はレガシー設定に関するすべてを削除：

削除されたもの代替
.eslintrc.*ファイルeslint.config.js
.eslintignoreconfigのignores配列
--envフラグlanguageOptionsのglobals
--rulesdirフラグプラグインの直接import
--resolve-plugins-relative-toESモジュールimport
/* eslint-env */コメントエラーとしてレポートされる
ESLINT_USE_FLAT_CONFIG環境変数常にflat config
LegacyESLint API完全削除

プロジェクトにまだ.eslintrc.jsonがあっても、ESLint 10は単に無視します。

新しい設定ファイル探索

ESLint 10はconfigファイルの探し方が変わりました：

ESLint 9（旧動作）:

CWDから上に向かってeslint.config.jsを探す

ESLint 10（新動作）:

各lintファイルのディレクトリから上に向かってeslint.config.jsを探す

モノレポですごく便利。各パッケージが自分のeslint.config.jsを持てて、ESLintが自動的に見つけます。

my-monorepo/
├── eslint.config.js          # ルートconfig（フォールバック）
├── packages/
│   ├── web/
│   │   ├── eslint.config.js  # Web専用config
│   │   └── src/
│   └── api/
│       ├── eslint.config.js  # API専用config
│       └── src/

JSXリファレンストラッキング

ESLint 10はJSXエレメントのリファレンスを正確に追跡するようになりました：

  • カスタムコンポーネントがリファレンスとして適切に追跡される
  • no-unused-varsがJSXで正しく動作
  • 既存コードで新しい警告が出る可能性あり（v9ではfalse positiveだったもの）
// ESLint 10はButtonをリファレンスとして正確に認識
import { Button } from './components';

function App() {
  return <Button>Click me</Button>;  // Buttonが追跡される
}

更新されたeslint:recommended

recommendedルールセットが更新されました。マイグレーション後にESLintを実行して新しい違反をキャッチしてください。

ESLint 9からのステップバイステップマイグレーション

ステップ1：Node.jsバージョン確認

node --version
# v20.19.0未満ならまずアップグレード

CI/CDをNode.js 20.x LTSか22.xに更新してください。

ステップ2：ESLintと依存関係を更新

npm install eslint@10 --save-dev

# TypeScript使用時はTypeScript ESLintも更新
npm install @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest --save-dev

# 他のプラグインも更新
npm install eslint-plugin-react@latest eslint-plugin-react-hooks@latest --save-dev

ステップ3：Configマイグレーション（まだの場合）

まだ.eslintrc使ってるならマイグレーションツールを使用：

npx @eslint/migrate-config .eslintrc.json

eslint.config.mjsファイルが生成されます。レビューして調整してください。

ステップ4：v10互換性のためFlat Configを更新

すでにeslint.config.jsがあればv10固有の更新を確認：

eslint-envコメントを削除

// ❌ ESLint 10はこれをエラーとしてレポート
/* eslint-env browser, node */

// ✅ configでglobalsを使用
import globals from "globals";

export default [
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      }
    }
  }
];

ステップ5：レガシーファイルを削除

rm .eslintrc.* .eslintignore 2>/dev/null || true

ステップ6：VS Code設定を更新

{
  "eslint.useFlatConfig": true
}

注意：eslint.useFlatConfig設定は今やデフォルト。削除してもOK。

ステップ7：テスト

npx eslint .

更新されたeslint:recommendedやJSXトラッキングからの新しい違反を修正。

ESLint 10完全な設定例

TypeScriptプロジェクト

// eslint.config.js
import js from "@eslint/js";
import typescript from "typescript-eslint";
import globals from "globals";

export default typescript.config(
  js.configs.recommended,
  ...typescript.configs.recommendedTypeChecked,
  {
    languageOptions: {
      globals: globals.node,
      parserOptions: {
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
  {
    files: ["**/*.js", "**/*.mjs"],
    ...typescript.configs.disableTypeChecked,
  },
  {
    ignores: ["dist/**", "node_modules/**"],
  }
);

React + TypeScript（Next.js）

// eslint.config.mjs
import js from "@eslint/js";
import typescript from "typescript-eslint";
import react from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";
import jsxA11y from "eslint-plugin-jsx-a11y";
import next from "@next/eslint-plugin-next";
import globals from "globals";

export default typescript.config(
  js.configs.recommended,
  ...typescript.configs.recommended,
  
  // React + JSX
  {
    files: ["**/*.{jsx,tsx}"],
    plugins: {
      react,
      "react-hooks": reactHooks,
      "jsx-a11y": jsxA11y,
    },
    languageOptions: {
      globals: globals.browser,
      parserOptions: {
        ecmaFeatures: { jsx: true },
      },
    },
    settings: {
      react: { version: "detect" },
    },
    rules: {
      ...react.configs.recommended.rules,
      ...react.configs["jsx-runtime"].rules,
      ...reactHooks.configs.recommended.rules,
      ...jsxA11y.configs.recommended.rules,
    },
  },
  
  // Next.js
  {
    plugins: {
      "@next/next": next,
    },
    rules: {
      ...next.configs.recommended.rules,
      ...next.configs["core-web-vitals"].rules,
    },
  },
  
  {
    ignores: [".next/**", "node_modules/**", "out/**"],
  }
);

パッケージ別Configのモノレポ

// ルート: eslint.config.js
import js from "@eslint/js";
import typescript from "typescript-eslint";

// すべてのパッケージが継承する基本config
export default typescript.config(
  js.configs.recommended,
  ...typescript.configs.recommended,
  {
    ignores: ["**/dist/**", "**/node_modules/**"],
  }
);
// packages/web/eslint.config.js
import baseConfig from "../../eslint.config.js";
import react from "eslint-plugin-react";
import globals from "globals";

export default [
  ...baseConfig,
  {
    files: ["**/*.{jsx,tsx}"],
    plugins: { react },
    languageOptions: {
      globals: globals.browser,
    },
    rules: {
      ...react.configs.recommended.rules,
    },
  },
];

ESLint 10の新しい探索アルゴリズムが自動的に各ファイルに最も近いeslint.config.jsを使用します。

よくあるマイグレーションエラーと解決法

Error: "ESLint requires Node.js version ^20.19.0 || ^22.0.0 || >=24.0.0"

解決: Node.jsを20.19.0以上にアップグレード。

# nvm使用時
nvm install 22
nvm use 22

Error: "eslint-env is no longer supported"

解決: /* eslint-env */コメントを削除してglobalsを使用：

import globals from "globals";

{
  languageOptions: {
    globals: globals.browser
  }
}

Error: "ConfigArray.normalize is not a function"

解決: @eslint/eslintrcを最新バージョンに更新：

npm install @eslint/eslintrc@latest

Error: モノレポで"Cannot find config"

解決: ESLint 10はCWDではなくファイルのディレクトリから探します。どちらか：

  1. 各パッケージにeslint.config.jsを追加、または
  2. ルートから明示的ファイルパターンでESLint実行

Warning: JSXトラッキングからの新しい違反

解決: v9が見逃した実際の問題である可能性が高いです。各々レビューしてください。false positiveならその行でルールを無効化。

マイグレーションチェックリスト

マイグレーション時にこのチェックリストを使用：

  • Node.jsがv20.19.0+またはv22.x
  • ESLintをv10に更新
  • すべてのプラグインをv10互換バージョンに更新
  • eslint.config.jsにconfigをマイグレーション
  • すべての/* eslint-env */コメントを削除
  • .eslintrc.*ファイルを削除
  • .eslintignoreを削除（configのignoresを使用）
  • CI/CDをNode.js 20+に更新
  • VS Code設定を更新
  • 全体lintがパス

今マイグレーションすべき？

はい。 理由：

  1. ESLint 9はメンテナンスモード—新機能なし、重要な修正のみ
  2. プラグインエコシステムが移行中—人気プラグインがv9サポートを終了中
  3. 新しい探索アルゴリズムが強力—特にモノレポで
  4. JSXトラッキングが本当のバグを発見—既存コードに気づいてなかった問題があるかも

マイグレーションはほぼ機械的。v9でflat configに移行済みなら90%完了。まだ.eslintrcなら今がその時—もう猶予なし。

まとめ

ESLint 10は過去ときっぱり決別しました。レガシー設定システムは永遠になくなりました。代わりに得られるもの：

  • よりシンプルなメンタルモデル: ファイル1つ、フォーマット1つ、マジックなし
  • より良いモノレポサポート: そのまま動くパッケージ別configs
  • より正確なlinting: JSXトラッキングが本当の問題を発見
  • 将来対応: エコシステムが向かう方向にいる

マイグレーションは1〜2時間かかるかもしれませんが、今後数年のESLintリリースに対応完了。

技術的負債が1つ減りました。さあconfigを更新しに行きましょう！🚀

ESLintJavaScriptTypeScriptLintingMigrationDeveloper Tools

関連ツールを見る

Pockitの無料開発者ツールを試してみましょう

PDF圧縮
共有しやすいサイズに軽量化しましょう。セキュリティを保ちながら、画質と容量のバランスを調整してPDFを圧縮します。
使ってみる
PDFテキスト抽出
文書から文字だけを取り出せます。PDFの内容をコピー可能なテキストとして抽出し、編集や分析に活用できます。
使ってみる
コード整形・圧縮
1行にギュッと詰まった圧縮コードを読みやすく整形したり、本番用にサイズを小さくしたり。JS、CSS、HTML対応。ブラウザで完結するからコードは外に出ません。
使ってみる
JSONフォーマッター
乱雑なデータを見た目良く整理しましょう。JSONの構文エラーを自動で修正し、読みやすい形式に整形します。
使ってみる
アスペクト比計算機
黄金比を逃しません。動画や画像に最適なアスペクト比と解像度を、迷うことなく瞬時に計算できます。
使ってみる
サブネット計算機
ネットワーク設計を効率化。IPとマスクからサブネット範囲を即座に計算し、エンジニアの作業時間を短縮します。
使ってみる