031. hx-confirm（実行前にユーザーへ「確認」を求める）

原理：Webの「やり直し」を減らす優しさ

重大な操作への防波堤

Webブラウザ上でボタンをクリックする。それは一瞬の出来事ですが、その裏で「大切なデータの削除」や「取り消せない決済」が行われることがあります。ユーザーがうっかりマウスを滑らせただけで、一生懸命作ったプロジェクトが消えてしまったら……。それはシステム開発における最大の悲劇の一つです。

これまでのWeb開発では、この「本当にいいですか？」という確認画面（ダイアログ）を出すために、JavaScript（JS）で if (confirm('...')) といったコードを書き、送信を止めるロジックを組む必要がありました。

HTMXの hx-confirm 属性は、この重要な「防波堤」を属性一つで設置できるようにします。これを書くだけで、HTMXは通信を始める前に「ユーザーの意思」を再確認するダイアログを表示し、ユーザーが「OK」を押したときだけ魔法を発動させるようになります。

実践：うっかりミスを防ぐ安全なUI

1. 削除ボタンへの設置

削除という「戻れない操作」に、最も頻繁に使われるパターンです。

<!-- 
  hx-delete: 通信の中身（削除）
  hx-confirm: 通信の前に表示されるメッセージ
-->
<button hx-delete="/api/items/123" hx-confirm="この項目を完全に削除します。よろしいですか？">
    削除する
</button>

2. 設定の変更や一括処理

大きな変更を加える際にも、この属性が安心感を与えます。

<form hx-post="/api/settings/reset" hx-confirm="設定をすべて初期状態に戻します。">
    <button type="submit">設定リセット</button>
</form>

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

リスクの評価: 「このボタンを押した結果、ユーザーが後悔する可能性はあるか？」を考えます。
メッセージの作成: 短く、簡潔に、何が起きるかを伝える文章を hx-confirm の中身に書きます。
動作確認: ブラウザの標準的な（白い小さな）ダイアログが出ることを確認してください。ユーザーが「キャンセル」を押せば、サーバーへの通信は一切行われません。

比較：JSでの確認処理 vs hx-confirm

JavaScriptの場合

const btn = document.querySelector('#delete-btn');
btn.addEventListener('click', (e) => {
    if (!confirm('本当に削除しますか？')) {
        e.preventDefault(); // 通信を止める
    }
});

「HTMLの構造」と「JSの警告ロジック」が離れた場所に書かれるため、ボタンが増えるたびにJSの管理が大変になります。

HTMXの hx-confirm

<button hx-confirm="本当に削除しますか？">

「このボタンには確認が必要だ」という意図が、ボタンそのものの中に埋め込まれています。コードを1ヶ月後に見返しても、その目的が誰にでも分かります。

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

hx-confirm は、あなたのアプリが「ユーザーを大切にしている」ことを示す、最も簡単な証拠です。

メッセージは心を込めて: 単に「いいですか？」と聞くより、「データは戻せません。いいですか？」と具体的に伝える方が、ユーザーへの優しさに溢れています。
あらゆる要素に使える: ボタンだけでなく、リンク（hx-boost 中）やフォームなど、HTMXが動くすべての場所で使えます。
UXの基本: 「間違って押しちゃった！」というユーザーの叫びを、この属性で未然に防ぎましょう。

小さな一言が、大きなトラブルを防ぎます。hx-confirm という防波堤を適切に配置して、ユーザーが安心して操作できるWebアプリを形作ってください。次の記事では、単なる確認だけでなく、ユーザーから「一言」をもらってから通信する hx-prompt（032. hx-prompt）をご紹介します。