105. Confirm/Cancel Logic（確認とキャンのセルの論理：ユーザーに「引き返す勇気」を認める）

原理：一度決めたことを、やり直せる安心

完璧な決断などない

「保存」を押した直後に「あ、やっぱり今のなし！」と思ったり、間違えて「削除」を押しそうになったり。ユーザーの心は常に揺れ動いています。優れたUIは、ユーザーを一本道に追い込むのではなく、常に「引き返せる道」を用意しておもてなしをします。

HTMXでこれを実現するには、大きく分けて二つのアプローチがあります。 1. 実行前に止める: 「本当にいいですか？」と聞く（091. hx-confirm）。 2. 実行直後に止める: 数秒間だけ「取り消し」ボタンを出し、その間に押されなければ実行する。

実践：優雅な「取り消し（Undo）」機能の実装

1. 猶予期間（タイマー）付きの削除

削除ボタンを押した瞬間、すぐに消すのではなく「削除しています... (取り消す)」というボタンに切り替える演出です。

<!-- (1. 最初：削除ボタン) -->
<div id="item-panel">
    <button hx-post="/api/request-delete" 
            hx-target="#item-panel">
        削除
    </button>
</div>

<!-- (2. サーバーが返すHTML：取り消し待ち状態) -->
<div id="item-panel" class="pending-delete">
    <span>3秒後に削除します...</span>
    <!-- 
      ここでのポイントは、何もしなければ3秒後にHTMX経由で
      本物の削除リクエストが飛ぶように仕込んでおくことです。
    -->
    <button hx-get="/api/render-original" 
            hx-target="#item-panel">
        取り消し
    </button>

    <!-- 3秒後に自動実行される「爆弾」 -->
    <div hx-delete="/api/permanent-delete" 
         hx-trigger="load delay:3s" 
         hx-target="#item-panel"></div>
</div>

2. モーダルダイアログによる確認

標準の confirm() ではなく、画面上に綺麗にデザインされたダイアログを出して「はい/いいえ」を選ばせる、本格的なキャンセルの流れです。

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

「待機状態」の設計: ボタンを押したあと、すぐに結果を出さず、「確認中」の画面をサーバーから返します。
キャンセルルート: その確認画面には、元の状態に戻すための hx-get ボタンなどを置きます。
期限切れの自動実行: hx-trigger="load delay:5s" などを使って、時間が経ったら自動で次の（本当の）アクションへ進むようにします。

比較：hx-confirm vs 自作キャンセルロジック

hx-confirm (標準)

手軽さ: 最高。
デザイン: ブラウザ依存（味気ない）。
タイミング: 実行前のみ。

自作キャンセルロジック (今回)

手軽さ: 少し大変。
デザイン: 自由自在で美しい！
タイミング: 実行中、あるいは実行後の数秒間（Undo）など。

まとめ：初心者のための「自由」の設計

確認とキャンセルの論理を正しく実装することは、あなたのWebアプリに対する「信頼感」を決定づけます。

「元に戻せる」は最強の機能: ユーザーにとって、一番の恐怖は「取り返しのつかないミス」です。それを技術で救ってあげる。これ以上のUXはありません。
ユーザーを急かさない: 「5秒で削除します」という猶予は、ユーザーに心の余裕を与えます。
見た目の一貫性: キャンセルボタンは、実行ボタンとは違う色（例えばグレー）にしたり、控えめな場所に置いたりして、誤操作を防ぐ工夫も大切です。

迷いを受け入れ、やり直しを許す。Confirm/Cancel のロジックを磨き上げることで、ユーザーがどんなに大胆に操作しても包み込んでくれる、懐の深いWebアプリを完成させてください。次の記事では、操作が終わったあとの「お疲れ様」を伝える「操作後のフィードバック（106. Feedback Loops）」をご紹介します。