はじめに
タイトル通り、JavaScriptのコールバック関数についてざっくり理解します。
目次
🧷 コールバック関数とは？
コールバック関数とは、他の関数の引数として渡され、特定のタイミングで実行される関数 のことです。
特に 非同期処理やイベント処理 でよく使われます。
📝 コールバック関数の基本構造
function doSomething(callback) {
console.log("処理を開始");
callback(); // 渡された関数を実行
}
doSomething(() => {
console.log("コールバック関数が実行されました！");
});
✅ doSomething に 関数を引数として渡し、その関数を callback() として実行しています。
🧷 コールバック関数が使われる場面
１. 非同期処理（API通信・データ取得）
function fetchData(url, callback) {
fetch(url)
.then(response => response.json())
.then(data => callback(data)) // データ取得後にコールバックを実行
.catch(error => console.error("エラー:", error));
}
fetchData("https://jsonplaceholder.typicode.com/posts/1", (data) => {
console.log("取得データ:", data);
});
🔹 fetchData の callback(data) で、取得したデータを処理できます。
２. イベント処理
document.getElementById("myButton").addEventListener("click", () => {
console.log("ボタンがクリックされました！");
});
🔹 addEventListener の 第2引数がコールバック関数 になっています。
３. タイマー処理
setTimeout(() => {
console.log("3秒後に実行されました！");
}, 3000);
🔹 setTimeout の 第1引数がコールバック関数 です。
４. 配列の処理
let numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => {
console.log("数値:", num);
});
🔹 forEach の 引数に渡した関数 が 配列の各要素に対して実行 されます。
🧷 コールバック関数のメリット
✅ 処理を柔軟に変更できる（関数を引数で渡すことで、実行内容を変更可能）
✅ 非同期処理に適している（データ取得後やイベント発生後に処理を実行）
✅ コードの再利用性が高まる（関数を組み合わせて使える）
🧷 コールバックの注意点（コールバック地獄）
コールバックをネストしすぎると可読性が低下 します。
fetchData("url1", (data1) => {
fetchData("url2", (data2) => {
fetchData("url3", (data3) => {
console.log("すべてのデータを取得:", data1, data2, data3);
});
});
});
💡 解決策: Promise や async/await を使う
🧷 コールバック関数をレストラン注文に置き換えると...
🍽️ レストランの注文に例えてみよう！
✅ 注文する（リクエストを送る）
✅ 料理ができたらウェイターがあなたに持ってくる（非同期処理）
→ あなたが何もしなくても(非同期)勝手に料理が運ばれてくる。
✅ 料理が届いたら、あなたは「食べる」「写真を撮る」「友達にシェアする」など自由に決める（コールバック関数）
→ あなた自身があなたに対して(コールバック)のアクションを決める
function orderFood(menu, callback) {
console.log(`${menu} を注文しました。`);
setTimeout(() => {
console.log(`${menu} ができました！`);
callback(menu); // 料理ができた後に、コールバック関数を実行
}, 3000); // 3秒後に料理ができる
}
// 注文して、料理ができたら食べる
orderFood("ラーメン", (food) => {
console.log(`${food} を食べます！`);
});
✅ orderFood 関数は、料理の準備（非同期処理）が終わった後に コールバック関数を実行 します。
✅ callback(food) には、「料理を食べる」動作を入れています。
✅ callback を変えれば、「写真を撮る」や「友達にシェアする」動作に変更できます。
🎉 まとめ
🔹 コールバック関数は、他の関数の引数として渡される関数
🔹 非同期処理・イベント処理・タイマー処理・配列処理などで活躍
🔹 ネストしすぎると「コールバック地獄」になるので注意！
| 用途 | 例 |
|---|---|
| 非同期処理（API通信, データ取得） |
fetch を使ったデータ取得 |
| イベント処理（クリック, 入力） |
addEventListener を使ったクリックイベント |
| タイマー処理 |
setTimeout による遅延処理 |
| 配列処理 |
map, forEach でのデータ処理 |
| カスタマイズ可能な関数設計 | 計算の処理を変更可能にする |
実務では特に 非同期処理（API通信, イベント, タイマー） の場面で頻繁に使われる！🚀