非同期処理のコールバック関数を理解する

コールバック関数とは？

結論：非同期処理が終わったあとに呼ばれる関数
ただ、上記は非同期処理のコールバック関数のイメージであり、実際のコールバック関数は非同期処理以外でも使われている。

そのため、正しく言うとコールバック関数とは「関数の引数に渡され、後で呼び出される関数のこと」
JavaScript以外にもPHPとかにも存在する概念

PHPのコールバック関数をみてみる

array_map(function($item) { 
    return $item * 2; 
}, [1, 2, 3, 4, 5]);

※arry_map関数はコールバック関数を行った結果を新たな配列にしてくれる関数
https://www.php.net/manual/ja/function.array-map.php

コールバック関数は下記。array_map関数で呼び出される関数

function($item) { return $item * 2; }

コードの解説

1.配列の処理
[1, 2, 3, 4, 5] は処理される元の配列。

2.array_mapの使用
array_map関数は、2つの引数をとる。
最初の引数は「配列の各要素に適用するコールバック関数」
二番目の引数は「処理される配列」今回は[1, 2, 3, 4, 5]。

3.処理の実行
array_mapは、指定された配列の各要素に対してコールバック関数を実行する。
この例では、各要素が2倍にされて新しい配列となる。

4.結果
このコードは新しい配列 [2, 4, 6, 8, 10] を生成し、元の配列 [1, 2, 3, 4, 5] の各要素が2倍になった結果が得られる。

このように、コールバック関数とは「関数の引数に渡され、後で呼び出される関数のこと」
JavaScriptの非同期処理で使われるコールバック処理も同じで、「非同期処理(関数)が終わったあとに呼ばれる関数(コールバック関数)」

非同期処理で使うコールバック処理のサンプルコード

function myFunction(callback) {
    console.log("非同期処理を開始します...");

    setTimeout(() => {
        console.log("非同期処理が完了しました。");

        // コールバック関数を実行
        callback("成功した結果");
    }, 200); 
}

myFunction(result => {
    console.log("コールバック関数が呼ばれました: " + result);
});

◎実行結果

非同期処理を開始します...
非同期処理が完了しました。
コールバック関数が呼ばれました: 成功した結果

コードの解説

◎myFunctionの動作
myFunctionはcallbackという名前のコールバック関数を引数として受け取る

result => {
    console.log("コールバック関数が呼ばれました: " + result);
}

setTimeoutの非同期処理が開始され、setTimeoutが200ミリ秒後に設定される。
200ミリ秒後、setTimeoutの中で"成功した結果" という文字列を引数としてコールバック関数が実行される。

setTimeoutが実行された際、このコールバック関数が "成功した結果" という文字列を引数として受け取ります。

// resultに成功した結果が渡される
result => {
    console.log("コールバック関数が呼ばれました: " + result);
}

コールバック関数は、受け取った引数を使って "コールバック関数が呼ばれました: 成功した結果" というメッセージをコンソールに出力する