今日の開発Tips
Tips

今日の開発Tips（2025-05-30）

今日の開発Tipsは、JavaScriptにおける非同期処理における`async/await`のより効果的な利用方法です。`async/await`は非同期コードを読みやすく、保守しやすくしてくれますが、誤った使い方をするとかえって複雑化する場合があります。このTipsでは、`async/await`をより効果的に活用するためのポイントをご紹介します。

ネストされたawaitの解消：Promise.allを使った同時処理

多くのawaitがネストされた非同期処理は、コードの可読性を著しく低下させます。複数の非同期処理を同時に行い、結果をまとめて処理したい場合はPromise.allを使用することで、ネストを解消し、コードを簡潔に保つことができます。

例：

// ネストされたawait
async function nestedAwaits() {
  const data1 = await fetchData1();
  const data2 = await fetchData2();
  const data3 = await fetchData3();
  return { data1, data2, data3 };
}

// Promise.allを使った書き方
async function parallelAwaits() {
  const [data1, data2, data3] = await Promise.all([
    fetchData1(),
    fetchData2(),
    fetchData3(),
  ]);
  return { data1, data2, data3 };
}

// ダミーの非同期関数
function fetchData1() { return new Promise(resolve => setTimeout(() => resolve('Data 1'), 1000)); }
function fetchData2() { return new Promise(resolve => setTimeout(() => resolve('Data 2'), 1500)); }
function fetchData3() { return new Promise(resolve => setTimeout(() => resolve('Data 3'), 500)); }

// 使い方例（非同期処理なので、コンソールに出力される順序に注意）
nestedAwaits().then(console.log);
parallelAwaits().then(console.log);

注意点:

  • Promise.allは全てのPromiseが解決するか、もしくは1つでもrejectされた時点で処理が終了します。エラーハンドリングを適切に行いましょう。
  • 処理時間のかかる非同期処理をたくさんPromise.allで実行すると、ブラウザがフリーズする可能性があるため、必要に応じて処理を分割しましょう。

おすすめポイント:

Promise.allを使うことで、複数の非同期処理を並列に実行でき、処理速度の向上とコードの可読性の向上を両立できます。特に、複数のAPIへのリクエストなどを同時に行う際に有効です。

Tips一覧へ戻る