JavaScriptのスコープとは？ローカル変数・グローバル変数の違いと使い分け

1. JavaScriptのスコープとは？

1. JavaScriptのスコープとは？

JavaScriptのスコープ（Scope）とは、一言でいうと「その変数がどこまで有効か？」という有効範囲のことです。プログラムの中で宣言した変数は、どこでも自由に読み書きできるわけではなく、実はそれぞれ「活動できる限界の境界線」が決まっています。

もしスコープという仕組みがなかったら、プログラムのあちこちで同じ名前の変数がぶつかり合い、予期せぬ場所で値が書き換わってしまうといったバグ（不具合）が多発してしまいます。初心者の方が「変数を定義したはずなのに動かない！」と悩む原因の多くは、このスコープの外側から変数にアクセスしようとしているケースです。

JavaScriptのスコープは、大きく分けて以下の2つのレベルで考えると理解がスムーズです。

• グローバルスコープ：プログラムのどこからでもアクセスできる「公共の広場」のような範囲
• ローカルスコープ：関数やブロックの中など、限られた場所でしか使えない「個室」のような範囲

例えば、家全体で使える「テレビのリモコン」がグローバル変数だとすれば、自分の部屋の机の引き出しにしまってある「自分専用のノート」がローカル変数、といったイメージです。

let globalName = "世界中の人"; // グローバルスコープ（どこでもOK）

function sampleFunction() {
    let localName = "部屋の中の人"; // ローカルスコープ（この関数内だけ）
    console.log(globalName); // 表示できる
    console.log(localName);  // 表示できる
}

sampleFunction();
console.log(localName); // 【エラー！】部屋の外からは見えません

世界中の人
部屋の中の人
Uncaught ReferenceError: localName is not defined

このように、「変数の見える範囲を適切に制限すること」が、安全で読みやすいコードを書くための第一歩となります。

2. グローバル変数とは？

2. グローバル変数とは？

JavaScriptを学び始めたばかりの方が最初につまずきやすいのが、「変数の使える範囲（スコープ）」です。その中でも、グローバル変数は「プログラムのどこからでも自由にアクセスできる変数」のことを指します。

たとえば、家の中に置いてある「家族全員で使うテレビ」のようなイメージです。リビングにあっても、寝室から見に来ても、どこからでも使うことができますよね。プログラミングでは、関数の外側（一番外側の階層）で変数を宣言すると、それが自動的にグローバル変数になります。

// 関数の外側で宣言した「グローバル変数」
let message = "こんにちは！グローバル変数の世界へようこそ。";

function greet() {
  // 関数の中から外側の変数を見に行くことができる
  console.log(message);
}

// 関数を実行
greet();

こんにちは！グローバル変数の世界へようこそ。

このサンプルコードでは、messageという変数が関数の外にあります。そのため、greetという関数の中からでも、その中身を読み取って表示させることが可能です。このように、場所を問わずどこからでも呼び出せるのがグローバル変数の最大の特徴です。

初心者の方は、まず「外側で作った変数は、内側の関数の中でも使えるんだな」という基本ルールを覚えておきましょう。ただし、どこからでも中身を書き換えられてしまうという性質もあるため、大規模な開発では注意が必要になりますが、まずはこの「共有の棚」のような仕組みを理解することが大切です。

3. ローカル変数とは？

3. ローカル変数とは？

ローカル変数とは、ある特定の場所（関数やブロックなど）だけで使える変数です。関数の中で作られた変数は、その関数の中だけで使えます。

function greet() {
  let message = "こんにちは";
  console.log(message);
}

greet();

console.log(message); // エラーになる

このコードでは、messageは関数の中だけで使えるローカル変数なので、関数の外で使おうとするとエラーになります。

4. ブロックスコープも覚えよう

4. ブロックスコープも覚えよう

関数以外にも、if文やfor文などのブロック（波かっこ { } で囲まれた部分）でも、変数をローカルにすることができます。これをブロックスコープといいます。

if (true) {
  let color = "青";
  console.log(color); // 青と表示される
}

console.log(color); // エラーになる

letやconstで作った変数は、そのブロックの中でしか使えません。これがブロックスコープの特徴です。

5. varとの違いに注意しよう

5. varとの違いに注意しよう

JavaScriptでは、letやconstの他にvarというキーワードもあります。varで作った変数は、ブロックスコープが効かず、関数単位のスコープになります。

if (true) {
  var color = "赤";
}
console.log(color); // 赤と表示される

このように、varはブロックの外でも使えてしまうので、思わぬバグの原因になります。現在では、基本的にletやconstを使うのが主流です。

6. グローバル変数はなるべく使わない

6. グローバル変数はなるべく使わない

グローバル変数は便利に見えますが、プログラムが大きくなると「どこで変えられたのか分からなくなる」ことがあります。そのため、なるべく関数の中だけで使うローカル変数を使うようにしましょう。

もし複数の関数で同じ値を使いたい場合は、引数（関数に渡す値）として受け渡すのが安全です。

7. スコープの例：お弁当箱に例えてみよう

7. スコープの例：お弁当箱に例えてみよう

スコープをお弁当箱にたとえると分かりやすいです。

• ローカル変数 = 自分のお弁当箱の中に入っているおかず（他の人は食べられない）
• グローバル変数 = みんなで食べるお弁当（誰でも取れるけど、誰が食べたか分からなくなる）

つまり、なるべく自分の弁当箱の中だけでやりくりしたほうが安全ということです。

8. スコープチェーンとは？

8. スコープチェーンとは？

JavaScriptでは、ローカル変数が見つからないと、ひとつ外側のスコープを順に探していきます。これをスコープチェーンといいます。

let greeting = "こんにちは";

function sayHello() {
  console.log(greeting);
}

sayHello(); // こんにちはと表示される

sayHello関数の中にはgreetingがありませんが、外側にあるグローバル変数のgreetingを見つけて表示します。

まとめ

まとめ

ここまでJavaScriptのスコープについて、その基礎から応用、そして注意点まで詳しく解説してきました。変数がどこで使えて、どこで消えてしまうのかというルールを理解することは、プログラムが正しく動くための「地図」を手に入れるようなものです。

スコープの重要性を再確認

プログラミング初心者の方が最初につまずきやすいのが、「さっきまで動いていた変数が、別の場所ではエラーになる」という現象です。この記事で学んだ通り、それはバグではなく、JavaScriptが提供してくれている「変数の衝突を防ぐための仕組み」なのです。

もし、すべての変数がどこからでも自由に書き換えられる「グローバル変数」ばかりの世界だったら、開発現場は大混乱に陥ります。ある場所で数字を計算している最中に、別の場所から勝手にその数字を文字列に変えられてしまう、といった予期せぬトラブルが多発するからです。だからこそ、「必要な場所だけで使い、使い終わったら捨てる」というローカルスコープの考え方が非常に大切になります。

適切なキーワードの選び方

現代のJavaScript（ES6以降）において、変数の宣言は let と const が基本です。 特に、一度代入したら中身を変えない定数 const をメインで使い、どうしても再代入が必要な場合だけ let を使うようにすると、スコープの管理がさらに楽になります。

古いコードで見かける var は、ブロックスコープを無視してしまうため、現代の開発では推奨されません。これから学習を始める方は、まずは let と const を使いこなし、自分が必要な範囲（関数内やif文の中など）に限定して変数を定義する癖をつけていきましょう。

実践的なサンプルコードで復習

実際に、複数のスコープが混在するプログラムで、変数がどのように扱われるかを復習してみましょう。下記のコードは、グローバル変数、ローカル変数（関数スコープ）、そしてブロックスコープがどのように共存するかを示しています。

// 1. グローバルスコープ：どこからでもアクセス可能
const appName = "スコープ学習アプリ";

function checkScope() {
    // 2. 関数スコープ（ローカル変数）：この関数の中だけで有効
    let status = "実行中";
    
    if (true) {
        // 3. ブロックスコープ：このif文の{ }の中だけで有効
        let blockMessage = "if文の中です";
        const tempId = 12345;
        
        console.log(appName);      // アクセス可能（グローバル）
        console.log(status);       // アクセス可能（外側の関数スコープ）
        console.log(blockMessage); // アクセス可能（現在のブロック）
    }

    // ここでblockMessageを呼び出すとエラーになります
    // console.log(blockMessage); 
    
    console.log(status); // アクセス可能
}

checkScope();

上記のコードの実行結果は、コンソールに以下のように出力されます。

スコープ学習アプリ
実行中
if文の中です
実行中

このように、内側のスコープから外側のスコープにある変数を参照することはできますが、その逆はできません。これを「情報の隠蔽（カプセル化）」の第一歩として意識できると、エンジニアとしてのスキルがぐっと向上します。

今後の学習に向けて

スコープの概念に慣れてくると、「クロージャ」というさらに高度なJavaScriptの機能も理解しやすくなります。まずは、自分が書いている変数が「今、どこの波かっこの中にいるのか？」を常に意識することから始めてみてください。

安全で読みやすいコードを書くためには、「グローバル変数を最小限にする」という鉄則を忘れないようにしましょう。プログラムが大きくなればなるほど、この小さな習慣が大きな差となって現れてきます。