2024年12月3日

コールバック関数とは

// 🟢 このコードの目的
// 「骨組み関数の中での追加処理」と「コールバック関数の中での追加処理」の違いを理解する
// =======================================

// ======= セクション開始：コールバック関数を渡すパターン =======
console.log("🚩【セクション0】コールバック関数を渡す例（基本形）");
console.log("    a = 骨組み関数, b = コールバック引数, c = コールバック関数\n");

// =======================================
// 🚩STEP2: 骨組み関数定義 a（呼び出される側、骨組み部分）
// =======================================
function a(b) { // a = 骨組み関数, b = コールバック引数（ここに c が渡される）
    // 【説明1】
    // 呼び出し側に a(c); と呼び出されたとき、
    // 骨組み関数 a(b) の コールバック引数 b に「コールバック関数 c」が渡される
    // つまり b = c となる（b は c の別名になる）
    console.log("【1】メイン処理（a の骨組み部分）：必ず実行される固定の動作");

    // 【説明2】
    // 骨組み関数の中でも「追加処理」を書ける
    // これは必ず実行される（差し替えできない固定処理）
    console.log("【2】骨組み関数の追加処理（a 内）：毎回必ず実行される");

    // 【説明3】
    // コールバック引数 b は コールバック関数 c の「別名」になっている
    // 今回は「メイン処理がすべて終わったあと」にコールバックを呼び出す
    // 💡 コールバック関数は「最後に呼ぶ」こともできるし、
    //    必要に応じて「メイン処理の途中で呼ぶ」ことも可能（柔軟に配置できるのが特徴）
    console.log("👉 最後に骨組み関数の中で コールバック引数 b を使って 、 コールバック関数 c() を呼び出す（b = c のため b() が c() を実行）");

    // 📝 骨組み関数 a の役割：
    // a は「骨組み（テンプレート）の処理」を持つ関数
    // 「必ず実行される固定の処理」と「差し込むコールバックの呼び出し」を行うだけ
    // 自分の中で c が何をするか（引数を必要とするかどうか）は知らない／知らなくていい
    b();  // ✅ 骨組み関数 a の中で、コールバック引数 b を実行する（b = c のため、実際には c() が呼ばれる）
}

// =======================================
// 🚩STEP3: コールバック関数 c（差し込まれる処理、呼び出し側 a(c) の引数）
// =======================================
function c() { // c = コールバック関数
    // 【説明4】
    // 呼び出し側が自由に決められる処理
    console.log("【3】コールバック処理（c の内容）：差し込まれた具体的な動作");

    // 【説明5】
    // さらに追加処理も可能
    console.log("【4】コールバック処理の追加（c の内容）：自由に差し替えられるアクション");

    // 📝 コールバック関数 c の役割：
    // c は「呼び出し側が自由に定義できる処理」
    // 今回の c は引数を必要としないので、b() のまま呼び出しても問題なし
    // もし c が引数を受け取る設計なら、b(値) のように渡すことも可能
}

// =======================================
// 🚩STEP1: 呼び出し（実行開始）
// =======================================
a(c); // a = 骨組み関数 に c = コールバック関数 を渡す（b = c）

// =======================================
// 🚩 処理の流れまとめ（矢印付き・骨組み関数版）
// =======================================

// 呼び出し: a(c)  🚩STEP1
//        ↓
// b = c   ← a(c) = a(b) なので b は c を指す（b = c）  🚩STEP2
//        ↓
// 【1️⃣】メイン処理 a が実行（固定の骨組み部分）
//        ↓
// b() が実行される
// → 実際には c() が呼ばれる（b = c のため）  🚩STEP3
//        ↓
// 【2️⃣】コールバック処理 c の中身（差し込み自由）
// 【3️⃣】コールバック処理 c の追加部分（差し替え可能）
//        ↓
// 【4️⃣】骨組み関数 a の追加処理（固定で必ず実行される）
//        ↓
// 完了！ 🎉

↓↓↓(wpの実績その1で張り付けた)