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

1. JavaScriptのスコープとは？

1. JavaScriptのスコープとは？

JavaScriptのスコープとは、「変数が使える範囲」のことです。スコープを理解することで、変数の値が予期せず変わってしまったり、動かなくなったりするエラーを防ぐことができます。

スコープには大きく分けて次の2種類があります。

• グローバルスコープ（プログラム全体で使える）
• ローカルスコープ（ある場所だけで使える）

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

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

グローバル変数とは、プログラムのどこからでも使える変数のことです。関数の外側で変数を作ると、それはグローバル変数になります。

let message = "こんにちは";

function greet() {
  console.log(message);
}

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

この例では、messageという変数は関数の外にあるので、関数の中からでも使うことができます。

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の機能も理解しやすくなります。まずは、自分が書いている変数が「今、どこの波かっこの中にいるのか？」を常に意識することから始めてみてください。

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