Tips

今日の開発Tips(2025-05-27)

JavaScriptで非同期処理を行う際に、`Promise.all` を使うと複数のPromiseを同時に実行し、全て完了した後にまとめて処理できます。これにより、コードを簡潔に記述し、パフォーマンスも向上させることができます。 特に複数のAPI呼び出しを並行して行う場合に有効です。

非同期処理の効率化:Promise.allを使った並列処理

複数の非同期処理を並列に実行し、全て完了後にまとめて処理したい場合、Promise.all を利用するとコードが簡潔になり、効率が向上します。Promise.all は、Promiseの配列を受け取り、全てのPromiseが解決または拒否された後に、解決結果の配列を返すPromiseを返します。

const promise1 = new Promise((resolve) => setTimeout(() => resolve('Result 1'), 1000));
const promise2 = new Promise((resolve) => setTimeout(() => resolve('Result 2'), 2000));
const promise3 = new Promise((resolve) => setTimeout(() => resolve('Result 3'), 1500));

Promise.all([promise1, promise2, promise3])
  .then((results) => {
    console.log('All promises resolved:', results); // ['Result 1', 'Result 2', 'Result 3']
  })
  .catch((error) => {
    console.error('At least one promise rejected:', error);
  });

注意点:Promise.all は、配列内のいずれかのPromiseが拒否されると、直ちにcatchブロックが実行されます。また、Promiseの数が非常に多い場合は、ブラウザのリソース消費に注意が必要です。

おすすめポイント:複数のAPI呼び出しや、複数のファイル読み込みなど、複数の非同期処理を効率的に実行したい場合に非常に便利です。コードの見通しが良くなり、保守性も向上します。