PR

【JavaScript】スコープ（変数の有効範囲）とは？初心者向けに3分でわかりやすく解説

JavaScriptのスコープを解説する記事のアイキャッチ画像 JavaScript

JavaScriptを学び始めると、「この変数はどこから使えるのか？」で迷う場面がよくあります。結論からいうと、スコープとは、その変数をどの範囲のコードから参照できるかを表すルールです。

このルールを理解していないと、変数が思わぬ場所で書き換わったり、逆に使えると思っていた変数が使えず ReferenceError になったりします。この記事では、JavaScript初心者の方に向けて、スコープの意味、グローバルスコープ・関数スコープ・ブロックスコープの違い、var と let / const の使い分けを1からわかりやすく整理します。

まずは「スコープ = 変数が見える範囲」と押さえればOKです。

スポンサーリンク

結論：JavaScriptのスコープは主に3つある

初心者の方は、まず次の3つを区別できれば十分です。

種類 意味 代表例
グローバルスコープ プログラム全体から参照できる範囲 ファイルの一番外側で宣言した変数
関数スコープ その関数の中だけで使える範囲 var や引数で宣言した変数
ブロックスコープ { } の中だけで使える範囲 let と const で宣言した変数

ポイント JavaScriptのスコープでいちばん大事なのは、var は関数スコープ、let と const はブロックスコープだという違いです

そもそもスコープ（変数の有効範囲）とは？

スコープとは、変数や定数が「どこで使えるか」を決める仕組みです。

たとえば、ある if 文の中でだけ必要な変数があるとします。その変数をプログラム全体から触れる状態にしてしまうと、関係のない場所から誤って使われたり、値を上書きされたりする可能性があります。

逆に、必要な場所だけで使えるようにしておけば、コードの見通しが良くなり、バグも起きにくくなります。つまりスコープは、「変数を安全に使うための境界線」のようなものです。

1. グローバルスコープ

グローバルスコープは、プログラムの広い範囲から参照できるスコープです。ブラウザで通常の script タグを使う場面などでは、ファイルの一番外側で宣言した変数は広い範囲から参照できます。

const siteName = "Biz Online";

function showSiteName() {
  console.log(siteName);
}

showSiteName(); // Biz Online

この例では、siteName は関数の外で宣言されているため、showSiteName() の中からでも参照できます。

ただし、グローバル変数を増やしすぎると、どこからでも触れるぶん管理が難しくなります。初心者のうちは、本当に広い範囲で必要なものだけをグローバルに置くと覚えておくと安心です。

2. 関数スコープ

関数スコープとは、その関数の中だけで有効な範囲です。関数の引数や、関数内で var で宣言した変数は、その関数の外からは使えません。

function greet(name) {
  var message = "こんにちは、" + name + "さん";
  console.log(message);
}

greet("田中");
// console.log(message); // ReferenceError

この例の message は、greet() の中でだけ使える変数です。関数の外に出ると参照できません。

JavaScriptの関数の基本を学ぶときも、この「関数の中で作った変数は外では使えない」という感覚を持っておくと理解しやすくなります。

3. ブロックスコープ

ブロックスコープとは、if 文や for 文、あるいは単なる { } の中だけで有効な範囲です。let と const はこのブロックスコープに従います。

if (true) {
  let count = 10;
  const message = "ブロックの中だけで使える";

  console.log(count);   // 10
  console.log(message); // ブロックの中だけで使える
}

// console.log(count);   // ReferenceError
// console.log(message); // ReferenceError

このように、let や const で宣言した変数は、ブロックの外では使えません。これが、現代のJavaScriptで var より let / const がよく使われる大きな理由です。

var と let / const では何が違うのか

スコープの話で初心者がつまずきやすいのは、var だけ挙動が違うことです。

if (true) {
  var oldValue = "varで宣言";
  let newValue = "letで宣言";
}

console.log(oldValue); // varで宣言
// console.log(newValue); // ReferenceError

上のコードでは、oldValue は if ブロックの外からも参照できます。これは var がブロックスコープを持たず、関数スコープで動くためです。

一方、newValue は let で宣言されているため、if ブロックの外では使えません。

そのため、いまからJavaScriptを書くなら、基本的には次の考え方で大丈夫です。

  • 再代入する変数は let
  • 再代入しない値は const
  • var は古いコードを読むときに出てくるもの、と考える

JavaScriptの変数宣言（let / const / var）の記事も合わせて読むと、スコープの違いがさらに整理しやすくなります。

外側の変数は内側から見える

JavaScriptでは、内側の関数から外側の変数を参照できます。

const outerMessage = "外側の変数";

function outer() {
  const innerValue = 100;

  function inner() {
    console.log(outerMessage);
    console.log(innerValue);
  }

  inner();
}

outer();

この例では、inner() の中から外側にある outerMessage と innerValue を参照できます。逆に、外側から内側のローカル変数を勝手に見ることはできません。JavaScriptでは、このように「関数が定義された位置関係」によって参照できる範囲が決まります。

この考え方は、関数式やアロー関数を学ぶときにも土台になります。

覚え方 JavaScriptのスコープは「内側は外側を見られるが、外側は内側を見られない」と考えると整理しやすいです

よくあるつまずき

1. if の中で作った変数が外で使えない

let や const はブロックスコープなので、if 文や for 文の外では使えません。これは不具合ではなく、意図どおりの動作です。

2. var を使ったら外でも見えてしまう

var はブロックスコープを持たないため、初心者が「なぜ使えてしまうのか」で混乱しやすいです。新しく書くコードでは、なるべく let / const を使うほうが安全です。

3. 同じ名前の変数を内側で再宣言してしまう

const message = "外側";

function sample() {
  const message = "内側";
  console.log(message); // 内側
}

sample();
console.log(message);   // 外側

このように同じ名前でも、スコープが違えば別の変数として扱われます。便利なこともありますが、初心者のうちは混乱しやすいので、なるべく分かりやすい名前を付けるのがおすすめです。

JavaScriptを体系的に学びたい方は

スコープの理解を深めたい方は、次の記事もあわせて読むと流れがつかみやすいです。

まとめ

まとめ JavaScriptのスコープで押さえたいこと

  • スコープとは、変数が使える範囲のこと
  • 主にグローバルスコープ、関数スコープ、ブロックスコープがある
  • var は関数スコープ、let と const はブロックスコープ
  • 内側の関数からは外側の変数を参照できる
  • 初心者のうちは let と const を中心に使うと整理しやすい

JavaScriptのスコープは、一見すると地味なルールですが、変数の扱い方やバグの防止に直結する大事な基本です。まずは「どこで宣言した変数が、どこから見えるのか」を意識しながらコードを書くようにすると、理解がかなり進みます。

タイトルとURLをコピーしました