コールバック
初級読み方：コールバック｜英語：Callback
別の関数に引数として渡される関数で、addEventListener の第2引数などだよ。
やさしい説明
コールバックとは、他の関数に渡して「後で呼び出してもらう」関数です。「電話の折り返し（コールバック）」のイメージです。
「ボタンがクリックされたら、この関数を実行してね」のように、イベントが起きたときや処理が完了したときに呼ばれる関数を渡します。
addEventListener、setTimeout、配列メソッド（forEach・map等）はすべてコールバックを受け取ります。
具体例・使い方
// クリック時に実行されるコールバック
btn.addEventListener("click", () => {
console.log("クリックされた！");
});
// 1秒後に実行されるコールバック
setTimeout(() => {
console.log("1秒経った！");
}, 1000);
// 配列の各要素に対して実行
[1, 2, 3].forEach(num => console.log(num));
// 関数名で渡すこともできる
function handleClick() {
console.log("クリック処理");
}
btn.addEventListener("click", handleClick); // ()なしで渡すコールバックの仕組み
// コールバックを受け取る関数を自分で作る例
function greetLater(name, callback) {
setTimeout(() => {
callback(name); // 後で呼び出す
}, 1000);
}
function sayHello(name) {
console.log("こんにちは、" + name + "さん");
}
// sayHello をコールバックとして渡す
greetLater("太郎", sayHello); // 1秒後: "こんにちは、太郎さん"JavaScriptでは関数も「値」として扱えます（第一級関数）。だから関数を引数に渡したり、変数に代入したりできます。これがコールバックの仕組みの核心です。
非同期処理とコールバック
// API通信の完了後に実行するコールバック（古い書き方）
fetch("https://api.example.com/users")
.then(response => response.json()) // 成功時のコールバック
.then(data => console.log(data))
.catch(error => console.error(error)); // エラー時のコールバック
// 現代はasync/awaitで書くことが多い
async function loadUsers() {
const response = await fetch("https://api.example.com/users");
const data = await response.json();
console.log(data);
}いつ使う？
- ボタンクリック・キー入力などのイベント処理
- setTimeout / setInterval のタイマー処理
- 配列メソッド（map・filter・forEach・reduce）
- APIリクエスト完了後の処理（.then()）
- アニメーション完了後に次の処理を実行するとき
間違いやすいポイント
❌ コールバック関数に () をつけて渡してしまう
() をつけると「関数を渡す」のではなく「関数を即実行してその結果を渡す」になります。コールバックとして渡すときは () なしで関数名だけ書きます。
// ❌ ()をつけると即実行される（1秒待たずに今すぐ実行）
setTimeout(doSomething(), 1000);
// ✅ 関数名だけ渡す（1秒後に実行される）
setTimeout(doSomething, 1000);❌ コールバック地獄（ネストが深くなる）
コールバックの中にコールバックを重ねると読みにくくなります。現代では Promise や async/await を使うとすっきり書けます。
よくある疑問
Q: コールバック地獄とは？
A: コールバックが何重にもネストされて読みにくくなる状態です。Promiseやasync/awaitで解決できます。
Q: コールバックの例は？
A: setTimeout(fn, 1000)、arr.forEach(fn)、btn.addEventListener('click', fn) など。第2引数や最後の引数に関数を渡すパターンが多いです。
Q: コールバックとPromiseの違いは？
A: コールバックは関数を渡す方式、Promiseは.then()でチェーンする方式です。Promiseの方がエラー処理やチェーンが書きやすいです。
関連用語
📖 関連レッスン
レッスンを見る →