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 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 の環境変数設定には複数の方法があり、初心者にとって混乱の元となります:
.eslintrc.js
ファイルでの設定package.json
での設定- コマンドラインでの設定
- ファイル内コメントでの設定
それぞれに優先順位があり、適切な理解が必要です。
解決策
基本的な環境変数の設定方法
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 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 |
環境別のファイル分割設定
大規模プロジェクトでは、ディレクトリごとに異なる設定を適用することも可能です:
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 の環境変数設定を適切に行うことで、開発効率が大幅に向上し、チーム全体のコード品質向上にもつながります。エラーメッセージに悩まされることなく、本来の開発作業に集中できる環境を構築しましょう。
関連リンク
- blog
Culture, Automation, Measurement, Sharing. アジャイル文化を拡張する DevOps の考え方
- blog
開発と運用、まだ壁があるの?アジャイルと DevOps をかけ合わせて開発を爆速にする方法
- blog
スクラムマスターは雑用係じゃない!チームのポテンシャルを 120%引き出すための仕事術
- blog
「アジャイルやってるつもり」になってない?現場でよく見る悲劇と、僕らがどう乗り越えてきたかの話
- blog
強いチームは 1 日にしてならず。心理的安全性を育むチームビルディングの鉄則
- blog
トヨタ生産方式から生まれた「リーン」。アジャイル開発者が知っておくべきその本質
- review
ついに語られた業界の裏側!『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
- review
愛する勇気を持てば人生が変わる!『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
- review
週末を変えれば年収も変わる!『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来
- review
人類はなぜ地球を支配できた?『サピエンス全史 上巻』ユヴァル・ノア・ハラリが解き明かす驚愕の真実