alert・confirm・prompt の戻り値を確認する
JavaScriptのネイティブダイアログ3種を、戻り値の扱いまで含めて解説します。各デモと同じ動きを再現できるHTML・JavaScriptを掲載しています。
HTML・CSS・JSコードプレビューツールでも動作を確認できます。
① alert() — メッセージだけ伝える
まだ表示していません
<button class="alert-button" type="button">Alert を表示</button>
<p class="alert-result"></p>.alert-button {
padding: 12px 28px;
border: 1px solid #c4b5fd;
border-radius: 8px;
background: #fff;
color: #5b21b6;
font-size: 15px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.alert-result {
margin: 12px 0 0;
padding: 10px 14px;
border: 1px solid #bbf7d0;
border-radius: 8px;
background: #f0fdf4;
color: #166534;
font-size: 14px;
font-family: Consolas, "Courier New", monospace;
}var alertButton = document.querySelector('.alert-button');
var alertResult = document.querySelector('.alert-result');
alertButton.addEventListener('click', function() {
window.alert('メッセージを表示します。');
alertResult.textContent = 'ダイアログを表示しました。戻り値はありません。';
});ユーザーにメッセージを見せるだけのダイアログです。OKボタンのみで、戻り値はありません。閉じるまでページ上の操作は止まります。手早く伝える用途向きですが、多用すると体験を損ないやすいので注意が必要です。
② confirm() — OK / キャンセルで分岐する
まだ表示していません
<button class="confirm-button" type="button">Confirm を表示</button>
<p class="confirm-result"></p>.confirm-button {
padding: 12px 28px;
border: 1px solid #6ee7b7;
border-radius: 8px;
background: #fff;
color: #047857;
font-size: 15px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.confirm-result {
margin: 12px 0 0;
padding: 10px 14px;
border: 1px solid #bbf7d0;
border-radius: 8px;
background: #f0fdf4;
color: #166534;
font-size: 14px;
font-family: Consolas, "Courier New", monospace;
}var confirmButton = document.querySelector('.confirm-button');
var confirmResult = document.querySelector('.confirm-result');
confirmButton.addEventListener('click', function() {
var answered = window.confirm('続けますか？');
if (answered) {
confirmResult.textContent = '戻り値: true（OK を選択）';
} else {
confirmResult.textContent = '戻り値: false（キャンセルを選択）';
}
});OK とキャンセルの2択を出します。OKなら true、キャンセルやEscなら false が返ります。この真偽値を if で見て、削除の実行可否など処理を分岐できます。
③ prompt() — 文字を入力してもらう
まだ表示していません
<button class="prompt-button" type="button">Prompt を表示</button>
<p class="prompt-result"></p>.prompt-button {
padding: 12px 28px;
border: 1px solid #fcd34d;
border-radius: 8px;
background: #fff;
color: #92400e;
font-size: 15px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.prompt-result {
margin: 12px 0 0;
padding: 10px 14px;
border: 1px solid #bbf7d0;
border-radius: 8px;
background: #f0fdf4;
color: #166534;
font-size: 14px;
font-family: Consolas, "Courier New", monospace;
}var promptButton = document.querySelector('.prompt-button');
var promptResult = document.querySelector('.prompt-result');
promptButton.addEventListener('click', function() {
var typedText = window.prompt('お名前を入力してください', '');
if (typedText !== null && typedText !== '') {
promptResult.textContent = '入力内容: ' + typedText;
} else if (typedText === '') {
promptResult.textContent = '空文字が返されました。';
} else {
promptResult.textContent = 'キャンセル（null）が返されました。';
}
});入力欄つきのダイアログです。第1引数がメッセージ、第2引数が初期値です。OKなら入力文字列、キャンセルやEscなら null が返ります。空のままOKした場合は空文字 “” になるため、null と空文字は分けて判定します。
alert・confirm・prompt の戻り値の違いは？
alert に戻り値はありません。confirm は true / false、prompt は入力文字列または null を返します。分岐の前に、どの関数が何を返すかを押さえておくと実装ミスが減ります。
prompt の空文字と null はどう違いますか？
入力欄を空のまま OK すると ""（空文字）、キャンセルや Esc だと null です。どちらも「falsy」なので、if (typedText) だけでは区別できません。上のデモのように null と空文字を分けて判定してください。
ネイティブダイアログとモーダルの使い分けは？
すぐ動く確認や学習用途ならネイティブダイアログで十分です。サイトのデザインに合わせたい、ボタンを3つ以上置きたい、背景クリックやアニメーションが必要、という場合はモーダルウィンドウやポップアップを使います。
ダイアログを多用すると何が問題ですか？
表示中はページ全体の操作が止まるため、連発すると操作が途切れます。見た目もブラウザ任せでサイトのUIと揃いません。軽い通知ならトースト通知、比較しながら選ぶならまとめ記事の使い分けも参考にしてください。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
