このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

【JavaScript入門】ダイアログの表示

　ブラウザ JavaScript には、コード 1 行で警告・確認・入力を行える 組み込みダイアログ API が用意されています。alert confirm prompt の 3 メソッドは、表示中に スクリプト実行を停止 させる（同期ブロック）ため、短いデバッグや簡易入力には依然として便利です。ここではそれぞれの機能と戻り値を整理し、実際に動く HTML サンプルで対話フローを体験します。

１．基本ダイアログ API

メソッドボタン戻り値主な用途
alert(msg)OKなし (undefined)情報・警告表示
confirm(msg)OK / Canceltrue / false二択確認
prompt(msg, default)OK / Cancel入力文字列 / null単一行入力

1.1 .alert

alert('保存が完了しました！');

1.2. confirm

if (confirm('本当に削除しますか？')) {
  // OK が押されたときの処理
}

1.3. prompt

const name = prompt('お名前を入力してください', 'ゲスト');

２．挙動と注意点

特性説明
同期ブロックダイアログが閉じるまで後続コードは実行されない。
UI 制御不可タイトルやボタンラベルはブラウザ依存で変更不可
ポップアップ制限多用するとブラウザがブロックすることがある。
アクセシビリティキーボードフォーカスが奪われるため多用は避ける。

３．実践サンプル ― 注文フロー

ファイル名： order_dialog_demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ダイアログ API デモ</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body{font-family:sans-serif;margin:2rem}
button{padding:.4rem .8rem}
</style>
</head>
<body>
<h2>☕ 注文シミュレーター</h2>
<button id="start">注文をはじめる</button>

<script>
document.getElementById('start').onclick = () => {
  // 1. 商品入力
  const drink = prompt('ご注文のドリンクを入力してください。', 'カフェラテ');
  if (drink === null) {
    alert('ご来店ありがとうございました。またどうぞ！');
    return;
  }

  // 2. サイズ確認
  const tall = confirm(`${drink} でよろしいですか？\nサイズはトールにしますか？`);
  const size = tall ? 'トール' : 'ショート';

  // 3. 店内 or テイクアウト
  const inStore = confirm(`サイズ: ${size}\n店内でお召し上がりですか？`);
  const place   = inStore ? '店内' : 'お持ち帰り';

  // 4. 最終確認
  alert(`承りました。\n${drink}（${size}）\n${place} でご用意します。`);
};
</script>
</body>
</html>

動作手順

  1. [注文をはじめる] をクリックすると prompt が開き、ドリンク名を入力。
  2. confirm が 2 回続き、サイズ選択 → 利用場所選択。
  3. alert で最終内容を表示し終了。

プログラム解説

ステップ使用 API戻り値と分岐
商品入力promptnull ならキャンセル扱い
サイズ選択confirmtrue → トール / false → ショート
利用場所confirmtrue → 店内 / false → テイクアウト
完了通知alert文字列を表示するだけ

４．モダン Web での代替案

手法特徴
<dialog> 要素HTML5 標準。showModal() でモーダル表示、非同期操作も可能
カスタムモーダル (React/Vue など)スタイリング自由・非同期 Promise で扱える。
Toast / Snackbar非ブロッキング通知に適する。

Tip: シンプルなデモや一時的なデバッグでは組み込みダイアログ、
UX を重視する本番 UI ではカスタムモーダル、と使い分けるのが実践的です。

まとめ

  • alert confirm prompt は 同期ブロッキング な簡易ダイアログ。
  • 戻り値 (undefined / true|false / 文字列|null) を受け取って分岐処理を書く。
  • 多用は UX 低下やブラウザブロックの原因になるため、用途を限定しモダン UI と併用するのが望ましい。