Zenn
👻

【初心者向け】コールバック関数・イベントループ・イベントキュー完全理解

に公開
JavaScript
frontend
非同期処理
プログラミング基礎
tech

JavaScriptでよく出てくる「コールバック関数」「イベントループ」「イベントキュー」。
単語だけは聞いたことあるけど、ちゃんと理解してる人は意外と少ないと思います。

この記事では、関数の挙動を擬人化して例えることで、曖昧な理解から脱出することを目的とします。

🥇 コールバック関数とは？

他の関数に引数として渡され、その中であとから実行される関数のこと。

例：擬人化で考える

まず普通の関数 hello を宣言します。

function hello() {
  console.log("やぁ！");
}

これはただの関数です。
ところが、別の関数 bye が hello を引数に取るとこうなります：

function bye(callback) {
  console.log("さようなら〜");
  callback(); // ← 引数で受け取った関数を呼び出す
}

そして実行：

bye(hello);

すると…

さようなら〜
やぁ！

このとき、hello は 呼ばれた関数の中で実行されている。
→ こういう関数を「コールバック関数」と呼ぶ。

👂イベントリスナーとコールバック関数

よくあるのが addEventListener() で使う形。

document.querySelector("button").addEventListener("click", () => {
  console.log("クリックされた！");
});
  • 第一引数 "click" → 監視するイベントの種類
  • 第二引数 () => { ... } → コールバック関数（イベントが起きたら呼び出される）

この関数は、登録時点では実行されてない。
あくまで「クリックされたときに実行してね」という予約 にすぎない。

🤔 じゃあ、なぜクリックされたあとに実行されるの？

ここで出てくるのが以下の2つ：

  • イベントキュー

  • イベントループ

📥 イベントキューとは？

「あとで実行してほしい関数」を一時的にためておく待機場所。
例：

setTimeout(() => {
  console.log("B");
}, 0);

console.log("A");

実行結果は:

A
B

setTimeout(..., 0)なのに、Bが後から出力されるのはなぜ？

🔁 イベントループとは？

JavaScriptが「今やるべき処理が終わったら、キューに入ってるやつ実行しよう」と判断してくれるしくみ。

🔄 処理の流れを図にするとこう：

[ コールスタック ]：今すぐ実行中の処理  
[ イベントキュー ]：後で実行する処理  
[ イベントループ ]：スタックが空になったら、キューから処理を取り出す役割

🎯 実際の流れ（簡略版）

  1. setTimeout() で関数を登録

  2. 指定時間後、関数が イベントキュー に追加される

  3. メインの処理（コールスタック）が終わる

  4. イベントループがキューの関数をスタックに移して実行

⚠️ よくある間違い

addEventListener("click", console.log("クリック"));

これは、即実行される。

→ 間違ってる理由は、第二引数が「関数の結果（undefined）」になってるから。

正しくはこう：

addEventListener("click", () => {
  console.log("クリック");
});

このように、「関数をそのまま渡す」ことが重要です。
実行するのは、ブラウザがイベント発生時に自動でやってくれる。
このとき渡される関数が、コールバック関数ということになります。

🧠 まとめ

  • コールバック関数：引数として渡され、あとで実行される関数

  • イベントキュー：あとで実行される処理がたまる場所

  • イベントループ：キューに入った処理をタイミングを見て実行する監視係

  • JavaScriptはシングルスレッドなので、これらの仕組みで効率よく非同期処理をしている

Discussion