117. hx-history-elt（履歴保存対象の指定：どの「部品」を記憶させるか）

原理：記憶の「焦点」を絞る

画面全体ではなく、必要なところだけを記録したい

HTMXのデフォルトの動作では、履歴（戻るボタンのためのキャッシュ）を保存するとき、body タグ全体を丸ごと保存しようとします。これはほとんどの場合で正解ですが、稀に困ることがあります。「共通のサイドバーやヘッダーは常に最新であってほしいけれど、メインコンテンツの中身だけは『戻る』で昔の状態に戻ってほしい」という場合です。

「hx-history-elt（エイチエックス・ヒストリー・エルト）」属性を使うと、「ページ全体ではなく、この特定の要素の中身だけを履歴として保存してね」と、記憶の対象を絞り込むことができます。

実践：メインコンテンツだけの正確な復元

1. 保存対象を切り替える

body ではなく、特定の #main-content などを指定する例です。

<nav>共通メニュー（ここは常に最新がいい）</nav>

<!-- 
  hx-history-elt : 
  この属性が付いた要素の中身だけが、履歴（戻るボタン用）として保存されます。
-->
<main id="main-content" hx-history-elt>
    <button hx-get="/page/2" hx-push-url="true">2ページ目へ</button>
    <p>ここにある文章だけが「戻る」ボタンで復元されます。</p>
</main>

2. なぜこれが必要なのか？

サイドバーに「現在の通知数」や「ログイン中のユーザー名」が出ている場合、ページ全体を履歴保存してしまうと、戻るボタンを押したときに「通知数」まで昔の古い状態に戻ってしまう、というチグハグな現象が起きます。 hx-history-elt でメインエリアだけを保存対象にすれば、周囲の最新状態を保ちつつ、中身だけを戻すことが可能になります。

3. ステップ・バイ・ステップ解説

「最新でいてほしい場所」と「戻っていい場所」を分ける: ヘッダーなどは「常に最新」であるべきエリアです。
属性の付与: 履歴として復元させたい中心的なエリア（<main> など）に hx-history-elt を書き足します。
IDとの組み合わせ: 基本的に、指定する要素には id が付いていることが推奨されます。

比較：全体保存 vs 特定要素保存

全体保存 (デフォルト)

対象: <body> 全体。
欠点: 共通エリア（ヘッダー、サイドバー）まで古い情報に巻き戻ってしまう。

特定要素保存 (hx-history-elt)

対象: 指定した要素のみ。
利点: 戻るボタンでの体験がより「自然（メインは戻り、周囲は最新）」になる。

まとめ：初心者のための「記憶のフレーミング」

hx-history-elt を使うことは、Webサイトの「時間」の流れを部分的に制御することに他なりません。

まずはデフォルトでOK: 普通のサイトなら、この属性を使わなくても HTMX がいい感じに全体を保存してくれます。違和感（戻った時にヘッダーがおかしい等）を感じ始めてから導入しましょう。
SPAらしい挙動: これを使いこなすと、SNSやメールアプリのように「周りは変わらず、中身だけが歴史を遡る」という、非常に洗練された SPA 風の挙動が手に入ります。
一つのページに一つだけ: 混乱を避けるため、この属性はページ内で一箇所に絞って使うのがベストです。

記憶の焦点を、正しく合わせる。hx-history-elt を使って、最新の情報と過去の記憶が矛盾なく同居する、美しくも論理的な Web アプリを構築してください。次の記事では、戻ったあとの状態をさらに手厚くケアする「状態復元（118. Restoring State）」をご紹介します。