【入門編】グローバルオブジェクトとグローバル環境レコード – JavaScript実践ガイド

こんにちは。フロントエンドの最前線で、数々の「なぜか動かない」という悪夢と戦ってきたチーフアーキテクトです。

JavaScriptを学び始めると、必ず一度は「えっ、なんでこうなるの？」と頭を抱えるポイントがありますよね。特に「グローバル変数」や「windowオブジェクト」という言葉が出てくると、途端に難しく感じてしまうものです。

今日は、そんなJavaScriptの「お家のルール」について、ちょっとだけ視点を変えてお話しします。難しく考える必要はありません。一緒に紐解いていきましょう。

—

まず、JavaScriptの世界には「グローバル環境」という、いわば「街の広場」のような場所があります。

あなたがプログラムを書くとき、関数の中に閉じ込めないで外側に変数を書くと、それはこの「街の広場」に置いた荷物になります。どこからでも見えるし、誰でも手を触れられる状態ですね。

昔のJavaScriptでは、この「街の広場（グローバル環境）」と、ブラウザが用意した「window（窓）」という箱が、ほとんど同じものとして扱われていました。

// 「var」を使って街の広場に荷物を置く
var myMessage = “こんにちは！”;

// ブラウザの「窓（window）」を覗くと…
console.log(window.myMessage); // “こんにちは！” と表示される！

昔のルールでは、`var`で宣言したものは、自動的に`window`オブジェクトという「大きな棚」の中にポイっと放り込まれていたんです。だから、`window.myMessage`と書いても、ただの`myMessage`と書いても同じものが取り出せました。

—

しかし、時代は変わりました。`var`くんは、あまりに自由奔放すぎて、あちこちで「あれ？荷物が勝手に書き換わってる！」というトラブルを引き起こしてきたんです。

そこで登場したのが、現代のヒーローである `let` と `const` です。

彼らは「街の広場」に荷物を置くことはできますが、`window`という棚には絶対に入りません。

let secret = “誰にも見せません”;
const pi = 3.14;

console.log(window.secret); // undefined（あれ？窓の中には入っていない！）
console.log(window.pi); // undefined（棚には入っていません）

// でも、ちゃんと自分の名前で呼べば反応してくれます
console.log(secret); // “誰にも見せません”

想像してみてください。もしあなたが作った大切な変数が、世界中のライブラリや他の人が書いたコードと同じ場所（`window`という棚）に詰め込まれていたら？

「うっかり同じ名前を使ってしまって、誰かの変数を上書きしてしまった！」なんて事故が多発しますよね。現代のJavaScriptは、「`window`という共有の棚」と「私たちが使う変数」を別々に管理することで、この大惨事を防いでいるんです。

—

初学者が一番びっくりするのが「巻き上げ（ホイスティング）」ですよね。コードを書く前に変数が上に移動してしまう……なんて現象ですが、これも「街の広場のルール」で考えると少し納得できます。

`var`は、街の広場に「看板」を立てるのがとても速いんです。

console.log(myPet); // エラーにならない！「undefined（まだ中身は空っぽ）」と返ってくる
var myPet = “犬”;

`var`はコードを実行する前に、「この街に`myPet`っていう箱を作るよ！」と先に宣言してしまうんです。だから、実際に`myPet`という名前を呼んだときには、箱だけが先に用意されている状態なんですね。

一方で、`let`や`const`は「そんなインチキは許さない！」という厳しい性格です。

// console.log(myCat); // ここで呼ぶとエラーになります。
let myCat = “猫”;

これこそが、現代のJavaScriptが安全である理由です。「使う場所より先に変数を呼んではいけない」という、当たり前で誠実なルールを守らせているんですね。

—

ここまで読んで「なるほど、`window`という棚と、自分の変数は別々になったんだな」とイメージできたら、あなたはもう立派なJavaScript使いの入り口に立っています。

最初は「`window`にアクセスできない！」と焦ることもあるかもしれませんが、それは「あなたのコードが、他のコードと混ざらないように守られている証拠」なんです。

JavaScriptの世界は、最初は少し不思議に見えるかもしれません。でも、一つひとつ紐解いていけば、これほど合理的で面白い言語はありません。またいつでも、コードの迷路で迷ったときはここへ戻ってきてくださいね。応援していますよ！