JS

コールバック

初級

読み方:コールバック|英語:Callback

別の関数に引数として渡される関数で、addEventListener の第2引数などだよ。いつ使う? 「この処理が終わったら次にこれをやって」という順序制御や、イベント発生時の処理を指定するときに使うよ。間違いやすいポイント: コールバック関数を渡すとき、fn() と書くとその場で実行されてしまうよ。fn と関数名だけ書いて「渡す」ようにしよう。

やさしい説明

コールバックとは、他の関数に渡して「後で呼び出してもらう」関数です。「電話の折り返し(コールバック)」のイメージです。

「ボタンがクリックされたら、この関数を実行してね」のように、イベントが起きたときや処理が完了したときに呼ばれる関数を渡します。

addEventListener、setTimeout、配列メソッド(forEach, map等)はすべてコールバックを受け取ります。

具体例・使い方

// クリック時に実行されるコールバック
btn.addEventListener("click", () => {
  console.log("クリックされた!");
});

// 1秒後に実行されるコールバック
setTimeout(() => {
  console.log("1秒経った!");
}, 1000);

// 配列の各要素に対して実行
[1, 2, 3].forEach(num => console.log(num));

いつ使う?

イベント処理、タイマー、配列操作、非同期処理(API通信の完了後に実行する処理)など、「何かが起きた後に実行したい処理」を書くときに使います。

間違いやすいポイント

❌ コールバック関数に()をつけて渡してしまう

// ❌ ()をつけると即実行される
setTimeout(doSomething(), 1000);

// ✅ 関数名だけ渡す
setTimeout(doSomething, 1000);

よくある疑問

Q: コールバック地獄とは?

A: コールバックが何重にもネストされて読みにくくなる状態です。Promiseやasync/awaitで解決できます。

Q: コールバックの例は?

A: setTimeout(fn, 1000)、arr.forEach(fn)、btn.addEventListener('click', fn) など。第2引数や最後の引数に関数を渡すパターンが多いです。

Q: コールバックとPromiseの違いは?

A: コールバックは関数を渡す方式、Promiseは.then()でチェーンする方式です。Promiseの方がエラー処理やチェーンが書きやすいです。

関連用語

📖 関連レッスン

レッスンを見る →

関連ブログ記事

⚠️ 関連するエラー

❓ 関連するQ&A