プレゼンテーションシナリオ: スライド79、80

スライド79と80では、JavaScript Callback Functionsについて説明します。

Callbackとは？

Callbackは、別の関数に引数として渡される関数で、その関数が必要なときに呼び戻す（call back）ことができるようにします。

通常、実行順序の制御や、別の関数が完了した後の操作に使用されます。

いつCallbackを使うか？

• 関数間の実行順序を制御する必要がある場合。
• 同期（synchronous）と非同期（asynchronous）の両方のケースで有用です。

JavaScriptでのCallbackの使い方

a) 同期（Synchronous Callback）

例：

function calculate(a, b, callback) {
    let result = a + b;
    callback(result); // call back after calculation
}

function showResult(sum) {
    console.log("The sum is:", sum);
}

calculate(5, 3, showResult);
// Output: The sum is: 8

ここでは：

• showResultがcallbackとしてcalculateに渡されます。
• 加算が完了した後、calculateはshowResultを呼び出して結果を表示します。

b) 非同期（Asynchronous Callback）

右側の図のコード例を見てください：

function fetchData(callback) {
    setTimeout(() => {
        let data = "User data loaded";
        callback(data); // call back after delay
    }, 2000);
}

function display(data) {
    console.log(data);
}

console.log("Start fetching...");
fetchData(display);
console.log("Continue working...");

// Output:
// Start fetching...
// Continue working...
// (2s later) User data loaded

この例では：

• setTimeoutはデータ取得をシミュレートします（2秒かかります）。
• 待機中もプログラムは実行を続けます。
• 2秒後、callback displayが呼び出されてデータを出力します。

このように:

• Synchronous callback: すぐに実行され、順序通りに実行されます。
• Asynchronous callback: 後で実行され、プログラムをブロックしません。

非同期処理を扱う方法（つまり、プログラムを正しい順序で実行させる）については、以下を参照してください：

• https://www.w3schools.com/js/js_promise.asp
• https://www.w3schools.com/js/js_async.asp

以上で、JavaScriptのCallback Functionsについての説明を終わります。