HTMLだけでJavaScriptの処理を実行できる「HTMX」の需要が年々伸びているようです。[1]Googleトレンドで「HTMX」というキーワードを調べてみたところ、下記のように右肩上がりに伸びていることがわかりました。
Googleトレンドより
また、今日のX（旧Twitter）でトレンド入りしていることから、日本での需要も高まることが考えられます。
この記事では、HTMXでどのようなことができるのか実際に使ってみました。
htmxとは
HTMXはJavaScriptを使わずHTMLだけで動的なWebページを作成できるライブラリです。HTMXの公式ページでは、HTML属性を利用してJavaScriptを操作する「intercooler.js」というライブラリの後継と記載されています。
HTMXを使うことでJavaScript関連の技術をこれまでよりシンプルなソースコードで実現できます。たとえば、JavaScriptを使わずAjaxリクエストを送信して非同期通信したり、リアルタイムで情報を受け取れる「WebSocket」という技術を活用したりできます。
HTMXによってシンプルかつ効率的にコーディングできることから、近年世界中で注目されています。
HTMXでできること
HTMXでできることは下記の通りです。
- Ajax通信：Ajax通信を利用することで、ページの再読み込みを行わずにサーバとの通信を実行できます。
- ページの置き換え：Webページの特定部分のみを更新できるため、再読み込みを行わずにページの一部を更新できます。
- サーバーとの通信：AjaxやSSE、WebSocketを用いたサーバー通信が可能です。
- トリガーハンドリング：トリガーハンドリングによってイベントが発生した際に特定の処理を実行できます。
- バリデーション：バリデーションを利用することで入力された値の真偽をチェックできます。
HTMXを使うことで、これまでJavaScriptを活用して実行していた動的な処理をHTMLで実行できるのが特徴。HTML属性で実行内容を決めるので実現できないこともありますが、Webページに簡単な動的処理を実行する際に便利です。
HTMXのメリット
HTMXのメリットは下記の通りです。
- 簡単に動的処理を実現できる
- 迅速に更新処理できる
- データベースや言語に依存しない
HTMXはJavaScriptに精通していない開発者でも簡単に動的なWebページを作成できるのがメリットです。複雑なJavaScriptのコーディングを使わずにサーバから直接HTMLを受け取り、ページ上に動的に追加できます。
また、シングルページアプリケーション（SPA）フレームワークのようにスムーズな状態遷移によって、迅速に内容を更新できるのもメリットのひとつ。バックエンド技術に依存しないため、さまざまなデータベースやサーバーサイドの言語と一緒に利用できます。
HTMXのデメリット
HTMXのデメリットは下記の通りです。
- JavaScriptの全機能をカバーできない
- 機能の制限
- ブラウザの互換性
HTMXだけではJavaScriptで実現できる複雑な動作やインタラクションを全て実装できません。また、HTMXの機能はJavaScriptのライブラリに比べて限定されているのがデメリットです。
ほかにも、HTMXは異なるブラウザでの動作が一貫しない可能性があります。このようなデメリットがあるのは、HTMXがシンプルさと使いやすさに重点を置いていることが考えられます。
htmxの使い方
HTMXの使い方について、インストール方法と実際の使い方に分けてわかりやすく解説します。
HTMXのインストール方法
HTMXのインストール方法は複数あるようですが、今回は公式サイト[1]にも公開されているCDNを使う方法で解説を進めます。
HTMXのCDN
<script src="https://unpkg.com/htmx.org@1.9.10"></script>上記のCDNをheadタグ内に記載することでHTMXを利用できます。
HTMXで動的な処理を実行する方法
HTMXの具体的な使い方について、下記のサンプルコードを例に解説します。
HTMXのサンプルコード
<div id="content">
<p>元のコンテンツ</p>
<button hx-get="/new-content.html" hx-swap="outerHTML">更新</button>
</div>上記の「hx-get」クラスは指定したファイルやURLにGETリクエストを送る処理です。
「hx-swap」はコンテンツをどのように入れ替えるのか制御する役割があり、指定されている「outerHTML」はHTMLの中身を取得するプロパティです。
サンプルコードでは、hx-getクラスに指定された「new-content.html」ファイルにAjaxリクエストを送り、「hx-swap="outerHTML"」によってリクエスト先のHTMLと情報を書き換える処理を実現しています。
HTMXの属性を使って実際に動的な処理を実装してみます。サンプルコードは下記の通りです。
index.htmlのサンプルコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
<script src="https://unpkg.com/htmx.org@1.9.3"></script>
</head>
<body>
<div id="content">
<p>元のコンテンツ</p>
<button hx-get="/new-content.html" hx-swap="outerHTML">更新</button>
</div>
</body>
</html>
new-content.htmlのサンプルコード
<p>更新済みだよ</p>
ユーザーが利用する画面を「index.html」、書き換えるHTMLの内容を「new-content.html」内に記載しています。
上記のコードを実行した結果がこちらです。
「更新」ボタンを押して実行
実行後
上記のようにHTMLだけでAjaxリクエストを送信し、動的な処理を実行できるのがHTMXの魅力です。
HTMXを使ってJSON形式でパラメータをエンコードできる
HTMXには通常のURL形式ではなく、JSON形式でパラメータをエンコードする「json-enc」拡張機能を備えています。[2]
<script src="https://unpkg.com/htmx.org/dist/ext/json-enc.js"></script>上記のコードを記載することでjson-enc拡張機能を利用できます。具体的な使い方について公式サイトで公開されていたので、共有しつつ内容について解説します。
json-enc拡張機能のサンプルコード
<div hx-post='/test' hx-ext='json-enc'>click me</div>「hx-post='/test'」はdiv要素がクリックされた際、「test」というURLに対してPOSTリクエストを送信することを示しています。
「hx-ext='json-enc'」はこの要素のリクエストに、json-enc拡張機能を適用するのが特徴です。その結果、通常のURL形式ではなくJSON形式でリクエストのパラメータがエンコードされます。
References
- ^ HTMX. https://htmx.org/, (参照 2024-01-25).
- ^ HTMX. 「The json-enc Extension」. https://htmx.org/extensions/json-enc/, (参照 2024-01-25).
