【JavaScript入門】非同期処理とタイマーの仕組み｜イベントループをやさしく理解しよう

JavaScriptはシングルスレッドで動作する言語です。
つまり、同時に複数の処理を実行することはできず、1つずつ順番に処理していきます。

しかし、実際には「タイマー」「通信」「イベント処理」など、同時に動いているように見える仕組みがあります。
これを実現しているのが非同期処理とイベントループです。

この記事では、タイマーがどのように非同期処理として扱われているのかを、初心者向けにわかりやすく解説します。

JavaScriptはシングルスレッドで動く

JavaScriptは1つの処理しか同時に実行できません。
そのため、重い処理があると他の処理が待たされることになります。

しかし、タイマーやイベントは「別の仕組み」で管理されているため、同時に動いているように見えます。

例：重い処理があるとタイマーが遅れる

setTimeout(() => {
    console.log("タイマー実行");
}, 1000);

const start = Date.now();
while (Date.now() - start < 2000) {
    // 2秒間ブロックする重い処理
}

1秒後に実行されるはずのタイマーが、実際には2秒後に実行されます。

イベントループとは？

イベントループは、JavaScriptの非同期処理を管理する仕組みです。
タイマーやイベントのコールバックは、すぐに実行されるわけではなく、キューに登録されます。

そして、メインの処理が終わったタイミングで、キューから取り出されて実行されます。

イベントループの流れ

• ① setTimeout などでコールバックが登録される
• ② 指定時間が経過すると「キュー」に入る
• ③ JavaScriptのメイン処理が終わるのを待つ
• ④ 空いたタイミングでコールバックが実行される

この仕組みのため、setTimeout(0) でも「すぐ」には実行されません。

setTimeout(0) が遅れる理由

setTimeout(fn, 0) は「0秒後に実行」ではなく、
「今の処理が終わったら実行」という意味になります。

console.log("A");

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

console.log("C");

実行結果は次のようになります。

A
C
B

setTimeout はキューに入るため、メイン処理（A → C）が終わってから実行されるためです。

タイマーが正確に動かない理由

タイマーが遅れる主な原因は次のとおりです。

• JavaScriptがシングルスレッドである
• 重い処理がブロックしている
• イベントループのキューが詰まっている

正確なタイマーが必要な場合は、setTimeout を使った再帰処理が向いています。

まとめ

• JavaScriptはシングルスレッドで動作する
• タイマーはイベントループによって管理される
• setTimeout(0) でもすぐには実行されない
• 正確なタイマーには setTimeout 方式が向いている