アラートは「ブラウザが出してくれる超シンプルなダイアログ」
alert / confirm / prompt は、
ブラウザが標準で用意してくれているダイアログ表示の仕組み です。
画面の真ん中に、
ブラウザが用意した小さなウィンドウが出てきて、
メッセージを見せる（alert）
OK / キャンセルを選ばせる（confirm）
文字を入力させる（prompt）
といったことができます。
見た目はブラウザ任せで、
CSS でデザインを変えたりはほぼできません。
だからこそ「とりあえず動きを確認したいとき」にめちゃくちゃ便利です。
alert：ただメッセージを見せて「OK」を押してもらう
基本の使い方
alert("こんにちは！");
これだけで、
「こんにちは！」と書かれたダイアログが出て、
ユーザーが「OK」を押すまで、
JavaScript の処理はいったん止まります（同期的）。
この「処理が止まる」という性質が、
初心者にとっては重要なポイントです。
console.log("前");
alert("止まります");
console.log("後");
このコードを実行すると、
「前」がコンソールに出る
→ alert が表示される
→ OK を押す
→ 「後」がコンソールに出る
という順番になります。
つまり、alert は
「ここで一回、ユーザーに見てもらってから先に進みたい」
というときに使うイメージです。
デバッグ用としても超便利
「この処理、本当にここまで来てる？」
「この変数、今いくつ？」
みたいなときに、console.log と同じくらい気軽に使えます。
alert("ここまで来たよ");
alert("x の値は " + x);
本番コードにはあまり残さないほうがいいですが、
学習中や試作中は、
「とりあえず alert で様子を見る」のは全然アリです。
confirm：OK / キャンセルで「ユーザーの意思」を聞く
戻り値が true / false になるのがポイント
confirm は、
「本当にやっていい？」とユーザーに確認したいときに使います。
const result = confirm("本当に削除しますか？");
if (result) {
console.log("削除します");
} else {
console.log("キャンセルしました");
}
ユーザーが「OK」を押せば true、
「キャンセル」を押せば false が返ってきます。
ここでも、
ダイアログが出ている間は処理が止まる ので、
確認する
→ ユーザーの選択を受け取る
→ その結果に応じて処理を分岐する
という流れを、
とてもシンプルなコードで書けます。
「取り返しのつかない操作」の前に挟むイメージ
ファイル削除
アカウント削除
大量データの一括削除
など、「間違えて押されたら困る」操作の前に、confirm を挟むのはよくあるパターンです。
button.addEventListener("click", () => {
if (confirm("本当に全件削除しますか？")) {
deleteAll();
}
});
ここで大事なのは、
「ユーザーに一度立ち止まってもらう」 という設計の感覚です。
prompt：ユーザーから簡単な文字入力をもらう
入力された文字列がそのまま返ってくる
prompt は、
「ユーザーに一言入力してもらいたい」ときに使います。
const name = prompt("名前を入力してください");
console.log("あなたの名前は", name);
ユーザーが入力して「OK」を押すと、
その文字列が戻り値として返ってきます。
キャンセルされた場合は null が返るので、
そこもちゃんと分岐するのがポイントです。
const name = prompt("名前を入力してください");
if (name === null) {
console.log("キャンセルされました");
} else {
console.log("こんにちは、" + name + "さん");
}
初期値を渡すこともできる
prompt は第2引数に「初期値」を渡せます。
const color = prompt("好きな色は？", "blue");
入力欄に最初から "blue" が入った状態で表示されます。
「だいたいこの値かな」という候補を出しておきたいときに使えます。
3つに共通する「超重要な性質」
1. ダイアログが出ている間、JavaScript の処理が止まる（同期的）
alert / confirm / prompt は、
どれも 「同期的」 です。
つまり、
ダイアログを表示する
→ ユーザーがボタンを押すまで、次の行に進まない
という動きをします。
これは一見便利ですが、
UI 全体が固まる という意味でもあります。
アニメーションも止まる
他のイベントも処理されない
タイマーも進まないように見える
など、「ページ全体が一時停止」したような状態になります。
だから、
本番の UI ではあまり多用せず、
学習中の確認
簡単なツール
どうしても一時停止させたい場面
くらいに留めるのが現代的です。
2. 見た目はブラウザ任せで、ほとんどカスタマイズできない
alert / confirm / prompt の見た目は、
ブラウザや OS が決めます。
文字の大きさ
ボタンのデザイン
ダークモード対応
などは、基本的にコントロールできません。
「かっこいいモーダルを作りたい」
「アニメーション付きのダイアログにしたい」
といった場合は、
自分で HTML / CSS / JavaScript でモーダルを作る必要があります。
つまり、
見た目や UX をこだわる → 自作モーダル
とりあえず簡単に確認したい → alert / confirm / prompt
という使い分けになります。
3. ユーザー体験としては「ちょっと古い」感じになりやすい
最近の Web サイトは、
ページ内に自然に溶け込むモーダルやトースト通知を使うことが多いです。
その中で、
ブラウザ標準のダイアログはどうしても「古い感じ」「急に出てくる感じ」があります。
だからこそ、
「学習・デバッグ用としては最高、プロダクトでは控えめに」
というバランス感覚が大事です。
小さな実例：3つをまとめて体験するページ
HTML
<button id="btn-alert">alert</button>
<button id="btn-confirm">confirm</button>
<button id="btn-prompt">prompt</button>
<pre id="log"></pre>
JavaScript
const log = document.querySelector("#log");
function write(message) {
log.textContent += message + "\n";
}
document.querySelector("#btn-alert").addEventListener("click", () => {
alert("これは alert です");
write("alert が閉じられました");
});
document.querySelector("#btn-confirm").addEventListener("click", () => {
const result = confirm("これは confirm です。OK ですか？");
write("confirm の結果: " + result);
});
document.querySelector("#btn-prompt").addEventListener("click", () => {
const text = prompt("これは prompt です。何か入力してください", "初期値");
write("prompt の結果: " + text);
});
このコードを動かすと、
ボタンを押す
→ ダイアログが出る
→ 閉じる
→ 下のログに結果が出る
という流れで、
3つの違いを一気に体感できます。
初心者として「alert / confirm / prompt」で本当に掴んでほしいこと
alert は「メッセージを見せて OK を押してもらう」
confirm は「OK / キャンセルで true / false を返す」
prompt は「文字入力をしてもらい、その文字列（または null）を返す」
3つとも「ダイアログが出ている間は処理が止まる（同期的）」
見た目はブラウザ任せで、カスタマイズはほぼできない
まずはブラウザのコンソールで、
alert("テスト");
const ok = confirm("OK?");
const name = prompt("名前は？", "太郎");
console.log(ok, name);
を一度ずつ試してみてください。
「コード → ダイアログ → ユーザーの操作 → 戻り値」
という流れが自分の中でつながると、
この3つは「ただの便利関数」ではなく、
「ユーザーとの対話を一時的に“止めて”行うための道具」 として見えてきます。