091. hx-confirm（実行前の確認：取り返しのつかないミスを防ぐ）

原理：ユーザーに「一呼吸」置かせる

「うっかり」を技術でカバーする

Webアプリを使っていると、つい押し間違えてしまうことがあります。「重要なメールを消してしまった！」「まだ書きかけなのに公開ボタンを押してしまった！」こうした悲劇を防ぐための最もシンプルで強力な方法が、実行前の「確認（コンファーム）」です。

HTMXの hx-confirm 属性を使うと、JavaScriptを一行も書くことなく、「ボタンを押した直後に確認ダイアログを出し、ユーザーが『OK』と言ったときだけ通信を始める」という安全装置を組み込むことができます。

実践：安全な「削除」と「更新」を実現する

1. 削除前の確認

ゴミ箱ボタンを押したとき、即座に消すのではなく「本当にいいですか？」と尋ねる例です。

<!-- 
  hx-confirm: 
  表示したいメッセージを書きます。
  ユーザーが「キャンセル」を押せば、hx-delete は実行されません。
-->
<button hx-delete="/account" 
        hx-confirm="本当にアカウントを削除しますか？この操作は取り消せません。">
    アカウント削除
</button>

2. ブラウザ標準の機能を活用

hx-confirm は、ブラウザが標準で備えている confirm() という機能を呼び出します。見た目はOSやブラウザによって異なりますが、追加のライブラリやCSSなしで「確実に動く」のが最大のメリットです。

3. ステップ・バイ・ステップ解説

「危ない」ボタンを探す: 削除、リセット、大量送信など、やり直しがきかないアクションを見つけます。
属性の追記: hx-confirm="質問文" と書き足します。
動作の確認: ボタンを押して、ダイアログが出るか、キャンセルした時に通信が止まるかを確認します。

比較：JSによる confirmation vs hx-confirm

手動 JavaScript (jQueryなど)

$('button').click(function() {
  if (confirm('いいですか？')) {
    $.post('/api', ...);
  }
});

「もしOKなら通信する」というロジックを自分で書く必要があります。

HTMX (hx-confirm)

<button hx-post="/api" hx-confirm="いいですか？">実行</button>

ロジックはHTMXが隠し持っています。あなたはただ「質問文」を渡すだけです。

まとめ：初心者のための「信頼」の作り方

hx-confirm は、あなたのWebサイトに「誠実さ」と「慎重さ」を与えます。

ユーザーを不安にさせない: 重要なボタンに確認が入っているだけで、ユーザーは安心してアプリを触ることができます。
後戻りできない操作のサイン: 「確認が出る」ということは、それだけ重要な操作であるということをユーザーに分からせる効果もあります。
スイートスポット: 全てのボタンに付けると、今度は「しつこい」と思われてしまいます。本当に重要な場面（データの破壊を伴うものなど）に絞って使いましょう。

一歩止まって、確認する。hx-confirm という安全装置をそっと添えて、ユーザーがどんな時でも安心して操作できる、優しさに満ちたWebアプリを作り上げてください。次の記事では、確認だけでなく「一言」を添えてもらう「hx-prompt」（092. hx-prompt）をご紹介します。