JavaScript入門：スコープとは？変数の見える範囲

スコープとは、「変数がどこから参照できるか」という範囲のことです。

本記事では、JavaScriptにおけるスコープの基本概念と種類を、初心者にもわかりやすく解説します。

スコープとは？

スコープとは、「変数や関数が使える範囲」のことです。

JavaScriptでは、変数を宣言した場所によって、
・どこから参照できるのか
・どこでは使えないのか
が決まっています。

この仕組みを理解していないと、「定義したはずの変数が使えない」「意図しない値になる」といったバグの原因になります。

グローバルスコープ

グローバルスコープとは、どこからでも参照できるスコープです。

See the Pen [Javascript] グローバルスコープ DEMO by mkl may (@mkl-may) on CodePen.

message は関数の外で定義されているため、どの関数からでも参照できます。

ただし、グローバル変数を多用すると、意図しない上書きやバグの原因になるため注意が必要です。

ローカルスコープ（関数スコープ）

関数の中で定義した変数は、その関数の中でのみ使用できます。
これを ローカルスコープ（関数スコープ） と呼びます。

See the Pen Javascript] ローカルスコープ DEMO by mkl may (@mkl-may) on CodePen.

value は関数 showValue の中で定義されているため、関数の外からは参照できません。

このように、関数の中だけで完結する変数管理ができる点がローカルスコープの特徴です。

ブロックスコープ（let / const）

See the Pen Javascript] ブロックスコープ DEMO by mkl may (@mkl-may) on CodePen.

message は if 文のブロック内で定義されているため、ブロックの外では使用できません。

このように、ブロック単位で変数の有効範囲が区切られる仕組みを、ブロックスコープと呼びます。

スコープによる注意点

同じ名前の変数を、異なるスコープで使うことができます。

See the Pen [javascript] スコープによる注意点 by mkl may (@mkl-may) on CodePen.

関数の中で定義した count は、外側で定義された count を上書きするのではなく、内側のスコープとして別の変数が使われています。

このように、内側のスコープで同じ名前の変数を定義すると、外側の変数が隠れる現象を シャドーイング（shadowing） と呼びます。

※ 値が変わっているように見えても、実際には別々の変数が存在しています。

var・let・const のスコープの違い

変数宣言には var・let・const がありますが、スコープの挙動が異なります。

• var：関数スコープ
• let：ブロックスコープ
• const：ブロックスコープ（再代入不可）

現在は、意図しない挙動を防ぐためにlet または const の使用が推奨されています。

まとめ

• スコープとは、変数や関数が使える範囲のこと
• グローバルスコープは、どこからでも参照できる
• 関数内の変数は、ローカルスコープになる
• let・const はブロックスコープを持つ
• スコープを理解すると、バグを防ぎやすくなる