htmx?ナニソレ？フレームワーク？ライブラリ？

つい先日「htmx」なるものを知りました！
調べてみるとQiitaでもいくつか詳しく調べてくださっている方がいらっしゃいました！

直近バージョン2.0がリリースされたそうなので変更点も踏まえてhtmxについて伝えられたらと思っています！

htmxナニソレ？

HTMLを拡張したライブラリです！
海外ではReactについで2番目の人気を獲得したライブラリです！

公式サイトによると
属性を使用してHTMLで直接AJAX、CSSトランジション、WebSocket、サーバー送信イベントにアクセスできる。
軽量かつ依存性がなく、Reactと比較してコードベースでサイズが67％削減されるらしい。

日本での人気はまだまだですが、軽量でありJavaScriptを書かなくてもリッチなUIを提供できるライブラリのようです！
独自の記法であることは伺えますが、依存関係がないというのは素晴らしいですね！

依存関係についてもう少し詳しく

ライブラリを導入する場合、気になるポイントの一つとして「依存性」だと思います。
実際どのようなものが使われているのかpackage.jsonを見てみました！

以下はdevDependenciesに記載されていた内容をリストにしたものです！

• chai (^4.3.10):
  • アサーションライブラリ。テストで期待値と実際の値を比較するのに使用
• chai-dom (^1.12.0)
  • chaiを拡張する。DOM要素に対するアサーションを提供してくれる
• eslint (^8.56.0)
  • JavaScriptのコード品質チェックツール
• eslint-config-standard (^17.1.0)
  • JavaScript Standard Styleに基づくESLintの設定
• eslint-plugin-import (^2.29.1)
  • ES6+のimport/export構文に関するリンティングルールを提供
• fs-extra (^9.1.0)
  • Node.jsのfsモジュールの拡張。追加のファイルシステム操作メソッドを提供
• mocha (10.1.0)
  • JavaScriptのテストフレームワーク
• mocha-chrome
  • Chromeブラウザでモカテストを実行するためのツール
• mocha-webdriver (^0.3.2)
  • WebDriverを使用してブラウザテストを行うためのMochaの拡張
• mock-socket (^9.3.1)
  • WebSocketのモックライブラリ。テスト用
• sinon (^9.2.4)
  • テストダブル（スパイ、スタブ、モック）を作成するためのライブラリ
• typescript (^4.9.5)
  • JavaScriptのスーパーセットであるTypeScriptのコンパイラ
• uglify-js (^3.17.4)
  • JavaScriptの圧縮・難読化ツール
• ws (^8.14.2)
  • WebSocketクライアント及びサーバーの実装。Node.js用

基本的にテストフレームワークやeslintでした！
また、内部でTypeScriptが使われているようです！

htmxはどんなことができるのか？

想像以上にいろんなことができます！
おおよそのWebアプリケーションやWebサイトであれば再現できそうな気がします！

1つ例を記述します。
下記はhtmxでイベントハンドラの動的に追加するコードです。

<script>
document.body.addEventListener('htmx:afterOnLoad', function(evt) {
  const button = document.createElement('button');
  button.id = 'dynamic-button';
  button.textContent = '動的に追加されたボタン';
  document.body.appendChild(button);

  button.setAttribute('hx-trigger', 'click');
  button.setAttribute('hx-target', '#target-element');
  button.setAttribute('hx-swap', 'outerHTML');
});
</script>

hx-trigger

hx-trigger属性は、click以外には、load、mouseover、keydownなどを指定できます。
ページのロード時や特定のタイミングでトリガーを設定できます。

hx-target

hx-target属性は、どのDOM要素に置き換えるかを指定ができます。
CSSセレクタを使用して特定の要素を指せる他、hx-target="this"を使用して、hx-target属性が付与されている要素自身をターゲットにすることもできます。

hx-swap

hx-swap属性は、ターゲット要素にどのように置き換えられるかを指定します。
innerHTML、outerHTML、textContentなどな置き換え方法を選択できます。

他にはbeforebegin、afterbegin、beforeend、afterend、delete、noneがあります。

htmxについて紹介された記事にめちゃくちゃ詳しく書いてくださっているのでこちらを確認するのが良いと思いました！

ドキュメントは下記になります。

htmxの2.0は何がかわったのか？

公式ドキュメントに書かれてますが、2.0からはIEのサポートがなくなったようです。

htmx 2.x では IE のサポートが廃止されていることに注意してください。IE のサポートが必要な場合は 、永続的にサポートされる1.xコード ラインを使用できます。

ユーザーが誤ってアップデートしてしまわないように現時点のlatestは1.9.12となっています

IEのサポート終了が一番大きなアップデートだったようです。
その他には、非推奨の属性の削除などいくつか細かい変更がなされたようです。

【まとめ】htmx？ナニソレ？

海外でこれだけ人気のライブラリなので今後日本で利用されることが多くなっていくかもしれません。
HTMLの拡張なのでJavaScriptを必要としない分学習コストは、Reactと比べると低いです。
モックや小規模サイトを作成する時には有効な手段となる可能性はあると思いました！

個人的な所感ですが、大規模なアプリケーションを作成する際にはReactなどのコンポーネンベース設計を利用する方が良いのかもしれないと思いました。

調べる時に読んだ記事