HTMX でコンテンツを非同期更新：hx-history-elt 属性と hx-get 属性の組み合わせ

利点

プライバシーを保護するために、機密情報を含む要素を除外することができます。
パフォーマンスを向上させることができます。
特定の要素のみの状態を保持したい場合に役立ちます。

使用方法

hx-history-elt 属性を、スナップショットを作成および復元する要素に追加します。
属性値には、要素の CSS セレクターを指定します。

<div hx-history-elt="#main-content">
  </div>

注意点

hx-history-elt と hx-boost を同じページで使用すると、ブラウザの戻るボタンの動作が正しく動作しない場合があります。
ほとんどの場合、履歴スナップショットを限定することはお勧めできません。
hx-history-elt は継承されません。

例

以下の例では、#main-content 要素のみの状態をスナップショットし、ページ遷移時に復元します。

<div hx-history-elt="#main-content">
  <h1>タイトル</h1>
  <p>本文</p>
</div>

<a href="/other-page" hx-get>別のページへ</a>

例 1：フォームの入力内容を保持する

この例では、hx-history-elt 属性を使用して、フォームに入力された値をページ遷移間で保持します。

<form hx-post="/submit">
  <input type="text" name="name" hx-history-elt>
  <input type="submit" value="送信">
</form>

この例では、ユーザーがフォームに入力し、送信ボタンをクリックすると、HTMX は #name 入力要素の内容をスナップショットし、/submit エンドポイントに送信します。送信が完了すると、HTMX は #name 入力要素の内容をスナップショットから復元します。

例 2：ページの一部を更新する

この例では、hx-history-elt 属性を使用して、ページの一部のみを更新し、残りの部分は保持します。

<div hx-history-elt="#content">
  <h1>タイトル</h1>
  <p>本文</p>
</div>

<a href="/update-content" hx-get>コンテンツを更新</a>

この例では、ユーザーが "コンテンツを更新" リンクをクリックすると、HTMX は #content 要素の内容をスナップショットし、/update-content エンドポイントに GET リクエストを送信します。送信が完了すると、HTMX は #content 要素の内容を新しいコンテンツで更新し、残りの部分はスナップショットから復元します。

例 3：機密情報を保護する

この例では、hx-history-elt 属性を使用して、機密情報を含む要素を履歴スナップショットから除外します。

<div>
  <p>公開情報</p>
  <div hx-history="false">
    <p>機密情報</p>
  </div>
</div>

この例では、hx-history="false" 属性が div 要素に設定されているため、HTMX は div 要素の内容を履歴スナップショットに含めません。

hx-swap 属性

欠点:
- 常にページ全体を置き換えるため、パフォーマンスが低下する可能性がある
- 状態の復元が不完全になる可能性がある (例: フォーム入力内容)
利点:
- シンプルで使いやすい
- コードが簡潔になる

<a href="/other-page" hx-swap>別のページへ</a>

JavaScript

欠点:
- コード量が増える
- HTMXよりも習得難易度が高い
利点:
- 柔軟性と制御性に優れている
- 複雑な状態の管理が可能

document.addEventListener('DOMContentLoaded', function() {
  const historyElement = document.getElementById('main-content');

  document.querySelectorAll('a[hx-get]').forEach(function(link) {
    link.addEventListener('click', function(event) {
      event.preventDefault();

      const url = link.getAttribute('href');

      fetch(url)
        .then(function(response) {
          return response.text();
        })
        .then(function(html) {
          historyElement.innerHTML = html;
        });
    });
  });
});

Inertia.js
- 利点:
  - Vue.js、React、Svelteなどのフレームワークと統合可能
  - シングルページアプリケーション (SPA) に適している
- 欠点:
  - HTMXよりも習得難易度が高い
  - 複雑な設定が必要
- 利点:
  - Ajax によるページ遷移をサポート
  - ページ遷移時のアニメーションを提供
- 欠点:
  - HTMXと比べて機能が少ない
  - 追加のライブラリを導入する必要がある

最適な代替方法の選択

すでに他のライブラリを使用している場合は、そのライブラリが HTMX の代替機能を提供しているかどうかを確認してください。
柔軟性と制御性に優れた方法が必要場合は、JavaScript を使用するのがおすすめです。
シンプルで使いやすい方法を求めている場合は、hx-swap 属性がおすすめです。