先日CSS Nite主催の「htmx入門 – JSが苦手な方のための、やさしいライブラリ」で知ったhtmx。難しい技術を使うこと無く、お手軽に非同期通信ができる新しい技術とのこと、半信半疑で講義を受けてみたのですが、びっくりするぐらい簡単で驚きました。
htmxは使いこなせば様々なことができるのですが、今回はウェブ制作者の悩みのタネの1つ、共通のヘッダーやフッター、あるいは複数ページに存在する共通要素を一元管理をして読み込むにはどうすればよいかという点に絞って試してみました。
私自身、共通データの読み込みを行う際に、実務で一番よく使うのはPHPのinclude、もしくはrequireを使った方法です。最近PHPが使えないサーバはほとんど無いと思いますが、それでもクライアントの環境によっては何かしらの制限がかかっていたり、技術担当者へ事前に確認が必要だったりするケースがあり、伝言ゲームで担当者を繋がなければいけない場合は、面倒になることも多いです。
同じようにSSIを使って読み込む方法についても同様にサーバの環境を確認する必要があるため、私自身は積極的に利用することはありませんが、大規模サイトだとクライアントのレギュレーションであらかじめ用意されていることが多い印象。
他jQueryのloadを使う方法やiframeを使う方法も考えられますが、SEOやアクセシビリティ、読み込みなど様々な面でデメリットが多いため論外とします。
・・・
前置きが長くなりましたが、ようやく本題です。htmxを使えば、他の方法の懸念事項をほぼ気にすることなく、とても簡単に実現することができます。
1. htmxのJSを読み込む
<script src="https://unpkg.com/htmx.org@2.0.2"></script>htmxの公式サイトのquick startにある通り、htmxのJSを読み込みます。上記はCDN経由での読み込みとなりますが、もちろんダウンロードして読み込む方法でもOK。執筆時点の2.xのバージョンだと約50KBでした。
2. 読み込む場所にhtmxの設定をする
続いて読み込みたい場所に<div>等を用意し、htmxの属性を付与します。様々な属性がありますが、今回はシンプルに3つだけを設定します。
<div hx-get="hoge.html" hx-swap="outerHTML" hx-trigger="load"></div>まず1つ目、GETリクエストを送信するhx-getには読み込み元のHTMLのパス (hoge.html) を設定します。もちろん中身が書かれたhoge.html自体を忘れず用意してください。中身は必要部分だけでOKです。
続いて2つ目は読み込んだ内容をどのように置き換えるかを制御するhx-swapを設定します。今回は上記の<div>を丸ごと置き換える方式にするため、outerHTMLとします。
最後3つ目には、どのタイミングで実行するかを指定するhx-triggerを設定します。ページの読み込み時に実行したいため、loadとします。
以上です。え…？これだけ？という感じではないでしょうか。
ちょっと不安なので、ChatGPT先生にhtmxを利用するデメリットを挙げてもらうと、大規模サイトでは管理が複雑化してしまう可能性やReactやVueなどのJavaScriptのフレームワークと競合が考えられるとのこと。SEOへの影響もあるようですが、CSS Niteの講義だと、一応GoogleのSearch Consoleでは問題なくインデックスできていたので大丈夫だと思います。実務で使っても大丈夫…かな、一応。
htmxが何かの代替になるというよりは、あくまで補助的に使うぐらいでしょうか。他にも便利な使い方ができるので、ぜひ参考サイトをご覧になって試してみてください。