ESLint を使い始めたばかりの頃、こんなエラーに悩まされた経験はありませんか？「'console' is not defined」や「'require' is not defined」といったメッセージが表示され、なぜ動作しないのかわからず困った方も多いでしょう。

実は、これらのエラーの多くは環境変数（env）の設定不足が原因です。今回は、ESLint の環境変数設定について、つまずきやすいポイントから実践的な解決策まで、初心者の方にもわかりやすく徹底解説いたします。

背景

ESLint とは何か

ESLint は、JavaScript や TypeScript のコードを静的解析し、潜在的な問題やコーディングスタイルの統一を支援するツールです。開発チーム全体でコードの品質を保つために、現代の Web 開発では欠かせない存在となっています。

ESLint の主な役割は以下のとおりです：

機能	説明
構文エラーの検出	コードの書き方に問題がないかチェック
コーディング規約の統一	チーム内でのコードスタイルを揃える
潜在的なバグの発見	実行時エラーにつながる可能性のある箇所を警告

環境変数（env）の役割と重要性

環境変数設定は、どの実行環境でコードが動作するかを ESLint に伝える重要な役割を担います。

例えば、console.log()はブラウザ環境では利用できますが、設定なしでは ESLint が「このグローバル変数は定義されていません」と判断してしまいます。

javascriptCopy code// 環境変数が設定されていない場合
console.log('Hello World'); // エラー: 'console' is not defined

これを解決するために、適切な環境変数を設定する必要があります。

設定しないとどんな問題が発生するか

環境変数を適切に設定しないと、以下のような問題が発生します：

1. グローバル変数の未定義エラー

javascriptCopy code// ブラウザ環境なのに env設定がない場合
window.alert('警告'); // エラー: 'window' is not defined
document.getElementById('app'); // エラー: 'document' is not defined

2. Node.js 固有の機能でのエラー

javascriptCopy code// Node.js環境なのに env設定がない場合
const fs = require('fs'); // エラー: 'require' is not defined
process.env.NODE_ENV; // エラー: 'process' is not defined

これらのエラーにより、実際には正常に動作するコードでも、ESLint が問題として検出してしまいます。

課題

適切な環境変数を設定しないことで起こる問題

環境変数設定の不備により、開発現場では以下のような問題が頻繁に発生します：

よくあるエラーメッセージ集

エラーメッセージ	原因	必要な設定
'console' is not defined	ブラウザ環境設定不足	browser: true
'require' is not defined	Node.js 環境設定不足	node: true
'global' is not defined	Node.js 環境設定不足	node: true
'window' is not defined	ブラウザ環境設定不足	browser: true
'describe' is not defined	テスト環境設定不足	jest: true

各環境での違いを理解する必要性

現代の JavaScript 開発では、一つのプロジェクトで複数の環境を扱うことが一般的です：

フロントエンド開発の場合

• ブラウザ環境：window、document、console
• ES6+環境：Promise、Symbol、Map
• バンドラー環境：import、export文

バックエンド開発の場合

• Node.js 環境：require、process、global
• CommonJS 環境：module.exports、exports

テスト環境の場合

• Jest 環境：describe、it、expect
• Mocha 環境：describe、it、before

設定方法の複雑さ

ESLint の環境変数設定には複数の方法があり、初心者にとって混乱の元となります：

1. .eslintrc.jsファイルでの設定
2. package.jsonでの設定
3. コマンドラインでの設定
4. ファイル内コメントでの設定

それぞれに優先順位があり、適切な理解が必要です。

解決策

基本的な環境変数の設定方法

ESLint の環境変数設定は、設定ファイル内のenvプロパティで行います。基本的な構文は以下のとおりです：

javascriptCopy code// .eslintrc.js の基本構文
module.exports = {
  env: {
    環境名: true, // 有効化
    環境名: false, // 無効化（デフォルト）
  },
};

.eslintrc.js での設定

最も一般的で推奨される設定方法です。プロジェクトルートに.eslintrc.jsファイルを作成し、以下のように設定します：

javascriptCopy code// .eslintrc.js
module.exports = {
  env: {
    browser: true, // ブラウザ環境のグローバル変数を有効化
    node: true, // Node.js環境のグローバル変数を有効化
    es6: true, // ES6のグローバル変数を有効化
  },
  parserOptions: {
    ecmaVersion: 2021, // 使用するECMAScriptのバージョン
    sourceType: 'module', // ES6モジュールを使用
  },
};

package.json での設定

小規模プロジェクトでは、package.json内で ESLint 設定を行うことも可能です：

jsonCopy code{
  "name": "my-project",
  "version": "1.0.0",
  "eslintConfig": {
    "env": {
      "browser": true,
      "node": true,
      "es6": true
    }
  }
}

各環境別の推奨設定

ブラウザ環境の推奨設定

javascriptCopy code// フロントエンド開発向け
module.exports = {
  env: {
    browser: true,
    es6: true,
    es2017: true,
    es2020: true,
    es2021: true,
  },
};

Node.js 環境の推奨設定

javascriptCopy code// バックエンド開発向け
module.exports = {
  env: {
    node: true,
    es6: true,
    es2020: true,
    es2021: true,
  },
};

フルスタック開発の推奨設定

javascriptCopy code// フロントエンド・バックエンド両方を扱う場合
module.exports = {
  env: {
    browser: true,
    node: true,
    es6: true,
    es2021: true,
  },
};

具体例

Browser 環境の設定

ブラウザ環境では、DOM や BOM 関連のグローバル変数が利用できます。以下のコードが正常に動作するよう設定します：

javascriptCopy code// ブラウザ環境で使用するコード例
console.log('ページが読み込まれました');
window.addEventListener('load', function () {
  document.getElementById('app').innerHTML = 'Hello World!';
});

対応する設定ファイル

javascriptCopy code// .eslintrc.js
module.exports = {
  env: {
    browser: true, // window, document, console などが利用可能
    es6: true, // ES6の機能を有効化
  },
};

Node.js 環境の設定

Node.js 環境では、サーバーサイド固有のグローバル変数やモジュールシステムが利用できます：

javascriptCopy code// Node.js環境で使用するコード例
const fs = require('fs');
const path = require('path');

console.log('現在のディレクトリ:', process.cwd());
console.log('環境変数:', process.env.NODE_ENV);

対応する設定ファイル

javascriptCopy code// .eslintrc.js
module.exports = {
  env: {
    node: true, // require, process, global などが利用可能
    es6: true, // ES6の機能を有効化
  },
};

ES6+環境の設定

モダン JavaScript の機能を使用する場合の設定です：

javascriptCopy code// ES6+の機能を使用するコード例
const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('完了'), 1000);
});

const map = new Map();
const set = new Set();
const symbol = Symbol('unique');

対応する設定ファイル

javascriptCopy code// .eslintrc.js
module.exports = {
  env: {
    es6: true, // ES6のグローバル変数（Promise, Map, Set等）
    es2017: true, // ES2017の機能（async/await等）
    es2020: true, // ES2020の機能（BigInt等）
    es2021: true, // ES2021の機能
  },
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
  },
};

Jest 環境の設定

Jest テストフレームワークを使用する場合の設定です：

javascriptCopy code// Jestテストコードの例
describe('計算機能のテスト', () => {
  test('足し算が正しく動作する', () => {
    expect(1 + 2).toBe(3);
  });

  beforeEach(() => {
    console.log('テスト前の準備');
  });
});

対応する設定ファイル

javascriptCopy code// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    node: true,
    es6: true,
    jest: true, // describe, test, expect などが利用可能
  },
};

複数環境の組み合わせ設定

実際の開発では、複数の環境を組み合わせて使用することが多くあります。以下は、現代的な Web 開発プロジェクトでの推奨設定です：

javascriptCopy code// 包括的な設定例
module.exports = {
  env: {
    browser: true, // ブラウザ環境
    node: true, // Node.js環境
    es6: true, // ES6基本機能
    es2017: true, // async/await
    es2020: true, // BigInt, dynamic import
    es2021: true, // 最新のES機能
    jest: true, // テスト環境
    jquery: true, // jQuery（必要な場合）
    serviceworker: true, // Service Worker（PWA開発時）
  },
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true, // React JSX（必要な場合）
    },
  },
};

設定の組み合わせ例

プロジェクト種類	推奨 env 設定
SPA フロントエンド	browser: true, es6: true, es2021: true
Node.js API	node: true, es6: true, es2021: true
フルスタック	browser: true, node: true, es6: true, es2021: true
React + Jest	browser: true, es6: true, es2021: true, jest: true
TypeScript	browser: true, node: true, es6: true, es2021: true

環境別のファイル分割設定

大規模プロジェクトでは、ディレクトリごとに異なる設定を適用することも可能です：

javascriptCopy code// プロジェクトルート/.eslintrc.js（基本設定）
module.exports = {
  env: {
    es6: true,
    es2021: true,
  },
};

javascriptCopy code// src/client/.eslintrc.js（フロントエンド用）
module.exports = {
  extends: ['../../.eslintrc.js'],
  env: {
    browser: true,
  },
};

javascriptCopy code// src/server/.eslintrc.js（バックエンド用）
module.exports = {
  extends: ['../../.eslintrc.js'],
  env: {
    node: true,
  },
};

まとめ

ESLint の環境変数設定は、適切なコード解析を行うための重要な要素です。以下のポイントを押さえることで、エラーのない快適な開発環境を構築できます：

環境変数設定のベストプラクティス

1. プロジェクトの性質に応じた設定

• フロントエンド開発：browser: true, es6: true
• バックエンド開発：node: true, es6: true
• フルスタック開発：両方を組み合わせ

2. 段階的な設定アプローチ

• まず基本的な環境（browser/node）を設定
• 必要に応じて ES6+、テスト環境を追加
• プロジェクトの成長に合わせて調整

3. 設定ファイルの管理

• .eslintrc.jsでの設定を推奨
• 大規模プロジェクトでは階層化設定を活用
• チーム内での設定統一

注意点

避けるべき設定

• 不要な環境設定（パフォーマンス低下の原因）
• 矛盾する環境設定の組み合わせ
• 設定ファイルの重複や競合

メンテナンス時の注意

• 新しい環境への移行時は段階的に実施
• 設定変更時はチーム全体への共有が必要
• 定期的な設定内容の見直しを実施

ESLint の環境変数設定を適切に行うことで、開発効率が大幅に向上し、チーム全体のコード品質向上にもつながります。エラーメッセージに悩まされることなく、本来の開発作業に集中できる環境を構築しましょう。

関連リンク

• ESLint 公式ドキュメント - Configuring ESLint
• ESLint 環境設定一覧
• ESLint 設定ファイルの詳細
• Node.js 環境での ESLint 設定
• ブラウザ環境での ESLint 設定