htmx
概要
ページにライブラリを読み込み、HTML要素に「hx-」で始まる属性を記述するだけでよい。「hx-get」や「hx-post」などの属性で通信先のURLとHTTPメソッドを指定し、「hx-target」で応答結果を反映する要素、「hx-swap」で置き換え方法を指定する。「hx-trigger」を使えば、クリックや入力といった様々なイベントを通信の契機に設定できる。
一般的な動的Webページではaタグやformタグに限られていた通信の起点を、divタグやbuttonタグなど様々なHTML要素に拡張できる。通信の契機もクリックやフォーム送信に限らず、マウスポインタのホバー動作や入力を停止した瞬間といった多彩なイベントを指定でき、標準のHTMLが持つ通信の仕組みを一段と柔軟にした形といえる。
htmxを利用する場合、Webサーバは通常JSONではなくHTMLの断片を返す。Webブラウザは受け取ったHTML断片を指定した要素にそのまま挿入して表示を更新するため、JSONを受け取ってからJavaScriptで画面を組み立て直す処理が不要になる。この方式により、サーバ側でHTMLを生成して表示を切り替える従来型のWebアプリケーションの設計手法を活かした運用が可能となる。
htmxは独立したライブラリであり、他のライブラリとの依存関係を持たない。既に導入済みのプロジェクトに影響を与えずに組み込みやすく、ファイルサイズも小さいため、パソコンやスマートフォンでのページ読み込み速度への影響も少ない。Ajaxによる部分更新のほか、CSSトランジションやブラウザ履歴の操作にも対応しており、WebSocketやサーバ送信イベント（Server-Sent Events）による通信は拡張機能として用意されている。近年のWeb開発ではJavaScriptの記述量が増える傾向にあるが、htmxはHTMLが本来持つ通信の仕組みを活用する選択肢の一つとして扱われている。
共有ボタンをタップ