036. hx-history（ブラウザの「履歴」を正しく刻む）

原理：Webアプリの「記憶」を管理する

戻るボタンの絶望を防ぐ

モダンなWebアプリ（シングルページアプリケーション：SPA）を作るとき、最大の壁となるのが「ブラウザの戻るボタン（←）」の挙動です。

JavaScriptで画面の一部だけを器用に書き換えても、ブラウザ自体は「同じページに居続けている」と判断します。そのため、ユーザーが前の画面に戻ろうとして戻るボタンを押すと、自分の期待（さっきの検索結果に戻りたい！）に反して、全く別の古いページまで一気に飛ばされてしまうことがあります。これが、ユーザーを深く失望させる「SPAの落とし穴」です。

HTMXの hx-history 属性は、この「Webの記憶」を司る番人です。画面を更新した際の状態をブラウザの履歴として保存し、戻るボタンが押された時に「その時の画面」をパッと復元できるようにするための機能です。

瞬間保存（スナップショット）

HTMXはデフォルトで、主要なナビゲーション（hx-push-url など）が発生した際に、その瞬間のHTMLをブラウザのキャッシュ（localStorageのような場所）に保存します。戻るボタンが押されると、サーバーへ再通信することなく、その保存された「記憶（スナップショット）」を即座に画面に貼り付けます。これにより、まるで魔法のようにスムーズな「戻る・進む」体験が実現します。

実践：履歴に残すべき場所、残さない場所

1. 特定の要素を履歴から除外する

例えば、「今開いているモーダル」や「入力途中のパスワード」などは、履歴として保存してほしくない（戻るボタンで復元されても困る）ことがあります。そんな時に hx-history="false" を使います。

<!-- この内側にある要素の状態は、
     ブラウザの履歴（スナップショット）として保存されなくなります -->
<div id="modal-container" hx-history="false">
    <h3>一時的なメッセージ</h3>
    <button onclick="closeModal()">閉じる</button>
</div>

2. 歴史の保存を許可する（デフォルト）

通常は true がデフォルトなので意識する必要はありませんが、親要素で禁止されている場所で、あえて復活させたい場合などに明示的に書くことがあります。

<div hx-history="true">
    ここにある更新は、戻るボタンで正しく復元されます。
</div>

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

デフォルトの信頼: HTMXの hx-push-url や hx-boost を使っていれば、履歴の保存は自動で行われます。
聖域の保護: 「戻ったときに、この古いデータが表示されたら格好悪いな」と思う場所を見つけたら、そこに hx-history="false" を書き込みます。
注意点: 保存されるのは「HTMLの見た目」だけです。JavaScriptで動的に作られた複雑な状態などは復元されないことがあるため、なるべく「HTMLがすべてを語る」設計にしておくのがベストです。

比較：手動のHistory API vs hx-history

JavaScriptでの履歴管理

window.history.pushState({ html: myContent }, "Title", "/new-url");
window.onpopstate = (event) => {
    if (event.state) {
        document.body.innerHTML = event.state.html;
    }
};

「今の画面をどこに保存しておくか」「戻った時にどう戻すか」というロジックをすべて手書きする必要があり、ブラウザごとの動作の違いに悩まされることになります。

HTMXの hx-history

設定は一切不要（デフォルトでオン）。特定の場所を「除外したい時だけ」属性を書く。これだけで、Webの歴史に正しく名を刻む（＝戻れる）アプリが完成します。

まとめ：初心者のための「過去」との付き合い方

hx-history は、あなたのWebサイトに「信頼」という深みを与える属性です。

ユーザーの直感を信じる: ユーザーはいつでも「戻るボタン」で過去に戻れることを期待しています。その期待を裏切らないことが、プロフェッショナルな品質へ繋がります。
機密情報は保存しない: 銀行の残高やパスワード表示など、履歴に残るとセキュリティ上問題がある場所には、迷わず hx-history="false" を使いましょう。
シンプルさを保つ: HTMLをスナップショットとして保存する。このHTMXの潔い仕組みを信じて、あまり複雑な状態をJSで持ちすぎないようにしましょう。

過去を記憶し、未来へ繋ぐ。hx-history を適切に運用して、ユーザーが迷子にならない安心安全なWebの旅を提供してください。次の記事では、実際にアドレスバーのURLを書き換えて履歴を作る「hx-push-url」（037. hx-push-url）の具体的な使い方について解説します。