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

こんにちは。フロントエンドの迷宮を日々探索しているチーフアーキテクトです。

JavaScriptを学び始めると、必ずと言っていいほど「グローバルスコープ」や「windowオブジェクト」という言葉にぶつかりますよね。最初はなんだか難しそうに聞こえますが、実はこれ、「家の中の共有スペースと、自分の引き出し」の話に例えると、驚くほどスッキリ理解できるんです。

今日は、JavaScriptの「場所」の話を、少しだけ深掘りしてみましょう。

—

1. グローバルスコープは「リビングの大きなテーブル」

JavaScriptには「どこからでも見える変数」というものがあります。これがグローバルスコープです。

例えるなら、「家族全員が使うリビングの大きなテーブル」のようなもの。ここにノートを置けば、お父さんもお母さんも子供も、誰でもそのノートの中身を読めるし、勝手に書き換えたりもできてしまいます。

これ、便利そうに見えますよね？でも、もし家族みんなが同じテーブルに勝手に書き込みを始めたらどうなるでしょうか。「おやつの時間」というメモを誰かが書いたと思ったら、隣の人が「宿題の時間」に書き換えてしまい、結局どっちが正しいのか分からなくなる……そんな混乱が起きてしまいます。これがプログラミングの世界では「グローバル汚染」と呼ばれる悲劇です。

ブラウザの「window」という名の巨大な司令塔

ブラウザ環境において、この「リビングのテーブル」の正体が`window`オブジェクトです。

// windowオブジェクトという「リビングのテーブル」に、
// 「名前」という情報を置いてみます。
window.mySecret = “秘密の宝物”;

// どこからでも呼び出せます（リビングにあるからね）
console.log(window.mySecret); // “秘密の宝物”
console.log(mySecret); // windowは省略しても動きます

`window`はブラウザという家そのものを管理する、いわば「家長」のような存在です。そこに何でもかんでも変数を放り込むと、他のJavaScriptライブラリ（後から入ってくる同居人）と名前が被って喧嘩になったり、予期せぬバグの温床になったりします。

—

2. なぜ `var` を卒業し、`let` や `const` を使うのか？

昔のJavaScript（`var`を使っていた時代）は、この「リビングのテーブル」に何でもかんでもモノを置いてしまう癖がありました。でも、現代のJavaScriptは違います。

`let`や`const`は、「自分専用の鍵付き引き出し」を作れる魔法です。

`const`: 一度入れたら中身を変えられない、大事な書類ケース。
`let`: 中身を入れ替えられる、自由な引き出し。

これらは「ブロックスコープ」というルールに従います。`{ }`（波括弧）という箱の中に入れたら、その箱の外からは中身が見えなくなります。

{
// この箱の中は自分だけの秘密基地！
const mySecret = “誰にも見せないよ”;
console.log(mySecret); // ここなら見える
}

// 外に出たら、もうその変数は存在しません
// console.log(mySecret); // エラー！「そんなもの知らないよ」と怒られます

この「外から見えないようにする」というガードの堅さが、大規模な開発では自分の身を守る最強の武器になるんです。

—

3. グローバル汚染を防ぐための「お作法」

「じゃあ、どうすればいいの？」と不安になる必要はありません。今日からできる、ちょっとしたお作法を紹介します。

1. `var` は使わない: 現代のJavaScript開発では、`var`を使う理由はほぼありません。`const`と`let`で、必要な場所にだけ変数を置きましょう。
2. なるべく狭い範囲で宣言する: 「いつか使うかもしれないから」と一番上で変数を定義するのではなく、使う直前の場所で定義する。これだけでスコープはぐっと引き締まります。
3. モジュール化（import / export）を意識する: これについてはまた別の機会に詳しくお話ししますが、ファイルを分けて変数を「必要なところにだけ渡す」という考え方が、プロのフロントエンド開発の第一歩です。

—

最後に：つまずくのは、あなたが前に進んでいる証拠です

「グローバル汚染って言われても、何が悪いのかピンとこないな」と悩むこともあるでしょう。大丈夫です。最初はみんなそうです。

最初は「動けばOK！」で全然いいんです。ただ、少しずつ「この変数はどこまで見えるんだろう？」と意識を向けるだけで、あなたのコードは劇的に美しく、そして強くなります。

`window`という大きな司令塔に頼りすぎず、自分だけの「小さな引き出し」をたくさん作って、安全で快適なJavaScriptライフを送ってくださいね。また何か困ったことがあったら、いつでも聞きに来てください。応援していますよ！