最終更新日：
LINE

htmxとは｜基本知識や仕組み、活用例を解説

フリーランスの働き方
htmxとは｜基本知識や仕組み、活用例を解説

Web業界の新しい技術として、htmxが浸透しつつあります。まだまだ新しい技術で、耳にしたことのないエンジニアも見受けられますが、利便性が高く今後に期待できるものです。最近になって興味を持ち始めた人も多いでしょう。

新しい技術であることから、情報が少なく、実践できていないエンジニアは多いはずです。今回はそのようなエンジニアに向けて、htmxの基本知識や仕組み、活用例などを解説します。

htmxとはなにか

htmxとは、事前に環境を整備しておくことで、HTMLから最新のJavaScriptを起動する仕組みです。HTMLの属性を付与することによって、JavaScriptと同等の動きを実現できます。例えば、Webサイトに様々な動きを実装できるのです。

今まで、このような機能を実装するためには、エンジニアが細かくJavaScriptを書く必要がありました。HTMLやCSSと連携させ、タグやその中身を制御する必要があったのです。つまり、ある程度は専門的な知識が必要とされていました。

しかし、htmxを利用することによって、このような知識を持っていなくとも、Webサイトに動きを実現できます。今までのWebサイト開発のように、エンジニアがJavaScriptに多くの知見を持つ必要がなくなったのです。実装ができる内容には限界があるものの、JavaScriptの専門知識が不要になったことが非常に大きな進化といえます。

htmxの主な仕組み


htmxは、HTML属性を拡張してHTTPリクエストをトリガーし、そのレスポンスを部分的にDOMに反映させる仕組みです。これにより、動的なインタラクションを実現できます。この仕組みをさらに詳しく理解しておきましょう。

HTML属性を利用した宣言

htmxでは、特定の属性をHTML要素に追加することで動作を定義できます。例えば、以下のとおり属性を追加しなければなりません。

  • hx-get / hx-post / hx-put / hx-delete: HTTPメソッドを指定し、リクエストを送信する
  • hx-trigger: イベント（例: クリックやスクロールなど）を指定して、リクエストのタイミングを制御する
  • hx-target: サーバーからのレスポンスを挿入するDOM要素を指定する
  • hx-swap: レスポンスのDOMをどのように既存の要素に挿入するか（置換、追加など）を定義する

これらを指定することによって、従来はJavaScriptで実装していた動的な機能を、HTMLだけでシンプルに記述できるという仕組みです。

イベント駆動型のリクエスト

htmxは、指定されたイベントが発生したときに、サーバーへHTTPリクエストを送信します。このイベントは「hx-trigger属性」でカスタマイズする仕組みです。例えば、以下のようなリクエストの仕組みが考えられます。

クリックでリクエストを送信

HTML


<button hx-get="/endpoint" hx-target="#content">データ取得</button>
<div id="content"></div>

ボタンがクリックされるとhx-getで指定されたURL（/endpoint）へGETリクエストを送信します。その後、サーバーから返されたHTMLをhx-targetで指定された要素（#content）に挿入し、画面に表示する仕組みです。

スクロール時のリクエスト

HTML


<div hx-get="/load-more" hx-trigger="revealed">もっと見る</div>

要素がビューポート内に表示されるとhx-trigger=”revealed”がトリガーされます。その後、/load-moreにGETリクエストが送られ、返されたデータを指定された場所に表示する仕組みです。

サーバーからのレスポンス処理

サーバーからのレスポンスは、通常のHTMLとなります。このHTMLを受け取ると、htmxはレスポンスをDOMに動的に挿入します。レスポンスを挿入する際には、hx-swap属性を使用し、以下のとおり挿入方法の制御が可能です。

  • replace（デフォルト）: ターゲット要素全体をレスポンスで置換
  • innerHTML: ターゲット要素の中身だけを置換
  • beforebegin: ターゲット要素の直前にレスポンスを挿入
  • afterbegin: ターゲット要素の最初にレスポンスを挿入
  • beforeend: ターゲット要素の最後にレスポンスを挿入
  • afterend: ターゲット要素の直後にレスポンスを挿入

双方向通信のサポート

htmxは、サーバーからの特定の応答をトリガーとして追加のアクションを実行できます。これは「HX-ヘッダーによる制御」で実現が可能です。サーバーはレスポンスヘッダーを利用して、以下のとおりhtmxの動作を制御できます。

  • HX-Redirect: クライアントを別のURLにリダイレクトする
  • HX-Refresh: ページ全体をリロードする
  • HX-Trigger: クライアントで特定のイベントを発生させる
  • HX-Location: ブラウザのURLを変更する（履歴管理も含む）

一般的にHTMLは一方向への通信しかサポートされていませんでした。そこでJavaScriptが登場し、問題を解決していたのです。さらにhtmxが登場したことによって、JavaScriptを記述することなく、双方向通信を実現できるようになっています。

カスタマイズ処理の導入

htmxを導入するだけで、いくつもの仕組みを実現することが可能です。ただ、場合によっては標準的な仕組みだけでは不足することがあるでしょう。その場合、カスタマイズ処理を導入できます。カスタムJavaScriptで動作を拡張でき、具体的にはhtmx.on()メソッドを使用して、任意のイベントを処理できるのです。

JavaScript


htmx.on('htmx:afterRequest', function(event) {
console.log('リクエスト完了:', event);
});

htmxは複雑なJavaScriptの記述を減らすための仕組みではあります。ただ、場合によっては上記の仕組みを組み合わせ、より利便性の高いWebサイトを構築することを考えてみましょう。

htmxの活用例


htmxによりHTML属性を拡張することで、さまざまなWebサイトを構築しやすくなります。具体的に、どのような活用が考えられるのかを紹介します。

非同期データの取得と表示

Webサイトにおいてボタンをクリックすると、画面の一部のみ、表示が切り替わることがあります。これはhtmxを用いて以下のとおり実装が可能です。

HTML


<button hx-get="/data" hx-target="#content">データを取得</button>
<div id="content"></div>

「hx-get」によって、指定したURL（今回であれば/data）へGETリクエストを送信します。その後「hx-target」に指定された#content要素内にリクエストの結果を挿入するのです。これにより、入力した内容を踏まえて画面の表示を切り替えるなどの非同期処理が簡単に実現できます。

フォームの非同期送信

上記に類似しているものですが、フォームに入力された内容を非同期で送信する活用法も考えられます。

HTML


<form hx-post="/submit" hx-target="#result">
  <input type="text" name="inputData">
  <button type="submit">送信</button>
</form>
<div id="result"></div>

この場合、フォームであるためセキュリティに配慮して「hx-post」で入力された内容を送信します。その後「hx-target」でサーバからのレスポンスを所定の位置に表示させるのです。これにより、フォームを送信する際に、ページ全体のリロードを避けられるようになります。

インラインバリデーション

入力フィールドの値が変更されるたびにサーバー側でバリデーションを行い、その結果をリアルタイムで表示する機能を実装できます。

HTML


<input type="text" name="username" hx-post="/validate-username" hx-trigger="keyup changed delay:500ms" hx-target="#username-validation">
<div id="username-validation"></div>

上記までの違いとしては「hx-trigger」でキー入力や値の変更後、500ミリ秒遅延してリクエストをトリガーしていることです。これにより、ユーザーが入力するたびにサーバー側でバリデーションを実施し、その結果を画面に表示できます。バリデーションはJavaScriptを用いて、クライアントサイドで実施することも多いですが、サーバサイドで同様の実装も可能です。

無限スクロール

ユーザーがページをスクロールして特定の要素が表示されると、自動的に追加のコンテンツを読み込みます。これにより、最初に読み込んだコンテンツよりも多くを表示でき、ユーザは無限にスクロールしているかのような体験を得ることができる仕組みです。

HTML


<div hx-get="/load-more" hx-trigger="revealed" hx-swap="beforeend">
  ここに追加のコンテンツが読み込まれます。
</div>

「hx-trigger」を指定することで、要素がビューポート内に表示されたときにリクエストをトリガーできる仕組みとしています。これにより、ユーザーがスクロールして要素が表示されるとトリガーされ、自動的に次のコンテンツが表示されるのです。

発展途上の技術であることには注意

Web関連の技術は日々進化していますが、それらの中でもhtmxは、特に新しいものです。解説したとおり、基本的な仕組みは固まっていますが、これから大きな仕様変更があるかもしれません。また、jQueryのように利用できるものの、ネイティブなJavaScriptと比較すると限界があります。そのため、現時点でhtmxを利用する場合は、実装できる仕組みを理解して、その範疇で使うことを心がけましょう。革新的な使い方を試そうとすると、一部のブラウザで動作しないなどの問題に繋がりかねません。

まとめ

新しい技術であるhtmxがどのようなものであるか紹介しました。事前に設定は必要となりますが、HTMLの拡張によって、JavaScript相当の動きを実現できるもので非常に革新的なものです。実装できる範囲に限界はあるものの、その範疇であればJavaScriptと同じような実装ができます。

HTMLを拡張する仕様であるため、カスタマイズしない限りは、JavaScriptの専門知識が必要ありません。特定の属性をHTMLに付与するだけで簡単に実装できます。Webサイトの実装難易度を大きく変化させるものであり、これからの発展に期待できるものです。

SHAREこの記事をシェアする

LINE
admin