コンテンツにスキップ

042. POST（データの送信：世界に「変化」を起こす第一歩）

原理：「投函」してアクションを引き起こす

POSTリクエストの使命

GETが「読む」ためのものなら、POST（ポスト）は「書く」ためのものです。 名前の通り、郵便ポストに手紙を投げ入れるように、あなたの持っている情報をサーバーへ届け、それによってサーバー側に「何らかの変化（副作用）」を起こしてもらうことが目的です。

POSTにはGETにはない特徴があります： 1. 世界を書き換える: データベースに新しい行を足したり、パスワードを変更したり、決済を実行したりします。 2. 秘密を守る: 送信するデータはURLには表示されず、通信の「中身（ボディ）」に隠されて送られます。パスワードや個人情報を送るのに適しています。 3. 等巾ではない: 同じPOSTを二度送ると、同じ商品が二つ注文されたり、エラーになったりします。「同じことを繰り返すと結果が変わる可能性がある」のがPOSTの性質です。

HTMXにおけるPOSTの革命

これまでのHTMLでは、POSTを送るには大きな <form> タグを作り、ページをリロードして待つ必要がありました。 HTMXの hx-post 属性は、この「変化を起こす力」をボタン一つ、あるいは一つのタグに凝縮します。ページ全体をリロードすることなく、アクションを起こし、その結果だけをスマートに画面に反映させることができます。

実践：サクサク動く「アクション」の実装

1. 「完了」ボタンの一発更新

ToDoリストなどで、チェックを入れた瞬間にサーバーのデータを更新する例です。

<!-- task-item.html -->
<div id="task-101">
    <span>部屋の掃除</span>
    <!-- 
      hx-post: "完了"という状態をサーバーに報告する
      hx-target: 自分の親要素などを新しい表示に更新する
    -->
    <button hx-post="/tasks/101/complete" hx-target="#task-101">
        完了にする
    </button>
</div>

2. フォームの一部分だけを送信

HTMXを使えば、巨大なフォーム全体を送るのではなく、特定の入力が終わった瞬間にそのデータだけをPOSTして、バリデーション（入力チェック）や保存を行うことができます。

<input type="email" name="email"
       hx-post="/api/check-email" 
       hx-trigger="blur" 
       hx-target="#email-error">
<div id="email-error"></div>

比較：GET vs POST（情報の隠し場所）

GETのデータ（Query Parameters）

https://example.com/search?q=banana - 空から見える（URLに表示される）。 - 履歴に残る、共有できる。 - 軽いデータ、検索ワードなどに向いている。

POSTのデータ（Request Body）

  • 地下を通る（URLには見えない）。
  • 履歴に残らない、共有できない。
  • 大量のデータ、ファイル、個人情報、パスワードなどに向いている。

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

POSTを使うとき、あなたはサーバー側の世界に介入しようとしています。

  • 「変化」への自信: 何かを作るとき、消すとき、変えるとき。迷わず hx-post（またはその仲間のPUT/DELETE）を選びましょう。
  • リロード不要の感動: 「ボタンを押す → サーバーが変わる → 画面がチラつかずに結果が出る」という一連の流れが、HTMXにおけるPOSTの醍醐味です。
  • 二重送信に気をつける: POSTは世界を変える力を持つため、連打されないように hx-disabled-elt（034.連打防止）をセットで使うのが、プロのたしなみです。

読むだけの世界から、働きかける世界へ。hx-post という一歩を踏み出すことで、あなたのWebサイトは「道具（アプリ）」としての真価を発揮し始めます。次の記事では、既存の情報を丸ごと置き換える「PUT」（043. PUT）について見ていきましょう。