過去バージョン

3 つのネイティブダイアログ

// 1. alert: 通知 (OK ボタンのみ)
alert('保存しました');
// 戻り値: undefined

// 2. confirm: 確認 (OK / Cancel)
const ok = confirm('削除してよろしいですか？');
if (ok) {
    deleteItem();
} else {
    console.log('キャンセルされた');
}
// 戻り値: true (OK) or false (Cancel / Esc / ×)

// 3. prompt: 入力
const name = prompt('お名前を入力してください', '匿名');
if (name !== null) {
    console.log('入力された:', name);
} else {
    console.log('キャンセル');
}
// 戻り値: 入力文字列 or null

典型的な使い方（削除確認）

    削除



削除

ネイティブダイアログの問題点

HTML

要素 (推奨)

HTML5 で標準化されたネイティブダイアログ。Promise ベースで非同期処理しやすい:

    

        
本当に削除しますか？
        
            キャンセル
            OK
        
    


削除

SweetAlert2 (人気ライブラリ)

React でのカスタムモーダル

import { useState } from 'react';

function ConfirmModal({ open, message, onConfirm, onCancel }) {
    if (!open) return null;
    return (
        

            

                
{message}
                OK
                Cancel
            
        
    );
}

function DeleteButton() {
    const [open, setOpen] = useState(false);
    return (
        <>
             setOpen(true)}>削除
             { doDelete(); setOpen(false); }}
                onCancel={() => setOpen(false)}
            />
        
    );
}

Vue.js でのカスタムモーダル

アクセシビリティ (a11y) 配慮

• カスタムモーダルには role="dialog" + aria-modal="true"
• キーボードでフォーカストラップ (Tab が外に出ないように)
• Esc キーで閉じられるように
• 背景に aria-hidden="true" をかけて読み上げ阻止
• ネイティブ
  はこれら全部自動でやってくれる

選択指針

FAQ

Q: confirm() で「キャンセル」を Esc キーで返せる？
A: 多くのブラウザで Esc は Cancel (false) 扱い。× ボタンも同じく false。

Q: