0Pricing
JavaScript Academy · レッスン

イベントループとタスク・マイクロタスクの基礎

イベントループがまず同期コード、次にマイクロタスク、その後にタスクを実行する仕組みを学びます。setTimeout、Promise.then、queueMicrotaskで練習します。

「イベントループとタスク・マイクロタスクの基礎」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。

イベントループの概要

目標：基本的な順序を学びます。syncコード → microtasks（Promise/queueMicrotask） → tasks（setTimeout）の順です。

  • 最初にSync
  • 次にMicrotasks
  • 最後にTasks
イベントループとタスク・マイクロタスクの基礎 — イラスト1

Syncが先

同期処理の文は、キューに入ったコールバックより先に上から下へ実行されます。

// Sync code runs immediately
console.log("A: sync start");

console.log("B: sync middle");

console.log("C: sync end");
イベントループとタスク・マイクロタスクの基礎 — イラスト2

タスクキューの基本

setTimeoutはキューにtaskを追加します。現在のtickが完了した後に実行されます。

// Tasks (macrotasks) via setTimeout
console.log("1: start");

setTimeout(function () {
  console.log("3: timeout task");
}, 0);

console.log("2: after scheduling");
イベントループとタスク・マイクロタスクの基礎 — イラスト3

マイクロタスクの基本

Promise.thenはmicrotaskを追加します。Microtasksは同期コードの直後、Tasksより前に実行されます。

// Microtasks via Promise.then
console.log("X: sync");

Promise.resolve().then(function () {
  console.log("Y: microtask");
});

console.log("Z: after scheduling microtask");
イベントループとタスク・マイクロタスクの基礎 — イラスト4

実行順序の例

期待される順序：Start → End → Microtask → Task。

// Order demo: microtask runs before task
console.log("Start");

setTimeout(function () {
  console.log("Task: timeout");
}, 0);

Promise.resolve().then(function () {
  console.log("Microtask: promise");
});

console.log("End");
イベントループとタスク・マイクロタスクの基礎 — イラスト5

queueMicrotaskの例

queueMicrotaskもマイクロタスクをスケジュールします。アプリをスムーズに動かすため、コールバックは小さく保ちます。

// queueMicrotask is another way to schedule a microtask
console.log("S");

queueMicrotask(function () {
  console.log("M: microtask");
});

console.log("E");

// Tip: do not overuse microtasks; keep callbacks tiny
イベントループとタスク・マイクロタスクの基礎 — イラスト6

マイクロタスクとタスクのクイズ

簡単な確認：実行順序のルールです。

イベントループとタスク・マイクロタスクの基礎 — イラスト7

振り返り

振り返り：ループはまずsyncコードを実行し、次にmicrotaskキューを空にし、その後tasksを実行します。TasksにはsetTimeout、MicrotasksにはPromise.then/queueMicrotaskを使います。

イベントループとタスク・マイクロタスクの基礎 — イラスト8

よくある質問

「イベントループとタスク・マイクロタスクの基礎」レッスンは無料ですか？

はい。「イベントループとタスク・マイクロタスクの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。

「イベントループとタスク・マイクロタスクの基礎」で何を学びますか？

イベントループがまず同期コード、次にマイクロタスク、その後にタスクを実行する仕組みを学びます。setTimeout、Promise.then、queueMicrotaskで練習します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。

「イベントループとタスク・マイクロタスクの基礎」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. イベントループとタスク・マイクロタスクの基礎
  2. Promise — 状態、チェーン、エラー処理
  3. Promise.all / any / race / allSettled — 適切なツールを選ぶ
← JavaScript Academyに戻る