コンテンツにスキップ

019. hx-delete（DELETEリクエストによる情報の削除）

原理：Webの「掃除」を安全に、劇的に

DELETEリクエストの潔さ

Webの設計思想（REST）において、最も衝撃的で、かつ最もシンプルな動使が「DELETE（デリート）」です。 その名が示す通り、サーバー上の特定のリソース（データやファイル）を、この世から消し去るための合言葉です。

DELETEには、PUTと同様に「等巾（とうきん）性」という素晴らしい性質があります。 「そのデータを消してくれ」という命令は、一度成功すれば対象は消滅します。もし通信の不安定さで二度同じ命令が届いたとしても、「もう消えている」だけなので、システムが壊れたり変な動作をしたりすることはありません。ゴミを一度捨てた後、もう一度ゴミ箱を確認するのと同じで、結果は常に「ゴミがない」という綺麗な状態で維持されます。

削除ボタンを「魔法」に変える

これまでのHTML開発を思い出してください。何かを消そうとするだけで、どれほどの手間がかかっていたことか。 - 方法1: 小さな <form> を作り、中の隠しフィールドにIDを仕込み、POSTで送信する。 - 方法2: JavaScriptでボタンをクリックした時のイベントを書き、confirm() を出し、fetch で method: 'DELETE' を送り……。

HTMXの hx-delete 属性は、この「削除」という日常的な操作を、たった一行の属性で実現します。 「ボタンを押す」→「サーバーで消える」→「画面からその項目が消える」。 この一連のドラマチックな変化を、JSを一行も書かずに、しかもWebの最も正しいルール（DELETEメソッド）を使って構築できるのです。

実践：要素を消し、画面をスッキリさせる

1. リスト項目をその場で削除する

ToDoリストやメールの一覧から、特定の項目を消す最も代表的なパターンです。

<!-- task-list.html -->
<table>
    <tr id="task-77">
        <td>部屋の掃除</td>
        <td>
            <!-- 
              hx-delete: "/api/tasks/77" に削除命令を送る
              hx-confirm: 誤操作防止の確認ダイアログを出す
              hx-target: 削除が成功したら、この行(tr)をターゲットにする
              hx-swap: ターゲットそのものを「消去(outerHTML)」する
            -->
            <button hx-delete="/api/tasks/77" 
                    hx-confirm="本当に削除しますか？"
                    hx-target="#task-77" 
                    hx-swap="outerHTML swap:500ms">
                削除
            </button>
        </td>
    </tr>
</table>
このボタンを押して確認ダイアログで「OK」を出すと、サーバーにDELETEが飛びます。サーバー側でデータが消え、空のレスポンス（または成功メッセージ）が返ってくると、HTMXがその行を画面からシュッと（CSSアニメーション付きで）消去してくれます。

2. 「退会」や「一括消去」などの重大な処理

より重みのある処理も、hx-delete なら堂々と記述できます。

<div class="danger-zone">
    <h3>アカウントの削除</h3>
    <button hx-delete="/user/me" 
            hx-confirm="これまでのデータが全て失われます。本当によろしいですか？"
            hx-target="body">
        アカウントを完全に消去する
    </button>
</div>

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

  1. 覚悟を決める: 「これは削除だ」と決めたら、迷わず hx-delete を使います。
  2. ターゲットの狙い撃ち: hx-target を忘れないでください。これを指定しないと、削除ボタンそのものが消えるだけで、削除した対象物が画面に残ってしまいます。
  3. アニメーションの追加: hx-swap="outerHTML swap:500ms" のように時間を指定し、CSSで .htmx-swapping クラスに「不透明度を下げる」などの設定をすると、非常に心地よいUXになります。

比較：POSTによる擬似削除 vs hx-deleteによる正攻法

POSTで「削除」を代用する場合

  • 意味の不透明さ: サーバーログを見た時に、新規作成なのか削除なのか区別がつきません。
  • フォームの肥大化: 削除ボタン1つのために、不要な <form> タグを書かなければならず、HTML構造が複雑になります。

HTMXの hx-delete

  • セマンティクス（意味論）の勝利: 「そこにDELETEと書いてあるから、これは削除だ」と、誰が見ても一瞬で分かります。
  • JavaScriptからの解放: 本来はJSを使わなければ送れなかったDELETEメソッドを、HTMLの属性として扱える喜びがあります。
  • UXの向上: 「ページ全体をリロードして、項目が消えたことを確認する」というストレスから、ユーザーを解放します。

まとめ：初心者のための「お掃除」の勇気

hx-delete を使いこなすことは、Webアプリに「潔さ」と「スピード」を与えることです。

  • 確認は必ず入れる: 消したものは戻せません。 hx-confirm は hx-delete の最高の相棒です。
  • 画面の「穴」を埋める: 何かを消したあと、そこが空っぽになって寂しくないか、あるいは「削除しました」という通知を出さなくていいか、ユーザーの気持ちに寄り添いましょう。
  • サーバーの応答を最小限に: 削除が成功したときは、サーバーは空（何もなし）を返せば、HTMXがターゲットを消してくれます。無駄な通信を減らすチャンスです。

不要なものを捨て、本当に大切なものだけを画面に残す。hx-delete という名の消しゴムを手に、あなたのWebアプリをより洗練されたものに磨き上げてください。次の記事では、更新の中でも特に「一部だけ」を修正する、職人のようなテクニック「hx-patch」（020. hx-patch）をご紹介します。