コールバック関数とは？
JavaScriptにおけるコールバック関数とは、他の関数に引数として渡され、必要なタイミングで呼び出される関数のことです。
コールバック関数は、処理が終わった後に別の処理を実行したい場合によく使われます。イベント処理や非同期処理など、JavaScriptでは非常に頻繁に登場する重要な仕組みです。
コールバック関数の基本的な仕組み
コールバック関数は、関数を「値」として渡すことで実現します。
function processData(callback) {
const data = "JavaScript";
callback(data);
}
processData(function (result) {
console.log("Processed: " + result);
});
このコードでは、processData()へ無名関数を渡しています。
processData()が呼び出される。dataに"JavaScript"が代入される。callback(data)が実行される。- 渡した無名関数が呼び出される。
Processed: JavaScriptが表示される。
このように、「あとで実行する処理」を関数として渡すのがコールバック関数です。
無名関数をコールバックとして使う利点
コールバックには無名関数を使うことが多くあります。
一度しか使用しない処理であれば、関数名を付けずにその場で記述できるため、コードを簡潔にまとめられます。
- 一度しか使わない処理を書きやすい。
- 処理内容を呼び出し元の近くに記述できる。
- 不要な関数名を増やさずに済む。
現在では、無名関数だけでなくアロー関数を使用することも非常に多くなっています。
非同期処理でのコールバック関数
JavaScriptでは、時間のかかる処理が終わったあとに実行する処理としてコールバック関数が利用されます。
setTimeoutの例
console.log("Start");
setTimeout(function () {
console.log("This message appears after 2 seconds.");
}, 2000);
console.log("End");
実行結果は次のようになります。
Startが表示される。setTimeout()はタイマーだけ設定する。Endがすぐ表示される。- 約2秒後にコールバック関数が実行される。
This message appears after 2 seconds.が表示される。
このように、時間のかかる処理が終了したあとでコールバック関数が呼び出されます。
イベント処理でのコールバック関数
イベント処理でもコールバック関数は頻繁に使われます。
document.getElementById("myButton").addEventListener("click", function () {
console.log("Button clicked!");
});
この例では、クリックされた瞬間にコールバック関数が実行されます。
addEventListener()はイベントが発生するまで待機し、クリックされたタイミングで渡された関数を呼び出しています。
アロー関数を使った書き方
ES6以降では、コールバック関数はアロー関数で書くことが多くなっています。
processData((result) => {
console.log("Processed: " + result);
});
機能は無名関数と同じですが、より短く記述できます。
コールバック関数の課題
コールバック関数は便利ですが、非同期処理が増えると関数が何重にもネストしてしまうことがあります。
この状態はコールバック地獄（Callback Hell）と呼ばれ、コードが読みにくくなります。
現在では、この問題を解決するためにPromiseやasync/awaitを利用することが一般的です。
初心者が覚えておきたいポイント
- コールバック関数は「あとで実行する処理」を渡す仕組みである。
- イベント処理や非同期処理で特によく使用される。
- 一度しか使わない処理では無名関数やアロー関数がよく使われる。
- 複雑な非同期処理ではPromiseやasync/awaitが推奨される。
まとめ
- コールバック関数は、他の関数へ引数として渡される関数である。
- 処理が完了したタイミングで呼び出されるため、イベント処理や非同期処理で広く利用される。
- 無名関数やアロー関数を使うことで簡潔に記述できる。
- 非同期処理が複雑になる場合は、Promiseやasync/awaitを利用することが推奨される。
- JavaScriptを学ぶうえで必ず理解しておきたい基本的な仕組みである。