Event Loopと非同期処理

JavaScriptは「シングルスレッド」の言語ですが、なぜブラウザ上で高パフォーマンスな非同期処理が可能なのでしょうか？その秘密は イベントループ (Event Loop) にあります。

JavaScriptの実行モデル

JavaScriptの実行環境（V8エンジンなど）は、主に以下の要素で動作します。

• Call Stack: コードが実行される場所
• Task Queue (Macrotask): setTimeout, setInterval などのコールバック
• Microtask Queue: Promise, queueMicrotask などの実行
• Event Loop: スタックが空になったら、キューからタスクをスタックへ移動させる仕組み

優先順位の理解

Microtask Queue は Macrotask Queue よりも 常に優先 されます。

console.log('Start');

setTimeout(() => {
  console.log('Timeout (Macrotask)');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise (Microtask)');
});

console.log('End');

この実行結果は以下のようになります：

1. Start
2. End
3. Promise (Microtask)
4. Timeout (Macrotask)

非同期処理を極めるためのヒント

• ブロッキングを避ける: 重い処理はスタックを占有し、ブラウザの描画を停止させます。
• Promiseの並列実行: Promise.all を活用して効率的にデータを取得しましょう。

イベントループを理解することで、予期せぬ実行順序やパフォーマンスの低下を防ぐことができるようになります。