スコープとクロージャ
スコープとクロージャ とは
変数のスコープとクロージャの仕組みを理解しよう。本レッスンでは、スコープとクロージャ の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。
スコープとクロージャ
変数のアクセス範囲（スコープ）と、クロージャの仕組みを理解しましょう。
ブロックスコープ
let/constは{}の中だけで有効です。
JavaScript
if (true) {
let x = 10;
const y = 20;
}
// console.log(x); // エラー！クロージャ
関数が外側のスコープの変数を「記憶」する仕組みです。
JavaScript
function createGreeting(prefix) {
// 内側の関数がprefixを「記憶」する
return function(name) {
return `${prefix}、${name}さん！`;
};
}
const hello = createGreeting("こんにちは");
console.log(hello("太郎")); // "こんにちは、太郎さん！"クロージャはデータを隠蔽（カプセル化）するのにも使えます。外部から直接変数にアクセスできず、関数を通じてのみ操作できます。
この問題では、クロージャを使ったカウンターオブジェクトを作成しましょう。
よくある質問
Q. クロージャはどんな場面で使いますか？
A. プライベートな状態を外から触らせずに保持したいときに便利です。例えばカウンタ関数を return することで内部の count 変数を隠蔽できます。React の useState もクロージャを使って状態を保っており、関数型プログラミングの基礎概念のひとつです。
Q. クロージャでメモリリークは起きませんか？
A. 外側の変数を保持し続けるため、巨大な配列などを掴んだままだとリークの原因になります。不要になったら関数参照を null にして GC 対象にする、イベントリスナーを removeEventListener で外す、などの対策が有効です。
Q. ループ内でクロージャを作るときの罠は？
A. var を使うと全クロージャが同じ変数を共有してしまい、最後の値しか参照しなくなります。let を使えば毎ループごとに新しい束縛になるので意図通りに動きます。古いコードを読む際に頻発するハマりどころなので覚えておきましょう。
次のレッスン
次は アロー関数 で、変数のスコープとクロージャの仕組みを理解しよう を学びます。
事前確認 — 進む前に次の 3 つができることを確認しましょう。
- スコープとクロージャ の要点を自分の言葉で説明できる
- このレッスンの最小コード (または操作手順) を見ずに書ける
- 練習問題やクイズで間違えた箇所を読み直して理解した
理解度チェック (30 秒)
Q. スコープとクロージャ とは何か、1 文で説明してください。
A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。
関連レッスン
入出力例
test-cases.txt
testCounter(0, ["increment","increment","decrement","getCount"]) → [1,2,1,1]
testCounter(10, ["increment","reset","getCount"]) → [11,10,10]
testCounter(5, ["decrement","decrement","decrement","getCount"]) → [4,3,2,2]
testCounter(0, ["increment","increment","increment","reset","getCount"]) → [1,2,3,0,0]