クロージャの基本 — function outer(){ let a = 1; return ()=>a++ }
JavaScript の クロージャ は「関数が作られたときの変数を覚えていて、あとからも使える仕組み」です。
初心者にとっては「関数の中で作った変数が、外からも生き続ける」イメージを持つと理解しやすいです。
基本のコード例
function outer() {
let a = 1; // outer の中だけの変数
return () => a++; // 内側の関数が a を参照
}
const f = outer(); // outer を呼び出すと関数が返る
console.log(f()); // → 1
console.log(f()); // → 2
console.log(f()); // → 3
outerを呼ぶと「aを覚えている関数」が返る。f()を呼ぶたびにaが増えていく。- ポイント:
aは本来outerの中だけの変数。でも返された関数が「閉じ込めて」覚えている。これが クロージャ。
よく使うテンプレート集
カウンターを作る
function makeCounter() {
let count = 0;
return () => ++count;
}
const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
プライベート変数を持つ関数
function secretBox() {
let secret = "秘密";
return {
get: () => secret,
set: (val) => secret = val
};
}
const box = secretBox();
console.log(box.get()); // "秘密"
box.set("新しい秘密");
console.log(box.get()); // "新しい秘密"
複数のクロージャを作る
function makeAdder(x) {
return (y) => x + y;
}
const add5 = makeAdder(5);
const add10 = makeAdder(10);
console.log(add5(3)); // 8
console.log(add10(3)); // 13
例題: ボタンを押すたびにカウントアップ
<button id="btn">クリック</button>
<div id="out"></div>
<script>
function makeCounter() {
let count = 0;
return () => ++count;
}
const counter = makeCounter();
document.getElementById("btn").addEventListener("click", () => {
document.getElementById("out").textContent = counter();
});
</script>
- 効果: ボタンを押すたびに
countが増えて表示される。 - ポイント:
countは外から直接触れないが、クロージャが覚えているので増やせる。
実務でのコツ
- データの隠蔽: クロージャを使うと「外から直接触れられない変数」を作れる。
- 関数工場: クロージャは「関数を作る関数」として便利。
- イベント処理: ボタンやタイマーで「状態を保持」するのに役立つ。
- メモリ: 変数が残り続けるので、大量に作るとメモリを消費する。
ありがちなハマりポイントと対策
- 変数が共有される:
- 複数のクロージャが同じ変数を参照すると値が共有される。
- 必要なら別々に
outer()を呼んで独立させる。
- スコープの勘違い:
- 「関数が終わったら変数は消える」と思いがち。
- クロージャがあると消えずに残る。
練習問題（タイマーでクロージャ）
function makeTimer() {
let sec = 0;
return () => ++sec;
}
const timer = makeTimer();
setInterval(() => {
console.log("経過秒:", timer());
}, 1000);
- 効果: 1秒ごとにクロージャが
secを覚えて増やし、経過秒を表示。
直感的な指針
- クロージャ = 「関数が変数を閉じ込めて覚える仕組み」。
outerの中の変数が、返された関数で生き続ける。- カウンターやプライベート変数に便利。
- 初心者は「カウンター関数」を作ってみると理解しやすい。
これを覚えれば「状態を保持する関数」「外から触れられない変数」を作れるようになり、JavaScriptの応用力がぐっと広がります。