049. JSON Request（JSON形式の送信：モダンなAPIとの共通言語）

原理：構造化された「スマートな対話」

JSONとは何か？

これまでに紹介した「クエリパラメータ」や「フォームデータ」は、Webの黎明期からある非常にシンプルなデータ形式でした。しかし、今のプログラミングの世界で最も標準的に使われている「共通言語」は、JSON（ジェイソン：JavaScript Object Notation）です。

JSONは、データを { "name": "tanaka", "age": 20, "hobbies": ["cooking", "hiking"] } のように括弧で囲んで表現します。 - データの種類（文字列、数字、配列など）がハッキリしている。 - 枝分かれ（階層構造）を表現できる。 - コンピュータにとっても人間にとっても読みやすい。というメリットがあり、現代の多くのWebサービス（API）は、このJSON形式でやり取りすることを前提に作られています。

HTMXとJSONの距離感

HTMXは、基本的には「HTMLをやり取りする」ツールです。そのため、標準ではデータを「フォームデータ形式」で送ろうとします。しかし、あなたが連携したいサーバー（API）が「JSONで送ってくれないと受け取らないよ！」という頑固な仕様である場合もあります。

そんなとき、HTMXは拡張機能（Extensions）を使うことで、「いつものHTML属性を使いつつ、送信する瞬間だけデータをJSONにパッキングし直す」という器用な芸当ができるようになります。

実践：HTMXからJSONでデータを飛ばす

1. JSONエンコーディング拡張の導入

HTMXでJSONを送るには、json-enc という公式の「プラグイン」を一行読み込むのが最も簡単な近道です。

<!-- 1. 拡張機能を読み込む -->
<script src="https://unpkg.com/htmx.org/dist/ext/json-enc.js"></script>

<body hx-ext="json-enc"> <!-- 2. JSON配送モードを有効にする -->

    <form hx-post="/api/modern-service">
        <input type="text" name="title" value="Hello">
        <input type="number" name="count" value="101">

        <!-- 
          通常なら title=Hello&count=101 と送られるところが、
          { "title": "Hello", "count": 101 } というJSONになって送信されます！
        -->
        <button type="submit">モダンなAPIに送信</button>
    </form>

</body>

2. なぜJSONに変えるのか？（ユースケース）

外部サービスとの連携: FirebaseやAWSLambdaといった、JSONを主食とするクラウドサービスに直接データを送りたいとき。
複雑なデータ: 入力した内容がリスト（配列）状になっていたり、深い階層を持っているとき。

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

サーバーの要求を確認: サーバー側の担当者に「データはどんな形式で送ればいい？」と聞き、もし「JSON（application/json）」と言われたらこの手法を使います。
拡張機能の有効化: hx-ext="json-enc" を、送信したい要素またはその親に書きます。
注意: HTMXは「HTMLを受け取ること」が目的です。JSONを送ることはできますが、サーバーからは「更新用のHTMLパーツ」を返してもらうように設計してください。

比較：フォームデータ vs JSON

フォームデータ（標準）

見た目: key=value&key2=value2
相性: HTMLそのもの、サーバーサイドの古いプログラム。
手軽さ: 設定不要で、どこでも動く。

JSON（拡張）

見た目: { "key": "value", "key2": 123 }
相性: JavaScript、スマホアプリのバックエンド、モダンなAPI。
表現力: 数字や真偽値（true/false）、入れ子構造を正確に伝えられる。

まとめ：初心者のための「デジタル翻訳」

JSONリクエストは、HTMXという「HTMLの騎士」が、JSONという「APIの魔法使い」とスムーズに会話するための翻訳機です。

無理にJSONにしない: 自分が作っているサーバーが、普通のフォームデータを受け取れるのであれば、あえてJSONにする必要はありません。標準のまま（フォームデータ）で進めるのが最もHTMXらしいやり方です。
「型」を意識する: JSONにすると、サーバー側で「これは文字列ではなく、ちゃんと『数字』として届いたな」と判断しやすくなり、プログラムのミスが減ります。
拡張の力を借りる: HTMX単体でできないことも、今回のような拡張機能（Extensions）をサッと読み込むだけで解決できる、という柔軟性を覚えておきましょう。

相手に合わせて、言葉（形式）を選ぶ。hx-ext="json-enc" を味方につけて、どんなにモダンなAPIであっても物怖じせずに、あなたのHTMLから直接データを届けてください。次の記事では、通信の「封筒の表書き」について詳しく探る「リクエストヘッダー（050. Request Headers）」をご紹介します。