JavaScript | 「Promise.all + finally」を図でフロー解説（成功／失敗ルート図付き）

では 「Promise.all + finally」 の処理フローを、初心者でも理解しやすい図で解説します。
今回は「成功ルート」と「失敗ルート」の両方を示します。

前提シナリオ

3つの API を同時に呼び出す：

fetchUser()
fetchPosts()
fetchComments()

• すべて成功 → データを使う
• どれか失敗 → catch でエラー処理
• 成功・失敗どちらでも → finally で後処理（ローディング解除など）

① フロー図（成功ルート）

showLoadingSpinner()
        │
        ▼
   Promise.all開始（並列実行）
        │
        ▼
  ┌──────────────┐
  │ 全部成功?               │
  └──────────────┘
        │ Yes
        ▼
   thenブロック実行
   ┌──────────────┐
   │ データ処理               │
   └──────────────┘
        │
        ▼
finallyブロック実行
   ┌──────────────┐
   │ 後処理                  │
   └──────────────┘
        │
        ▼
hideLoadingSpinner()

✅ ポイント：

• 成功でも finally は必ず実行される
• then → finally → ローディング終了の順で処理

② フロー図（失敗ルート）

showLoadingSpinner()
        │
        ▼
   Promise.all開始（並列実行）
        │
        ▼
  ┌──────────────┐
  │ どれか失敗?              │
  └──────────────┘
        │ Yes
        ▼
catchブロック実行
   ┌──────────────┐
   │ エラー処理               │
   └──────────────┘
        │
        ▼
finallyブロック実行
   ┌──────────────┐
   │ 後処理                  │
   └──────────────┘
        │
        ▼
hideLoadingSpinner()

✅ ポイント：

• 1つでも Promise が reject すると catch に飛ぶ
• それでも finally は必ず実行されるので、後片付けは安全

③ コードと図を結びつけるとイメージしやすい

async function loadAllData() {
  showLoadingSpinner();  // ← フロー図の start

  try {
    const [user, posts, comments] = await Promise.all([
      fetch("/api/user").then(r => r.json()),
      fetch("/api/posts").then(r => r.json()),
      fetch("/api/comments").then(r => r.json())
    ]);
    console.log("すべて成功", { user, posts, comments }); // → 成功ルート then
  } catch (err) {
    console.error("どれか失敗", err); // → 失敗ルート catch
  } finally {
    hideLoadingSpinner(); // → 最後の finally 後処理
  }
}

async function loadAllData() {
  showLoadingSpinner();  // ← フロー図の start

  try {
    const [user, posts, comments] = await Promise.all([
      fetch("/api/user").then(r => r.json()),
      fetch("/api/posts").then(r => r.json()),
      fetch("/api/comments").then(r => r.json())
    ]);
    console.log("すべて成功", { user, posts, comments }); // → 成功ルート then
  } catch (err) {
    console.error("どれか失敗", err); // → 失敗ルート catch
  } finally {
    hideLoadingSpinner(); // → 最後の finally 後処理
  }
}

💡 覚え方：

• Promise.all = 並列処理
• catch = どれか失敗したらここに飛ぶ
• finally = 成功・失敗どちらでも必ず最後に実行される