マクロタスクとタスクキュー
タイマーや I/O がどのようにスケジュールされるかを理解します。
「マクロタスクとタスクキュー」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
マクロタスクとは
マクロタスク（単にタスクとも呼ばれます）は、現在の同期コードが完了した後で実行されるようスケジュールされた作業単位です。setTimeoutのコールバックが典型的な例です。
マクロタスクは、コールスタックが空になるまでタスクキューで待機します。
setTimeoutは処理を遅延させる
setTimeoutは、後で実行するコールバックを登録します。遅延時間が0であっても、現在のすべての同期コードが終わった後に実行されます。
console.log('first');
setTimeout(() => console.log('third (timeout)'), 0);
console.log('second');タスクキュー
タイマーが発火すると、そのコールバックがタスクキューに入ります。イベントループは、コールスタックが空になったときだけこのキューから1つのタスクを取り出し、完了するまで実行してから、再び確認します。
console.log('sync start');
setTimeout(() => console.log('task 1'), 0);
setTimeout(() => console.log('task 2'), 0);
console.log('sync end');タスクはキューに入った順に実行される
同じ遅延時間のタスクは、スケジュールされた順に実行されます。タスクキューはFIFO、つまり先入れ先出しです。
setTimeout(() => console.log('A'), 0);
setTimeout(() => console.log('B'), 0);
setTimeout(() => console.log('C'), 0);
console.log('sync');遅延時間は正確な時間ではなく最小時間
指定した遅延時間は、コールバックが実行可能になるまでの最小時間です。実際の実行は、スタックが空になり、それより前のタスクが完了してから行われるため、さらに後になる場合があります。
setTimeout(() => console.log('100ms'), 100);
setTimeout(() => console.log('0ms'), 0);
console.log('synchronous runs first');遅延時間による並べ替え
遅延時間が異なると順序も変わります。短い遅延のタスクほど早く実行可能になるため、通常はスケジュールされた順序に関係なく、長い遅延のタスクより先に実行されます。
setTimeout(() => console.log('50'), 50);
setTimeout(() => console.log('10'), 10);
setTimeout(() => console.log('30'), 30);
console.log('start');ループ1回につき1つのタスク
イベントループは1回のターンにつき、正確に1つのマクロタスクを実行し、その後、次のターンまでにほかの処理を行います。これにより、タスクの間もシステムの応答性が保たれます。
console.log('1');
setTimeout(() => {
console.log('2');
setTimeout(() => console.log('4'), 0);
}, 0);
setTimeout(() => console.log('3'), 0);ネストしたタイマーは後でキューに入る
タスク内でスケジュールされたタイマーは、すでに待機しているタスクの後ろにキューへ追加されるため、後のループターンで実行されます。
setTimeout(() => {
console.log('outer');
setTimeout(() => console.log('inner nested'), 0);
}, 0);
setTimeout(() => console.log('sibling'), 0);setIntervalもマクロタスク
setIntervalは、繰り返し実行されるマクロタスクをスケジュールします。ここでは数回だけ反復して、clearIntervalで停止し、出力が増えすぎないようにします。
let count = 0;
const id = setInterval(() => {
count++;
console.log('tick ' + count);
if (count === 3) clearInterval(id);
}, 10);
console.log('interval scheduled');同期処理が常に優先される
遅延時間がどれほど短くても、すべてのマクロタスクは現在の実行中にある同期コードの後で待機します。まずスタックが空にならなければなりません。
setTimeout(() => console.log('macrotask'), 0);
for (let i = 1; i <= 3; i++) console.log('sync ' + i);
console.log('done sync');マクロタスクが重要な理由
マクロタスクを使うと、処理をブロックせずに後回しにできます。負荷の高い処理を時間指定の小さな単位に分割すると、アプリの応答性を保てます。ただし、マクロタスクが最優先というわけではありません。次に学ぶマイクロタスク（Promise）は、次のマクロタスクより先に実行されます。
console.log('schedule');
setTimeout(() => console.log('runs after sync'), 0);
console.log('still sync');理解度チェック
setTimeout(cb, 0)のコールバックはいつ実行されますか。
まとめ：マクロタスク
遅延された処理がスケジュールされる仕組みを学びました。
- マクロタスク（setTimeout、setInterval）はタスクキューで待機します。
- キューはFIFOであり、イベントループは1ターンにつき1つのタスクを実行します。
- 遅延時間は最小時間であり、同期コードが常に先に実行されます。
- マイクロタスクの優先度はより高く、次に詳しく学びます。
よくある質問
「マクロタスクとタスクキュー」レッスンは無料ですか？
はい。「マクロタスクとタスクキュー」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「マクロタスクとタスクキュー」で何を学びますか？
タイマーや I/O がどのようにスケジュールされるかを理解します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「マクロタスクとタスクキュー」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- コールスタック
- マクロタスクとタスクキュー
- マイクロタスクと Promise
- queueMicrotask と実行順序