T-CREATOR

ESLint の環境変数(env)設定徹底解説

ESLint の環境変数(env)設定徹底解説

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

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

背景

ESLint とは何か

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

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

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

環境変数(env)の役割と重要性

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

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

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

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

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

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

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

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

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

javascript// 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 definedNode.js 環境設定不足node: true
'global' is not definedNode.js 環境設定不足node: true
'window' is not definedブラウザ環境設定不足browser: true
'describe' is not definedテスト環境設定不足jest: true

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

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

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

  • ブラウザ環境:windowdocumentconsole
  • ES6+環境:PromiseSymbolMap
  • バンドラー環境:importexport

バックエンド開発の場合

  • Node.js 環境:requireprocessglobal
  • CommonJS 環境:module.exportsexports

テスト環境の場合

  • Jest 環境:describeitexpect
  • Mocha 環境:describeitbefore

設定方法の複雑さ

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

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

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

解決策

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

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

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

.eslintrc.js での設定

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

javascript// .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 設定を行うことも可能です:

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

各環境別の推奨設定

ブラウザ環境の推奨設定

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

Node.js 環境の推奨設定

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

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

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

具体例

Browser 環境の設定

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

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

対応する設定ファイル

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

Node.js 環境の設定

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

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

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

対応する設定ファイル

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

ES6+環境の設定

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

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

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

対応する設定ファイル

javascript// .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 テストフレームワークを使用する場合の設定です:

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

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

対応する設定ファイル

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

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

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

javascript// 包括的な設定例
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 APInode: true, es6: true, es2021: true
フルスタックbrowser: true, node: true, es6: true, es2021: true
React + Jestbrowser: true, es6: true, es2021: true, jest: true
TypeScriptbrowser: true, node: true, es6: true, es2021: true

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

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

javascript// プロジェクトルート/.eslintrc.js(基本設定)
module.exports = {
  env: {
    es6: true,
    es2021: true,
  },
};
javascript// src/client/.eslintrc.js(フロントエンド用)
module.exports = {
  extends: ['../../.eslintrc.js'],
  env: {
    browser: true,
  },
};
javascript// 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 の環境変数設定を適切に行うことで、開発効率が大幅に向上し、チーム全体のコード品質向上にもつながります。エラーメッセージに悩まされることなく、本来の開発作業に集中できる環境を構築しましょう。

関連リンク