イベントループの仕組み ― JavaScriptが「1人で何役もこなす」秘密

いい質問だね。JavaScriptのエンジンは確かに1本の糸（スレッド）しか持っていないんだけど、「イベントループ」という仕組みのおかげで、まるで同時に動いているように見えるんだよ。レストランで1人のウェイターが注文を受けて、料理ができたテーブルから順に配膳していくイメージだね。

大きく3つの登場人物がいるよ。まず「コールスタック」は今まさに実行中の処理を積み上げる場所。次に「コールバックキュー」はsetTimeoutやクリックイベントなど、あとで実行したい処理が並ぶ待ち行列。そして「マイクロタスクキュー」はPromiseのthenやasync/awaitの続きが入る優先キューだよ。イベントループはコールスタックが空になるたびに、まずマイクロタスクキューを全部処理して、そのあとコールバックキューから1つ取り出す、というサイクルを繰り返しているんだ。

Promise.resolve().then(fn)のほうが先だよ。setTimeoutのコールバックはコールバックキュー（マクロタスクキュー）に入るけど、Promiseの.thenはマイクロタスクキューに入る。イベントループは必ずマイクロタスクを先に全部消化するから、setTimeout(fn, 0)で「0ミリ秒後」と指定しても、Promiseの後回しになるんだ。

基本の考え方は同じだけど、Node.jsのほうがもう少し細かいフェーズに分かれているよ。Node.jsではlibuvというライブラリがイベントループを動かしていて、timers（setTimeout/setInterval）→ I/Oコールバック → idle/prepare → poll（新しいI/Oイベントの取得）→ check（setImmediate）→ closeコールバック、という6つのフェーズを順番に回っているんだ。ブラウザのほうは画面描画（レンダリング）のタイミングもループに組み込まれている点が大きな違いだね。

そこがポイントだね。JavaScript自体はシングルスレッドだけど、libuvは内部にスレッドプールを持っているんだ。ファイルの読み書きやDNS解決みたいな、どうしても時間がかかるブロッキング処理は裏側のスレッドプールに任せて、終わったらコールバックキューに結果を返す。だからJavaScriptのメインスレッドは止まらずに次の処理に進めるんだよ。

これはよくある誤解だね。async/awaitはあくまで「非同期処理を同期的な見た目で書ける構文糖」であって、並列実行を実現するものじゃないんだ。awaitするとその関数の実行は一時停止するけど、他のスレッドで動くわけじゃない。本当に複数のAPIを同時に呼びたいならPromise.allを使って複数のPromiseを同時に開始する必要があるよ。それでもCPUの計算処理を並列化するわけじゃなくて、I/O待ちを重ね合わせているだけなんだ。

あるよ。ベテランエンジニアでも引っかかる落とし穴が「マイクロタスクの飢餓（starvation）」だね。たとえばPromiseの.thenの中でまた新しいPromiseを解決して.thenを登録する、というのを繰り返すと、マイクロタスクキューが永遠に空にならない。イベントループはマイクロタスクを全部消化するまでコールバックキューに進めないから、setTimeoutや画面描画がいつまでも実行されず、ページがフリーズしてしまうんだ。

再帰的にマイクロタスクを生成するパターンを避けるのが基本だね。大量のデータを処理するなら、途中でsetTimeoutやrequestAnimationFrameを挟んでマクロタスクに逃がすテクニックがあるよ。Node.jsならsetImmediateでcheckフェーズに回すのも有効だね。イベントループの仕組みを理解していると、パフォーマンスチューニングやバグの原因特定が格段に楽になるから、ぜひ覚えておいてほしいポイントだよ。