【JavaScript】Promise.allの使い方 ― 複数の非同期処理を並列実行する方法
この記事で解決すること 「複数のAPI呼び出しを同時に実行したい」 「Promise.allの使い方がよく分からない」 この記事では、Promise.allの基本から実践的な使い方まで解説します。エラーハンドリングや他のPromiseメソッドとの違いも紹介していきます。 Promise.allとは Promise.allは、複数のPromiseを並列に実行し、すべてが完了するのを待つメソッドです。 通常、async/awaitで非同期処理を書くと、1つずつ順番に実行されます。しかし、互いに依存しない処理なら同時に実行した方が効率的です。 // 直列実行（遅い） const users = await fetchUsers(); // 1秒 const posts = await fetchPosts(); // 1秒 const comments = await fetchComments(); // 1秒 // 合計: 約3秒 // 並列実行（速い） const [users, posts, comments] = await Promise.all([ fetchUsers(), // 1秒 fetchPosts(), // 1秒 fetchComments(), // 1秒 ]); // 合計: 約1秒（最も遅い処理に合わせる） 並列実行なら、最も時間がかかる処理の分だけ待てば済みます。 基本構文と使い方 基本構文 // Promise.allにPromiseの配列を渡す const results = await Promise.all([promise1, promise2, promise3]); 引数にPromiseの配列を渡します。戻り値は、各Promiseの結果が入った配列です。結果の順番は、渡した配列の順番と一致します。 分割代入との組み合わせ // 分割代入で個別の変数に受け取る const [userData, settingsData, notificationData] = await Promise.all([ fetchUserData(), fetchSettings(), fetchNotifications(), ]); console.log(userData); // ユーザー情報 console.log(settingsData); // 設定情報 console.log(notificationData); // 通知情報 配列の分割代入を使うと、結果を個別の変数に受け取れます。コードの可読性が上がるのでおすすめです。 具体的な使用例 複数のAPIを同時に呼ぶ Webアプリでは、画面表示に必要なデータを複数のAPIから取得することがよくあります。 // ダッシュボード画面のデータ取得 async function loadDashboard() { const [users, orders, analytics] = await Promise.all([ fetch('/api/users').then(res => res.json()), fetch('/api/orders').then(res => res.json()), fetch('/api/analytics').then(res => res.json()), ]); // 3つのデータが揃ってから画面を描画 renderDashboard({ users, orders, analytics }); } fetch APIと組み合わせるパターンは実務で頻出します。 ...