増えすぎたグローバル変数が引き起こす問題とその対策

JavaScript でグローバル変数を多用すると、コードの可読性や保守性が低下するとよく言われます。この記事では、なぜグローバル変数が問題になるのか、そして どのように対策すべきか を解説します。

1. 名前の衝突（Name Collision）のリスク

グローバルスコープは すべてのスクリプトやライブラリと共有 されているため、同じ名前の変数や関数が意図せず上書きされるリスクがあります。

var config = { theme: "dark" };
// 別のスクリプトで同じ変数名が定義されてしまう
var config = { theme: "light" };
console.log(config.theme); // "light"（意図しない変更）

このように、グローバル変数が多いと、名前の競合による不具合 が発生しやすくなります。

2. 依存関係やスコープの曖昧化

グローバル変数はどこからでもアクセスできるため、 どこで定義され、どこで使われているのかが分かりづらく なります。

var userRole;

function setAdmin() {
    userRole = "admin";
}

function checkPermission() {
    if (userRole === "admin") {
        console.log("Access granted");
    }
}

このコードでは userRole の変更が どこで行われるか追跡しにくい ため、バグの原因特定やデバッグが困難になります。

3. テストやモジュール化が難しくなる

グローバル変数に依存したコードは、単体テストやモジュール化がしにくい です。

// グローバル変数に依存
var apiUrl = "https://example.com/api";

function fetchData() {
    return fetch(apiUrl).then(res => res.json());
}

この場合、apiUrl の値を変更しないと、異なる API をテストすることができません。

解決策：引数を使う

function fetchData(apiUrl) {
    return fetch(apiUrl).then(res => res.json());
}

✅ こうすれば `` のように変更でき、テストがしやすくなる！

4. 可読性・保守性の低下

グローバル変数を多用すると、どのファイルがどの変数に影響を与えているのか 把握しづらく なります。

var count = 0;
function increment() {
    count++;
}
function decrement() {
    count--;
}

✅ モジュールスコープを使うと、影響範囲を限定できる！

(function() {
    let count = 0;
    function increment() { count++; }
    function decrement() { count--; }
})();

✅ ES Modules を使うと、より明確に管理可能！

// counter.js
export let count = 0;
export function increment() { count++; }
export function decrement() { count--; }

// main.js
import { count, increment, decrement } from "./counter.js";
increment();
console.log(count); // 1

5. 古い JavaScript の慣習が原因になることも

昔の JavaScript（ES6 以前）は モジュールシステムがなかった ため、グローバル変数を多用するのが一般的でした。

しかし、現在は ES Modules（** / **）や 即時関数（IIFE） など、スコープを適切に管理する方法が確立されています。

✅ ES Modules（推奨）

// data.js
export const user = { name: "Alice" };

// main.js
import { user } from "./data.js";
console.log(user.name);

✅ 即時実行関数（IIFE）でスコープを限定

(function() {
    var privateData = "Secret";
    console.log(privateData); // "Secret"
})();
console.log(privateData); // Error（外部からアクセス不可）

6. まとめ：グローバル変数はできるだけ避ける！

✅ グローバル変数が増えると…

名前の衝突（Name Collision）リスクが高まる
依存関係が曖昧になり、デバッグが困難
テストしにくく、モジュール化が難しくなる
コードの可読性・保守性が低下する
昔の JavaScript の古い慣習に縛られがち

✅ 解決策

ES Modules（** / **）を活用する
即時実行関数（IIFE）でスコープを限定する
オブジェクトやクラスを活用して変数を管理する
依存関係を明示し、グローバルスコープを極力汚さない

小規模なスクリプトで 1〜2 個のグローバル変数を使う程度なら問題ありません が、成長する可能性のあるプロジェクトでは 最初からスコープ管理を意識する ことで、保守性の高いコードを維持できる。