関連用語集

JavaScriptのスコープとは？基礎からしっかり理解しよう

JavaScriptを学んでいると、「スコープ」という言葉に出会います。
スコープは変数の「有効範囲」のことを意味し、コードの理解やバグの防止において非常に重要な概念です。

この記事では、JavaScriptのスコープについて、基礎からわかりやすく解説します。

スコープとは？

スコープ（scope）とは、変数や関数が「どこから見えるか」「どこで使えるか」という有効範囲のことです。

スコープを理解していないと、同じ名前の変数が予期せず上書きされたり、値が意図通りに取得できないといったエラーの原因になります。

関数の外で宣言された変数は、プログラム全体からアクセス可能な「グローバルスコープ」に属します。

let name = "Taro";

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

greet(); // "こんにちは、Taro"

name は関数の外で宣言されているため、関数の中からでもアクセスできます。

関数の中で宣言された変数は、その関数の中だけで有効な「ローカルスコープ」に属します。

function sayHello() {
  let message = "Hello";
  console.log(message);
}

sayHello(); // "Hello"
console.log(message); // エラー：messageは関数の外では使えない

関数の中で宣言された変数は、関数の外からは見えません。

let と const で宣言された変数は、{ } で囲まれたブロック内だけで有効です。これを「ブロックスコープ」と呼びます。

{
  let a = 10;
  const b = 20;
  console.log(a); // 10
}

console.log(a); // エラー：aはブロックの外から見えない

var を使った場合はブロックスコープにならず、関数スコープとなります。

スコープは入れ子（ネスト）にすることができます。内側のスコープから外側のスコープの変数にアクセスすることができます。

function outer() {
  let x = "外側";

  function inner() {
    console.log(x); // "外側"
  }

  inner();
}

ただし、外側から内側のスコープの変数にはアクセスできません。

JavaScriptでは、変数が見つからない場合、外側のスコープを順にたどって探します。これを「スコープチェーン」と呼びます。

let color = "赤";

function printColor() {
  let color = "青";
  console.log(color); // "青"
}

printColor();

関数内に同じ名前の変数がある場合は、それが優先され、外側の変数は無視されます。

スコープの仕組みを正しく理解しておくことで、予期しないバグを防ぎ、より安全で読みやすいコードを書くことができます。