htmx を整える。

そもそも htmx とは

JavaScript をほとんど書かず、HTML の属性だけで画面の一部を入れ替える道具。

どこで・どんな場面で使うか

• 検索・絞り込みの部分更新

  入力に合わせて、一覧の部分だけを書き換える画面を、少ないコードで作れます。

• フォーム送信後の結果表示

  ページ全体を読み込み直さずに、送信結果や入力エラーをその場に表示できます。

• もっと見る・無限スクロール

  続きの一覧を、あとから読み込んで末尾に足していく動きに使われます。

• 既存のサーバー側アプリに動きを足す

  Django や Rails などで作った画面に、大きな作り直しなしで少しずつ動きを足したいときに向きます。

• 管理画面・社内ツール

  画面の動きは必要だが、フロントエンドを別に作り込みたくない場面で選ばれます。

向いている場面・向いていない場面

• 向いている：サーバー側で HTML を作る構成の画面に、ちょっとした動きを足したいとき。
• 向いている：フロントエンド専用の仕組みを持たず、画面とサーバーのコードを近い場所に置きたいとき。
• 注意：画面の状態が複雑に絡み合うアプリや、オフラインでも動かしたい画面には、ブラウザ側で状態を管理する道具のほうが合います。

上のプレイグラウンドで、属性を書き換えて、ボタンを押したときに画面のどこが差し替わるかを試してみてください。

理由

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 そのものが決めます。

向き不向き

向いている場面／向かない場面

比較

React・Vue との違い（事実だけ）

どちらが優れているかではなく、責任の置き場所が違います。

説明

このページについて

ここで動くのは本物の htmx（2.0.4）です。サーバーの代わりに、htmx を読み込む前に window.XMLHttpRequest を差し替えたモックが、「サーバー応答」欄の JSON を読んで返答します。

ルート表に無いパスを叩くと 404 Not Found（見つかりません）、ルート表の JSON が壊れていると 500 Internal Server Error（サーバ内部エラー） が返ります。番号の意味はHTTPステータスコードを整えるで引けます（番号をクリックしても飛べます）。

🌐 ライブラリは cdn.jsdelivr.net から読み込みます。書いたコードと実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。 プレビューはサンドボックス化した iframe で、このページや端末のデータには触れません。