こんにちは！フロントエンドの現場で長年コードと向き合っていると、「あれ、この変数はどこで書き換えられたんだ？」というバグに頭を抱えることが本当によくあります。
JavaScriptを始めたばかりの頃、誰もが一度は通る道……それが「グローバル汚染」です。今日は、あなたのコードをスッキリと美しく、そしてトラブルから守るための「スコープの知恵」を、身近な例え話と一緒に紐解いていきましょう。
—
なぜ「グローバル汚染」が怖いの？
まずは、想像してみてください。あなたは今、「リビング（グローバルスコープ）」で料理をしています。
リビングの真ん中に大きなテーブルがあり、そこに「塩」や「砂糖」の瓶を置いていますよね。誰でも自由に使えるのは便利ですが、家族全員がそのテーブルに色々なものを置いたらどうなるでしょう？
「あれ、これ塩だと思って入れたら砂糖だった！」なんてことが起きたら大変ですよね。これがプログラムでいう「グローバル汚染」です。どこからでも触れる変数（グローバル変数）は、便利そうに見えて、実は「誰がいつ書き換えたか分からない」という大きな爆弾を抱えているんです。
—
1. 今すぐ `var` を卒業して、`let` と `const` を使おう
昔のJavaScriptでは `var` が主流でしたが、今はこれを使うことはまずありません。なぜなら、`var` は「家中のどこでも使えちゃう」という、あまりにも大雑把な性格だからです。
これからは、以下のルールを合言葉にしてください。
- 基本は `const`：一度決めたら変えないもの（定数）。
- 変える可能性があるなら `let`：再代入が必要な場合だけ。
- `var` は使わない：思い出の中にしまっておきましょう。
これらを使うと、「ブロックスコープ」という魔法がかかります。`{ }`（波括弧）の中に閉じ込めることで、外からは触れない「自分専用の引き出し」を作ることができるんです。
—
2. 賢い人の「IIFE（イイフェ）」という整理術
とはいえ、どうしても外から見られたくない変数や処理をひとまとめにしたい時があります。そんな時、ベテランはIIFE（即時実行関数式）というテクニックを使います。
これは、「その場で作って、その場で実行して、さっさと片付ける」という使い捨ての小箱のようなものです。
// IIFEの書き方：関数をカッコで囲んで、最後に()で呼び出す！
(function() {
// この中で定義した変数は、この小箱の外からは見えません
const secretMessage = “誰にも教えない秘密のレシピ”;
console.log(secretMessage); // ここでは表示できる
})();
// console.log(secretMessage);
// ↑ここで呼ぶとエラーになる。外からは見えないからです。安心ですね！
まるで「料理が終わったら綺麗に片付けて、リビングを元の状態に戻す」ようなもの。これを使えば、他のコードと変数が混ざり合う心配がなくなります。
—
3. 現代の最強ツール「モジュール」
最近の現場では、IIFEよりも「ES Modules（モジュール）」という仕組みが主流です。これは、「ファイルを分けて、必要なものだけを貸し借りする」という、もっとスマートな方法です。
例えば、`math.js` というファイルで計算式を作り、それを `main.js` で読み込む……といった具合です。
// math.js (道具箱ファイル)
export const add = (a, b) => a + b; // 必要なものだけ外に出す（export）
// main.js (メインの調理場)
import { add } from ‘./math.js’; // 必要なものだけ借りる（import）
console.log(add(5, 3));
これなら、一つのファイルに全てのコードを書く必要がなく、変数名が衝突することもありません。「必要な道具だけを持ち寄って仕事をする」という、プロの現場らしい洗練されたスタイルですね。
—
最後に：完璧を目指さなくて大丈夫！
ここまで読んで「なんだか難しそうだな…」と感じたあなた、大丈夫です！最初は誰もがグローバル変数だらけのコードを書いて、あとから「動かない！」と頭を抱えるものです。
まずは、「なるべく変数は `{ }` の中に閉じ込める」という意識を持つだけで十分。その一歩が、あなたのコードを確実に「読みやすく、壊れにくい」ものへと進化させていきます。
JavaScriptの世界は広大ですが、一つずつ「道具の整理整頓」を覚えていけば、必ず思い通りのアプリが作れるようになりますよ。一緒に楽しくコードを書いていきましょうね！
コメント