イベントループとは？
イベントループは、JavaScriptランタイム（ブラウザやNode.jsなど）で非同期処理を管理するための中心的な仕組みです。
JavaScriptはシングルスレッドの言語であり、一度に一つの作業しか実行できません。しかし、UIの応答性やAPI通信などの非同期処理をスムーズに行うために、イベントループの仕組みが導入されています。
コールスタックとイベントループ
1. コールスタック (Call Stack)
- JavaScriptでは、現在実行中の関数がスタック(LIFO構造) で管理されます。
- 関数が呼び出されるとスタックに積まれ、処理が終わると取り出されます。
function foo() {
console.log("Hello");
}
foo();
-
foo()がスタックに積まれる -
console.log("Hello")が実行される -
foo()がスタックから取り除かれる
2. Web API（ブラウザ API）
-
setTimeoutやaddEventListener,fetchなどは JavaScriptのコア機能ではなく、ブラウザが提供する機能です。 - 例えば
setTimeoutを呼び出すと、その処理はWeb API領域に渡されて実行されます。
console.log("Start");
setTimeout(() => {
console.log("Callback");
}, 1000);
console.log("End");
出力結果：
Start
End
Callback
なぜ Callback は最後に出力されるのでしょうか？
イベントループの動作
- すべての同期コードはまずコールスタック上で実行されます。
-
setTimeoutのような非同期関数はWeb APIに渡されます。 - タイマーが終了すると、コールバック関数は**コールバックキュー（タスクキュー）**に移されます。
- イベントループはコールスタックが空かどうかを確認し、空であればキューからコールバックを取り出して実行します。
コード例の再確認
console.log("1");
setTimeout(() => {
console.log("2");
}, 0);
console.log("3");
出力結果：
1
3
2
-
setTimeout(..., 0)はすぐに実行されるわけではありません。 - まず Web API に送られ、タイマー終了後にコールバックキューに入ります。
- コールスタックが空になってからイベントループによって実行されます。
重要なポイントまとめ
- JavaScriptはシングルスレッドで動作する。
- イベントループはコールスタックが空になったタイミングでのみ、コールバックキューから処理を取り出す。
-
setTimeout(..., 0)は0ミリ秒後に実行と指定されても、コールスタックが空くまで実行されない。