044. DELETE（データの削除：不要なものを潔く消し去る）

原理：Webシステムにおける「お掃除」

DELETEリクエストの役割

「DELETE（デリート）」は、HTTPリクエストの中で最も潔い動きをします。その名の通り、サーバー上にある特定のデータ（リソース）を消去するための命令です。

PUTと同様に、DELETEも「等巾（とうきん）性」という性質を持っています。「消してくれ」という命令は、一度成功すれば対象は消滅します。もしネットワークの不調などで同じ命令が二度届いたとしても、対象はすでに消えているため、不整合が起きたりすることはありません。ゴミを捨てた後のゴミ箱をもう一度空にするのと同じで、結果は常に「何もない」という綺麗な状態で維持されます。

HTMLにおける削除の「不自由」を救う

かつては削除ボタン一つ作るのにも、JavaScriptで fetch の method: 'DELETE' を書くか、フォームを無理やり作ってPOSTで送り、サーバー側で「これは削除です」と判断させるような工夫が必要でした。 HTMXの hx-delete は、この「削除」という日常的な行為を、HTML属性一つで完結させます。

実践：画面から不要な要素を「消去」する

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

ゴミ箱アイコンをクリックしたら、その行が画面から消える、最も直感的なパターンです。

<!-- item-row.html -->
<tr id="item-5">
    <td>賞味期限切れの牛乳</td>
    <td>
        <!-- 
          hx-delete: 削除命令を飛ばす
          hx-target: 削除が成功したら、この行(#item-5)をターゲットにする
          hx-swap: ターゲットそのものを消去(outerHTML)する
        -->
        <button hx-delete="/api/inventory/5" 
                hx-target="#item-5" 
                hx-swap="outerHTML"
                hx-confirm="本当に捨ててもよろしいですか？">
            🗑️ 削除
        </button>
    </td>
</tr>

2. アカウントの解約など、重大な削除

画面全体を切り替えるような重大な削除処理も、hx-delete なら堂々と記述できます。

<div class="danger-zone">
    <h3>退会手続き</h3>
    <button hx-delete="/user/me" 
            hx-target="body" 
            hx-confirm="これまでのすべてのデータが消去されます。">
        アカウントを削除する
    </button>
</div>

比較：POST（削除代用） vs DELETE（本物）

POSTによる「削除」

URL: /delete-item/5 （動詞をURLに含める必要がある）
意図: ログを見ただけでは、何かを作ったのか消したのか判別しにくい。
等巾性: サーバーの組み方次第では、二度呼び出すと「対象がない」エラーになるなど、扱いに注意が必要。

HTMXの hx-delete

URL: /inventory/5 （対象物そのものを指す、綺麗なURL）
意図: 「DELETE」と書いてあるので、誰が見ても削除であることが明確。
等巾性: Webの標準ルールに沿っているため、安全に再試行が可能。

まとめ：初心者のための「削除」の美学

DELETEを使うときは、ユーザーの「いらない」という意思を尊重し、安全かつスピーディに処理を完遂させましょう。

確認は必須の優しさ: 一度消したものは戻せません。 hx-confirm（031.確認）は、hx-delete の最高の相棒です。
消えた後の姿を見せる: サーバーでデータが消えても、ブラウザ側の表示が残ったままではユーザーは不安になります。 hx-target と hx-swap を使って、画面からも物理的に消去してあげましょう。
サーバーの応答を最小限に: 削除に成功したとき、サーバーは空のレスポンスを返せば、HTMX側で対象を綺麗に消してくれます。無駄なHTMLを送る必要はありません。

不要を捨て、本質だけを残す。hx-delete という消しゴムを使って、あなたのWebアプリをより洗練された、心地よい空間に磨き上げてください。次の記事では、更新の中でも特に繊細な「部分的な手直し」を行う「PATCH」（045. PATCH）の世界をご紹介します。