スコープとコンテキストの違いをわかりやすく解説

2025年10月24日

その他

プログラミングでは、同じように見えて意味が異なる言葉が学習の壁になります。

中でもスコープとコンテキストは混同されやすく、想定外の動作の原因になりがちです。

この記事では、JavaScriptを例に、両者の考え方と見分け方を段階的にやさしく解説します。

プログラミングのスコープとコンテキストの基本

スコープとコンテキストの定義

短い定義

スコープは「変数や関数が見える範囲」です。

コンテキストは「関数が実行されるときの文脈(誰が呼んだか)」です。

ここで言う文脈は、JavaScriptでは主にthisが指す対象のことを意味します。

身近なたとえ

スコープ=部屋の中で見える物、コンテキスト=今話している人と考えると整理しやすいです。

部屋が変わると見える物が変わり、話す人が変わると「私」が指す人が変わります。

初心者が混同しやすい点

「変数が見えない」の多くはスコープの問題、「thisが思った人を指さない」はコンテキストの問題です。

見えない=スコープ、指していない=コンテキストと覚えておくと、原因を切り分けやすくなります。

スコープの意味と使い方

スコープは変数の見える範囲

どこから参照できるか

スコープは、変数や関数が「どのコード位置から参照できるか」を決めます。

JavaScriptでは、letやconstで宣言した変数は宣言したブロックの内側でのみ有効です。

スコープの種類

代表的な4種類

グローバル、関数、ブロック、モジュールの4つをまず押さえれば十分です。

特別な理由がなければletとconstを使うと直感通りに動きます。

種類	範囲のイメージ	よくある宣言場所の例
グローバルスコープ	プログラム全体	ファイル先頭の宣言
関数スコープ	その関数の中だけ	関数の中で宣言
ブロックスコープ	`{}`の中だけ	ifやforなどの中
モジュールスコープ	そのモジュールファイル内だけ	ESモジュール(ファイル単位)

まずは「ブロックごとに閉じる」と覚えるとミスが減ります。

スコープの境界

どこで区切られるか

中括弧{}で囲まれたブロック、関数の宣言、そしてモジュール(ファイル)がスコープの境界です。

境界の外から中の変数は見えません。

スコープの例

関数の内と外

JavaScript

function greet() {
  const name = "Taro";
  console.log(name); // OK
}
greet();
console.log(typeof name); // "undefined" (関数の外からは見えない)

関数の外から関数内の変数は参照できません。

ブロックの内と外

JavaScript

if (true) {
  let count = 1;
  console.log(count); // 1
}
console.log(typeof count); // "undefined" (ブロックの外からは見えない)

letやconstはブロックスコープを作ります。

varの違いに注意

JavaScript

if (true) {
  var x = 1; // varは関数スコープ
}
console.log(x); // 1 (ブロックの外でも見える)

varはブロックで閉じずに漏れやすいので、初心者はlet/constを使うのが安全です。

スコープでの初心者のミス

ありがちな落とし穴と対策

変数の影響範囲を誤解する
「外から中は見えない」「内から外は見えるが上書きに注意」と覚えます。内側で同名を宣言すると外側を隠します(シャドーイング)。
宣言抜けで意図せぬグローバルを作る
x = 1のようにlet/constを付け忘れると危険です。常に宣言してから代入しましょう。
ブロックで閉じたつもりがvarで漏れる
varを避けてlet/constに統一すると回避できます。

コンテキストの意味と使い方

コンテキストは実行時の文脈

JavaScriptではthisが要

コンテキストは「関数が誰の立場で実行されているか」を表し、JavaScriptでは主にthisに現れます。

同じ関数でも呼び出し方でthisが変わります。

コンテキストは呼び出し方で変わる

メソッドとしてか、ただの関数としてか

JavaScript

const user = {
  name: "Taro",
  greet() {
    console.log("I am " + this.name);
  }
};

user.greet(); // "I am Taro" (thisはuser)
const f = user.greet;
f(); // thisはuserを指さない(意図した対象を失う)

「obj.method()」の形ならthisはobjですが、「ただの関数呼び出し」になるとthisは変わります。

コンテキストと呼び出し元の関係

呼び出し場所ではなく呼び出し方

コンテキストは「どこに書いたか」ではなく「どう呼んだか」で決まります。

呼び出し元のオブジェクトがthisになります。

JavaScript

const team = { name: "Dev", show() { console.log(this.name); } };
const other = { name: "Ops", show: team.show };

team.show();  // "Dev" (thisはteam)
other.show(); // "Ops" (thisはother)

同じ関数でも、持ち主オブジェクトが変わるとthisも変わることが分かります。

コンテキストの例

失われたthisを固定する

JavaScript

const user = {
  name: "Taro",
  greet() { console.log("I am " + this.name); }
};

const btn = document.querySelector("#btn");

// コールバックでthisを失う例
btn.addEventListener("click", user.greet); // thisはuserではない

// 対策: bindでthisを固定
btn.addEventListener("click", user.greet.bind(user)); // 常にuserを指す

コールバックにメソッドを渡すときはbindで文脈を固定すると安全です。

アロー関数のthis

JavaScript

const obj = {
  name: "A",
  normal() { console.log(this.name); }, // 呼び出し方で変化
  arrow: () => { console.log(this); }   // 外側のthisをそのまま使う
};

アロー関数は自分のthisを持たず、外側のthisを使います。

イベントハンドラにアロー関数を使うと期待と違うことがあるため注意しましょう。

コンテキストでの初心者のミス

ありがちな落とし穴と対策

メソッドをそのままコールバックに渡してthisを失う
bindで固定するか、ラップして明示的に呼ぶのが確実です。
アロー関数と通常の関数の違いを混同
「アローはthisを変えない、functionは呼び出し方で変わる」と覚えましょう。
thisが必要ないのにthisに頼る
値を引数として渡す設計にすると、コンテキストに依存しない安全な関数になります。

スコープとコンテキストの違いと見分け方

違いの要点

一言でまとめると

スコープは「どこから見えるか」、コンテキストは「誰として実行しているか」です。

スコープは宣言位置で決まり、コンテキストは呼び出し方で決まります。

観点	スコープ	コンテキスト
何を決めるか	参照できる変数の範囲	`this`が誰かなど実行時の立場
決まり方	コードの配置(宣言位置)	呼び出し方と呼び出し元
変化のタイミング	コードで固定	実行時に変わる
よくある症状	変数が見えない	`this`が期待と違う
主な対策	スコープを小さく保つ、`let`/`const`を使う	`bind`で固定、引数で値を渡す