「window」という名のパンドラの箱：グローバル汚染からコードを守るための処方箋
現場でコードをレビューしていると、いまだに「なぜか動くから」という理由でグローバルスコープを汚染しているコードに出くわすことがある。特にブラウザ環境における `window` オブジェクトと変数宣言の挙動は、JavaScriptの歴史的な負債とモダンな仕様が混在する「魔境」だ。
今日は、中級エンジニアの君たちが、技術的な負債をこれ以上増やさないための「グローバルスコープとの正しい付き合い方」を伝授しよう。
—
なぜ `var` やグローバル変数は「悪」とされるのか
まず、JavaScriptの歴史を少し振り返ろう。昔のJSには `let` も `const` もなく、あるのは `var` だけだった。そして、ブラウザ環境において、トップレベルで宣言された `var` や、宣言なしに代入された変数は、すべて `window` オブジェクトのプロパティとして吸い上げられる。
これが何を意味するか？ 「意図しない名前衝突」 だ。
// 現場でよく見る「最悪な」パターン
var userId = 101;
// これがwindowオブジェクトに直結している証拠
console.log(window.userId); // 101 と出力される
// もし別のライブラリが同じ名前で変数を持っていたら？
// どちらかが上書きされ、デバッグ不可能なバグが爆誕する。
`window` はブラウザにおける「全知全能の神」だが、神に頼りすぎると、誰かがその神を書き換えた瞬間に、君の書いたロジックは崩壊する。これを「グローバル汚染」と呼ぶ。
—
モダンなJSにおける「グローバル」の正体
ES6以降、`let` と `const` が登場したことで状況は変わった。これらはグローバルスコープで宣言しても、`window` オブジェクトのプロパティにはならない。
let mySecret = “誰にも触らせない”;
const API_KEY = “12345”;
console.log(window.mySecret); // undefined
console.log(window.API_KEY); // undefined
これは非常に健全な進化だ。「グローバルスコープで宣言はするが、`window` にはぶら下げない」という分離が行われた。これが今のフロントエンド開発におけるデフォルトであるべき姿だ。
—
実務で使うべき「クリーンな構造」の作り方
では、どうすれば安全にデータを管理できるのか。現代の現場で推奨されるのは、「グローバルを極小化し、モジュール単位でカプセル化する」ことだ。
もし、どうしても複数のファイル間で共有したい定数があるなら、以下のように構成するのがプロのやり方だ。
// constants.js (設定ファイルとして切り出す)
export const CONFIG = Object.freeze({
API_ENDPOINT: ‘https://api.example.com’,
TIMEOUT: 5000
});
// app.js (必要な場所でだけインポートする)
import { CONFIG } from ‘./constants.js’;
function fetchData() {
// グローバルを汚染せず、このスコープ内だけで安全に利用
console.log(CONFIG.API_ENDPOINT);
}
ここがポイント：
1. `Object.freeze`: 設定値を書き換えられないようにする「守り」の防御。
2. `ES Modules`: ファイルごとにスコープが閉じるため、グローバル汚染を物理的に防ぐ。
3. `const` 宣言: 再代入を許さないことで、バグの温床を一つ潰す。
—
どうしても「window」を触らなければならない時
レガシーなサードパーティ製ライブラリとの連携などで、どうしても `window` に値を注入しなければならない場面もあるだろう。そんな時は、「名前空間（Namespace）を一つ切る」という古き良き知恵を使え。
// 安全にwindowを拡張するパターン
window.MY_APP = window.MY_APP || {};
window.MY_APP.utils = {
formatDate: (date) => { / … / }
};
// これなら他のライブラリと名前が衝突する確率を極限まで下げられる
—
最後に：シニアからのアドバイス
いいか、JavaScriptのグローバルスコープは「公共のトイレ」のようなものだ。誰もが使えるからといって、自分の好き勝手に物を置いていい場所じゃない。
- `var` は二度と使わない。
- トップレベルの変数は極力減らす。
- データはモジュールでカプセル化し、必要な場所にだけインポートする。
これらを徹底するだけで、君の書くコードの「堅牢性」は劇的に向上する。コードは書くことより、読まれること、そして「壊されないこと」が重要なんだ。
次にコードを書くとき、`window.` と打ち込みたくなったら、一度立ち止まって考えてみてほしい。「本当に、ここに書く必要があるのか？」と。その一瞬の迷いが、君を一段上のエンジニアへと引き上げるはずだ。
コメント