【JavaScript入門】ダイアログと非同期処理（async/await）の組み合わせ方｜confirm後にAPIを実行する方法を初心者向けに解説

JavaScript の alert()・confirm()・prompt() は同期処理のため、非同期処理と組み合わせる際に挙動を理解しておくことが重要です。
この記事では、ダイアログ表示後に async / await を使う実践パターンや、初心者がつまずきやすいポイントを分かりやすく解説します。

alert・confirm・prompt は同期処理

JavaScript の alert・confirm・prompt は、
同期処理（blocking） です。

つまり、ダイアログが閉じるまで JavaScript の処理は止まり、
その後に次の処理が実行されます。

この性質を理解しておくと、非同期処理と組み合わせるときに混乱しません。

confirm 後に非同期処理（API）を実行する例

削除確認 → OK → API 実行
という流れは実務でもよく使われます。

以下はその基本パターンです。

async function deleteItem() {
  const result = confirm("本当に削除しますか？");

  if (!result) return;

  const response = await fetch("/api/delete", {
    method: "POST"
  });

  console.log("削除が完了しました");
}

document.getElementById("deleteBtn").addEventListener("click", deleteItem);

confirm が同期処理のため、
OK を押した後に async 関数の処理が再開される という流れになります。

prompt で入力後に非同期処理を行う例

ユーザーの入力を API に送信するケースです。

async function sendName() {
  const name = prompt("名前を入力してください");

  if (name === null || name === "") {
    console.log("入力がキャンセルされました");
    return;
  }

  const response = await fetch("/api/send", {
    method: "POST",
    body: JSON.stringify({ name })
  });

  console.log("送信が完了しました");
}

prompt の入力チェック（空欄・null）は必須です。

alert を使った非同期処理の完了通知

非同期処理が終わったタイミングで alert を表示することもできます。

async function saveData() {
  await fetch("/api/save");
  alert("保存が完了しました");
}

alert は同期処理なので、
API が完了した後に確実に表示される という特徴があります。

初心者がつまずきやすいポイント

• alert・confirm・prompt は「非同期」ではない
• ダイアログ表示中は JavaScript が止まる
• 非同期処理はダイアログが閉じた後に再開される
• prompt の入力チェック（空欄・null）は必須

まとめ

alert・confirm・prompt は同期処理ですが、
async / await と組み合わせることで、
「確認 → API実行 → 完了通知」 のような実務的な流れを簡単に実装できます。

まずは confirm → fetch の基本パターンを理解し、
必要に応じて prompt や alert と組み合わせてみましょう。