では、複数の fetch を同時に実行して、一括でエラー処理＆ステップ実行できるサンプルを作ります。
これにより、非同期処理のチェーンや Promise.all の挙動をブラウザで確認できます。
1. 実演コード：複数 fetch + Promise.all + デバッグ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>複数Fetchデバッグ</title>
</head>
<body>
<h1>複数Fetch + 例外 + ステップ実行</h1>
<button id="loadBtn">複数データ取得</button>
<pre id="output"></pre>
<script>
const output = document.getElementById("output");
async function loadMultipleData() {
// 取得するURLリスト（2つは有効、1つは意図的に無効）
const urls = [
"https://jsonplaceholder.typicode.com/todos/1",
"https://jsonplaceholder.typicode.com/todos/2",
"https://invalid.example.com/data.json"
];
try {
output.textContent = "複数データ取得開始…";
// ここにブレークポイントを置くと、Promise.all の直前で停止
const fetchPromises = urls.map(url => fetch(url).then(res => {
if (!res.ok) throw new Error(`HTTPエラー: ${res.status} (${url})`);
return res.json();
}));
// ここで一括実行
const results = await Promise.all(fetchPromises); // <- ブレークポイント可
output.textContent = JSON.stringify(results, null, 2);
} catch (err) {
// ここにブレークポイントを置くと例外内容を確認できる
console.error("例外発生:", err);
output.textContent = "エラー発生: " + err.message;
} finally {
console.log("処理終了（成功/失敗に関わらず実行）");
}
}
document.getElementById("loadBtn").addEventListener("click", loadMultipleData);
</script>
</body>
</html>
2. デバッグ手順（ステップ実行）
- F12 → Sources タブ を開く
- JS 内のブレークポイントを設定：
const fetchPromises = urls.map(...);const results = await Promise.all(fetchPromises);console.error("例外発生:", err);
- 「複数データ取得」ボタンをクリック
- ブレークポイントで停止 → DevTools 上でステップ実行
- Promise.all 内の各 fetch の状態を確認
- Scope/Watch で
urls[i]やresultsの中身を確認
3. ポイント解説
非同期処理の挙動
Promise.allは1つでも reject されたら即座に catch に飛ぶ- 成功した Promise の結果も、
resultsに部分的には入らない
→ つまり、1つの失敗が全体を止める点を注意
デバッグ時のコツ
- ブレークポイントを
await Promise.all(...)に置くと、全ての Promise が揃う前で停止できる - 条件付きブレークポイントを使えば、特定 URL が失敗したときだけ止めることも可能
ScopeやWatchでfetchPromisesの状態（fulfilled / rejected）を確認
4. 応用テクニック
- Promise.allSettled に変更すると、全ての結果を取得できる
const results = await Promise.allSettled(fetchPromises);
- fulfilled/rejected を個別に確認できるので、一部失敗でも他は処理可能
- 非同期ステップ実行の練習
- DevTools でステップオーバー・ステップインを使い、各 fetch の完了タイミングを観察
console.logや Watch でレスポンスの順番・ステータスを追跡
5. 学習ポイントまとめ
| ポイント | 内容 |
|---|---|
| 複数 fetch の同時実行 | Promise.all でまとめて実行 |
| エラー処理 | try/catch でまとめて処理 |
| DevTools ブレークポイント | Promise.all の前後で停止して内部確認可能 |
| Scope/Watch | 各 URL のレスポンス状態や JSON データをリアルタイム確認 |
| Promise.all vs Promise.allSettled | 1つの失敗で止めるか、全体の結果を取得するかを使い分け |
💡 このサンプルを拡張すると：
- UI 上に「成功/失敗を色分け表示」
- 個別の fetch 結果を順番に出力
- 条件付きブレークポイントで特定ケースだけ停止
など、実務での非同期デバッグの練習にも最適です。