JavaScript | 基礎構文：スコープ・実行コンテキスト – グローバルスコープ

JavaScript

2025.12.16

グローバルスコープとは何か
実行コンテキストとの関係
グローバル変数の宣言と見え方
関数からグローバルを使う例
ありがちな落とし穴（暗黙のグローバル）
グローバルを最小化するコツ
グローバルスコープの注意点
まとめ

グローバルスコープとは何か

スコープは「変数がどこから見えるか（使えるか）」の範囲を指します。グローバルスコープは、プログラム全体からアクセスできる一番外側のスコープです。ここで宣言された変数は、関数やブロックの中からでも参照できます。便利ですが、どこからでも触れるため管理が難しく、名前の衝突が起きやすい場所でもあります。

実行コンテキストとの関係

実行コンテキストは「コードが実行されるときの環境情報のまとまり」です。グローバルコードが走ると「グローバル実行コンテキスト」が作られ、その中でグローバルスコープが用意されます。関数を呼ぶと関数実行コンテキストが作られ、関数固有のスコープが追加されます。結果として、内側から外側へ（関数 → グローバル）の順で変数が探索されます。

グローバル変数の宣言と見え方

JavaScript では「ファイルのトップレベル」で宣言するとグローバルになります。let と const はグローバルスコープに作られますが、ブラウザの window 直下には自動で載りません。var はブラウザ環境では window のプロパティにもなり、影響範囲が広くなります。基本的には let/const を使い、必要最小限だけグローバルに置くのが安全です。

// ブラウザでの例
var a = 1;          // window.a にもなる
let b = 2;          // window.b にはならない（グローバルスコープには存在）
const c = 3;

console.log(a, b, c);    // 1 2 3
console.log(window.a);   // 1
console.log(window.b);   // undefined

// ブラウザでの例
var a = 1;          // window.a にもなる
let b = 2;          // window.b にはならない（グローバルスコープには存在）
const c = 3;

console.log(a, b, c);    // 1 2 3
console.log(window.a);   // 1
console.log(window.b);   // undefined

JavaScript

関数からグローバルを使う例

グローバルに設定した値は、関数の中から参照・更新できます。ただし、更新は副作用を生むため注意が必要です。読み取り中心にして、必要なら引数で渡す設計にすると安全性が上がります。

const taxRate = 0.1; // グローバル設定

function priceWithTax(price) {
  return Math.floor(price * (1 + taxRate));
}

console.log(priceWithTax(1000)); // 1100

const taxRate = 0.1; // グローバル設定

function priceWithTax(price) {
  return Math.floor(price * (1 + taxRate));
}

console.log(priceWithTax(1000)); // 1100

JavaScript

ありがちな落とし穴（暗黙のグローバル）

宣言を忘れて代入すると、ブラウザでは暗黙のグローバルが作られることがあります。これにより、意図しない変数が全体に広がり、バグの原因になります。必ず let/const/var を付けて宣言し、厳格モード（"use strict"）を使えば未宣言の代入をエラーにできます。

"use strict";
function setValue() {
  x = 10; // 未宣言。strict ならエラーで気づける
}

"use strict";
function setValue() {
  x = 10; // 未宣言。strict ならエラーで気づける
}

JavaScript

グローバルを最小化するコツ

グローバルは「設定値や共通ユーティリティ」など、本当に全体で必要なものだけに絞るのが基本です。モジュール（ES Modules）を使えば、ファイルごとのトップレベルはモジュールスコープになり、勝手にグローバルへ漏れません。値の共有が必要なら、明示的にエクスポート・インポートして、依存関係をわかりやすく保つと管理しやすくなります。

// tax.js（モジュール）
export const taxRate = 0.1;

// calc.js（モジュール）
import { taxRate } from "./tax.js";
export function priceWithTax(price) {
  return Math.floor(price * (1 + taxRate));
}

// tax.js（モジュール）
export const taxRate = 0.1;

// calc.js（モジュール）
import { taxRate } from "./tax.js";
export function priceWithTax(price) {
  return Math.floor(price * (1 + taxRate));
}