JavaScript のスコープ

Volardev 編集部 April 17, 2026

1. スコープ = 可視性（Visibility）

スコープ（Scope）は、変数のアクセシビリティ（アクセス可能性）、つまりコードのどの部分からその変数が見えるかを決定します。

JavaScriptの変数には、主に以下の3種類のスコープがあります。

グローバルスコープ（Global scope）
関数スコープ（Function scope）
ブロックスコープ（Block scope）

2. グローバルスコープ（Global Scope）

ブロックや関数の外側で宣言された変数は、グローバルスコープを持ちます。
グローバル変数は、JavaScriptプログラム内のどこからでもアクセス可能です。

ブロックの外で宣言された場合、var、let、const はどれも似た挙動を示し、すべてグローバルスコープとなります。

var x = 1;    // グローバルスコープ
let y = 2;    // グローバルスコープ
const z = 3;  // グローバルスコープ

2.1 コード例

関数の外で宣言された変数は、グローバル（GLOBAL）になります。

let carName = "Volvo";
// ここにあるコードは carName を使用できます

function myFunction() {
  // ここにあるコードも carName を使用できます
}

グローバル変数は、同じウェブページ内のすべてのスクリプトおよび関数からアクセス可能です。

3. 関数スコープ（Function Scope）

JavaScriptの各関数は、それぞれのスコープを作成します。
関数内部で定義された変数は、関数の外からはアクセス（可視）できません。

var、let、const を関数内で宣言した場合、これらはすべて関数スコープを持ちます。

function myFunction1() {
  var carName = "Volvo";  // 関数スコープ
}

function myFunction2() {
  let carName = "Volvo";  // 関数スコープ
}

function myFunction3() {
  const carName = "Volvo";  // 関数スコープ
}

3.1 コード例

JavaScriptの関数内で宣言された変数は、その関数にとってのローカル（LOCAL）変数となります。

// ここにあるコードは carName を使用できません

function myFunction() {
  let carName = "Volvo";
  // ここにあるコードは carName を使用できます
}

// ここにあるコードは carName を使用できません

ローカル変数は関数スコープを持ち、以下の特徴があります：

関数内からのみアクセス可能。
関数の外にあるスクリプトや関数からはアクセス不可。
関数が異なれば、同じ名前の変数を使用できる。
関数が開始されるときに作成され、関数が完了すると削除される。
関数の引数（パラメータ）も、関数内のローカル変数として機能する。

4. ブロックスコープ（Block Scope）

ES6（2015年）以前のJavaScriptには、グローバルスコープと関数スコープしかありませんでした。
しかし、ES6で導入された let と const という2つの重要なキーワードによって、ブロックスコープが利用可能になりました。

{ } ブロック内で let や const を使用して宣言された変数は、そのブロック内からのみアクセス可能です。

4.1 コード例

{
  let x = 2;
}
// ここで x は使用できません

一方で、var キーワードで宣言された変数はブロックスコープを持つことができません。{ } ブロック内で var を使用して宣言された変数は、ブロックの外からもアクセス可能です。

4.2 コード例（非推奨）

{
  var x = 2;
}
// ここで x は使用できてしまいます

5. 自動的なグローバル変数

宣言されていない変数に値を代入すると、その変数は自動的にグローバル（GLOBAL）変数になります。
たとえ関数内で代入が行われたとしても、グローバル変数として扱われます。

5.1 コード例

myFunction();

// ここにあるコードは carName を使用できます

function myFunction() {
  carName = "Volvo";
}

6. ストリクトモード（Strict Mode）

現代のすべてのブラウザは、JavaScriptを「Strict Mode（厳格モード）」で実行することをサポートしています。
Strict Modeでは、宣言されていない変数が自動的にグローバル変数になることはありません。

7. HTMLにおけるグローバル変数

JavaScriptにおいて、グローバルスコープはJavaScriptの実行環境そのものです。
HTML環境では、グローバルスコープは window オブジェクトを指します。

var キーワードで定義されたグローバル変数は、window オブジェクトに属します。

7.1 コード例（非推奨）

var carName = "Volvo";
// ここで window.carName を使用できます

一方で、let キーワードで定義されたグローバル変数は、window オブジェクトには属しません。

7.2 コード例

let carName = "Volvo";
// ここで window.carName は使用できません

警告: 意図的でない限り、グローバル変数を作成しないでください。
グローバル変数（または関数）は、window オブジェクトの既存の変数や関数を上書きしてしまう可能性があります。また、逆に他のスクリプトからあなたのグローバル変数が上書きされるリスクもあります。

8. JavaScript変数の寿命

JavaScript変数の寿命（Lifetime）は、その変数が宣言されたときに始まります。

関数（ローカル）変数：関数が完了すると削除されます。
グローバル変数：ウェブブラウザの場合、ブラウザのウィンドウ（またはタブ）を閉じると削除されます。