JavaScript 逆引き集 | 並列 HTTP リクエスト制御(同時 N 件)

JavaScript JavaScript
スポンサーリンク

並列 HTTP リクエスト制御(同時 N 件) — pMap(arr, fn, { concurrency: 5 })(p-map ライブラリ)

Web API を複数呼び出すとき、一度に大量のリクエストを投げるとサーバーやネットワークに負荷がかかることがあります。
そこで p-map ライブラリを使うと「同時に処理する数」を制御でき、効率的かつ安全に並列処理ができます。
初心者は「配列の要素を並列で処理するけど、同時に走る数を制限できる」と覚えると理解しやすいです。


基本のコード例

import pMap from 'p-map';

const urls = [
  'https://api.example.com/1',
  'https://api.example.com/2',
  'https://api.example.com/3',
  'https://api.example.com/4',
  'https://api.example.com/5',
  'https://api.example.com/6'
];

async function fetchUrl(url) {
  const res = await fetch(url);
  return res.json();
}

const results = await pMap(urls, fetchUrl, { concurrency: 3 });

console.log(results);
JavaScript
  • urls → 呼び出したい API の一覧(配列)。
  • fetchUrl → 各要素を処理する関数。
  • pMap(urls, fn, { concurrency: 3 }) → 配列を並列処理するが、同時に最大 3 件まで。

よく使うテンプレート集

同時 1 件(直列処理)

await pMap(urls, fetchUrl, { concurrency: 1 });
JavaScript

同時 5 件(高速化)

await pMap(urls, fetchUrl, { concurrency: 5 });
JavaScript

結果を加工して返す

const results = await pMap(urls, async (url) => {
  const res = await fetch(url);
  const data = await res.json();
  return { url, length: data.length };
}, { concurrency: 2 });
JavaScript

例題: ユーザー情報をまとめて取得

import pMap from 'p-map';

const userIds = [101, 102, 103, 104, 105];

async function fetchUser(id) {
  const res = await fetch(`https://api.example.com/users/${id}`);
  return res.json();
}

const users = await pMap(userIds, fetchUser, { concurrency: 2 });

console.log(users);
/*
[
  { id: 101, name: "Alice" },
  { id: 102, name: "Bob" },
  ...
]
*/
JavaScript
  • 効果: 同時に 2 件ずつ API を呼び出すので、サーバーに優しく効率的。

実務でのコツ

  • API 制限に対応: サーバーが「同時接続は最大 N 件まで」と決めている場合に便利。
  • 大量データ処理: 数百件のリクエストを一気に投げると失敗しやすい → concurrency を制御。
  • エラー処理: try/catch を関数内に入れて失敗時の対応を決める。

練習問題(画像を並列ダウンロード)

import pMap from 'p-map';

const images = [
  'https://example.com/img1.png',
  'https://example.com/img2.png',
  'https://example.com/img3.png'
];

async function downloadImage(url) {
  const res = await fetch(url);
  return res.blob();
}

const blobs = await pMap(images, downloadImage, { concurrency: 2 });
console.log(blobs);
JavaScript

直感的な指針

  • pMap = 配列を並列処理する便利関数。
  • concurrency で同時実行数を制御。
  • API 呼び出しや重い処理を安全に並列化できる。
  • 初心者は「直列(1件)」「並列(複数件)」を切り替えて練習すると理解が深まる。

これを覚えれば「大量の HTTP リクエストを効率的に処理」できるようになり、サーバー負荷を抑えつつ高速なデータ取得が可能になります。

タイトルとURLをコピーしました