Zenn
🦊

HTMXの動作方法

2023/12/28に公開
HTML
JavaScript
htmx
tech

https://htmx.org/

HTMXとは

HTMXはJavaScriptライブラリです。公式ライブラリではなく、個人が作成したライブラリで、GitHubで推薦されたことがあります。HTMXはHTMLの拡張で、ウェブページをより速く効率的にレンダリングし、ユーザーインタラクションを向上させるための新機能を追加します。

HTMLxはHTML5の既存の要素と属性をベースにしており、JavaScriptを使用せずにウェブページの動作を制御できます。

このライブラリは2019年3月に初めて発表され、まだ初期段階ですが、継続的に開発されています。

HTMXの主要機能

データ伝送：
HTMXは、ウェブページから別のウェブページへのデータの伝送を可能にする新しい方法を提供します。これにより、ユーザーはウェブページをリロードせずに、ページ内のデータを更新できます。

状態管理：
HTMXは、ウェブページの状態を追跡し管理する新しい方法を提供します。これにより、ユーザーはウェブページをナビゲートする間、自分の進行状況を維持できます。

ユーザーインタラクション：
HTMXは、ウェブページのユーザーインタラクションを改善する新しい方法を提供します。これにより、ユーザーはウェブページとより自然で直感的な方法で相互作用できます。

使い方法

ただHTML内にタグを記述するだけで使用できます。

  <script src="https://unpkg.com/htmx.org@1.9.10"></script>

フロントエンド開発では、サーバーからデータを取得してHTMLで表示する作業が最も多いです。例えば、ボタンをクリックしてサーバーから商品を取得したい場合、バニラJavaScriptを使用すると

    <script>
      document
        .querySelector(".more-data")
        .addEventListener("click", function () {
          fetch("/more")
            .then((r) => r.json())
            .then((result) => {
              console.log(result);
              var temp = `<h4>${result.data}</h4>`;
              document
                .querySelector(".product")
                .insertAdjacentHTML("beforeend", temp);
            });
        });
    </script>

Reactの場合は以下となります。

let [product, setProduct] = useState([]);
      function getMore() {
        fetch("/more")
          .then((r) => r.json())
          .then((result) => {
            setProduct(result);
          });
      }
      {
        state.map((a, i) => {
          return (
            <h4>
              {a.title} ({a.price})
            </h4>
          );
        });
      }

しかし、HTMXの文法を使用すれば、ボタン一つでHTMLデータをリクエストできます。

    <div class="product">
      <h4>商品1（700円）</h4>
      <h4>商品2（300円）</h4>
      <h4>商品3（500円）</h4>
     <div
        class="more-data"
        hx-get="http://localhost:3001/more"
        hx-trigger="click"
      >
        more
      </div>
    </div>

定期的なリクエスト

数秒ごとにGETリクエストを定期的に送信する方法もあります」

   <div hx-get="http://localhost:3001/time" hx-trigger="every 1s">
        What time
      </div>

別の場所に挿入

サーバーからHTMLを取得して別のHTMLに取り込みたい場合は、hx-targetを使用します

      <input
        name="q"
        hx-get="http://localhost:3001/search"
        hx-target="#result"
      />
      <div id="result">結果</div>

SPA

HTMLでaタグやformタグを使用するとページがリフレッシュされますが、これをSPA（シングルページアプリケーション）形式でスムーズに切り替えることも可能です

      <a href="/blog" hx-boost>ブログページ</a>

その他にも様々な機能があります

ディメリット

  1. サーバーと頻繁に通信しない場合は、不要なライブラリになる可能性があります。
  2. 移動や削除などのアニメーションを加えたい場合、HTMXは役に立たないことがあります（HTMLを複雑に使用する場合）。
  3. HTMLを送信するサーバーが必要です。
  4. 自分が運営するサーバーではなく、他社のサーバーと通信する場合は、使用が不可能です。

結論

バックエンドチームが単独でバックオフィス作業を行っている場合や、フロントエンドチームを別途構成するのが困難な環境にあるスタートアップやトイプロジェクトでは、HTMXの導入も良い選択だと思います

Discussion