【JavaScript入門】alert・confirm・promptの違いを初心者向けに解説｜使い分け・戻り値・注意点

alert・confirm・prompt は、
JavaScript が標準で提供する基本的なダイアログ機能です。
それぞれ役割や戻り値が異なるため、まずは「何ができて、どんな動きをするのか」を理解することが大切です。

alert・confirm・prompt の違いをまとめて理解しよう

JavaScript のダイアログには、alert・confirm・prompt の3種類があります。
どれも「ブラウザが標準で用意しているダイアログ」ですが、役割や戻り値が大きく異なります。

種類	役割	戻り値	主な用途
alert	メッセージを表示するだけ	なし（undefined）	通知・警告
confirm	OK / キャンセルの選択	true / false	削除確認・操作の最終確認
prompt	ユーザーに文字入力させる	入力文字列 / null	簡易入力フォーム

3つの違いを理解しておくと、「どの場面でどれを使うべきか」 が判断しやすくなります。

それぞれの使い分け方

alert：通知・警告に使う

alert は「メッセージを伝えるだけ」の最もシンプルなダイアログです。
戻り値はなく、ユーザーに情報を伝えて処理を一時停止させたいときに向いています。

■ 基本的な使い方

alert("入力が完了しました！");

■ 入力チェックと組み合わせる例

const value = document.getElementById("email").value;

if (!value) {
  alert("メールアドレスを入力してください");
}

「ユーザーに気づいてほしいポイントを確実に伝える」用途に向いていますが、
画面を完全にブロックするため、連発しないよう注意が必要です。

confirm：操作の最終確認に使う

confirm は OK / キャンセル の選択肢を提供し、
戻り値（true / false）で処理を分岐できます。

■ 基本的な使い方

const result = confirm("本当に続行しますか？");

if (result) {
  console.log("OK が押されました");
} else {
  console.log("キャンセルされました");
}

■ 条件分岐の理解に役立つ例

if (confirm("設定を変更しますか？")) {
  applySetting();
} else {
  console.log("変更はキャンセルされました");
}

「ユーザーの意思を確認したい場面」で使うのが基本です。
特に、戻り値を使った分岐処理の練習に最適なダイアログです。

prompt：簡易的な入力が必要なときに使う

prompt はユーザーに文字を入力させるためのダイアログです。
戻り値は「入力文字列」または「キャンセル時は null」になります。

■ 基本的な使い方

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

console.log("入力された名前:", name);

■ 入力チェックを含む例

const age = prompt("年齢を入力してください");

if (age === null) {
  console.log("キャンセルされました");
} else if (age === "") {
  alert("空欄は無効です");
} else {
  console.log("入力された年齢:", age);
}

ただし UI が古く、入力チェックも必要なため、
実務ではフォームやモーダルに置き換えられることが多い点に注意しましょう。

初心者がつまずきやすい注意点

• ダイアログは画面を完全にブロックする（非同期ではない）
• スマホやブラウザによって挙動が異なることがある
• UI が古いため、実務ではモーダルやトースト通知が好まれる
• prompt は入力チェックが必要（空欄・null の判定）

まとめ

alert・confirm・prompt は、JavaScript の基本的なダイアログ機能です。
それぞれの役割と戻り値を理解しておくことで、適切な場面で正しく使い分けられるようになります。
実務ではカスタムUIを使うことも多いですが、まずは標準ダイアログの特徴を押さえておくことが大切です。