こんにちは。エキサイトでデザイナーをしている齋藤です。
最近、JSの記述なしにAJAXやSPA風の振る舞いが実装できるhtmxに触れる機会がありました。
今回は、htmxで別のHTMLファイルにある要素を埋め込む方法をご紹介します。
実現したいこと
コンポーネントと同じ要領で、/parts
にある「パーツA」を呼び出してindex.html
に埋め込みたいとします。
どうやるか
実現したいことをhtmxでどう実装するかを順を追ってお示しします。
前提
htmxが使用できる状態を前提とします。htmxはCDNでも提供されており、気軽に試すことが可能です。
<script src="https://unpkg.com/htmx.org@2.0.3" integrity="sha384-0895/pl2MU10Hqc6jd4RvrthNlDiE9U1tWmX7WRESftEDRosgxNsQG/Ze9YMRzHq" crossorigin="anonymous"></script>
また、index.html
と/parts
のbody
内はそれぞれ以下の状態とします。
index.html
... <body> <section> <h1>坊っちゃん</h1> <!-- ここにパーツを埋め込みたい --> </section> </body> ...
/parts
(厳密には/parts/index.html
)
... <body> <div id="parts-a"> <p>親譲りの無鉄砲で小供の時から損ばかりしている。</p> </div> </body> ...
#parts-a
が埋め込みたい要素となります。
htmxで埋め込んでみる
htmxでは独自の属性を記述して実装します。
今回は、
hx-get
: 他ファイルのHTMLを取得するhx-select
: 取得したHTML内の要素を指定するhx-target
: 取得した要素の埋め込み先を指定するhx-trigger
: 発火のきっかけを指定する
を呼び出しているindex.html
内に記述して/parts
にある要素を埋め込みます。
完成形は以下の通りです。
... <body> <section> <h1>坊っちゃん</h1> <div hx-get="/parts" hx-select="#parts-a" hx-target="this" hx-trigger="load" ></div> </section> </body> ...
まず、/parts
の内容を使用するためhx-get
でリクエストをします。レスポンスのうち、使用したい部分は#parts-a
ですので、hx-select
で#parts-a
を指定します。
呼び出された要素の埋め込み先は、htmxの属性を記述しているタグ内ですので、hx-target
はthis
とします。
これらの処理はページロード時に行われるようにするためhx-trigger
はload
とします。
これで/parts
の#parts-a
の呼び出しと埋め込みは完了です。
さいごに
今回は、htmxで別のHTMLファイルにある要素を埋め込む方法をご紹介しました。
素のHTMLに近く、ビルド不要なhtmxはデザイナーとの共創といった点でも開発能率向上に資するものであると思います。
皆さまもぜひお試しください。