【エイチティーエムエックス】
htmx とは？
最終更新:
💡 HTMLに属性を足して、ページの一部を更新
HTMLのhx-getなどの属性でサーバーにリクエストを送り、返されたHTMLでページの一部を更新するJavaScriptライブラリ。画面更新の処理をHTMLの属性で指定できる。
📌 このページのポイント
- htmxは、ページに読み込んで使うJavaScriptライブラリ
- hx-getなどで通信、hx-targetで更新先を指定する
- 通常はサーバーが返すHTMLをページに差し込む
- 画面の複雑さや通信の設計に合わせて採用を考える
ひよこ htmxは、普通のHTMLと何が違うの？
ペンギン先生 ページにhtmxのJavaScriptを読み込むと、hx-getなどの属性でサーバーと通信し、返されたHTMLをページの一部に差し込めるよ。ページ全体を読み直さず、検索結果や一覧だけを更新する使い方ができるんだ。
ひよこ Reactなどとは、何が違うの？
ペンギン先生 ひよこ 更新する場所は、どう決めるの？
ペンギン先生 例えばボタンにhx-get="/items"とhx-target="#items"を書くと、クリックで一覧を取得し、idがitemsの要素へ結果を入れるよ。既定では、その要素の中身を置き換える。末尾への追加にしたいときはhx-swap="beforeend"などで入れ方も指定するんだ。
ひよこ サーバーは、何を返せばよいの？
ペンギン先生 ひよこ どんな画面にも、htmxが向いている？
ペンギン先生 検索・フォーム・一覧の部分更新などでは、HTMLを中心に作れるのが特徴だよ。一方、ブラウザー内で複雑な状態を管理する画面では、別のJavaScriptや他の仕組みを組み合わせることもある。実際の操作と通信回数を確認して選ぼう。
📖 おまけ：英語の意味
「htmx」 ＝ HTMLを拡張するライブラリの名前
💬 HTMLの要素に通信や更新のための属性を足すライブラリだよ。HTML自体の標準機能とは分けて考えよう。