こんにちは。エキサイトでデザイナーをしている齋藤です。
今回は、htmxでページ全体で有効な設定オプションをセットする方法をご紹介します。
なお、方向の内容は v.2.0.6 （2025年8月12日時点の最新版）のhtmxを前提としています。
htmxとは
htmxは、HTMLタグに専用の属性を記述することで、複雑なJSを記述せずにAJAXリクエストの発行を可能にするライブラリです。
マークアップの延長のような感覚でAJAXリクエストを実装できるのがhtmxの強みです。
<!-- button要素をクリックするとPOSTリクエストが発行される --> <button type="button" hx-post="/sample" hx-trigger="click"> 送信 </button>
実現したいこと
実現したいことを整理します。
htmxではその挙動について設定するオプションが用意されています。
例えば、要素をレスポンスのDOMをSwapする際に、titleタグの置き換えも行うかをどうかは ignoreTitleオプションで設定します。（デフォルト値はfalse）
htmxではレスポンスの中にtitleタグが含まれる場合、リクエスト元のページのtitleタグが置き換わります。
レスポンス
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Response page</title> </head> <body> <div id="response">...</div> </body> </html>
リクエスト元
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <!-- 標準ではレスポンスのtitleの「Response page」に置き換わってしまう --> <title>Request page</title> </head> <body> <button type="button" hx-get="/path/to/dir" hx-trigger="click" hx-select="#response">click</button> </body> </html>
この現象は、hx-swap属性にignoreTitleオプションをtrueに設定すると防げます。
<!-- ignoreTitleをtrueにするとtitleタグの置き換えがされない --> <button hx-get="..." hx-swap="ignoreTitle:true" ...>...</button>
このオプションについて詳しく知りたい場合は以下の記事をご覧ください。
先の例のようにhtmxの属性を用いて宣言すると、設定オプションをセットできます。
一方で今回実現したいことは、特定の設定オプションについてページ全体で有効になるようにセットして、都度の宣言を不要にすることです。
<!-- ページ全体でignoreTitleをtrueに設定して都度の宣言は不要にしたい --> <button hx-get="..." ...>...</button>
metaタグを用いてセットできる
設定オプションは、タグ毎にhx-*属性を用いて都度宣言する他に、metaタグを使用することでページ全体で有効になるようにセットできます。
構文は次の通りです。headタグの子要素として配置します。
<meta name="htmx-config" content='{"<Option name>":"<Value>"}'>
例えば、ページ全体でignoreTitleは常にtrueになるようにしたい場合は以下のようにします。
<head> .... <meta name="htmx-config" content='{"ignoreTitle":"true"}'> </head>
まとめ
今回は、htmxでページ全体で有効な設定オプションをセットする方法をご紹介しました。
この手法は、プロジェクト内で常に共通する設定をセットしたい場合に便利です。
特に今回例に挙げたignoreTitleをtrueにセットしておくことは、意図しないtitleタグの置き換えを防止するのに有用です。
htmxを使用される方の一助となれば幸いです。ご精読ありがとうございました。
