🌊

JavaScript/TypeScriptで並列・非同期処理の同時実行数を制御するなら p-queue がおすすめ！

まさぴょん

2024/01/08に公開

こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！
今回は、JavaScript/TypeScriptで並列・非同期処理をする際におすすめのライブラリp-queueについて、解説します。

p-queueとは？

p-queueは、非同期処理を並列で実行する際の同時実行数を制御するのに役立つライブラリです。
たぶん、Promise queue(キュー)を略して、p-queue(ピーキュー)だと思われます。

次のようなユースケースなどに適したライブラリです。

同時に実行されるAPIリクエストの数に制限を設けたい場合
CPU・メモリに対する負荷のかかる処理を集中させたくない場合

APIに非同期で大量のリクエストを送る場合に、同時実行数に制限を設けないとAPIがパンクしたり、Front側の処理が重くなるなどの可能性があります。
そんな時には、このp-queueが役立つというわけです。

https://github.com/sindresorhus/p-queue

p-queueを使って、並列非同期処理を実行する！

それでは、実際にp-queueを使って、並列・非同期処理の同時実行数を制御する処理を作成します。

まずは、p-queueをinstallします。

yarn add p-queue

### または、、、

npm i p-queue

続いて、p-queueのインスタンスを作成しておきます。
今回は、並列・非同期で10件まで実行するインスタンスとして、作成します。
(concurrencyで同時実行数を設定します)

/libs/pqueue/parallelRequestQueue.ts

import PQueue from "p-queue";

/** PQueueインスタンス: 並列・非同期で10件まで実行する */
export const parallelRequestQueue = new PQueue({
  autoStart: true, // 同時実行制限内のキュータスクが追加されるとすぐに自動実行されるかどうか
  concurrency: 10, // 同時実行制限
});

p-queueのOptionに関しては、GitHubのREADME.mdに掲載されています。

https://github.com/sindresorhus/p-queue

並列・非同期処理を実行する処理のSampleCodeは、次のとおりです。

/views/FetchTest.tsx

import { parallelRequestQueue } from "../../libs/pqueue/parallelRequestQueue";

/** 大量の非同期の並列処理・Fetch Test */
const FetchTest = () => {
  console.group("FetchTest");

  // 並列処理のキューを作成
  const todoFetch = async () => {
    /** 非同期実行・タスクリスト */
    const tasks = [] as Array<() => Promise<void>>;

    /** JSON Place Holder の TODO id List */
    const jsonplaceholderIdList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

    // 並列処理のタスクを作成する
    jsonplaceholderIdList.forEach((id) => {
      tasks.push(async () => {
        const res = await fetch(
          `https://jsonplaceholder.typicode.com/todos/${id}`
        );
        const json = await res.json();
        console.log(json);
      });
    });

    // addAll で 10件まで非同期・並列処理
    await parallelRequestQueue.addAll(tasks);

    console.groupEnd();
  };

  /** 並列・非同期処理を実行する */
  todoFetch();
  return (
    <div>
      <div>大量の非同期の並列処理・Fetch Test</div>
    </div>
  );
};

export default FetchTest;