JavaScriptで作る削除確認ダイアログ完全ガイド
こんにちは、とまだです。
今回は現役のエンジニア、そして元プログラミングスクール講師としての経験から、JavaScriptで確認ダイアログを実装する方法について解説します。
確認ダイアログとは？
確認ダイアログは、重要な操作の前に表示される確認画面のことです。
簡単に言うと、自動販売機の確認ボタンのような仕組みです。 商品を選んでも、もう一度ボタンを押さないと購入できませんよね。 この二段階の手順があることで、誤操作を防げるのです。
Webサイトでも同じ考え方で、ユーザーを守る仕組みが作れます。
なぜ確認ダイアログが必要なのか
データの削除は取り返しがつきません。 だからこそ、操作前の確認が大切になります。
確認ダイアログが特に重要になる場面を見てみましょう。
- ファイルやデータの削除
- フォームの送信
- 購入手続きの確定
- アカウント設定の変更
- 編集中ページから離れる時
これらの場面で一度立ち止まる時間があれば、ミスを大幅に減らせます。
JavaScriptで実装できる3つの方法
JavaScriptには、確認機能を作る方法が3つあります。 それぞれに特徴があるので、用途に応じて使い分けましょう。
alert - シンプルな通知
最も基本的な方法がalertです。
alert("保存が完了しました！");
ユーザーは「OK」ボタンを押すだけの、一方通行の通知です。 処理完了やエラーメッセージの表示に適しています。
confirm - はい/いいえの選択
削除などの重要な操作には、confirmが便利です。
const shouldDelete = confirm("本当にこのファイルを削除しますか？");
if (shouldDelete) {
console.log("削除を実行します");
} else {
console.log("削除をキャンセルしました");
}
ユーザーが「はい」か「いいえ」を選べる二択形式です。 シンプルで実装も簡単なので、多くの場面で活用できます。
dialog要素 - カスタマイズ自由
より高度な確認画面を作りたい場合は、dialog要素を使います。
const dialog = document.getElementById('customDialog');
dialog.showModal();
デザインも動作も自由にカスタマイズできます。 ブランドに合わせた美しい確認画面が作れるのが魅力です。
実践！美しい削除確認ダイアログを作る
それでは、実際に削除確認ダイアログを作ってみましょう。 dialog要素を使って、見た目も機能も充実したものを作ります。
HTML構造の作成
まずは、HTMLで基本的な構造を作ります。
<!DOCTYPE html>
<html>
<head>
<title>削除確認ダイアログ</title>
<style>
dialog {
border: none;
border-radius: 8px;
padding: 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
max-width: 400px;
}
.dialog-content {
padding: 24px;
text-align: center;
}
.dialog-buttons {
display: flex;
gap: 12px;
margin-top: 20px;
justify-content: center;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
min-width: 80px;
}
.btn-danger {
background: #dc3545;
color: white;
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn:hover {
opacity: 0.9;
}
</style>
</head>
<body>
<button id="deleteBtn">アイテムを削除</button>
<dialog id="confirmDialog">
<div class="dialog-content">
<h3>⚠️ 削除の確認</h3>
<p>このアイテムを削除してもよろしいですか？<br>
この操作は取り消すことができません。</p>
<div class="dialog-buttons">
<button class="btn btn-danger" id="confirmBtn">削除する</button>
<button class="btn btn-secondary" id="cancelBtn">キャンセル</button>
</div>
</div>
</dialog>
</body>
</html>
このHTMLでは、削除ボタンとダイアログ要素を定義しています。 CSSで見た目を整えることで、プロフェッショナルな印象になります。
JavaScriptで動作を実装
次に、JavaScriptで実際の動作を実装します。
// 要素の取得
const deleteBtn = document.getElementById('deleteBtn');
const confirmDialog = document.getElementById('confirmDialog');
const confirmBtn = document.getElementById('confirmBtn');
const cancelBtn = document.getElementById('cancelBtn');
// 削除ボタンがクリックされた時
deleteBtn.addEventListener('click', () => {
confirmDialog.showModal();
});
// 確認ボタンがクリックされた時
confirmBtn.addEventListener('click', () => {
// 実際の削除処理
alert('アイテムが削除されました');
confirmDialog.close();
});
// キャンセルボタンがクリックされた時
cancelBtn.addEventListener('click', () => {
confirmDialog.close();
});
// 背景クリックで閉じる
confirmDialog.addEventListener('click', (e) => {
if (e.target === confirmDialog) {
confirmDialog.close();
}
});
// ESCキーで閉じる
confirmDialog.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
confirmDialog.close();
}
});
各ボタンにイベントリスナーを設定して、適切な動作を実装しています。 背景クリックやESCキーでも閉じられるようにすることで、使いやすさが向上します。
よくある質問と解決策
古いブラウザでdialog要素が使えない場合
ブラウザの対応状況を確認して、適切な代替手段を用意しましょう。
if (typeof HTMLDialogElement === 'function') {
// 新しいブラウザ
dialog.showModal();
} else {
// 古いブラウザ
const shouldDelete = confirm('本当に削除しますか？');
if (shouldDelete) {
console.log('削除を実行します');
}
}
この方法なら、どんなブラウザでも確認機能が動作します。
ダイアログが表示されない問題
ページの読み込みが完了してからJavaScriptを実行するようにしましょう。
document.addEventListener('DOMContentLoaded', function() {
const dialog = document.getElementById('myDialog');
if (dialog) {
dialog.showModal();
}
});
DOMContentLoadedイベントを使うことで、確実に要素を取得できます。
スマートフォンでの表示対応
レスポンシブデザインで、スマートフォンでも見やすく調整します。
@media (max-width: 480px) {
dialog {
max-width: 90vw;
margin: auto;
}
.dialog-buttons {
flex-direction: column;
}
.btn {
width: 100%;
margin-bottom: 8px;
}
}
画面幅に応じてレイアウトを変更することで、どんなデバイスでも快適に使えます。
アニメーションで印象を向上
最後に、アニメーションを追加して更に洗練された印象にしましょう。
dialog {
opacity: 0;
transform: scale(0.9);
transition: all 0.2s ease-out;
}
dialog[open] {
opacity: 1;
transform: scale(1);
}
dialog::backdrop {
background: rgba(0, 0, 0, 0.4);
animation: fadeIn 0.2s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
滑らかなアニメーションを追加することで、ユーザー体験が格段に向上します。 ダイアログがふわっと表示されることで、突然の表示による驚きを軽減できます。
まとめ
今回は、JavaScriptで確認ダイアログを実装する方法を解説しました。
基本的なconfirmから始めて、dialog要素を使った本格的な実装まで紹介しました。 用途に応じて適切な方法を選ぶことが大切です。
確認ダイアログは、ユーザーの大切なデータを守る重要な機能です。 適切なタイミングで適切な確認を行うことで、信頼されるWebサイトが作れます。
今回の内容を参考に、ユーザーに優しい確認機能を実装してみてください。
著者について
とまだ
フルスタックエンジニア
Learning Next の創設者。Ruby on Rails と React を中心に、プログラミング教育に情熱を注いでいます。初心者が楽しく学べる環境作りを目指しています。
著者の詳細を見る →