先生と生徒の会話形式で理解しよう

生徒

「JavaScriptで変数を作ってみたんですが、場所によって動かないことがあります。なんでですか？」

先生

「それは『スコープ』という仕組みに関係しています。スコープとは、変数が使える範囲のことなんです。」

生徒

「変数が使える範囲？それってどういうことですか？」

先生

「よし、それではJavaScriptのスコープについて、やさしく説明していきましょう！」

1. JavaScriptのスコープとは？

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

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

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

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


let message = "こんにちは";

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

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

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

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


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

greet();

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

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

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


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

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

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

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


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

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

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

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

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

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

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


let greeting = "こんにちは";

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

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

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