JavaScriptのEvent Loopが非同期処理をどのように可能にするかを解明

作成日 2024.12.20
javascript
javascript

JavaScriptはシングルスレッドで動作する言語ですが、非同期処理を巧みに扱うことができます。その鍵となる仕組みが「Event Loop」です。本記事では、Event Loopがどのように機能し、JavaScriptが非同期タスクを効率的に処理するのかを深掘りします。

1. Event Loopとは何か
2. シングルスレッドの限界を超える
3. Event Loopの基本構造
4. Call Stackの役割
5. Task QueueとMicrotask Queue
6. 非同期処理の流れ
7. 非同期タスクの優先順位
8. Event Loopのデモ
9. Web APIとの連携
10. setTimeoutとsetIntervalの挙動
11. PromiseとAsync/Await
12. Promiseの動作
13. Async/Awaitの動作
14. Node.jsにおけるEvent Loop
15. Event Loopのベストプラクティス
16. まとめ

Event Loopとは何か

Event LoopはJavaScriptのランタイム環境における仕組みで、キューに入った非同期タスクを順番に処理します。これにより、長時間の処理が他のタスクを妨げることなく実行されます。

シングルスレッドの限界を超える

JavaScriptはシングルスレッドで動作しますが、Web APIや非同期I/O処理を活用することで、同時に複数のタスクを効率的に管理できます。

Event Loopの基本構造

Event Loopは以下のステップで動作します。

Call Stackで実行中のタスクを確認する
Call Stackが空の場合、キューから最初のタスクを取り出して実行する
このプロセスを繰り返す

Call Stackの役割

Call Stackは現在実行中の関数を管理するデータ構造です。関数が呼び出されるとスタックに追加され、終了するとスタックから取り除かれます。

Task QueueとMicrotask Queue

JavaScriptにはタスクを管理するための2つのキューがあります。

Task Queue: setTimeoutやsetIntervalなどの非同期タスクがここに入ります。
Microtask Queue: PromiseやMutationObserverなど、優先度の高い非同期タスクがここに入ります。

非同期処理の流れ

console.log('Start');

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

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

console.log('End');
// 出力:
// Start
// End
// Promise
// Timeout

非同期タスクの優先順位

Microtask QueueのタスクはTask Queueよりも優先して処理されます。そのため、Promiseのthenやcatchは、setTimeoutよりも先に実行されます。

Event Loopのデモ

console.log('Start');

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

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

console.log('End');
// 出力:
// Start
// End
// Promise 1
// Promise 2
// setTimeout

Web APIとの連携

setTimeoutやsetInterval、fetchといったAPIは、JavaScriptランタイム環境（例:ブラウザやNode.js）のWeb APIによって提供されています。これらのAPIは非同期タスクを処理するために重要な役割を果たします。

setTimeoutとsetIntervalの挙動

setTimeout(() => {
  console.log('setTimeout');
}, 1000);

setInterval(() => {
  console.log('setInterval');
}, 1000);

PromiseとAsync/Await

PromiseやAsync/Awaitは、非同期処理の記述を簡潔にし、エラーハンドリングを改善します。これらもEvent Loopの管理下で動作します。

Promiseの動作

console.log('Start');

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

console.log('End');
// 出力:
// Start
// End
// Promise 1
// Promise 2

Async/Awaitの動作

async function fetchData() {
  console.log('Fetching data...');
  const result = await new Promise(resolve => {
    setTimeout(() => {
      resolve('Data loaded');
    }, 1000);
  });
  console.log(result);
}

console.log('Start');
fetchData();
console.log('End');
// 出力:
// Start
// Fetching data...
// End
// Data loaded