JavaScriptで作る削除確認ダイアログ完全ガイド

2025年7月15日

•

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 を中心に、プログラミング教育に情熱を注いでいます。初心者が楽しく学べる環境作りを目指しています。

著者の詳細を見る →

カテゴリ:

JavaScript

← 記事一覧に戻る

JavaScriptで作る削除確認ダイアログ完全ガイド

2025年7月15日

•

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();
    }
});

よくある質問と解決策

古いブラウザで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要素を使った本格的な実装まで紹介しました。用途に応じて適切な方法を選ぶことが大切です。

今回の内容を参考に、ユーザーに優しい確認機能を実装してみてください。

共有:

著者について

とまだ

フルスタックエンジニア

Learning Next の創設者。Ruby on Rails と React を中心に、プログラミング教育に情熱を注いでいます。初心者が楽しく学べる環境作りを目指しています。

著者の詳細を見る →

カテゴリ:

JavaScript

← 記事一覧に戻る

JavaScriptで作る削除確認ダイアログ完全ガイド

確認ダイアログとは？

なぜ確認ダイアログが必要なのか

JavaScriptで実装できる3つの方法

alert - シンプルな通知

confirm - はい/いいえの選択

dialog要素 - カスタマイズ自由

実践！美しい削除確認ダイアログを作る

HTML構造の作成

JavaScriptで動作を実装

よくある質問と解決策

古いブラウザでdialog要素が使えない場合

ダイアログが表示されない問題

スマートフォンでの表示対応

アニメーションで印象を向上

まとめ

著者について

とまだ

📚関連記事

JavaScript子要素取得の5つの方法と使い分け完全ガイド

【5分でわかる】JavaScriptのローカルストレージ入門 - ブラウザにデータを保存する仕組み

JavaScriptのAPI呼び出しで絶対につまずく3つのポイントを解説します

JavaScriptで作る削除確認ダイアログ完全ガイド

確認ダイアログとは？

なぜ確認ダイアログが必要なのか

JavaScriptで実装できる3つの方法

alert - シンプルな通知

confirm - はい/いいえの選択

dialog要素 - カスタマイズ自由

実践！美しい削除確認ダイアログを作る

HTML構造の作成

JavaScriptで動作を実装

よくある質問と解決策

古いブラウザでdialog要素が使えない場合

ダイアログが表示されない問題

スマートフォンでの表示対応

アニメーションで印象を向上

まとめ

著者について

とまだ

📚関連記事

JavaScript子要素取得の5つの方法と使い分け完全ガイド

【5分でわかる】JavaScriptのローカルストレージ入門 - ブラウザにデータを保存する仕組み

JavaScriptのAPI呼び出しで絶対につまずく3つのポイントを解説します