【JavaScript】グローバル変数とは？スコープの仕組みや使い方を初心者向けに解説

フロントエンド開発•2025/2/15

はじめに

JavaScriptを学び始めると、グローバル変数という言葉に出会うかもしれません。グローバル変数とは、プログラム全体でアクセスできる変数のことです。この仕組みは便利な反面、使い方を誤ると予期せぬバグやコードの混乱を招くことがあります。

この記事では、グローバル変数の具体的な宣言方法や活用シーン、そして避けられがちなトラブルのポイントを整理していきます。初心者の方でも理解しやすいように、専門用語はできるだけ噛み砕きながら解説していきます。

この記事を読むとわかること

グローバル変数の定義方法と、ローカル変数との違い
実務で想定される具体的な活用シーン
ブラウザ環境とNode.js環境での実装方法
スコープに関する注意点や命名衝突の防ぎ方
実際のサンプルコードを通じた実装例

グローバル変数の基本的な考え方

JavaScriptで扱う変数には、スコープと呼ばれる有効範囲があります。スコープには主に「グローバルスコープ」と「ローカルスコープ」があり、どの範囲から変数にアクセスできるかを決定しています。

グローバルスコープとローカルスコープ

グローバルスコープ

プログラム全体、もしくは読み込まれている全スクリプトで参照ができるスコープです。
例として、window（ブラウザ）やglobalThis（共通的なグローバルオブジェクト）を思い浮かべていただくとわかりやすいです。

ローカルスコープ

関数やブロック（{}）などの限定された範囲内だけ有効になるスコープです。
これによって、同じ変数名を使っても衝突を起こしにくくしています。

グローバルスコープに存在する変数がグローバル変数と呼ばれ、どこからでもアクセスできる一方で、管理が疎かになるとバグの温床になることが少なくありません。

なぜグローバル変数が必要とされるのか

実務でも、すべての変数をローカルスコープだけで完結させられるわけではありません。たとえば、アプリケーション全体で使う共通設定や、一度取得したデータを複数のモジュールから参照する必要がある場合など、グローバル変数の利便性が活きるシーンがあります。

しかし、何でもかんでもグローバル変数にしてしまうと、チーム開発などで変数名が衝突する危険性が高くなります。そのため、グローバル変数を増やしすぎない工夫や命名のルール作りが大切です。

グローバル変数の宣言方法と実行環境

JavaScriptの実行環境には主にブラウザとNode.jsが存在します。それぞれの環境でグローバル変数の扱い方や参照方法が少し異なるため、必要に応じて使い分けることが重要です。

ブラウザ上でのグローバル変数

ブラウザ上では、windowオブジェクトが最上位のグローバルオブジェクトとして機能します。以下のようにvarで宣言すると、暗黙的にwindowオブジェクトのプロパティとなります。


var globalVar = "この変数はグローバルです";
console.log(window.globalVar); // "この変数はグローバルです"

一方で、letやconstを使ってブロック内などで宣言した変数は、原則的にwindowオブジェクトには追加されません。ただし、グローバルスコープで宣言したletやconstも「スクリプト全体」からアクセスできる点ではグローバル扱いになるものの、windowのプロパティにはならないという動きがあるので、挙動を正しく把握しておく必要があります。


let myGlobalLet = "letで宣言したグローバル変数";
console.log(myGlobalLet); // "letで宣言したグローバル変数"
console.log(window.myGlobalLet); // undefined

`window` オブジェクトを直接操作する場合

ときには、次のようにwindowオブジェクトに直接プロパティを追加する書き方を見かけるかもしれません。


window.myGlobalSetting = { theme: "dark", language: "ja" };

このやり方は、明示的に「これはどこからでも使うデータだ」という意思表示にはなりますが、関数やモジュール間で値を使い回すときに命名衝突を起こすリスクもあります。複数の開発者が同じwindowオブジェクトにどんどん追加してしまうと、管理が難しくなるケースがあるため、あまり乱用しないほうが良いでしょう。

Node.js環境でのグローバル変数

Node.jsでは、ブラウザのwindowの代わりに**global**というオブジェクトがグローバルオブジェクトとして用意されています。


global.nodeGlobalVar = "Node.jsでのグローバル変数";
console.log(global.nodeGlobalVar); // "Node.jsでのグローバル変数"

もっとも、Node.jsの開発ではモジュール（ファイル）ごとにスコープを分けることが一般的であり、共通の値を渡すときはモジュール同士をrequireやimportして管理します。そのため、無理にglobalを使わずに、モジュール設計でデータを共有するほうが望ましいケースが多いです。

`globalThis` の存在

近年のJavaScriptには**globalThis**が導入されました。これはブラウザならwindow、Node.jsならglobalといったように、環境によって異なるグローバルオブジェクトを一本化して参照できるようにしたものです。


globalThis.myUniversalVar = "あらゆる環境で共通のグローバルオブジェクト";
console.log(globalThis.myUniversalVar); // "あらゆる環境で共通のグローバルオブジェクト"

ただし、前述のとおり安易にグローバルオブジェクトへ値を追加することが推奨されるわけではありません。限られたケースでのみ有効活用するようにしましょう。

グローバル変数を活用する実務での具体例

グローバル変数は便利ですが、誤用を避けるには「どう使うか」をしっかりと設計する必要があります。ここでは、実務でよくある活用シーンをいくつか紹介し、それぞれのメリットや注意点を見ていきます。

アプリケーション共通の設定値を保持する

アプリ全体で使われる定数や設定値などは、モジュールのどこからでもアクセスできると作業がスムーズになるケースがあります。たとえば、アプリの全ページで利用するテーマカラーやサーバーエンドポイントなどです。


// 例: ブラウザ上での共通設定
window.appConfig = {
  apiEndpoint: "https://api.example.com",
  defaultTheme: "dark"
};

// どこからでもappConfigを参照可能
function fetchUserData(userId) {
  return fetch(`${window.appConfig.apiEndpoint}/users/${userId}`)
    .then(response => response.json());
}

メリットとしては、設定値を一括管理できるため、変更があった場合に複数ファイルを修正する必要がないことが挙げられます。しかし、実務ではモジュールの設計やフレームワークの設定ファイルなどで同様の役割を果たせることが多く、可能であればそちらを使うのが無難です。

テストデータの仮置きやデバッグ用の変数

開発中にデバッグしやすくするために、一時的にグローバル変数を使ってデータを仕込むことがあります。コンソール上で値を確認しやすいので、デバッグ時に重宝するかもしれません。


window._debugData = {
  isTestMode: true,
  userId: 12345
};

本番リリース前に削除しやすいように名前の先頭に_debugを付けるなどの工夫をすると、うっかり残してしまうリスクを減らせます。ただし、デバッグ以外の本番コードに混在させないよう、管理を徹底しましょう。

フレームワークやライブラリのグローバル変数

ReactやVueなどを使う場合は、通常はモジュール化されており、グローバル変数としてライブラリを参照することはあまりありません。しかし、古いJavaScriptプロジェクトでは、CDNから読み込んだjQueryなどがwindow.$に登録されるケースがあります。


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  console.log($); // jQueryオブジェクト
</script>

このように外部ライブラリをグローバルスコープに追加する仕組みはわかりやすい反面、複数のライブラリが同じ名前を使っていると衝突を引き起こすことがあります。近年のモジュールバンドラでは、各モジュールを独立して読み込みできる環境が一般的なので、意図的にグローバルを使うケースは減少傾向にあります。

ローカル変数との違いと注意点

グローバル変数とローカル変数の大きな違いは、やはりスコープの広さです。ローカル変数は関数やブロック内でのみ有効であり、同じ名前を使ってもスコープが異なれば上書きされません。

命名衝突のリスク

グローバル変数は非常に便利ですが、誰かが同じ名前を宣言すると意図せず上書きしてしまう危険があります。複数人で開発を行う大規模プロジェクトでは、グローバル空間を占拠する変数名は衝突リスクを常に抱えています。


var config = { version: "1.0" }; 
// 他のスクリプトでもconfigという名前を使っていた場合、上書きされる恐れがある

これを避けるためには、グローバル変数を使う回数自体を最小限に抑えたり、名前の規則をプロジェクト内で明確に決めておくといった対策が必要です。

バグの発見が難しくなる

グローバル変数が多すぎると、コードを追いかけるときに「この値はどこで変わっているのか？」がわかりにくくなります。とくに複雑なアプリケーションでは、意図しない場所で値を変更してバグが起きることも少なくありません。

ローカル変数であれば、変数が宣言されているスコープ内だけ追いかければよいので、デバッグしやすい傾向にあります。

グローバル変数を減らすための具体的な方法

プロジェクトが大きくなるほど、スコープの管理が重要になってきます。ここでは、グローバル変数を増やしすぎないためのアプローチをいくつか紹介します。

即時関数（IIFE）の活用

グローバル変数をできるだけ作らないために、以前は IIFE (Immediately Invoked Function Expression)というパターンが使われていました。 IIFEでは下記のように無名関数でスコープを作り、その中で変数を定義します。


(function() {
  var localVar = "これは関数スコープ内だけで使われます";
  console.log(localVar);
})();

IIFEのスコープ内で宣言した変数はグローバルに漏れないので、安全に使い捨てできるというメリットがあります。ただし、モジュール機能が充実した現代のJavaScript環境では、あまりこの手法を多用しなくてもモジュールスコープで完結させる書き方が一般的になっています。

ES Modulesを利用する

ES6（ECMAScript 2015）以降では、import や export を使ったモジュール管理が標準化されました。モジュールごとにスコープが切り分けられるため、グローバル変数をほとんど意識せずに開発を進められます。


// moduleA.js
const localValue = 42;
export function getLocalValue() {
  return localValue;
}

// moduleB.js
import { getLocalValue } from "./moduleA.js";
console.log(getLocalValue()); // 42

上記の例では、moduleA.jsの変数localValueはmoduleB.jsから直接アクセスできません。明示的にexportした関数を呼ぶ必要があるため、依存関係がわかりやすいというメリットがあります。

名前空間を作る

大規模プロジェクトでどうしてもグローバル変数を扱いたい場合は、名前空間の仕組みを取り入れることがあります。具体的には、あらかじめプロジェクト全体で使うオブジェクトを1つだけ作り、その配下にプロパティとして変数を追加していきます。


window.MyProject = window.MyProject || {};

MyProject.config = {
  apiEndpoint: "https://api.example.com",
  version: "2.3"
};

MyProject.utils = {
  formatDate: function(date) {
    // 日付をフォーマットする処理
  }
};

こうすると、グローバル変数の衝突はMyProjectという名前1つだけで済むため、いきなりconfigやutilsという名前が他と被るリスクを軽減できます。また、プロジェクト内でのコードの見通しがよくなる効果も期待できます。

実装例：ブラウザでグローバル変数を使用する

初心者の方にとって、グローバル変数をどう使うかイメージがわかないこともあるかと思います。ここでは、ブラウザ上での実装例を1つ紹介します。

シンプルな例

以下のサンプルでは、ページが読み込まれたらグローバル変数userNameに値を代入し、ボタンをクリックするとコンソールに表示するようにしています。


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>グローバル変数テスト</title>
</head>
<body>
  <button id="btn">ユーザー名を確認</button>
  <script>
    // グローバル変数の宣言
    var userName = "Alice";

    // ボタンをクリックしたらコンソールにuserNameを表示
    document.getElementById("btn").addEventListener("click", function() {
      console.log("ユーザー名:", userName);
    });
  </script>
</body>
</html>

ここではvarを使い、グローバルスコープに変数userNameを配置しています。関数内で定義していないため、どこからでも参照できる点に注意してください。

スコープの衝突を実感する例

例えば、別のスクリプトファイルが読み込まれていて、そこでもvar userNameを宣言していた場合に上書きされたらどうなるでしょうか。チーム開発などで同じ変数名を誤って使ってしまうと、意図した動作をしなくなってしまいます。

このような衝突を回避するためにも、グローバル変数を多用しない工夫が求められます。

実装例：Node.jsでグローバル変数を使用する

Node.jsでは前述のように、グローバルオブジェクトはglobalとして参照できます。しかし、通常は各ファイルをモジュールとして分割するので、それほど頻繁にglobalを使う場面はありません。

シンプルな例

以下はNode.jsでglobalオブジェクトを使う例です。


// globalExample.js
global.globalValue = "Hello from global scope";

function showGlobalValue() {
  console.log(global.globalValue);
}

showGlobalValue(); // "Hello from global scope"

シンプルに動作しますが、Node.jsの一般的な開発方針としては、各モジュールのエクスポートを介して共有したい値を明示的にやり取りするほうが望ましいことが多いです。

モジュール分割とグローバル変数

もしも別ファイルからglobalValueを参照しようとすると、単純にrequire("./globalExample")しておけばいいと思いがちですが、そのファイルがどのタイミングで読み込まれるかなど、意外と依存関係が複雑になりがちです。


// anotherFile.js
require("./globalExample");
console.log(global.globalValue); // "Hello from global scope"

上記のように動作することはしますが、誰がいつ変更したのか追跡が難しくなるので、初心者のうちは**「Node.jsでグローバル変数を使う場面はかなり限定的」**くらいに考えておくのが安心です。

グローバル変数を安全に扱うためのベストプラクティス

ここからは、グローバル変数を使わざるを得ない場合に気をつけたいポイントや、チーム開発でも混乱しないための方法を整理します。

名前の衝突を避けるためのルールづくり

複数人が書くコードでグローバル変数を使うのであれば、プロジェクト共通のプレフィックス（接頭辞）を決めておくとよいでしょう。

例: "APP_" を付けて明示的にグローバル変数だとわかるようにする

それだけで被りを完全に防げるわけではありませんが、変数名が衝突する確率は減らせますし、意図的にグローバルだと示す効果もあります。

使い捨ての一時的なデータはローカルに閉じ込める

「この変数は関数1つの中でしか使わない」という状況なら、必ずローカルスコープに閉じ込めてください。グローバルに置く必要性があるのは、本当に複数のモジュールや処理からアクセスする場合のみです。


function processUserData() {
  // グローバルにしなくてよい値はここで完結させる
  const tempData = { updated: false };
  // ロジックをここに書く
  return tempData;
}

こうすることで、他の処理や関数がtempDataを勝手に変更するリスクを排除できます。

グローバル変数の参照は関数化する

もしどうしてもグローバルに置いた値を読み書きする必要があるなら、直接値にアクセスさせず、ゲッターやセッター関数を用意するのも1つの方法です。


window.globalStore = {
  user: null
};

function setUserData(data) {
  window.globalStore.user = data;
}

function getUserData() {
  return window.globalStore.user;
}

こうすれば、コードのどこかでユーザー情報を更新するときに必ずsetUserDataを呼び出す必要があり、データの追跡がやや容易になります。

エラーやバグを防ぐためのTips

グローバル変数関連のエラーやバグを防ぐために、実務で使われるいくつかのテクニックを紹介します。

リンターの活用

ESLintなどのリンターツールでは、**「未定義の変数をグローバルに参照していないか」「余計なグローバルを定義していないか」**などを検出できます。設定ファイルで「グローバルを許可しない」ルールを強めにしておけば、うっかりvarで宣言してしまったグローバル変数を検知してくれるでしょう。

変数名の意図をコメントで明示する

コメント文として、グローバル変数の用途やどこから使われるかを軽く書いておくと、後からメンテナンスする人が混乱しにくくなります。


// アプリ全体で一度だけロードしたAPIキーを保持
window.APP_API_KEY = "xxxx-xxxx-xxxx";

このように、コメントで「何のためにグローバル化したか」を残しておけば、誤用が発覚したときに対処しやすいです。

具体例：ライブラリ的なコードの一部をグローバル化するケース

ライブラリを自作して、利用先にグローバル変数として提供したいケースがあります。たとえば、ブラウザにスクリプトタグを読み込んでもらって、window.MyLibのように利用してもらうイメージです。

ライブラリの例


(function () {
  // ライブラリ内部で完結するスコープ
  function helperFunction() {
    return "internal";
  }

  // グローバルに公開したいオブジェクト
  window.MyLib = {
    doSomething: function() {
      console.log("Doing something...", helperFunction());
    }
  };
})();

上記コードでは、匿名関数（IIFE）内で実装した関数helperFunctionは外部に漏れず、公開したいMyLibオブジェクトだけがグローバルスコープに露出します。こうすることで、不要なグローバル変数の汚染を防ぐことができます。

トラブルシューティング：意図しない再代入を見つける方法

グローバル変数の値が意図せず書き換えられてしまうと、バグの原因になります。そのようなトラブルを発見するためには、監視やログ出力のテクニックを使うことがあります。

Proxyオブジェクトを使った監視

開発時のデバッグには、Proxyオブジェクトで書き込みをフックするテクニックもあります。やや上級者向けですが、次のようなコードを書いてみると、誰がいつグローバル変数を書き換えたかをログに出せます。


const handler = {
  set(target, prop, value) {
    console.log(`グローバル変数 '${prop}' が変更されました:`, value);
    target[prop] = value;
    return true;
  }
};

// 監視対象のオブジェクトをProxy化
window.globalStore = new Proxy({}, handler);

// 書き換えテスト
window.globalStore.user = { name: "Bob" };
// コンソール: グローバル変数 'user' が変更されました: { name: "Bob" }

実際の開発ではあまり多用されませんが、原因不明の書き換えを追いかけたいときには役立つかもしれません。

ブラウザ以外の環境でのグローバル変数

実はJavaScriptはブラウザとNode.js以外でも、いろいろな環境で動いています。たとえばElectron、React Native、Google Apps Scriptなどの環境です。

それぞれグローバルオブジェクトの扱いやモジュール管理の方法が異なる部分もありますが、本質的には「グローバル変数は便利だがリスクがあるので慎重に使う」という点は共通しています。

メンテナンス性を高めるコツ

グローバル変数が多いと、プロジェクトが大きくなるにつれ保守が難しくなります。最後に、メンテナンス性を高めるために意識しておきたいコツをまとめます。

コードコメントとドキュメント

グローバル変数を増やす前に、事前にコードコメントで「これはグローバルに置く必要がある」と明示しましょう。また、プロジェクト全体のドキュメントに「どんなグローバル変数があるか」を一覧で記載しておくと、メンバーが増えたときでも混乱しにくいです。

定期的なリファクタリング

開発が進むと、最初はグローバルで持っていた変数が「実は局所的にしか使われていない」状況になることもあります。そういった場合には、ローカルスコープへ移したり、モジュール化するリファクタリングを定期的に行うことが大切です。

命名規則の統一

グローバル変数は単一の空間に集まるため、命名規則があいまいだとすぐに衝突が起こります。英語なら動詞の有無やキャメルケース・スネークケースの使い分けなど、日本語ならローマ字表記や省略形をどうするかなど、プロジェクトごとにルールを決めておきましょう。

グローバル変数を定義するときは、同時に「なぜグローバルにするのか」という目的を明確にしておきましょう。なんとなく便宜的に置いた変数は、後からトラブルの原因になるかもしれません。

大規模プロジェクトやチーム開発で気をつけること

大規模プロジェクトや複数人のチーム開発の場合、以下のような点に注意すると、グローバル変数周りのトラブルを減らせます。

コードレビューでのチェックポイント

グローバルスコープへの変数追加がある場合は、なぜ必要なのかをレビュー時に確認する
名前が十分にユニークであるか
ドキュメントに追記されているか

継続的インテグレーション（CI）での検知

プロジェクト設定によっては、ESLintやその他のツールで「新たに追加されたグローバル変数」を検知する仕組みを作れます。自動テストとあわせて、意図しないグローバルが紛れ込んでいないかを定期的にチェックすると安心です。

グローバル変数を一切使わないプロジェクト構成が理想的ですが、システムの要件やフレームワークの都合上、避けられないケースもあります。その場合でも、事前にルールを決めて管理すれば、大きな混乱を起こしにくくなります。

まとめ

JavaScriptのグローバル変数は、どのスコープからでもアクセスできる利便性があります。しかし、その反面、命名衝突やバグの原因になりやすいというリスクも抱えています。

グローバル変数を使う理由

アプリ全体で共有する設定値やデバッグ用に便利な反面、管理が難しくなる可能性がある

ブラウザとNode.jsの違い

ブラウザはwindow、Node.jsはglobalがグローバルオブジェクト
Node.jsではモジュール分割を活用することが多く、globalの出番はそれほど多くない

衝突を避けるテクニック

名前空間オブジェクトを作る、ES Modulesを利用する、などの方法がある
また、命名ルールを統一しておくとグローバル変数が混乱のもとになるリスクを下げられる

実務での注意点

大規模な開発ほど、グローバル変数を最小限にする仕組み作りやレビュー体制が重要
どこで定義され、どこで変更されるかを把握しやすいように工夫が必要

JavaScriptのグローバル変数は「ちょっとしたサンプルコード」では手軽で有用ですが、プロダクションレベルの開発に入ると、しっかりルールを設けて扱わないとトラブルが起こりやすい存在です。

ぜひ、必要最小限に留めることを意識しながら、状況に応じてモジュールシステムや名前空間の技術を使い分けてみてください。

はじめに

この記事を読むとわかること

グローバル変数の基本的な考え方

グローバルスコープとローカルスコープ

グローバルスコープ

ローカルスコープ

なぜグローバル変数が必要とされるのか

グローバル変数の宣言方法と実行環境

ブラウザ上でのグローバル変数

window オブジェクトを直接操作する場合

Node.js環境でのグローバル変数

globalThis の存在

グローバル変数を活用する実務での具体例

アプリケーション共通の設定値を保持する

テストデータの仮置きやデバッグ用の変数

フレームワークやライブラリのグローバル変数

ローカル変数との違いと注意点

命名衝突のリスク

バグの発見が難しくなる

グローバル変数を減らすための具体的な方法

即時関数（IIFE）の活用

ES Modulesを利用する

名前空間を作る

実装例：ブラウザでグローバル変数を使用する

シンプルな例

スコープの衝突を実感する例

実装例：Node.jsでグローバル変数を使用する

シンプルな例

モジュール分割とグローバル変数

グローバル変数を安全に扱うためのベストプラクティス

名前の衝突を避けるためのルールづくり

使い捨ての一時的なデータはローカルに閉じ込める

グローバル変数の参照は関数化する

エラーやバグを防ぐためのTips

リンターの活用

変数名の意図をコメントで明示する

具体例：ライブラリ的なコードの一部をグローバル化するケース

ライブラリの例

トラブルシューティング：意図しない再代入を見つける方法

Proxyオブジェクトを使った監視

ブラウザ以外の環境でのグローバル変数

メンテナンス性を高めるコツ

コードコメントとドキュメント

定期的なリファクタリング

命名規則の統一

大規模プロジェクトやチーム開発で気をつけること

コードレビューでのチェックポイント

継続的インテグレーション（CI）での検知

まとめ

グローバル変数を使う理由

ブラウザとNode.jsの違い

衝突を避けるテクニック

実務での注意点

JavaScriptをマスターしよう

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説

`window` オブジェクトを直接操作する場合

`globalThis` の存在