イベントループ — 1本のスレッドで待たずに捌く

What — 1本のスレッドが何を順番に処理しているか

JavaScript の実行環境は、原則としてスレッドが1本です。その1本が、こういう順番で仕事を回しています。

マイクロタスクとマクロタスクの違い

Promise.then / catch / finally
queueMicrotask
async 関数の await 以降
MutationObserver

順序を実際に追うと、こうなります。

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');

// 出力: 1 → 4 → 3 → 2

同期コード（1, 4）が最後まで走り、スタックが空になってからマイクロタスク（3）、そしてマクロタスク（2）。setTimeout(…, 0) が最後に来るのは、優先度が低いからではなく、取り出される順番がそこだからです。

Why — なぜ1スレッドという設計を選んだのか

ブラウザの JavaScript が単一スレッドなのは、DOM を複数スレッドから触らせないためです。

複数のスレッドが同時に DOM を書き換えられるとしたら、ロックが必要になります。「この要素を触る間、他のスレッドは待て」という排他制御を、Web ページを書くすべての人が正しく扱わなければなりません。デッドロックも競合状態も日常的に起きるでしょう。

単一スレッドなら、この問題が定義上発生しません。ある処理が動いている間、他の処理は絶対に割り込まない。だから element.textContent を読んで書き換えるまでの間に、誰かが横から変えることはありえない。

この単純さと引き換えに受け入れたのが、「1つの重い処理が全部を止める」という性質です。

非同期は「並列」ではない

ここが最も誤解されるところです。fetch が非同期なのは、別スレッドで JavaScript が動いているからではありません。

ネットワーク通信そのものはブラウザ（C++ で書かれた部分）が担当し、JavaScript のスレッドは関与しません。通信が終わると、ブラウザが「完了しました」というタスクをキューに積む。JavaScript のスレッドは、手が空いたときにそれを取り出して then を実行する。

つまり JavaScript は待っていないのではなく、待つ仕事を他人に渡しているだけです。渡せる相手がいる仕事（ネットワーク・タイマー・ファイル読み込み）は非同期にできますが、計算そのものは渡す相手がいないので非同期にできません。

演習 — まず自分で判断する

解説を読む前に、まず自分で判断してみてください。ここで一度詰まっておくと、 次の節の判断軸が「なるほど」ではなく「そう来たか」に変わります。