JavaScript のイベントループは非同期処理をどのように扱いますか？

Question

Accepted Answer

JavaScript は**シングルスレッド**で動作するため、一度に一つのことしかできません。**イベントループ**は、ブロックすることなく非同期処理を扱えるようにする仕組みです。コールスタックを実行し、スタックが空になると、キューからコールバックを取り出します。

優先度の異なる 2 つのキューがあります。
- **マイクロタスク**: Promise のコールバック（`.then`）、`queueMicrotask`。各タスクの後、レンダリングの前に**完全に**処理されます。
- **マクロタスク**: `setTimeout`、I/O、UI イベント。ループの 1 反復につき 1 つ処理されます。

```js
console.log("1");                         // sync
setTimeout(() => console.log("2"), 0);    // macrotask
Promise.resolve().then(() => console.log("3")); // microtask
console.log("4");                         // sync
// Output: 1, 4, 3, 2
```

## なぜこの順序になるのか

1. 同期コードが最初に実行される: `1`、`4`。
2. スタックが空になる → **すべてのマイクロタスク**を処理する: `3`。
3. 次に**マクロタスクを 1 つ**取り出す: `2`。

だからこそ、両方とも「非同期」であっても、`Promise.then` は常に `setTimeout(…, 0)` よりも**先に**実行されます。マイクロタスクが優先されるためです。

## 実務上の帰結

```js
// ❌ blocks the single thread — UI freezes for 5 seconds
while (Date.now() - start < 5000) {}
```

長い同期処理はすべて（レンダリング、クリック）をブロックします。重い CPU 処理は**Web Worker**（本物の別スレッド）にオフロードしましょう。

## なぜ重要なのか

ループを理解すると、非同期の順序、なぜ promise がタイマーより先に解決されるのか、そしてなぜメインスレッドを決してブロックしてはいけないのかがわかります。これはすべての非同期 JavaScript の中核となるメンタルモデルです。