【JavaScript入門】削除確認ダイアログの作り方｜confirmの基本からカスタムUIまで初心者向けに解説

JavaScript の confirm() は、削除操作の前にユーザーへ最終確認を行うための標準ダイアログです。
この記事では、confirm を使った基本的な削除確認から、実務で使われるカスタム削除ダイアログまで分かりやすく解説します。

削除確認ダイアログは confirm の代表的な使いどころ

JavaScript の confirm は、
「本当に削除しても良いか？」という最終確認を行うために最もよく使われるダイアログです。

削除は取り消しが難しい操作のため、
ユーザーに意図を確認する UI が必須になります。

confirm を使った削除確認の基本

最もシンプルな削除確認は以下のように書けます。

const result = confirm("本当に削除しますか？");

if (result) {
  console.log("削除しました");
} else {
  console.log("キャンセルしました");
}

confirm の戻り値は以下の通りです。

• OK → true
• キャンセル → false

ボタンと組み合わせた削除確認の実例

実際の削除ボタンと組み合わせると、以下のようになります。

document.getElementById("deleteBtn").addEventListener("click", () => {
  if (confirm("本当に削除しますか？")) {
    // 削除処理
    console.log("削除しました");
  }
});

このように、confirm は削除処理と非常に相性が良い機能です。

実務では confirm が避けられることもある

confirm は便利ですが、実務では以下の理由で避けられることがあります。

• デザインを変更できない
• 画面を完全にブロックする
• スマホで挙動が不安定なことがある

そのため、実務では カスタム削除ダイアログ（モーダル） が使われることが多いです。

カスタム削除ダイアログ（モーダル）の例

以下は HTML と CSS で作る簡単な削除確認モーダルの例です。

<div id="modal" class="modal">
  <div class="modal-content">
    <p>本当に削除しますか？</p>
    <button id="okBtn">削除する</button>
    <button id="cancelBtn">キャンセル</button>
  </div>
</div>

モーダルを使うことで、
デザインの統一・操作性の向上・スマホ対応 が可能になります。

まとめ

confirm は削除確認ダイアログとして最も手軽に使える機能です。
ただし、実務では UX の観点からカスタムモーダルが使われることも多いため、
用途に応じて使い分けることが大切です。

まずは confirm の基本を理解し、
必要に応じてカスタムUIへステップアップしていきましょう。