111. Browser History Basics（ブラウザ履歴の基礎知識：Webの「時間旅行」を理解する）
原理：Webサイトには「記憶」がある
ブラウザの「戻る」ボタンは魔法のボタン
私たちは普段、当たり前のようにブラウザの「戻る」ボタンを使います。 このボタンが成立するためには、ブラウザが「少し前にどのURLにいて、どんな画面を見ていたか」を順番に記録しておく必要があります。これが「ブラウザ履歴（Browser History）」です。
HTMXでページの一部だけを書き換える（部分更新）と、普通はその「記録」が残りません。 「記事の2ページ目を読み込んだけれど、URLは1ページ目のまま。だから戻るボタンを押すと、サイトの外へ出てしまった！」 という現象が起きやすくなります。
「履歴の基礎知識」を学ぶ目的は、SPA（シングルページアプリケーション）のような滑らかな動きをしながら、Webの伝統である「戻る・進む」や「URLの共有」を完璧に両立させることにあります。
実践：履歴の「積み木」を意識する
1. 「スタック（積み重ね）」の仕組み
ブラウザの履歴は、新しいページに行くたびに上に積み重なっていく「積み木」のようなものです。 - 新しく積む（Push）: 新しい履歴を作る。 - 今のを入れ替える（Replace）: 今ある積み木の見た目だけを変える。
2. URLは「現在の座標」である
URL（例：example.com/item/123）は、そのページが「何について」表示しているかを示す唯一の住所です。HTMXで内容を変えるなら、住所（URL）もそれに合わせて変えてあげないと、ユーザーが友達にそのページを教えることができなくなります。
3. ステップ・バイ・ステップ解説
- デフォルトの挙動を知る: HTMXは、何もしなければ履歴を一切いじりません。
- 履歴が必要な場面を見極める: 「タブを切り替えただけ」なら履歴は不要かもしれませんが、「詳細画面に移動した」なら履歴を残すべきです。
- URL管理の重要性: 「戻ったときに、ちゃんとその画面が再現されるか？」という問いを常に持ちましょう。
比較：昔のWeb vs HTMXのナビゲーション
昔のWeb (フルリロード)
- 挙動: リンクを押すごとに画面全体が真っ白になり、新しいURLを読み込む。
- 履歴: ブラウザが自動で全て完璧に記録してくれる。でも遅い。
HTMX (+ 履歴管理)
- 挙動: 画面の一部をサッと書き換える。
- 履歴: HTMXに指示して、手動でURLを更新したり履歴を残したりする。
- 利点: 速さと安定性を両立できる。
まとめ：初心者のための「Webのルール」の再確認
履歴とナビゲーションの管理は、あなたのアプリが「Webの一員」として正しく振る舞うためのマナーです。
- URLは裏切らない: ユーザーは「今見ている画面のURLをコピーすれば、後でまた同じものが見れる」と信じています。その信頼を壊さない設計をしましょう。
- 「戻る」を奪わない: あなたのアプリの中で迷子になったとき、一番の頼みの綱はブラウザの「戻る」ボタンです。これが機能しないアプリは、ユーザーにとって「閉じ込められた空間」のように感じられてしまいます。
- History APIの存在: 背景では JavaScript の
window.historyという仕組みが動いています。HTMXはこれを裏側で操ってくれています。
Webの原点を大切にする。ブラウザが長い歴史の中で培ってきた「履歴」という知恵をHTMXで使いこなし、便利さと使いやすさが最高レベルで融合したWebアプリを目指してください。次の記事では、具体的にURLを履歴に積む方法「hx-push-url（112. hx-push-url）」をご紹介します。