HTMXが話題になっているので動かす

以下の記事などを読んでHTMXが話題になっていて、どのようなものか確認する。

もうjsなんていらない！世界で流行っているHTMXについてまとめてみた
https://qiita.com/twrcd1227/items/7bce18167fb02ec22729

フロントエンドで利用できるフレームワークで、JavaScriptなどを使わずリクエストを送付でき、構造をシンプルに保って、コード量を減らせるという特徴があるとのことです。

公式のサンプルを動かす

公式に記載してある例を動かす。HTMLの文字列にscriptタグでJavaScriptを読み込み、HTMLタグのプロパティで挙動を指定する。今回の例はbuttonタグに　hx-swap　でプロトコルとFQDNを指定して　ht-get　でディレクトリやファイル名を指定します。

ボタンを押下すると http://localhost:5556/res.html にgetリクエストを送り、レスポンスを画面に表示するような動きになります。

test.html

<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<!-- have a button POST a click via AJAX -->
<button hx-get="/res.html" hx-swap="http://localhost:5556/">
  Click Me
</button>

ボタン押下前

ボタン押下後

確かにHTMLタグだけでリクエスト/レスポンスが制御できていました。HTMXの公式で2023年のJavaScriptのgithubスター数が飛躍的に伸びた、と記載されていました。
https://risingstars.js.org/2023/en#section-framework

フロントエンドはReactをベースにしたものが多いですが、HTMXはReactを使わず全体の通信量も大きく削減でき、素晴らしいフレームワークだと感じました。

容量を小さく保てる、ということは単純にエンドユーザー向けのレスポンスが早くなるだけでなく、多大な恩恵が得られます。今色々な箇所で利用が増えているRemixや、SPAとの使い分けなど、どれほど優勢性があるのか検証しつつ、継続して注目していきたい。