こんにちは、ナカムラです。
今回のテーマはHTMLの共通パーツのモジュール化です。
大体の案件ではPHPのincludeで読み込むことがほとんどですが、PHPが使えない環境で静的なサイトを制作することがあるため共通パーツのモジュール化をhtmxを使って作ってみたいと思います。
htmxとは
htmxは、JavaScriptを使用する代わりに、HTMLから直接最新のブラウザ機能にアクセスできるようにするライブラリです。
JavaScriptをほとんど書かずにHTML属性を追加するだけでAJAXなどのWEB機能を実装できます。
htmx.org
実装方法
（１）htmxを読み込む
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.10/dist/htmx.min.js" integrity="sha384-H5SrcfygHmAuTDZphMHqBJLc3FhssKjG7w/CeCpFReSfwBWDTKpkzPP8c+cLsK+V" crossorigin="anonymous"></script>
お試しなので簡単にCDNで読み込みましたが、DLやnpmの読み込みも可能です。
詳しくはドキュメントをご確認ください。
（２）モジュール化したHTMLファイルを読み込む
挿入したい箇所に下記のようなタグを記述します。
<div hx-get="/assets/modules/header.html" hx-trigger="load" hx-target="this" hx-swap="outerHTML"></div>
hx-get：読み込みたいファイル（getの他にpostなどAJAXリクエストを発行する設定）
hx-trigger：読み込むタイミング
hx-target：置き換える先
hx-swap：HTMLの置き換え方（デフォルトはinnerHTMLでターゲット要素の中に挿入されます。outerHTMLはターゲットを読み込んだタグに差し替えます）
今回は記述した要素そのものを差し替えたいためhx-targetはthisとしましたが、ボタンのクリックしたタイミングで別の要素を差し替える場合などはidなどで要素を指定します。
メリット
javaScriptの複雑な記述が不要で、複数のページに直書きするよりも共通パーツの更新が簡単になります。
ヘッダーフッターの読み込みだけでなく、例にあるような様々なUIの実装に役立ちます。
ビルド環境などは不要なので比較的取り入れやすいところも良い点です。
通常のjavaScriptとの併用も可能です。
デメリット
複雑なものや外部JSライブラリとの連携が必要な場合などはVueなどのフレームワークの方が向いています。
※デメリットというより複雑な構造にしないことを目的としたライブラリのため、ライブラリの目的と合っていない場合には向いていません。
運用上の注意とまとめ
サーバー上でないとget（postも）は動作しません。
※javaScriptのfetch() を使った読み込みも同様です。
開発時はローカルサーバーを立ち上げれば確認しながら開発できますが、納品先の管理者が編集するなど、複数の方が編集する場合はその説明が難しいことがあるため、状況に合わせて活用できればと思います。
