htmxで別のHTMLファイルにある要素を埋め込む方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

最近、JSの記述なしにAJAXやSPA風の振る舞いが実装できるhtmxに触れる機会がありました。

htmx.org

今回は、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/partsbody内はそれぞれ以下の状態とします。

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-targetthisとします。

これらの処理はページロード時に行われるようにするためhx-triggerloadとします。

これで/parts#parts-aの呼び出しと埋め込みは完了です。

さいごに

今回は、htmxで別のHTMLファイルにある要素を埋め込む方法をご紹介しました。

素のHTMLに近く、ビルド不要なhtmxはデザイナーとの共創といった点でも開発能率向上に資するものであると思います。

皆さまもぜひお試しください。