本記事について
本記事は、2024年1月に社内で実施した勉強会の内容をもとに、外部向けに加筆・再構成したものです。
記載の内容は執筆当時の情報であり、現在の仕様やベストプラクティスと異なる可能性があります。
実装にあたっては、必ず最新の公式ドキュメントをご確認いただくようお願いいたします。
HTMXとは
参考URL：
HTMX公式サイト
https://htmx.org
JavaScriptをほとんど書かずに、ネットワーク通信や高度なユーザー体験（UX）を実現できるライブラリです。
HTMLタグの属性を用いるだけで、AJAX、CSSトランジション、WebSockets、サーバー送信イベントなどへ HTML 内から直接アクセスできるようになります。
よって煩雑なJavaScriptの記述が不要となり、エラーハンドリングなども含め多くの処理をhtmxが自動的に処理してくれます。
米国や英国では2023年頃から利用が広がりつつありますが、日本国内ではまだ普及率が高いとは言えない状況です。
インストール
CDN
以下の1 行を<head>内に記述します。
※CDNは本番環境での利用は推奨されません。
<script src="https://unpkg.com/htmx.org@1.9.10/dist/htmx.js"></script>Ajax
基本
GETリクエストを送る場合は、対象の要素にhx-get="<URL>"属性を追加します。
<div hx-get="/get-example">text</div>| 指定 | 属性 |
|---|---|
| hx-get | GET |
| hx-post | POST |
| hx-put | PUT |
| hx-patch | PATCH |
| hx-delete | DELETE |
ターゲット
<a hx-get=”/get-example” hx-target=”#target”>link</a>| 指定 | 説明 | 記述例 |
|---|---|---|
| this | 自分自身を指定する。デフォルト | hx-target=”this” |
| closest <CSSセレクタ> | CSSセレクタに一致する一番近い親を指定する | hx-target=”closest div” |
| find <CSSセレクタ> | CSSセレクタに一致する一番近い子を指定する | hx-target=”find td” |
| next <CSSセレクタ> | CSSセレクタに一致する次の要素を指定する | hx-target=”next p” |
| previous <CSSセレクタ> | CSSセレクタに一致する前の要素を指定する | hx-target=”previous p” |
トリガー
<form hx-post=”/post-example” hx-target=”#target” hx-trigger="submit">
⋮
</form>| イベント | 対象属性 |
|---|---|
| change | input, textarea, selectなど |
| submit | form |
| click | 色んな要素 |
このほかにも、一定間隔で定期的に問い合わせる機能や、簡易的なバリデーションなどを手軽に追加できるようです。
ページ置換
以下ではJSONを返却する例を紹介しますが、HTMLページそのものを返却させることもでき、SPAに近い構成を容易に実現することができました。
修正前
<header hx-boost="true" hx-push-url="true">
<a hx-get="/mains" hx-target="#body">TOP</a>
<a hx-get="/mains/blog" hx-target="#body">BLOG</a>
</header>修正後
getやtargetを明示しなくても、以下の記述だけでbody要素の内容を置き換えられるようです。
<header hx-boost="true" hx-target="#body">
<a href="/mains">TOP</a>
<a href="/mains/blog">BLOG</a>
</header>※ hx-boost="true" はページ全体を遷移させず、リンク先の要素だけを置き換えるための機能です。
hx-push-url="true" はブラウザバックへ対応させる目的で、URLの更新などを適切に処理してくれます。
まとめ
本記事では、社内勉強会で扱った内容をもとに、HTMXの基本的な概念と使い方について紹介しました。
HTMXは、HTMLの属性を利用することで、JavaScriptをほとんど記述せずにネットワーク通信や高度なユーザー体験（UX）を実現できるライブラリです。hx-getやhx-postといった属性を用いることで、比較的シンプルな記述で実現できる点が特徴です。
また、hx-targetやhx-triggerを利用することで、更新対象やイベントの制御も柔軟に行うことができます。
さらに、hx-boostやhx-push-urlを活用することで、ページ全体を再読み込みせずに画面遷移を行い、SPAに近いユーザー体験を構成できることを確認しました。
本記事で紹介した内容は、執筆時点の情報に基づいています。
実際の導入や実装にあたっては、必ず最新の公式ドキュメントを参照しながら検証することを前提としていただければと思います。
