HTMXで指定ページ内の指定要素を取得及び出力する方法サンプル

あるサイトのHTMLタグ内に「hx-〇〇」という見慣れないタグが記述されていた。どうも「HTMX」というJavaScriptライブラリを使用しており、内容的には指定したサイト・要素を取得、表示しているっぽい。普段だとjQueryのloadメソッドで対応するところだが、「HTMX」での記述方法も覚えておきたいのでメモ。

HTMX

公式サイト

https://htmx.org/

CDN

以下で呼び出せる。

<script src="https://unpkg.com/htmx.org@2.0.4"></script>

利用方法

やりたいこと

本ブログのTOPページの1つ目の記事のタイトルを取得して#target要素内に出力してみたい。

ソースコード

<div id="target"></div>

<div hx-get="https://taitan916.info/blog/" hx-trigger="load" hx-target="#target" hx-swap="innerHTML ignoreTitle:true" hx-select="dl.clearfix:nth-child(1) > dd:nth-child(2) > h3:nth-child(1)"></div>

<script src="https://unpkg.com/htmx.org@2.0.4"></script>

サンプル

ブラウザのソースコードを見た場合、上記のソースコードのみ表示されるが、開発者ツールで見た場合、#target要素内に取得したデータが表示される筈。

https://taitan916.info/sample/HTMX/

解説等

hx-get

取得するページのURL。hx-postというのもあり、こちらは名前の通りpostリクエストするものみたい。

hx-trigger

HTMXを発火させるトリガー。今回はloadとしているがclickなどもあり。

hx-target

出力する場所の指定。指定しない場合はHTMXを記述しているタグに出力される。

hx-swap

出力する位置の指定。innerHTMLだと前述のhx-target内に、outerHTMLだとhx-targetが書き換えられる。また、ignoreTitle:trueを指定しておかないと、titleタグも書き換えられるので注意。

hx-select

指定したページ内のどの要素を出力するかを指定できる。指定しない場合は全ての要素が出力される。

所感

ページ取得時に何らかのパラメータを指定したい場合(特に動的に指定したい場合)等は今まで通りjQueryのloadメソッドで取得する形がよさそうだが、パラメータの指定とかが無い場合はHTMXを使っていってもよさそう。特にhx-selectで簡単に要素を指定できる点が良かった。

参考サイト

https://artpeace.jp/blog/2024/09/03/about-htmx_hashimoto/

https://devlog.mescius.jp/htmx-quickstart/