017. hx-post（POSTリクエストによるデータ送信・作成）

原理：Webの「アクション」を加速させる

POSTリクエストの使命

「POST（ポスト）」は、GETとは対照的に、サーバーに対して何らかの「変化」を求めるための通信です。郵便ポスト（POST）に手紙を投げ入れるように、あなたの持っている情報や意思をサーバーという強力なエンジンに届け、「新しいものを作ってほしい」「この処理を実行してほしい」と依頼します。

RESTのルールにおいて、POSTは以下の場面で使われます： - 新規作成: 新しいユーザーの登録、ブログ記事の投稿、コメントの書き込み。 - 重大な処理: 決済の実行、メールの送信、データの複雑な計算。 GETが「安全な読み取り」であるのに対し、POSTは「影響を与えるアクション」です。ボタンを押すたびに世界が少しだけ書き換わる、そんな力強い操作を担当します。

フォームの呪縛からの解放

これまでのHTMLでは、POSTリクエストを送るには <form> タグが絶対的な主役でした。送信ボタン（submit）を押し、ページ全体がリロードされるのを待つ。これがWebの伝統的な「投稿」の形でした。

HTMXの hx-post 属性は、この伝統に革命を起こします。ボタン一つ、チェックボックス一つ、あるいはドラッグ＆ドロップなどのイベント一つから、ダイレクトにPOSTリクエストを発火させることができます。しかも、ページのリロードを伴わずに、です。「いいね！ボタンを押した瞬間に、裏でカウントが増え、ボタンの見た目が変わる」。そんな、従来は複雑なJavaScriptが必須だった「リアクティブな操作」が、HTML属性一つで可能になります。

実践：リロードなしで「変化」を引き起こす

1. 「いいね！」ボタンの実装

クリック一つでサーバーのデータを書き換え、その結果（最新のカウント数）を表示する例です。

<!-- like-button.html -->
<div id="like-container">
    <button hx-post="/api/items/123/like" 
            hx-target="#like-container" 
            hx-swap="outerHTML">
        ❤ いいね！ (15)
    </button>
</div>

このボタンを押すと、HTMXは /api/items/123/like へ「いいねを1件増やして」とPOSTリクエストを投げます。サーバーはDBを更新し、<button ...>❤ いいね！ (16)</button> という「新しい自分」のHTMLを返します。画面はリロードされず、ボタンの数字だけが瞬時に書き換わります。

2. 検索バーの動的送信（インクリメンタル検索）

フォームを使わず、入力の旅にPOSTを送る高度な例も hx-post なら数行です。

<input type="text" name="q" placeholder="検索ワード..."
       hx-post="/api/search" 
       hx-trigger="keyup delay:500ms changed" 
       hx-target="#search-results">

<div id="search-results">
    <!-- ここに検索結果のリストが流し込まれる -->
</div>

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

意図の明確化: 「これはサーバーに変化を与える操作だ」と確信した時に、hx-get ではなく hx-post を選びます。
データの同封: ボタンが <form> の中にある場合、HTMXは自動的に入力欄の内容を同封して送ります。フォーム外なら hx-vals 属性などでデータを付け足すことができます。
副作用の管理: サーバー側で処理が完了したら、必ず「その後の見た目」をHTMLとして返します。成功メッセージでも、更新後のリストでも構いません。

比較：通常のForm送信 vs hx-post

標準のForm送信

動作: 送信後、ブラウザは次のURLへ移動しようとします。サーバー側はリダイレクト（別のページへ飛ばす処理）をしなければなりません。
課題: 画面が一度消え、全てが再描画されます。一瞬のチラつきがユーザーの没入感を妨げます。

HTMXの hx-post

動作: 通信は裏で行われ、ユーザーは今のページに留まったままです。
利点: 「送信して、待って、画面が変わる」という3ステップが、一続きの流れるような体験（UX）に昇華されます。特にスマホアプリのようなサクサク感を出すには不可欠な属性です。

まとめ：初心者のための「行動」の自覚

hx-post を使うことは、Webサイトを「動くアプリケーション」へと進化させることです。

副作用を恐れない: 何かを変えるときには自信を持って hx-post を使いましょう。
結果を丁寧に返す: ユーザーがボタンを押したとき、サーバーは「確かに承ったよ」という証（HTML）を必ず返してあげてください。
セキュリティの意識: POSTは世界を変える力を持つため、悪用されないように（CSRF対策など）適切にガードすることもセットで覚えましょう。

情報の「受け取り（GET）」から、世界の「書き換え（POST）」へ。この一歩を踏み出すことで、あなたのWeb開発の可能性は無限に広がります。次の記事では、さらに精密な更新を行う「PUT」や「PATCH」といったRESTの高度な動使たち（018. hx-put）の世界へ進んでいきましょう。