JavaScript入門：queueMicrotaskの基本と使いどころ

はじめに

queueMicrotask は、同期コードを非同期的に実行するために使える比較的新しいブラウザAPIです。

queueMicrotask(() => {
    console.log('queueMicrotaskによって非同期に実行されました');
});

これは、従来 setTimeout を使って行っていた処理とよく似ています。

setTimeout(() => {
    console.log('setTimeoutによって非同期に実行されました');
}, 0);

では、すでに setTimeout があるのに、なぜ queueMicrotask が必要なのでしょうか？

queueMicrotask は関数（タスク）をキューに追加します。そして、現在のタスクが完了し、実行コンテキストの制御がブラウザのイベントループへ戻る前に、待機中の各関数が順番に（FIFO方式で）実行されます。

つまり、queueMicrotask のタスクは、現在のコールスタックが空になった直後、イベントループに制御が渡される前に実行されます。

一方 setTimeout の場合、各タスクは制御がイベントループに渡された後、イベントキューから実行されます。

それでは、setTimeout を先に呼び出してから queueMicrotask を呼び出した場合、どちらが先に実行されるでしょうか？以下のコードを実行して、実際に確認してみてください。

setTimeout(() => {
    console.log('setTimeoutによって非同期に実行されました');
}, 0);

queueMicrotask(() => {
    console.log('queueMicrotaskによって非同期に実行されました');
});

この結果、microtaskとして登録された queueMicrotask のコールバックが先に出力されます。なお、Node.js環境では同じ役割を「process.nextTick」が担っています。

queueMicrotaskを使うべき場面

queueMicrotask を使う明確なルールはありませんが、「現在の実行を妨げずにコードを実行したい」という場面で上手く活用できます。

例えば、値のリストを管理する配列があり、値を挿入するたびに配列をソートすることで検索を高速化するケースを考えてみましょう。

var arr = [];

function add(value) {
  arr.push(value);
  arr.sort();
}

しかし、要素の検索はユーザーが検索ボックスを操作したときに行われます。イベントハンドラは制御がイベントループへ移った後に呼ばれるため、挿入のたびに行われるソート処理が、他の重要な同期コードの実行をブロックしてしまう可能性があります。

そこで、queueMicrotask を使うことで、ソート処理を現在の実行の直後に遅延させ、コードを改善できます。

var arr = [];

function add(value) {
  arr.push(value);
  queueMicrotask(() => {
    arr.sort();
  });
}

このように書き換えることで、複数の値を連続して追加した場合でも、ソートはマイクロタスクとしてまとめて実行されるため、メインの処理への影響を最小限に抑えられます。

まとめ

• queueMicrotask は、現在のタスク完了後・イベントループ制御が戻る前にコールバックを実行できるAPIである
• setTimeout はイベントループ経由で実行されるため、queueMicrotask の方が先に実行される
• 重い処理を少し遅らせて実行したい場合などに有効活用できる

参考資料

• MDN Web Docs - queueMicrotask()