114. Back/Forward Support（戻る・次へへの完全対応：記憶を「再生」させる）

原理：ブラウザの「巻き戻し」に応じる

URLだけが変わっても、画面が変わらなければ意味がない

前回の hx-push-url (112.) などでURLを履歴に刻むことができるようになりました。しかし、ここには大きな落とし穴があります。あなたがブラウザの「戻る」ボタンを押したとき、ブラウザはURLを一個前に戻してくれますが、画面の中身は自動的には戻してくれないのです（SPAではよくある問題です）。

「戻る・次へへの対応（Back/Forward Support）」とは、「ブラウザの履歴移動（戻る・進む）が発生したことを察知し、その時のURLに合わせて画面の中身を適切に復元（再生）すること」です。

HTMXには、この「巻き戻し」を驚くほど自然に行うための仕組みが最初から組み込まれています。

実践：過去の光景を呼び戻す

1. HTMXの「自動履歴復元」

HTMXは、hx-push-url や hx-boost を使って履歴を作るとき、その瞬間の「画面のHTML（キャッシュ）」をこっそり保存しています。そしてユーザーが「戻る」ボタンを押したとき、HTMXはサーバーに聞く前に、「あ、その時の画面なら覚えてるよ！」と、保存しておいたHTMLをパッと画面に戻してくれます。

2. サーバー側での補完（もしキャッシュがなかったら）

ブラウザがキャッシュを捨ててしまった場合や、より確実に最新の「過去の状態」を見せたい場合、HTMXは「戻った先のURL」に対して、自動的にリクエストを再送します。このとき、HTMXは hx-history-restore-request: true という特別な目印を出します。

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

履歴機能をONにする: まずは hx-push-url などで履歴を作るように設定します（これがないと始まりません）。
特別な設定は不要: 驚くべきことに、HTMXの標準機能だけで「戻る・進む」の基本対応は完了しています。
動作テスト: 「ページ移動」→「戻るボタン」を押し、画面が瞬時に前の状態に戻るかを確認します。

比較：手動の復元ロジック vs HTMXの自動復元

一般的なSPAフレームワーク

方法: 「URLが変わった」というイベント（popstate）を自分で監視し、そのURLからデータを再取得し、画面を再描画する……という複雑なプログラムを書く。

HTMX

方法: 何もしなくて良い。HTMLそのものを保存・復元するので、通信さえ発生せずに画面が戻ることもある。

まとめ：初心者のための「時間の再生」

「戻る」ボタンが普通に動く。ただそれだけのことが、Webアプリにとっては最高の信頼の証です。

キャッシュという名の魔法: HTMXが「画面そのもの」を保存しておいてくれるおかげで、オフラインの状態でも「戻る」が動くことがあります。これはユーザーにとって驚きと喜びの体験になります。
データの「鮮度」に注意: もし、戻った時に「過去の（古い）データ」を見せたくない場合は、サーバーからのレスポンスを調整してキャッシュを防ぐ設定（第6章 119.詳述）が必要です。
URLの一致: 履歴による復元を成功させるためには、そのURLに直接アクセスした時も、HTMXのボタンで切り替えた時と同じ画面（またはその一部）が返ってくる必要があります。

過去を呼び戻し、体験を繋ぐ。HTMXが提供する「戻る・次へ」への完璧なサポートを味方につけて、ユーザーが安心してページを行ったり来たりできる、ストレスフリーなWebアプリを完成させてください。次の記事では、どの地点からでも招待できるURL設計「ディープリンキング（115. Deep Linking）」をご紹介します。