JavaScript Academy · レッスン

queueMicrotask と実行順序

Q: 「queueMicrotask と実行順序」で何を学びますか？

実行順序を正確に制御します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

実行順序を正確に制御します。

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

queueMicrotask を使ってみる

queueMicrotask は、Promise を作成せずにマイクロタスクをスケジュールする直接的な方法です。コールバックは現在の同期コードの後、どのマクロタスクよりも前に実行されます。

作業を次のマイクロタスクチェックポイントまで遅延させるには、最もすっきりした方法です。

基本的な使い方

queueMicrotask に関数を渡します。同期コードが終了した後に実行されます。

console.log('start');
queueMicrotask(() => console.log('microtask'));
console.log('end');

Promise と同じ優先度

queueMicrotask のコールバックと Promise の .then は、同じマイクロタスクキューを共有します。スケジュールされた順序で実行されます。

queueMicrotask(() => console.log('qmt 1'));
Promise.resolve().then(() => console.log('promise'));
queueMicrotask(() => console.log('qmt 2'));
console.log('sync');

setTimeout より先に実行される

すべてのマイクロタスクと同様に、queueMicrotask のコールバックは、先にスケジュールされたものであっても、どの setTimeout マクロタスクより先に実行されます。

setTimeout(() => console.log('timeout (macro)'), 0);
queueMicrotask(() => console.log('microtask (micro)'));
console.log('sync');

処理中の実行順序

マイクロタスクは FIFO 順で実行されます。キューに最初に追加されたものが、キューの処理時に最初に実行されます。

queueMicrotask(() => console.log('1'));
queueMicrotask(() => console.log('2'));
queueMicrotask(() => console.log('3'));
console.log('sync done');

マイクロタスクの入れ子

マイクロタスクは別のマイクロタスクをキューに追加できます。新しいマイクロタスクは、現在キューにあるマイクロタスクの後、どのマクロタスクよりも前に、同じ処理中に実行されます。

queueMicrotask(() => {
  console.log('A');
  queueMicrotask(() => console.log('C (nested)'));
});
queueMicrotask(() => console.log('B'));
setTimeout(() => console.log('D (macro)'), 0);
console.log('sync');

実行順序の完全な例

同期コード、マイクロタスク、マクロタスクを組み合わせます。ルールを追ってみましょう。最初に同期処理、次に順番どおりのマイクロタスク、最後にタイマーです。

console.log('1 sync');
setTimeout(() => console.log('5 macro'), 0);
queueMicrotask(() => console.log('3 micro'));
Promise.resolve().then(() => console.log('4 micro'));
console.log('2 sync');

async/await との交互実行

await の待機後の処理もマイクロタスクです。そのため、スケジュールされた順序で queueMicrotask と交互に実行されます。

async function task() {
  console.log('a');
  await null;
  console.log('d (after await)');
}
queueMicrotask(() => console.log('c (queueMicrotask)'));
task();
console.log('b');

queueMicrotask を使う理由

現在のコールスタックの後、ブラウザーが描画したりタイマーが発火したりする前に、少量の処理を遅延させる必要がある場合に使用します。使い捨ての Promise を作成する際のオーバーヘッドや、解決処理のセマンティクスを避けられます。

let ready = false;
queueMicrotask(() => {
  ready = true;
  console.log('ready is now', ready);
});
console.log('ready is', ready);

無限のマイクロタスクループを避ける

マイクロタスクはマクロタスクより先に完全に処理されるため、常に自分自身を再キューイングするコールバックは、タイマーやレンダリングを永遠にブロックします。必ず停止条件を設けてください。

let n = 0;
function step() {
  if (n++ < 3) {
    console.log('step ' + n);
    queueMicrotask(step);
  }
}
setTimeout(() => console.log('macro runs after all micros'), 0);
step();

完全なメンタルモデル

イベントループの各ターンでは、マクロタスク（または初期スクリプト）を実行し、次にすべてのマイクロタスクを処理し、その後にレンダリングして、これを繰り返します。queueMicrotask を使うと、この処理フェーズに正確に割り込めます。

console.log('script start');
setTimeout(() => console.log('setTimeout'), 0);
queueMicrotask(() => console.log('queueMicrotask'));
Promise.resolve().then(() => console.log('promise then'));
console.log('script end');

クイックチェック

queueMicrotask のコールバックは、setTimeout(fn, 0) と比べてどのタイミングで実行されますか。

まとめ: queueMicrotask と実行順序

細かなスケジューリングを習得しました。

queueMicrotask は Promise を使わずにマイクロタスクをスケジュールします。
Promise のコールバックと FIFO 順のマイクロタスクキューを共有します。
すべてのマイクロタスクは、どのマクロタスクやレンダリングよりも先に処理されます。
ループのモデルは、マクロタスク、マイクロタスクの処理、レンダリング、繰り返しです。

よくある質問

「queueMicrotask と実行順序」レッスンは無料ですか？

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

「queueMicrotask と実行順序」で何を学びますか？

実行順序を正確に制御します。ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「queueMicrotask と実行順序」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← JavaScript Academyに戻る