皆さん、こんにちは！チーフアーキテクトの〇〇です。

JavaScriptの世界へようこそ！プログラミングの世界で「記憶」を司る変数。これって、とっても重要な存在ですよね。JavaScriptには、変数を宣言する方法がいくつかありますが、特に「`var`」「`let`」「`const`」という3つのキーワードが有名です。

この中でも、今日はちょっと歴史のある`var`というキーワードが引き起こす、ある現象に焦点を当ててみたいと思います。それは、「グローバルオブジェクトの汚染」という、ちょっと怖い響きの問題。でも安心してください！このメカニズムを理解し、モダンなJavaScriptでどう解決するのかを知れば、あなたのコードはより堅牢で、未来にわたってメンテナンスしやすいものになりますよ。

ここをクリアすれば、JavaScriptの基本はバッチリマスターできます！さあ、一緒にJavaScriptの奥深い世界を覗いていきましょう。

—

昔ながらの`var`：なぜ`window`にくっついちゃうの？

まず、JavaScriptを学習し始めた皆さんが最初に触れることが多いであろう`var`から見ていきましょう。

`var`で宣言した変数のスコープ

`var`で変数を宣言すると、その変数は「関数スコープ」または「グローバルスコープ」という範囲で使えるようになります。

関数スコープ: `function`キーワードで定義された関数の内側で`var`宣言された変数は、その関数の外からはアクセスできません。
グローバルスコープ: どの関数にも囲まれずに、スクリプトの最上位（トップレベル）で`var`宣言された変数は、どこからでもアクセスできる「グローバル変数」になります。

問題は、この「グローバルスコープ」で`var`を使って変数を宣言したときに発生します。

`window`オブジェクトへのプロパティ追加

ブラウザで動くJavaScriptの場合、グローバルスコープは「`window`オブジェクト」という特別なオブジェクトが管理しています。この`window`オブジェクトは、ブラウザのウィンドウそのものや、JavaScriptの実行環境に関する情報をたくさん持っている、いわば「JavaScriptの司令塔」のような存在です。

そして、トップレベルで`var`を使って変数を宣言すると、その変数は自動的に`window`オブジェクトのプロパティとして追加されてしまうんです。

ちょっとコードで見てみましょう。ブラウザの開発者ツールのコンソールを開いて、以下のコードを試してみてください。

// JavaScriptファイル (または

// some-library.js
var message = "さようなら！"; // おっと、同じ変数名だ！

このように、同じ`message`という名前の変数が、後から読み込まれたライブラリによって上書きされてしまいました。あなたのコードが期待した「こんにちは！」ではなく、「さようなら！」と表示されてしまいます。これが名前の衝突です。

まるで、全世界でたった一つしか使えない名前を早い者勝ちで奪い合っているような状態ですよね。これでは、異なるコードベースを組み合わせたときに、予期せぬバグの温床になってしまいます。

2. デバッグが困難になる

グローバル変数が多すぎると、どこでその変数が変更されたのか、誰がその変数を使っているのかを追跡するのが非常に難しくなります。まるで、広大な砂漠で落とし物を探すようなものです。

3. 予期せぬ挙動

特に意図せずグローバル変数を上書きしてしまった場合、プログラム全体でどこにどんな影響が出るかわからなくなり、原因不明のバグに悩まされることになります。

---

救世主`let`と`const`：ブロックが境界線

ES2015 (ES6) というJavaScriptの大きなアップデートで、このグローバル汚染の問題を解決するために「`let`」と「`const`」という新しい変数宣言のキーワードが導入されました。これらは、`var`とは全く異なる振る舞いをします。

ブロックスコープの誕生

`let`と`const`で宣言された変数は、「ブロックスコープ」という新しいスコープを持ちます。ブロックスコープとは、`{` と `}` で囲まれたブロック（例えば、`if`文、`for`ループ、関数など）の内側でだけ有効なスコープのことです。

そして、最も重要な違いは、`let`や`const`で宣言した変数は、たとえトップレベルで宣言したとしても、`window`（または`global`/`globalThis`）オブジェクトのプロパティにはなりません。

もう一度、ブラウザの開発者ツールで試してみましょう。

// トップレベルで let と const で宣言
let productName = "スマートウォッチ";
const appVersion = "1.0.0";

// var の時と違って、windowオブジェクトのプロパティにはなりません
console.log(window.productName); // 出力: undefined
console.log(window.appVersion); // 出力: undefined

// もちろん、直接変数名でアクセスはできます
console.log(productName); // 出力: "スマートウォッチ"
console.log(appVersion); // 出力: "1.0.0"

// ブロックスコープの例
if (true) {
let tempMessage = "これはブロック内限定のメッセージです";
console.log(tempMessage); // 出力: "これはブロック内限定のメッセージです"
}
// console.log(tempMessage); // エラー: tempMessage is not defined (ブロックスコープの外からはアクセス不可)

`window.productName`や`window.appVersion`が`undefined`になっているのが確認できますね！これで、意図しないグローバルオブジェクトの汚染を防ぐことができるようになりました。

`let`: 再代入可能な変数を宣言します。（例: カウンターやユーザー入力など、値が変わるもの）
`const`: 再代入不可能な定数を宣言します。一度値を設定したら、変更できません。（例: アプリケーションのバージョン、APIキーなど、固定値のもの）

基本的には、`const`をまず使い、値が本当に変わる必要がある場合のみ`let`を使う、というのがモダンJavaScriptのベストプラクティスです。`var`は、特別な理由がない限り、もう使う必要はないでしょう。

---

モダンJavaScriptの常識：モジュールとグローバル汚染の完全遮断

`let`と`const`の登場で、グローバル汚染のリスクは大幅に減りました。しかし、さらに一歩進んだ、完全に独立したJavaScriptの実行環境を提供してくれる仕組みがあります。それが「ES Modules（ESM）」です！

ES Modules (ESM) とは？

ES Modulesは、JavaScriptのコードを小さな部品（モジュール）に分割し、それぞれが独立したスコープを持つように設計されたシステムです。これにより、各モジュール内で宣言された変数は、たとえ`var`で宣言したとしても、そのモジュール内でのみ有効となり、グローバルオブジェクトを汚染することはありません。

モジュールは、`import`と`export`というキーワードを使って、必要な機能だけを他のモジュールとやり取りします。これにより、コードの再利用性や保守性が格段に向上します。

実際に、モジュールとしてJavaScriptファイルを読み込んでみましょう。

まず、`module.js`というファイルを作成します。

// module.js (ES Modulesとして実行されるファイル)

var moduleVar = "私はモジュール内の変数です (var)";
let moduleLet = "私はモジュール内の変数です (let)";
const moduleConst = "私はモジュール内の定数です (const)";

// モジュール内で宣言された変数は、外部から直接アクセスできません
console.log("module.js内で:", moduleVar); // 出力: "私はモジュール内の変数です (var)"

// 外部に公開したい変数や関数は export します
export const exportedValue = "私は外に公開される定数です！";
export function sayHelloFromModule() {
console.log("モジュールからこんにちは！");
}

次に、このモジュールを読み込むHTMLファイルを作成します。

ES Modules Test

ES Modulesでグローバル汚染を回避

`type="module"`を付けてスクリプトを読み込むことで、そのスクリプトはモジュールとして扱われ、その中で宣言された`var`変数でさえも、グローバルオブジェクトを汚染しなくなります。これは、現代のWeb開発における強力な防御策と言えるでしょう。

IIFE (即時実行関数式) について (補足)

昔のJavaScriptでは、モジュールシステムがなかったため、グローバル汚染を防ぐために「IIFE (Immediately Invoked Function Expression)」という手法がよく使われていました。

// IIFE の例
(function() {
var privateVar = "私はプライベートな変数です";
console.log(privateVar); // 出力: "私はプライベートな変数です"
})(); // 関数を定義して、すぐに実行！

// console.log(privateVar); // エラー: privateVar is not defined
// console.log(window.privateVar); // 出力: undefined

関数の中に`var`変数を閉じ込めることで、関数スコープを利用してグローバル汚染を防いでいたわけです。しかし、今はES Modulesというより洗練された仕組みがあるので、特別な理由がない限り、IIFEを積極的に使う必要はなくなってきています。

---

まとめ：あなたのコードは、もう汚さない！

今日のテーマはいかがでしたでしょうか？JavaScriptの変数宣言とスコープ、そしてグローバルオブジェクトの汚染という、一見すると地味ながらも非常に重要な概念を深く掘り下げてきました。

ポイントをまとめると、以下のようになります。

1. `var`はグローバル汚染の原因になりやすい: トップレベルで`var`宣言すると、ブラウザでは`window`オブジェクトのプロパティになり、Node.jsでは`global`/`globalThis`のプロパティになります。これが名前の衝突やデバッグの困難さを招きます。
2. `let`と`const`が救世主: ES2015で導入された`let`と`const`は「ブロックスコープ」を持ち、グローバルオブジェクトを汚染しません。特別な理由がない限り、`var`ではなくこれらを使いましょう。
3. ES Modulesで完璧な分離: `type="module"`を指定してJavaScriptファイルを読み込むES Modulesは、そのモジュール自体が独立したスコープを持つため、たとえ`var`で宣言したとしてもグローバル汚染を防いでくれます。現代のJavaScript開発では、モジュールシステムを活用するのが基本です。

これらを理解し、日々のコーディングで実践することで、あなたのJavaScriptコードはより整理され、予測可能で、メンテナンスしやすいものになるはずです。

「グローバルオブジェクトの汚染」という落とし穴を避ける知識は、JavaScriptをマスターするための第一歩であり、非常に価値のあるスキルですよ。

これからも、一緒にJavaScriptの奥深い世界を探求していきましょう！