JavaScript | 非同期処理（Promise / async）のステップ実行を例で体験

では、非同期処理（Promise / async/await）のステップ実行を、VSCodeデバッガで体験する例を、初心者向けに手順付きで進めていきます。

1. サンプルコードを作る

まず小さな非同期処理のファイルを作ります。

📄 async_debug.js

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function fetchData() {
  console.log("fetchData: 開始");

  await wait(1000); // 1秒待機
  console.log("fetchData: データ取得完了");

  const data = { value: 42 };
  return data;
}

async function main() {
  console.log("main: 開始");

  const result = await fetchData();
  console.log("main: 結果は", result);

  console.log("main: 終了");
}

main();

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function fetchData() {
  console.log("fetchData: 開始");

  await wait(1000); // 1秒待機
  console.log("fetchData: データ取得完了");

  const data = { value: 42 };
  return data;
}

async function main() {
  console.log("main: 開始");

  const result = await fetchData();
  console.log("main: 結果は", result);

  console.log("main: 終了");
}

main();

2. VSCode 側でブレークポイントを置く

ステップ実行のために以下の行にブレークポイントを置きます：

1. console.log("fetchData: 開始");
2. await wait(1000);
3. console.log("fetchData: データ取得完了");
4. const result = await fetchData();（main内）

赤い丸をクリックしてブレークポイントを置きます。

3. デバッグ実行

1. VSCode 左サイドバーの「実行とデバッグ」を開く
2. 「launch.json」がない場合は作成 → Node.js を選択
3. デバッグ設定で "program": "${workspaceFolder}/async_debug.js" にする
4. 「▶️デバッグ開始」をクリック

4. ステップ実行で体験

VSCode でブレークすると、ステップ実行（F10/F11）が可能です：

🔍 ポイント

• await wait(1000) の行で一時停止したときは、非同期が再開されるまでデバッグは停止
  → 「Promise が解決されるタイミング」で次の行に進む
• 「変数ペイン」で result がまだ未定義なのが確認できる
• 次に console.log("fetchData: データ取得完了"); が実行されたら、Promise が解決されたことがわかる

5. コールスタック（stack）の確認

非同期関数の場合、VSCode の「コールスタック」ペインには async stack が表示されます：

main
  at async fetchData
  at async main

• どの関数が呼ばれた結果、現在の行に到達したかが分かる
• 非同期でも、同期関数と同じように順序を追える

6. Promise チェーンの場合も同様にデバッグできる

function asyncTask(name, ms) {
  return new Promise(resolve => setTimeout(() => {
    console.log(`${name} 完了`);
    resolve(name);
  }, ms));
}

asyncTask("A", 500)
  .then(resultA => asyncTask("B", 500))
  .then(resultB => console.log("最終結果:", resultB));

function asyncTask(name, ms) {
  return new Promise(resolve => setTimeout(() => {
    console.log(`${name} 完了`);
    resolve(name);
  }, ms));
}

asyncTask("A", 500)
  .then(resultA => asyncTask("B", 500))
  .then(resultB => console.log("最終結果:", resultB));

• .then() 内でブレークポイントを置くと、非同期チェーンの流れも追える
• DevTools と違い、VSCode デバッガはステップ実行可能なので「どの Promise がどの順番で解決されたか」を目で確認できる

7. デバッグ体験のコツ

1. await の行で止める → 非同期が再開されるタイミングを体験
2. 関数の中で Step Into → async 関数内部もステップ実行可能
3. 変数ペインで値を確認 → Promise が解決される前は undefined / pending
4. コールスタックを追う → 非同期でも呼び出し順が分かる
5. コンソールで式を評価 → デバッグ中に result.value などを確認できる

まとめ

• VSCode のデバッガは 非同期処理もステップ実行可能
• await の行で止めると、非同期処理がどのタイミングで完了するか目で見える
• コールスタックを確認すると、async stack trace を理解できる
• Promise チェーンや async/await の非同期エラーも同じ手順で追跡できる

💡 次のステップとしては：

• 非同期処理のエラーを try/catch で捕まえてステップ実行
• 複数の await / Promise が絡む場合のデバッグ方法

を体験すると、実務での非同期バグ解決力が格段に上がります。