Webサイトやアプリを作っていると、ユーザーに「本当に削除しますか？」といった確認メッセージを表示して、「はい」か「いいえ」を選択させたい場面によく遭遇します。
alert() が有名ですが、実は alert() では「OK」ボタンしか表示できず、ユーザーに選択肢を与えることができません。では、どうすれば「Yes / No」の選択肢を作ることができるのでしょうか？
この記事では、JavaScript標準の confirm() メソッドを使った基本的な実装方法から、標準機能ではできない「ボタンの文字を『はい / いいえ』に変更したい」という要望を叶えるためのモダンな代替手段まで、現在のWeb制作現場で使われているテクニックを徹底解説します。
 執筆者：マヒロ |
|
- OS：Windows 11 / macOS Sequoia
- IDE：Visual Studio / VS Code / IntelliJ IDEA
- その他：Chrome DevTools / 各言語最新安定版
※本メディアでは、上記環境にてコードの動作と情報の正確性を検証済みです。
結論：alertではなくconfirmメソッドを使う
まず大前提として、ユーザーに二択（Yes/No）を迫りたい場合に alert() は使いません。
代わりに、ブラウザ標準で用意されている confirm()（コンファーム）メソッド を使用します。
confirm() を実行すると、「OK」ボタンと「キャンセル」ボタンが付いたダイアログが表示され、ユーザーがどちらを押したかによって処理を分岐させることができます。
confirmを使った基本的なYes/No分岐のコード
<button onclick="showConfirm()">確認ダイアログを表示</button>
<script>
function showConfirm() {
// 確認ダイアログを表示し、結果を変数resultに代入
const result = confirm("本当にデータを削除しますか？");
// 戻り値を使って条件分岐
if (result) {
// 「OK」が押された時の処理
console.log("削除を実行しました");
} else {
// 「キャンセル」が押された時の処理
console.log("キャンセルされました");
}
}
</script>
confirm() メソッドは、引数に指定したメッセージを含むダイアログを表示します。ユーザーが「OK」ボタンをクリックすると
true が、「キャンセル」ボタンをクリックすると false が返されます。if (result) { ... } という条件式を書くことで、「OK（Yes）」が選ばれた時だけ特定の処理を実行し、「キャンセル（No）」が選ばれた時は何もしない、あるいは別の処理を行うといった制御が可能になります。注意点：標準機能ではボタン名を「はい / いいえ」に変更できない
ここで一つ、多くの開発者が直面する壁があります。
それは、「ボタンの文字を『OK / キャンセル』から『はい / いいえ』や『Yes / No』に変更したい」と思っても、JavaScriptの標準機能では変更できないという点です。
confirm() で表示されるボタンのラベルはブラウザやOSの言語設定に依存しており、プログラム側からカスタマイズすることはできません。
日本語環境であれば「OK / キャンセル」と表示されるのが一般的です。
もし、どうしても「はい / いいえ」というボタン名にしたい場合や、デザインをサイトに合わせたい場合は、標準のダイアログを使わずに自作する必要があります。
【推奨】dialogタグを使って「はい/いいえ」ボタンを自作する
現在、ボタンの文字やデザインを自由にカスタマイズしたい場合に最も推奨されるのが、HTML5の <dialog> タグ を使った実装です。
外部ライブラリを使わずに、HTMLとCSS、そして少量のJavaScriptだけで、完全にオリジナルの確認ダイアログを作成できます。
dialogタグを使った「はい/いいえ」ダイアログの実装例
<!-- ダイアログの定義 -->
<dialog id="yesNoDialog">
<h3>確認</h3>
<p>本当に送信してよろしいですか？</p>
<div class="dialog-buttons">
<!-- 好きな文字でボタンを作成可能 -->
<button class="btn-yes" onclick="handleYes()">はい</button>
<button class="btn-no" onclick="handleNo()">いいえ</button>
</div>
</dialog>
<button onclick="openCustomDialog()">自作ダイアログを表示</button>
<script>
const dialog = document.getElementById('yesNoDialog');
// ダイアログを開く関数
function openCustomDialog() {
dialog.showModal();
}
// 「はい」が押された時の処理
function handleYes() {
console.log("処理を実行します");
dialog.close(); // ダイアログを閉じる
}
// 「いいえ」が押された時の処理
function handleNo() {
console.log("キャンセルしました");
dialog.close(); // ダイアログを閉じる
}
</script>
<style>
/* CSSで自由にデザイン可能 */
dialog {
border: none;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
text-align: center;
}
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
.dialog-buttons {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 20px;
}
</style>
<dialog> 要素の中に、任意のテキストやボタンを配置します。showModal() メソッドを使ってダイアログを表示し、各ボタンがクリックされたら close() メソッドでダイアログを閉じる処理を行います。confirm() と違って処理を一時停止（ブロック）しないため、非同期処理などと組み合わせやすいのも大きなメリットです。フォーム送信時の確認（submit）に応用する
実務で最も多いのが、「送信ボタンを押した時に確認ダイアログを出し、キャンセルなら送信を中止する」というパターンです。
これは標準の confirm() を使うと非常に簡単に実装できます。
onsubmitイベントでの制御
<form action="send.php" method="post" onsubmit="return confirmSubmit()">
<input type="text" name="username" required>
<button type="submit">送信する</button>
</form>
<script>
function confirmSubmit() {
// confirmの結果（true/false）をそのまま返す
return confirm("この内容で送信してよろしいですか？");
}
</script>
<form> タグの onsubmit 属性に、確認用の関数を指定します。return confirmSubmit() と記述している点です。confirm() の結果を return することで、ユーザーが「キャンセル」を選んだ場合に false が返されます。フォームの送信イベントに対して
false が返されると、ブラウザは送信処理を中断（キャンセル）します。JavaScriptのスキルを活かして年収を上げる方法
以上、JavaScript標準の confirm() メソッドを使った基本的な実装方法などについて詳しく解説してきました。
| 年収アップにこだわりたい方 （平均アップ額138万円の実績） | テックゴー |
| 未経験・経験者問わず幅広く探したい方 | ユニゾンキャリア |
| 業界に精通した担当者に相談したい方 | キッカケエージェント |
| ゲーム業界への転職を志望する方 | ファミキャリ |
| エンジニア未経験からキャリアを築く方 | イーチキャリア |
