JavaScript イベントループ：ノンブロッキング非同期実行
JavaScript のイベントループは、コールスタックが空のときにキューからコールバックを実行することで非同期操作を管理し、スレッドのブロッキングを防ぎます。
Loop. Control structure repeating code until condition is met. Generated ELI5 content
graph LR
Center["JavaScript イベントループ：ノンブロッキング非同期実行"]:::main
Pre_variable["variable"]:::pre --> Center
click Pre_variable "/terms/variable"
Rel_iteration["iteration"]:::related -.-> Center
click Rel_iteration "/terms/iteration"
Rel_recursion["recursion"]:::related -.-> Center
click Rel_recursion "/terms/recursion"
Rel_closed_loop_life_support["closed-loop-life-support"]:::related -.-> Center
click Rel_closed_loop_life_support "/terms/closed-loop-life-support"
classDef main fill:#7c3aed,stroke:#8b5cf6,stroke-width:2px,color:white,font-weight:bold,rx:5,ry:5;
classDef pre fill:#0f172a,stroke:#3b82f6,color:#94a3b8,rx:5,ry:5;
classDef child fill:#0f172a,stroke:#10b981,color:#94a3b8,rx:5,ry:5;
classDef related fill:#0f172a,stroke:#8b5cf6,stroke-dasharray: 5 5,color:#94a3b8,rx:5,ry:5;
linkStyle default stroke:#4b5563,stroke-width:2px;
🧒 5歳でもわかるように説明
[JavaScript](/ja/terms/javascript) を、一度に 1 つのことしかできないシェフだと考えてください。もし彼がケーキを焼く必要がある（長いタスク）場合、ただ立って待っているだけではありません。彼はケーキをオーブンに入れ、タイマーをセットし、すぐにサラダ（別のタスク）の準備を始めます。オーブンのタイマーが鳴ったら、シェフはサラダを終え、ケーキを取り出し、それから他のことをします。イベントループは、シェフがこれらの「待機」タスクを管理するシステムのようなもので、他の作業を止めずに、準備ができたときに処理されることを保証します。
🤓 Expert Deep Dive
JavaScript のイベントループは、コード、タスク、イベントの実行をオーケストレーションする並行処理モデルです。コールスタックとタスクキューを継続的に監視します。同期コードはコールスタック上で直接実行されます。非同期操作（例：setTimeout、Promises、I/O）は、ホスト環境の API に委譲され、その実行が管理されます。非同期操作が完了すると、そのコールバック（または Promise の解決ハンドラ）は、対応するキューに入れられます。タスクキュー（setTimeout、DOM イベントなどのマクロタスク用）またはマイクロタスクキュー（Promises、queueMicrotask などのマイクロタスク用）です。イベントループの主な機能は、コールスタックが空になったときに、タスクをキューから取り出して実行することです。マイクロタスクは通常、マクロタスクの前に処理されます。具体的には、現在のマクロタスクが終了した後、次のマクロタスクが開始される前に、イベントループは利用可能なすべてのマイクロタスクを実行します。これにより、遅延されたコールバックよりも即時のコールバック（Promise の解決など）が優先され、さまざまな JavaScript 環境での応答性と非同期操作の効率的な処理が保証されます。