コンテンツにスキップ

005. RESTとの親和性（Affinity with REST）

原理：Webの「共通言語」を正しく使う

「REST」はただのURLの流行りではない

Web開発を始めると必ず耳にする「REST（レスト）」という言葉。多くの人が「/users/1 のような綺麗なURLを作ること」だと思い込んでいますが、本来の意味はもっと深く、Web全体を効率よく動かすための「お作法（アーキテクチャ）」を指します。

RESTの最も重要な教えの一つに、「操作（動詞）」と「対象（名詞）」を明確に分け、HTTPの仕組みをそのまま使うというものがあります。 具体的には： - GET: 情報を「見る」 - POST: 情報を「作る」 - PUT: 情報を「丸ごと更新する」 - PATCH: 情報を「部分的に直す」 - DELETE: 情報を「消す」 という、ブラウザとサーバーが共通して持っている「合言葉」をフル活用することです。

HTMLが忘れてしまった「合言葉」

しかし、驚くべきことに、標準のHTML（HTMXを使わない場合）は、この合言葉の半分も使えません。 リンク（aタグ）は「GET」しかできず、フォーム（formタグ）は「GET」と「POST」しかできません。つまり、HTMLだけでは「削除」や「更新（PUT/PATCH）」といった標準的な操作が直接表現できないのです。 その結果、開発者は仕方なくJavaScriptを書いて擬似的にこれらの命令を送るか、あるいはすべてPOSTだけで済ませるという「お作法無視」の状態に陥っています。

HTMXの真骨頂は、HTMLの全要素に、この「全ての合言葉」を扱える能力を与えることにあります。これにより、Webの理想的な設計図（REST）と、実際のコード（HTML）が、本来あるべき形でピッタリと重なり合うのです。

実践：全ての要素で「HTTPメソッド」を使いこなす

1. 「削除」をHTMLだけで実現する

通常はJSが必須となる削除処理も、HTMXなら属性一つです。

<!-- DELETEメソッドをそのまま使う -->
<button hx-delete="/api/items/123" 
        hx-confirm="この項目を削除しますか？"
        hx-target="closest tr" 
        hx-swap="outerHTML swap:1s">
    削除
</button>
ここでは、「削除命令（DELETE）」を送り、成功したら「その要素（一番近いtrタグ）を消す」という一連のREST的な動作を、JSを一行も書かずに完結させています。

2. 「更新」を直感的に表現する

プロフィールの部分更新なども、PUTやPATCHを使って美しく書けます。

<div id="username-display">
    <p>現在の名前：田中太郎</p>
    <button hx-get="/user/edit" hx-target="#username-display">変更する</button>
</div>

<!-- サーバーから返ってくる「編集用パーツ」 -->
<form hx-put="/user/update" hx-target="#username-display">
    <input type="text" name="name" value="田中太郎">
    <button type="submit">保存</button>
</form>
名詞（/user）に対して、動詞（PUT）で上書きを指示する。これこそがRESTの王道です。

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

  1. 動詞の指定: hx-get, hx-post, hx-put, hx-patch, hx-delete の中から、やりたい操作に最適なものを選びます。
  2. 名詞の指定: 通信先となるURL（リソース）を指定します。
  3. 対話の完結: サーバーは、その操作の結果に基づいた「新しいHTML（最新の状態）」を返します。

この流れにより、あなたのアプリはWebの通信ルールそのものをエンジンのように使って、力強く動き始めます。

比較：JSでの「無理やりな通信」 vs HTMXの「自然な通信」

従来の「JS + hidden input方式」

削除や更新をするために、見えないフォーム（hidden）を作ったり、JSで method: 'DELETE' と指定して fetch を呼んだりします。 

// DELETEを送るためのJSマジック
fetch('/items/1', { method: 'DELETE' })
  .then(() => document.getElementById('item-1').remove());
これでは、HTML側を見ても「何が起きるか」が伝わりづらく、JSとHTMLの二箇所を管理する手間が発生します。

HTMXの「REST直結方式」

<button hx-delete="/items/1">削除</button>
これ以上ないほどシンプルです。HTML自体がWebのお作法（REST）の言葉を喋っているようなものです。

まとめ：初心者のための「Webのお作法」重視の設計

「RESTとの親和性」を大切にすることは、単なるこだわりではありません。それは、「Webという強固な仕組みに、アプリケーションを正しく乗せる」ということです。

  • 5つの動詞を使いこなす: 見る(GET)、送る(POST)、上書き(PUT)、手直し(PATCH)、消す(DELETE)。これを意識するだけで設計が綺麗になります。
  • URLは名詞にする: 操作（/delete-user）ではなく、対象（/user/1）をURLにし、操作はHTMXの属性で表現しましょう。
  • 標準に従う強み: Webの標準に沿って作られたアプリは、将来の技術変更にも強く、他人にとっても理解しやすいものになります。

Webの基本ルールに忠実であること。それが、最も高度で効率的な開発を可能にします。次の記事では、これらの操作を「手順」ではなく「宣言」として記述する考え方（006. 宣言的UI操作）について、さらに掘り下げていきます。