フレームワークを整える
初級htmx を整える。
＝ HTML に属性を足すだけで動く htmx を、サーバーの代わりに JSON で応答するモックで確かめる練習場
サンプルコード（クリックでエディタに挿入）
「サーバー応答」は { "パス": "HTML" } の形の JSON です。キーの先頭に GET␣ / POST␣ を付けるとメソッドを区別できます（無ければ GET）。
「▶ 実行」を押すと、ここに結果が表示されます。
CONSOLE
console.log の出力とエラーがここに出ます。
応答は150ミリ秒ほど待ってから返ります（本物の通信のように、hx-indicator の表示を確認できます）。無限ループなど重い処理を書くと、プレビューが固まることがあります。「■ 停止」でプレビューを作り直せます。
htmx の考え方 — サーバーは「HTML」を返す
React や Vue はサーバーから JSON を受け取り、ブラウザ側でHTMLを組み立てます。htmx はその逆で、サーバー（このページではモック）が最初から完成した HTML の断片を返し、htmx はそれを指定された場所に差し込むだけです。
- ①
hx-get / hx-post — どこへ通信するか
属性1つで通信が発生します。
hx-postを書いたフォームは、送信のたびにページ全体を再読み込みしません。 - ②
hx-trigger — いつ通信するか
既定は要素ごとの自然なイベント（ボタンは click、フォームは submit）ですが、
hx-triggerでload（読み込み時）・every 2s（定期）・keyup changed（値が変わって離れたとき）に変更できます。 - ③
hx-target / hx-swap — どこを・どう差し替えるか
hx-targetが対象の要素、hx-swapが差し替え方（innerHTML／outerHTML／beforeend等）を決めます。JavaScript の DOM 操作を自分で書く必要がありません。 - ④
状態はどこにある？ — サーバー（この練習場ではJSON）
React の useState のような「JavaScript 側の状態」は基本的に持ちません。次に何が表示されるかは、サーバーが返す HTML そのものが決めます。
向いている場面／向かない場面
◎ 向いている場面
- ・サーバー側テンプレート（Django・Rails・PHP 等）で作った既存ページに、部分更新の動きだけを足したいとき
- ・フロントエンドのビルド環境（バンドラ・状態管理）を増やしたくないとき
- ・ページの大部分が静的で、一部だけ非同期に差し替えたいとき
△ 向かない場面
- ・画面側だけで完結する複雑な状態（多段階のフォーム、取り消し可能な編集等）を持ちたいとき
- ・サーバーからの応答が JSON API 前提で、HTML を返す設計に変更しにくいとき
- ・オフラインでも動くアプリなど、通信そのものを減らしたいとき
React・Vue との違い（事実だけ）
どちらが優れているかではなく、責任の置き場所が違います。
| 観点 | htmx | React / Vue |
|---|---|---|
| サーバーが返すもの | HTML の断片 | 多くは JSON（画面の組み立てはブラウザ側） |
| 画面の状態 | サーバー（または現在の DOM）が持つ | JavaScript の変数（useState 等）が持つ |
| 書き方 | 既存の HTML に hx-* 属性を足す | コンポーネント（JSX・SFC 等）を新しく書く |
| ビルド環境 | script タグ1本で使い始められる | 多くはバンドラ（Vite 等）を使う |
このページについて
ここで動くのは本物の htmx（2.0.4）です。サーバーの代わりに、htmx を読み込む前に window.XMLHttpRequest を差し替えたモックが、「サーバー応答」欄の JSON を読んで返答します。
🌐 ライブラリは cdn.jsdelivr.net から読み込みます。書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。
プレビューはサンドボックス化した iframe で、このページや端末のデータには触れません。
このツールについて
htmx は、HTML の属性（hx-get・hx-post 等）だけでサーバーと通信し、返ってきた HTML の断片で画面の一部を差し替える考え方です。ここではサーバーの代わりに、あなたが書いた JSON がその場で「応答」します。
HTML の属性（hx-get・hx-post など）だけでサーバー通信の動きを体験できる練習場。サーバーの代わりに自分で書いた JSON が応答します。
主な機能
- 4課題（hx-get／hx-post とフォーム／hx-trigger／hx-target と hx-swap）
- サーバー不要。「サーバー応答」欄の JSON を読むモックが応答（POST の項目をプレースホルダで差し込める）
- HTML・サーバー応答・CSS の3タブとプレビュー
- htmx.org 2.0.4 を配信元から読み込み・送信ゼロ
よくある質問
Q. htmx はサーバーが無くても動きますか？
A. このページでは、サーバーの代わりに「サーバー応答」欄に書いた JSON（パス→HTML）を読むモックが応答します。実際のアプリでは、サーバー側（Django・Rails・PHP など）が HTML の断片を返します。
Q. サーバー応答の JSON はどう書けばいいですか？
A. { "パス": "HTML" } の形が基本です。GET 以外を区別するときはキーの先頭に "POST " のようにメソッド名を付けます。POST の本文（フォームの各項目）は、項目名を二重の波括弧で囲んだプレースホルダ（name など）で応答に差し込めます。
Q. React や Vue と何が違いますか？
A. React や Vue は多くの場合サーバーから JSON を受け取り、ブラウザ側で HTML を組み立てます。htmx は逆に、サーバーが完成した HTML の断片を返し、htmx はそれを指定した場所に差し込みます。JavaScript の状態管理は基本的に持ちません。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
