では、ステップごとの解説付き・実務向け API 連携＋非同期エラー練習用 HTML/JS教材を作ります。
ブラウザで開いてボタンを押すと、
- 成功 API 呼び出し
- 失敗 API 呼び出し
- setTimeout 内のエラー
- Promise reject
を順番に体験できるようになっています。
ブレークポイント・Watch・Call Stack の練習に最適です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>API連携＋非同期エラー デバッグ練習</title>
<style>
body { font-family: sans-serif; padding: 20px; }
button { margin: 5px; padding: 10px 15px; }
</style>
</head>
<body>
<h1>API連携＋非同期エラー デバッグ練習</h1>
<p>ボタンを押すと、非同期処理の成功／失敗例を順番に実行します。DevToolsでブレークポイントやWatchを使って確認しましょう。</p>
<button id="runBtn">実行</button>
<script>
// -----------------------------------
// 1. 成功 API 呼び出し
// -----------------------------------
async function successfulFetch() {
try {
const res = await fetch("https://jsonplaceholder.typicode.com/users/1");
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
const data = await res.json();
console.log("successfulFetch success:", data); // ← ブレークポイント
return data;
} catch (err) {
console.error("successfulFetch error:", err);
}
}
// -----------------------------------
// 2. 失敗 API 呼び出し
// -----------------------------------
async function failedFetch() {
try {
const res = await fetch("https://jsonplaceholder.typicode.com/invalid_endpoint");
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
const data = await res.json();
console.log("failedFetch success:", data);
} catch (err) {
console.error("failedFetch catch:", err); // ← ブレークポイント
}
}
// -----------------------------------
// 3. setTimeout 内のエラー
// -----------------------------------
function timeoutError() {
setTimeout(() => {
console.log("timeoutError: inside setTimeout");
throw new Error("Timeout内でのエラー！"); // ← ブレークポイント
}, 1500);
}
// -----------------------------------
// 4. Promise reject
// -----------------------------------
function promiseReject() {
Promise.reject(new Error("意図的な Promise reject"))
.catch(err => {
console.error("Promise catch:", err); // ← ブレークポイント
});
}
// -----------------------------------
// 5. 実務風メイン処理
// -----------------------------------
async function mainTask() {
console.log("mainTask start");
// ① 成功 API
const user = await successfulFetch();
// ② setTimeout 内のエラー
timeoutError();
// ③ 失敗 API
await failedFetch();
// ④ Promise reject
promiseReject();
console.log("mainTask end");
}
// -----------------------------------
// ボタンイベント
// -----------------------------------
document.getElementById("runBtn").addEventListener("click", mainTask);
</script>
</body>
</html>
練習手順
- ファイルを
api_async_debug.htmlとして保存 - ブラウザで開く → F12 → Sources タブ
- 下記の行にブレークポイントを置く：
console.log("successfulFetch success:", data);console.error("failedFetch catch:", err);throw new Error("Timeout内でのエラー！");console.error("Promise catch:", err);
- 「実行」ボタンをクリック
- ブレークポイントで停止 → Scope / Watch / Call Stack を確認
- Step over / Step into で処理を追跡
練習ポイント
- Watch に
data/err/userを追加して変数を監視 - Call Stack で非同期関数の呼び出し順を確認
- Pause on exceptions をオンにして、catch される例外も自動で停止
- 非同期処理の順番（成功・失敗・タイマー・Promise）を体感する
💡 この教材を繰り返し操作することで、
- 非同期 API 連携
- setTimeout / Promise / async/await の挙動
- エラー処理の追跡方法
- DevTools を使った実務的なデバッグ手順
まで体系的に習得できます。