🟣 2.3 クロージャとスコープ → Composition API の理解につながる

前段階の知識

✅ 【要点】

• スコープ（scope）＝「変数が見える範囲」
• クロージャ（closure）＝「関数が作られた時の変数を覚えている機能」
• Vue Composition API の setup() の設計は クロージャの考え方そのもの
• → 変数を「どこで定義するか」でスコープが決まり、ロジックを安全に閉じ込められる

🟢 【スコープとは？ → 変数が見える範囲】

const x = 10;  // ← これは「グローバル（このファイルの外でも見える）」変数

function showX() {
  console.log(x); // ← ここからも見える
}

function example() {
  const y = 5;   // ← y は example の中でしか使えない
  console.log(y);
}
console.log(y);  // ❌ エラー! y はここでは見えない

🟠 【クロージャとは？ → 「変数を覚えている関数」】

function counter() {
  let count = 0;                        // ← count はこの中だけの変数

  return () => {                        // ← 無名関数（アロー関数）
    count += 1;
    console.log(count);
  };
}

const myCounter = counter();           // counter() を呼ぶと関数が返ってくる
myCounter(); // 1
myCounter(); // 2 ← count を覚えてる！

🎯 count は本来 counter() の中の変数

→ でも myCounter がそれを「覚えている」

→ これが クロージャ（closure）。

🟣 【クロージャが Vue Composition API につながる】