Code Explain

Geminiの鋭い視点と分かりやすい解説で、プログラミングスキルを向上させましょう！

JavaScriptの変数スコープとグローバル変数を徹底解説：モダンJSの理解を深める鍵

2026/10/25

JavaScriptを学び始めたばかりの方も、すでに経験を積んだ開発者も、一度は「変数スコープ」の概念で頭を悩ませたことがあるのではないでしょうか。特に「グローバル変数」は便利さの裏に潜むリスクがあり、その適切な管理はJavaScriptアプリケーションの健全性を保つ上で不可欠です。

予測不能なバグ、デバッグの困難さ、そして保守性の低下――これらはすべて、変数スコープへの理解不足が引き起こす問題に直結します。本記事では、JavaScriptの変数、スコープ、そしてグローバル変数の概念を根本から理解し、モダンなJavaScript開発で求められるベストプラクティスを身につけるためのガイドを提供します。

この記事を読めば、あなたは以下の疑問に明確な答えを見つけられるでしょう。

JavaScriptの変数を宣言する方法（var, let, const）とその違いは何か？
スコープとは何か、そしてグローバル、関数、ブロックスコープの違いは？
グローバル変数がもたらすメリットと、それ以上に注意すべきデメリットは？
スコープチェーンとは何か、そして変数がどのように探索されるのか？
グローバル汚染を避け、より堅牢なコードを書くための実践的なテクニックは？
windowやglobalThisといったグローバルオブジェクトの役割とは？

さあ、JavaScriptの変数の「見通し」のルールを解き明かし、より高品質なコードを書くための第一歩を踏み出しましょう。

1. JavaScriptにおける変数の基本：`var`, `let`, `const`

JavaScriptで変数を宣言するには、主に3つのキーワードがあります。これらはそれぞれ異なる挙動とスコープを持ち、モダンなJavaScript開発ではその違いを理解することが非常に重要です。

`var`：歴史ある宣言方法（非推奨）

varはJavaScriptの初期から存在する変数の宣言方法です。

var message = "Hello, var!";
console.log(message); // Hello, var!

var message = "Hello again, var!"; // 再宣言が可能
console.log(message); // Hello again, var!

function greet() {
  var name = "Alice";
  console.log(name); // Alice
}
greet();
// console.log(name); // ReferenceError: name is not defined (関数スコープの証拠)

特徴:

関数スコープ: 後述しますが、varで宣言された変数は、関数内で宣言された場合、その関数全体で有効です。関数外で宣言された場合はグローバルスコープになります。
巻き上げ（Hoisting）: 変数宣言がそのスコープの先頭に「巻き上げられる」という特徴があります。これにより、宣言前に変数を使用してもエラーにならずundefinedが返されます。
再宣言・再代入が可能: 同じ名前の変数を何度でも再宣言・再代入できます。これは便利な反面、意図しない変数の上書きやバグの原因となることがあります。

`let`：再代入可能なブロックスコープ変数

ES2015（ES6）で導入されたletは、現代のJavaScript開発においてvarに代わる推奨される変数の宣言方法です。

let counter = 10;
console.log(counter); // 10

counter = 20; // 再代入は可能
console.log(counter); // 20

// let counter = 30; // SyntaxError: Identifier 'counter' has already been declared (再宣言は不可)

if (true) {
  let blockScopedVar = "I'm block-scoped!";
  console.log(blockScopedVar); // I'm block-scoped!
}
// console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined (ブロックスコープの証拠)

特徴:

ブロックスコープ: 後述しますが、letで宣言された変数は、{}（ブロック）内で宣言された場合、そのブロック内でのみ有効です。
巻き上げ（Hoisting）とTDZ（Temporal Dead Zone）： letも巻き上げられますが、宣言されるまでは「一時的デッドゾーン（Temporal Dead Zone - TDZ）」にあり、その間アクセスしようとするとReferenceErrorが発生します。undefinedにはなりません。
再代入は可能、再宣言は不可: 同じスコープ内で同じ名前の変数を再宣言することはできません。これにより、意図しない変数の上書きを防ぎ、コードの信頼性を高めます。

`const`：再代入不可能なブロックスコープ定数

constもES2015で導入されました。一度値が代入されると、その後は再代入ができない「定数」を宣言するために使用します。

const PI = 3.14159;
console.log(PI); // 3.14159

// PI = 3.0; // TypeError: Assignment to constant variable. (再代入は不可)

const user = { name: "Bob", age: 30 };
user.age = 31; // オブジェクトのプロパティは変更可能
console.log(user); // { name: "Bob", age: 31 }

// user = { name: "Charlie", age: 25 }; // TypeError: Assignment to constant variable. (オブジェクト自体の再代入は不可)

for (const i = 0; i < 3; i++) { // constはブロックスコープなのでループごとに新しいiが定義されるが、再代入不可のためエラーになる
  // console.log(i); // Uncaught TypeError: Assignment to constant variable. (ループ変数はi++で再代入されるためエラー)
  // constをforループのカウンターには使えません
}
// 正しいconstのforループ使用例
const numbers = [1, 2, 3];
for (const number of numbers) {
  console.log(number); // 1, 2, 3 (numberはループごとに新しい定数として定義されるため問題ない)
}

特徴:

ブロックスコープ: letと同様にブロックスコープを持ちます。
巻き上げとTDZ: letと同様に巻き上げられ、TDZが存在します。
再代入・再宣言ともに不可: 宣言時に必ず初期化が必要で、その後は値を変更することも、同じスコープ内で再宣言することもできません。
「定数」の誤解: constは「変数の参照が定数」であることを意味し、値そのものが不変であるとは限りません。オブジェクトや配列の場合、その中身のプロパティや要素は変更可能です。

まとめると:

var: 関数スコープ、巻き上げあり、再宣言・再代入可能。非推奨。
let: ブロックスコープ、TDZあり、再代入可能、再宣言不可。推奨。
const: ブロックスコープ、TDZあり、再代入・再宣言不可。推奨。

モダンなJavaScriptでは、基本的にconstをデフォルトとして使用し、後から値が変更される可能性がある場合にのみletを使用するのがベストプラクティスです。varは特殊なケースを除き、使用を避けるべきです。

2. スコープとは何か？ JavaScriptの「見通し」のルール

スコープとは、変数がどの範囲からアクセスできるかを定義する仕組みのことです。コード内の特定の領域やコンテキストによって、変数が「見える」範囲が決まります。

想像してみてください。あなたは家の中で友人と会話しています。その会話はあなたの家の中だけで聞こえ、隣の家の人には聞こえません。しかし、もしあなたが電話で話せば、地球の裏側にいる友人とでも話せます。

JavaScriptのスコープもこれに似ています。

家の中の会話 ＝ ローカルスコープ（その場所でしかアクセスできない変数）
電話の会話 ＝ グローバルスコープ（どこからでもアクセスできる変数）

スコープを理解することは、予期せぬバグを防ぎ、コードの可読性と保守性を向上させる上で非常に重要です。

JavaScriptには主に以下の3種類のスコープが存在します。

グローバルスコープ (Global Scope)
関数スコープ (Function Scope)
ブロックスコープ (Block Scope) (ES6以降)

それぞれのスコープについて詳しく見ていきましょう。

3. グローバルスコープ：全てが見える「最上位」の領域

グローバルスコープは、JavaScriptファイル（またはHTMLの<script>タグ）の最上位レベルで宣言された変数や関数が存在する領域です。これらの変数や関数は、スクリプト内のどこからでもアクセス可能であり、アプリケーション全体で共有されます。

グローバル変数の作成方法

グローバル変数は主に以下の方法で作成されます。

ファイルの最上位でvar, let, constを使って宣言する:

// グローバルスコープ
const appName = "MyAwesomeApp"; // constで宣言されたグローバル変数
let version = "1.0.0";           // letで宣言されたグローバル変数
var author = "John Doe";         // varで宣言されたグローバル変数

function displayInfo() {
  console.log(`アプリ名: ${appName}`);
  console.log(`バージョン: ${version}`);
  console.log(`作者: ${author}`);
}

displayInfo(); // どこからでもアクセス可能
console.log(appName); // MyAwesomeApp

（非推奨）var, let, constを使わずに変数を宣言する（厳格モード以外）： これは「暗黙的なグローバル変数」と呼ばれ、非常に危険な慣習です。厳格モード（'use strict';）を使用しない場合、関数内でvar, let, constなしで変数に値を代入すると、その変数は自動的にグローバル変数になります。
```
// 'use strict'; // この行がない場合

function createGlobal() {
  // 意図せずグローバル変数を作成してしまう例
  globalMessage = "I am an implicit global variable!";
}

createGlobal();
console.log(globalMessage); // I am an implicit global variable!
// どこからでもアクセスできてしまう
```
注意: 厳格モード（'use strict';）が有効な場合、この方法はReferenceErrorを発生させます。現代のJavaScriptでは常に厳格モードを使用することが推奨されるため、この方法でグローバル変数を作成することは避けるべきです。

グローバルスコープのメリット

どこからでもアクセス可能: アプリケーションのどの部分からでも、簡単に変数にアクセスできます。設定値や共通のユーティリティ関数など、広範囲で共有されるべきデータには便利に思えます。

グローバルスコープのデメリット（非常に重要！）

グローバル変数は便利さの裏に、深刻な問題を引き起こす可能性があります。

名前空間の汚染 (Global Namespace Pollution): 最も大きな問題です。グローバルスコープで宣言された変数は、他のスクリプトやライブラリと同じ名前である場合、衝突（名前の競合）を引き起こす可能性があります。これにより、意図しない変数の上書きが発生し、アプリケーションの動作が予測不能になります。
```
// script1.js
var counter = 0;

// script2.js (別のファイル、またはライブラリ)
var counter = 100; // script1.js の counter を上書きしてしまう！

console.log(counter); // 100
```
デバッグの困難さ: グローバル変数はどこからでも変更できるため、変数の値が予期せず変わってしまった場合、どのコードが変更したのかを特定するのが非常に困難になります。これはデバッグの悪夢です。
セキュリティリスク: ブラウザ環境では、グローバル変数（windowオブジェクトのプロパティ）は簡単にアクセス・変更できてしまいます。悪意のあるスクリプトによって重要なグローバル変数が改ざんされるリスクがあります。
コードの結合度上昇: 多くのモジュールや関数が特定のグローバル変数に依存していると、それらのモジュール間の結合度が上がります。これは、ある部分を変更すると、予期せぬ別の部分に影響を与える可能性が高まることを意味し、コードの保守性や再利用性を著しく低下させます。
テストの困難さ: グローバル変数に依存するコードは、テスト環境の分離が難しくなります。テスト間でグローバル変数の状態が残ってしまい、テストの信頼性を損なうことがあります。

これらのデメリットから、グローバル変数の使用は可能な限り避けるべきであり、どうしても必要な場合でも、その数を最小限に抑え、慎重に管理することが推奨されます。

4. 関数スコープ：`var`が支配する領域

関数スコープとは、関数内でvarキーワードを使って宣言された変数が、その関数全体でのみ有効となるスコープのことです。関数スコープを持つ変数は、関数の外からはアクセスできません。

function calculateSum(a, b) {
  var result = a + b; // result は関数スコープ
  console.log(`関数内での結果: ${result}`); // アクセス可能
}

calculateSum(5, 3); // 関数実行
// console.log(result); // ReferenceError: result is not defined (関数の外からはアクセス不可)

上記の例では、result変数はcalculateSum関数の内部でのみ「見通し」があります。関数が実行を終えると、result変数とその値はメモリから解放されるのが一般的です（ただし、クロージャの場合は例外があります）。

関数スコープの`var`の振る舞い

varは関数スコープに加えて、「巻き上げ（Hoisting）」という特徴も持ちます。

function showHoisting() {
  console.log(hoistedVar); // undefined (エラーにならない！)
  var hoistedVar = "私は巻き上げられました！";
  console.log(hoistedVar); // 私は巻き上げられました！
}
showHoisting();

このコードは、JavaScriptエンジンによって以下のように解釈されます。

function showHoisting() {
  var hoistedVar; // 宣言部分が関数の先頭に巻き上げられる
  console.log(hoistedVar); // undefined
  hoistedVar = "私は巻き上げられました！"; // 代入は元の場所で行われる
  console.log(hoistedVar);
}
showHoisting();

この巻き上げの挙動は、特に大規模な関数内でvarを使用した場合、変数がどこで宣言されたかを追跡しにくくし、混乱や予期せぬバグの原因となることがあります。そのため、現代のJavaScript開発では、巻き上げによる問題を避けるためにもletやconstの使用が推奨されています。

関数スコープは、コードのモジュール化とカプセル化（関連するコードを一つのブロックにまとめること）に役立ちます。関数内で宣言された変数が外部に漏れ出さないため、グローバル汚染を防ぐ重要な手段となります。

5. ブロックスコープ：`let`と`const`が切り開いた新時代

ブロックスコープはES2015（ES6）で導入された新しいスコープの概念で、主にletとconstキーワードによって実現されます。ブロックスコープを持つ変数は、{}（波括弧）で囲まれたブロック内で宣言された場合、そのブロック内でのみ有効となります。

ブロックは、if文、forループ、whileループ、または単独のブロックなど、さまざまな場所で作成されます。

`if`文でのブロックスコープの例

if (true) {
  let blockScopedLet = "I am a block-scoped let!";
  const blockScopedConst = "I am a block-scoped const!";
  var functionScopedVar = "I am a function-scoped var (even in a block)!"; // varはブロックスコープではない

  console.log(blockScopedLet);   // アクセス可能
  console.log(blockScopedConst); // アクセス可能
  console.log(functionScopedVar); // アクセス可能
}

// console.log(blockScopedLet);   // ReferenceError: blockScopedLet is not defined
// console.log(blockScopedConst); // ReferenceError: blockScopedConst is not defined
console.log(functionScopedVar); // アクセス可能 (関数スコープであるため、ifブロックの外でも見える)

この例からわかるように、letとconstはifブロックの外からはアクセスできませんが、varはifブロックの外でもアクセスできてしまいます。これは、varがブロックスコープを持たないためです。

`for`ループでのブロックスコープの例

forループでletを使用すると、ループの各イテレーションで新しい変数が作成されるため、非同期処理などで非常に役立ちます。

for (let i = 0; i < 3; i++) {
  console.log(`ループ内: i = ${i}`);
}
// console.log(`ループ外: i = ${i}`); // ReferenceError: i is not defined

// varの場合
for (var j = 0; j < 3; j++) {
  console.log(`ループ内: j = ${j}`);
}
console.log(`ループ外: j = ${j}`); // ループ外: j = 3 (varはブロックスコープではないため、ループ終了時の値が残る)

この違いは、特にイベントリスナーや非同期処理をループ内で設定する場合に重要になります。varだと意図しない値がキャプチャされてしまう問題（クロージャのセクションで少し触れます）が発生しますが、letやconstを使えばこの問題を自然に解決できます。

ブロックスコープのメリット

変数のライフサイクル管理の向上: 変数が不要になった時点でスコープ外になるため、メモリ効率が向上し、予期せぬ副作用を減らせます。
名前の衝突防止: グローバルスコープや他のブロックスコープとの名前の衝突を防ぎ、安全なコードを書きやすくなります。
コードの可読性・保守性向上: 変数の有効範囲が明確になるため、コードを読んで理解しやすくなり、バグの特定や修正が容易になります。

ブロックスコープの導入により、JavaScriptの変数の挙動はより直感的で予測可能になりました。現代のJavaScriptでは、常にletまたはconstを使用し、ブロックスコープを活用することが、より堅牢なコードを書くための基本となります。

6. `var`、`let`、`const`の決定的な違いを理解する

ここまでそれぞれの宣言方法とスコープの種類を見てきましたが、ここで改めてvar、let、constの最も重要な違いを比較し、理解を深めましょう。

特徴	`var`	`let`	`const`
スコープ	関数スコープ	ブロックスコープ	ブロックスコープ
巻き上げ (Hoisting)	あり (`undefined`で初期化される)	あり (TDZで`ReferenceError`)	あり (TDZで`ReferenceError`)
再宣言	可能	不可 (SyntaxError)	不可 (SyntaxError)
再代入	可能	可能	不可 (TypeError)
初期化	任意 (未初期化だと`undefined`)	任意 (未初期化だと`undefined`)	必須 (未初期化だとSyntaxError)
現代の推奨	ほとんど使わない（レガシーコード向け）	必要に応じて使う（再代入がある場合）	デフォルトで使う（再代入がない場合）

巻き上げ（Hoisting）とTDZ（Temporal Dead Zone）の詳細

varの巻き上げ: varで宣言された変数は、その宣言が実行される前に、現在のスコープの最上部に移動（巻き上げ）し、undefinedで初期化されます。そのため、宣言前に変数にアクセスしてもReferenceErrorではなくundefinedが返されます。
```
console.log(a); // undefined
var a = 10;
console.log(a); // 10
```
let/constの巻き上げとTDZ: letやconstで宣言された変数も、varと同様に巻き上げられます。しかし、varとは異なり、宣言されるまでは初期化されません。この、変数がスコープに入ってから宣言が実行されるまでの期間を一時的デッドゾーン（Temporal Dead Zone - TDZ）と呼びます。TDZ中に変数にアクセスしようとするとReferenceErrorが発生します。
```
// console.log(b); // ReferenceError: Cannot access 'b' before initialization (TDZ)
let b = 20;
console.log(b); // 20

// console.log(c); // ReferenceError: Cannot access 'c' before initialization (TDZ)
const c = 30;
console.log(c); // 30
```
TDZは、宣言前の変数使用による潜在的なバグを防ぐ上で非常に効果的です。

再宣言・再代入の挙動

var: 同じスコープ内で何度でも再宣言・再代入が可能です。これがグローバル汚染や予期せぬ変数の上書きの大きな原因でした。
```
var x = 1;
var x = 2; // 問題なし
x = 3;     // 問題なし
console.log(x); // 3
```

let: 同じスコープ内での再宣言はできませんが、再代入は可能です。

let y = 1;
// let y = 2; // SyntaxError: Identifier 'y' has already been declared
y = 3;     // 問題なし
console.log(y); // 3

const: 再宣言も再代入もできません。宣言時に必ず初期化が必要です。

const z = 1;
// const z = 2; // SyntaxError: Identifier 'z' has already been declared
// z = 3;     // TypeError: Assignment to constant variable.
console.log(z); // 1

ただし、constで宣言した変数がオブジェクトや配列の場合、その中身のプロパティや要素は変更可能です。constは「変数が参照するメモリアドレスが不変である」ことを意味します。

const myObject = { name: "Alice" };
myObject.name = "Bob"; // OKAY! オブジェクトのプロパティは変更可能
console.log(myObject); // { name: "Bob" }

// myObject = { name: "Charlie" }; // TypeError! 変数myObjectが参照するオブジェクト自体を再代入することはできない

これらの違いをしっかりと理解し、適切に使い分けることで、より堅牢で保守性の高いJavaScriptコードを書くことができます。現代では、特別な理由がない限りvarの使用は避け、constを基本として、値が後で変更される場合にのみletを使用するようにしましょう。

7. スコープチェーン：変数を「探しに行く」経路

JavaScriptエンジンが特定の変数にアクセスしようとするとき、その変数が現在のスコープで見つからない場合、エンジンは外側のスコープへと探索を続けます。この階層的な変数の探索メカニズムをスコープチェーンと呼びます。

スコープチェーンの仕組み

スコープチェーンは、関数が定義された場所（字句環境、Lexical Environment）に基づいて静的に決定されます。関数が呼び出されるたびに新しいスコープが作成され、そのスコープは外側のスコープへの参照を持ちます。これにより、JavaScriptエンジンは変数を「内側から外側へ」と順に探しに行くことができます。

例を見てみましょう。

const globalVar = "グローバル変数"; // 1. グローバルスコープ

function outerFunction() {
  const outerVar = "アウタースコープ変数"; // 2. outerFunctionのスコープ

  function innerFunction() {
    const innerVar = "インナースコープ変数"; // 3. innerFunctionのスコープ
    console.log(innerVar); // innerFunctionのスコープ内で見つかる
    console.log(outerVar); // innerFunctionのスコープになければ、outerFunctionのスコープを探しに行く
    console.log(globalVar); // outerFunctionのスコープになければ、グローバルスコープを探しに行く
    // console.log(nonExistentVar); // どこにも見つからなければ ReferenceError
  }

  innerFunction();
}

outerFunction();

/*
出力結果:
インナースコープ変数
アウタースコープ変数
グローバル変数
*/

この例では、innerFunctionの内部でinnerVar, outerVar, globalVarにアクセスしています。

innerVarを探す際、JavaScriptエンジンはまずinnerFunction自身のスコープ（ローカルスコープ）を探します。ここでinnerVarが見つかるので、すぐにアクセスできます。
outerVarを探す際、innerFunctionのスコープにはouterVarが存在しないため、エンジンは一つ外側のスコープ、つまりouterFunctionのスコープを探しに行きます。ここでouterVarが見つかります。
globalVarを探す際、innerFunctionにもouterFunctionにもglobalVarが存在しないため、エンジンはさらに外側のスコープ、つまりグローバルスコープを探しに行きます。ここでglobalVarが見つかります。
もしnonExistentVarのようにどこにも存在しない変数を参照しようとすると、スコープチェーンの最後まで探索しても見つからないため、ReferenceErrorが発生します。

スコープチェーンの重要性

変数の可視性の管理: スコープチェーンによって、変数がどの範囲から見えるかが厳密に制御されます。これはカプセル化（情報の隠蔽）の基本であり、コードのモジュール性や保守性を高めます。
クロージャの実現: スコープチェーンは、JavaScriptの強力な機能であるクロージャの基盤となります。クロージャについては次のセクションで詳しく説明しますが、関数がその定義されたスコープ環境を記憶し続ける能力は、このスコープチェーンの仕組みによって成り立っています。
名前の衝突防止: 内側のスコープで宣言された変数は、外側のスコープの同じ名前の変数を「シャドウ（隠す）」します。これにより、内側のコードは外側の変数を誤って変更するリスクを減らせます。
```
const myName = "Global John";

function printName() {
  const myName = "Function Alice"; // グローバルの myName をシャドウする
  console.log(myName); // Function Alice
}

printName();
console.log(myName); // Global John
```

スコープチェーンを理解することは、JavaScriptが変数をどのように管理し、アクセスするのかを深く理解するために不可欠です。これにより、より予測可能で堅牢なコードを書くことができるようになります。

8. グローバルオブジェクト（`window`と`globalThis`）の正体

JavaScriptの実行環境には、常に最上位のグローバルオブジェクトが存在します。このオブジェクトは、グローバルスコープで宣言された変数や関数をプロパティとして持ち、また、JavaScript実行環境が提供する組み込みのオブジェクト（Math, Array, Objectなど）や関数（setTimeout, console.logなど）も含まれています。

`window`オブジェクト（ブラウザ環境）

Webブラウザの環境では、グローバルオブジェクトはwindowです。

グローバルスコープでvarを使って宣言された変数や関数は、windowオブジェクトのプロパティとして追加されます。

var greeting = "Hello from global!";

function sayHi() {
  console.log("Hi!");
}

console.log(window.greeting); // Hello from global!
window.sayHi();               // Hi!

letやconstで宣言されたグローバル変数は、windowオブジェクトのプロパティにはなりません。これらはスクリプトのスコープ（モジュールスコープ）内に存在し、windowのプロパティとして直接アクセスすることはできません。
```
let siteName = "My Website";
const API_KEY = "abc123";

console.log(window.siteName);  // undefined
console.log(window.API_KEY);   // undefined
console.log(siteName);         // My Website (直接変数名でアクセスは可能)
```
これはletとconstがグローバル汚染を防ぐのに役立つもう一つの理由です。
また、'use strict';モードでない場合にvar, let, constを付けずに代入された暗黙的なグローバル変数もwindowオブジェクトのプロパティになります。
```
// 'use strict'; がない場合
function createImplicitGlobal() {
  implicitVar = "I am implicit!";
}
createImplicitGlobal();
console.log(window.implicitVar); // I am implicit!
```

`global`オブジェクト（Node.js環境）

Node.jsの環境では、グローバルオブジェクトはglobalです。挙動はwindowと似ていますが、Node.jsでは各ファイルがデフォルトでモジュールスコープを持つため、最上位でvar宣言してもglobalオブジェクトのプロパティにはなりません（厳密にはglobalのglobalプロパティがglobal自身を参照する）。しかし、明示的にglobal.propertyName = valueとすることでグローバルに設定できます。

// Node.js環境
// global.js
const myNodeApp = "Node App"; // デフォルトでモジュールスコープ

// 明示的に global オブジェクトに設定する
global.nodeGlobalVar = "I am a Node.js global!";

console.log(global.nodeGlobalVar); // I am a Node.js global!
// console.log(global.myNodeApp); // undefined

`globalThis`オブジェクト（ユニバーサルなグローバルオブジェクト）

これまで、グローバルオブジェクトは環境によってwindowだったりglobalだったりと異なっていました。しかし、ES2020でglobalThisという新しいグローバルオブジェクトが標準化されました。

globalThisは、どのJavaScript実行環境でも常にグローバルオブジェクトを参照する、ユニバーサルなプロパティです。

ブラウザ環境ではwindowを指します。
Node.js環境ではglobalを指します。
Web Workersではselfを指します。

// どのJavaScript環境でも動作
console.log(globalThis === window); // ブラウザで true
console.log(globalThis === global); // Node.jsで true

globalThis.universalVar = "Accessible everywhere!";
console.log(universalVar); // Accessible everywhere!

globalThisの導入により、環境に依存しないグローバルなコードを書くことがより容易になりました。

グローバルオブジェクトを理解することは、JavaScriptの実行環境全体を把握するために重要です。しかし、前述の「グローバルスコープのデメリット」を踏まえ、グローバルオブジェクトに安易にプロパティを追加することは、極力避けるべきです。

9. グローバル汚染を避けるためのベストプラクティス

グローバル変数のデメリットは非常に大きく、予測不能なバグやアプリケーションの不安定化につながります。現代のJavaScript開発では、グローバルスコープを可能な限りクリーンに保ち、「グローバル汚染」を避けることが必須とされています。

以下に、グローバル汚染を避けるための主要なベストプラクティスを紹介します。

1. `var`ではなく`let`と`const`を積極的に使う

これが最も基本的かつ重要な原則です。 letとconstはブロックスコープを持つため、varのように意図せずグローバル変数になったり、if文やforループの外に漏れ出す心配がありません。

constをデフォルトにする: 値が変更されない変数にはconstを使用し、不変性を強制します。
letを必要に応じて使う: 値が後から変更される可能性がある場合にのみletを使用します。

この習慣を徹底するだけで、多くのグローバル汚染の問題を未然に防げます。

2. 即時実行関数式（IIFE: Immediately Invoked Function Expression）の活用

ES6のモジュールシステムが普及する以前は、IIFEがグローバル汚染を防ぐための主要なテクニックでした。関数はそれ自身のスコープを作成するため、IIFE内で宣言された変数はその関数スコープ内に閉じ込められ、グローバルスコープを汚染しません。

// IIFEの例
(function() {
  var privateVar = "I am private to this IIFE!";
  const secretKey = "MySecret";

  function doSomething() {
    console.log(privateVar);
  }
  doSomething();

  // グローバルには何も漏れない
})();

// console.log(privateVar); // ReferenceError
// console.log(secretKey);  // ReferenceError

現在でも、サードパーティのライブラリをラップしたり、特定のスクリプトブロックを独立させたりする場合に有効な手法です。

3. モジュールシステム（ES Modules）の導入

ES2015で導入されたES Modules (import/export)は、JavaScriptにおいてグローバル汚染を避けるための最も強力で現代的なソリューションです。

ES Modulesのファイル（.jsファイルをtype="module"で読み込むか、Node.jsで.mjsファイルとして扱う）では、ファイル内の最上位で宣言された変数や関数は、デフォルトでそのモジュール内部のスコープに閉じ込められます（モジュールスコープ）。
明示的にexportキーワードを使わない限り、外部からアクセスすることはできません。

// myModule.js
const privateHelper = "これはモジュール内部のみの変数です";

export function publicFunction() {
  console.log(`公開関数です。${privateHelper}`);
}

export const publicData = {
  name: "Module Data"
};

// app.js
import { publicFunction, publicData } from './myModule.js';

publicFunction();       // 公開関数です。これはモジュール内部のみの変数です
console.log(publicData); // { name: "Module Data" }

// console.log(privateHelper); // ReferenceError: privateHelper is not defined

Web開発ではimportとexportを使用し、Node.jsではES ModulesまたはCommonJS (require/module.exports)を使用して、コードをモジュール化することが標準的なベストプラクティスです。

4. 名前空間オブジェクトの利用（特定のグローバルが必要な場合）

どうしてもグローバルなデータや機能が必要な場合は、単一のグローバルオブジェクト（名前空間オブジェクト）を作成し、その中にすべての関連するプロパティやメソッドをまとめるのが良い方法です。これにより、グローバルスコープに存在する変数を1つに限定し、名前の衝突のリスクを大幅に減らせます。

// グローバルにMyAPPというオブジェクトを一つだけ作成
const MyAPP = {}; // constを使うことでMyAPP自体の再代入を防ぐ

MyAPP.settings = {
  theme: "dark",
  language: "ja"
};

MyAPP.utility = {
  formatDate: function(date) {
    // 日付整形ロジック
    return date.toISOString();
  },
  capitalize: function(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
  }
};

// どこからでも MyAPP を通じてアクセス
console.log(MyAPP.settings.theme); // dark
console.log(MyAPP.utility.capitalize("hello")); // Hello

このようにすることで、グローバルスコープがMyAPPという一つのエントリーポイントだけで済み、他のライブラリなどとの名前衝突のリスクを最小限に抑えられます。

5. `'use strict'`モードの徹底

厳格モード（Strict Mode）は、JavaScriptにいくつかの制約を課し、安全でない慣習（例えば、varなしでの暗黙的なグローバル変数作成）をエラーとして扱います。

ファイルの先頭または関数の先頭に'use strict';を記述することで、厳格モードを有効にできます。

'use strict';

function createStrictGlobal() {
  // implicitVar = "This will cause an error!"; // ReferenceError: implicitVar is not defined
}
createStrictGlobal();

現代のJavaScriptでは、ES Modulesを使用すると自動的に厳格モードが適用されるため、明示的に記述する必要がないことが多いですが、通常のスクリプト（type="module"ではない）では常に記述することを推奨します。

これらのベストプラクティスを組み合わせることで、グローバル汚染を効果的に防ぎ、より堅牢で保守性の高いJavaScriptアプリケーションを開発することができます。

10. 【発展】クロージャとスコープの関係

スコープチェーンの理解は、JavaScriptの最も強力でよく使われる機能の一つである「クロージャ（Closure）」を理解するための鍵となります。

クロージャとは何か？

クロージャとは、「関数がその定義されたスコープ（字句環境）を記憶し続ける」というJavaScriptの特性です。言い換えれば、内部関数が外部関数スコープ内の変数への参照を保持し、外部関数が実行を終了した後でも、それらの変数にアクセスできる状態を指します。

この「記憶」は、関数が定義された時点のスコープチェーンに基づいて形成されます。

例を見てみましょう。

function makeCounter() {
  let count = 0; // makeCounterのスコープ内の変数

  return function() { // この匿名関数がクロージャ
    count++; // 外部スコープのcountにアクセス
    return count;
  };
}

const counter1 = makeCounter();
console.log(counter1()); // 1
console.log(counter1()); // 2

const counter2 = makeCounter(); // 別のクロージャを作成
console.log(counter2()); // 1 (counter1とは独立したcountを持つ)
console.log(counter1()); // 3 (counter1は独自のcountを記憶し続けている)

この例では、makeCounter関数が実行を終了しても、その中で定義されたcount変数に、返された匿名関数（クロージャ）がアクセスし続けることができます。

makeCounterが呼び出されるたびに、新しいcount変数が作成されます。
返された匿名関数は、そのmakeCounterの特定のcount変数への参照を「閉じ込めて（close over）」記憶します。
counter1とcounter2はそれぞれ異なるmakeCounterの実行によって作成されたため、それぞれ独立したcount変数を記憶し、互いに影響を与えません。

クロージャの応用例

クロージャは様々な場面で強力なツールとして利用されます。

プライベート変数の実現: オブジェクト指向の「プライベート変数」のように、外部から直接アクセスできないが、特定の公開メソッドを通じてのみ操作できる変数を実現できます。

function createPerson(name) {
  let _name = name; // プライベート変数として振る舞う

  return {
    getName: function() {
      return _name;
    },
    setName: function(newName) {
      _name = newName;
    }
  };
}

const person = createPerson("Alice");
console.log(person.getName()); // Alice
person.setName("Bob");
console.log(person.getName()); // Bob
// console.log(person._name); // undefined - 直接アクセス不可

関数ファクトリー（関数を返す関数）: 特定の条件に基づいて異なる動作をする関数を生成するために使用されます。

function multiplier(factor) {
  return function(number) {
    return number * factor;
  };
}

const multiplyBy2 = multiplier(2);
const multiplyBy5 = multiplier(5);

console.log(multiplyBy2(10)); // 20
console.log(multiplyBy5(10)); // 50

イベントハンドラやコールバックでの変数の保持: ループ内でイベントリスナーを設定する場合などに、各イテレーションの変数を正しくキャプチャするために利用されます（let/constのブロックスコープでも同様の問題が解決されます）。

クロージャは、JavaScriptが関数を第一級オブジェクトとして扱うことができる特性と、スコープチェーンの組み合わせによって生まれる非常に強力な概念です。これを理解し活用することで、より柔軟で表現力豊かな、そして堅牢なコードを書くことができるようになります。

11. まとめ：変数のスコープを制覇し、JavaScriptをマスターする道へ

本記事では、「JavaScript 変数スコープグローバル」というテーマについて、その基礎から応用、そして現代のベストプラクティスまでを網羅的に解説しました。

重要なポイントを改めて振り返りましょう。

変数の宣言:
- var: 関数スコープ、巻き上げあり、再宣言・再代入可能。現代では非推奨。
- let: ブロックスコープ、TDZあり、再代入可能、再宣言不可。推奨。
- const: ブロックスコープ、TDZあり、再代入・再宣言不可。デフォルトで推奨。
スコープの種類:
- グローバルスコープ: スクリプト全体でアクセス可能。便利な反面、グローバル汚染のリスクが非常に高いため、使用は極力避けるべき。
- 関数スコープ: varで宣言された変数が関数内で有効。
- ブロックスコープ: letやconstで宣言された変数が{}ブロック内で有効。変数のライフサイクル管理を改善し、安全なコーディングを促進する。
スコープチェーン:
- JavaScriptエンジンが変数を探索する階層的な仕組み。内側のスコープから外側のスコープへと順に探していく。クロージャの基盤となる。
グローバルオブジェクト (window, global, globalThis):
- 各実行環境における最上位のオブジェクト。グローバル変数は（主にvarや暗黙的に）このオブジェクトのプロパティとなる。globalThisは環境に依存しないグローバルオブジェクト参照を提供する。
グローバル汚染回避のベストプラクティス:
- varではなくletとconstを常に使用する。
- ES Modulesを活用し、コードをモジュール化する。
- どうしてもグローバルなものが必要な場合は、名前空間オブジェクトにまとめる。
- 'use strict'モードを徹底する。
- （レガシーコード向けに）IIFEを利用してプライベートスコープを作成する。
クロージャ:
- 関数がその定義されたスコープを記憶し続ける特性。スコープチェーンによって実現され、プライベート変数や関数ファクトリーなど、高度な機能を実現する。

これらの知識は、JavaScriptで予測可能で堅牢なコードを書くための土台となります。スコープのルールを理解し、適切に活用することで、あなたはデバッグの時間を減らし、より保守性の高い、そして読みやすいコードを構築できるようになるでしょう。

今後は、コードを書く際に「この変数はどのスコープに属しているか？」「グローバル汚染のリスクはないか？」と常に自問自答する習慣を身につけてください。その積み重ねが、あなたを真のJavaScriptマスターへと導きます。

Happy Coding!

＼この記事をシェア／

この記事を書いた人

pekemalu
I love codes. I also love prompts (spells). But I get a lot of complaints (errors). I want to be loved by both of you as soon as possible.

JavaScriptの変数スコープとグローバル変数を徹底解説：モダンJSの理解を深める鍵

1. JavaScriptにおける変数の基本：var, let, const

var：歴史ある宣言方法（非推奨）

let：再代入可能なブロックスコープ変数

const：再代入不可能なブロックスコープ定数

2. スコープとは何か？ JavaScriptの「見通し」のルール

3. グローバルスコープ：全てが見える「最上位」の領域

グローバル変数の作成方法

グローバルスコープのメリット

グローバルスコープのデメリット（非常に重要！）

4. 関数スコープ：varが支配する領域

関数スコープのvarの振る舞い

5. ブロックスコープ：letとconstが切り開いた新時代

if文でのブロックスコープの例

forループでのブロックスコープの例

ブロックスコープのメリット

6. var、let、constの決定的な違いを理解する

巻き上げ（Hoisting）とTDZ（Temporal Dead Zone）の詳細

再宣言・再代入の挙動

7. スコープチェーン：変数を「探しに行く」経路

スコープチェーンの仕組み

スコープチェーンの重要性

8. グローバルオブジェクト（windowとglobalThis）の正体

windowオブジェクト（ブラウザ環境）

globalオブジェクト（Node.js環境）

globalThisオブジェクト（ユニバーサルなグローバルオブジェクト）

9. グローバル汚染を避けるためのベストプラクティス

1. varではなくletとconstを積極的に使う

2. 即時実行関数式（IIFE: Immediately Invoked Function Expression）の活用

3. モジュールシステム（ES Modules）の導入

4. 名前空間オブジェクトの利用（特定のグローバルが必要な場合）

5. 'use strict'モードの徹底

10. 【発展】クロージャとスコープの関係

クロージャとは何か？

クロージャの応用例

11. まとめ：変数のスコープを制覇し、JavaScriptをマスターする道へ

今読まれてます

カテゴリ

タグ

検索

広告

1. JavaScriptにおける変数の基本：`var`, `let`, `const`

`var`：歴史ある宣言方法（非推奨）

`let`：再代入可能なブロックスコープ変数

`const`：再代入不可能なブロックスコープ定数

4. 関数スコープ：`var`が支配する領域

関数スコープの`var`の振る舞い

5. ブロックスコープ：`let`と`const`が切り開いた新時代

`if`文でのブロックスコープの例

`for`ループでのブロックスコープの例

6. `var`、`let`、`const`の決定的な違いを理解する

8. グローバルオブジェクト（`window`と`globalThis`）の正体

`window`オブジェクト（ブラウザ環境）

`global`オブジェクト（Node.js環境）

`globalThis`オブジェクト（ユニバーサルなグローバルオブジェクト）

1. `var`ではなく`let`と`const`を積極的に使う

5. `'use strict'`モードの徹底