htmx は、HTML を拡張してインタラクティブなウェブアプリケーションを構築するためのシンプルで強力なフレームワークです。JavaScript のコードを書くことなく、HTML 属性を使用してサーバーとの非同期通信（ Ajax ）を実現し、動的なコンテンツの更新や、部分的なページのリロードが可能です。これにより、クライアントサイドの複雑なロジックを避け、バックエンドのロジックを直接活用できるため開発効率が向上します。
2023 JavaScript Rising Stars では、 Front-end Frameworks で 2位 となっていることから、海外では注目されているフロントエンドフレームワークということのようです。
難しい JavaScript を書くことなく、HTML にいくつかの属性を追記するだけで動作させることができます。
更に詳しいことについては、2024年01月23日に書かれた以下のページがオススメです。
あとは 公式サイト の ドキュメント ・ リファレンス などもご活用ください。
<a href="/sample/demo.html" hx-get="/sample/demo.html">demo</a>
<h3>demo</h3> <p>This file was loaded via Ajax using htmx technology. This file was loaded via Ajax using htmx technology. This file was loaded via Ajax using htmx technology.</p>
読み込まれるコンテンツに リンク が残り、demo の文字列だけが置き換わったことが確認できます。
<a href="/sample/demo.html" hx-get="/sample/demo.html" hx-swap="outerHTML">demo</a>
※ hx-swap を outerHTML から afterend に変更してみましょう！
| innerHTML | 対象要素の内部HTMLを置き換えます。（default） |
|---|---|
| outerHTML | ターゲット要素全体を置き換えます。 |
| afterbegin | ターゲット内の最初の子の前にコンテンツを追加します。 |
| beforebegin | ターゲットの親要素のターゲットの前にコンテンツを追加します。 |
| beforeend | ターゲット内の最後の子の後にコンテンツを追加します。 |
| afterend | ターゲット親要素のターゲットの後にコンテンツを追加します。 |
| delete | 応答に関係なくターゲット要素を削除します。 |
| none | 応答からコンテンツを追加しません。 |
