133. hx-location（hx-location：滑らかなページ移動の指示：SPAらしさを損なわない「誘導」）
原理：スマートな「横移動」
リロードさせずに、別のURLへ
画面遷移をさせる際、hx-redirect (123.) を使うとページ全体が白くなり、リロードが発生してしまいます。これではせっかくの滑らかなHTMX体験（SPAらしさ）が途切れてしまいます。
「hx-location（エイチエックス・ロケーション）」ヘッダーは、「ページをリロードすることなく、HTMXの仕組みを使って、滑らかに別のURLの内容に入れ替える」ための高度な移動指示です。
実践：一段上の「画面遷移」を実現する
1. シンプルな移動指示
サーバーから移動先のパスを送ります。
HTMXはこれを受けると、内部的に/new-page へリクエストを飛ばし、届いた結果を今のページの body（または指定先）に滑らかに貼り付けます。
2. 詳細なオプション付きの移動
「URLを変えつつ、ターゲットはこのIDにして、スクロールは一番上に戻して……」といった細かい指示をJSON形式で送ることも可能です。
/* サーバーからのレスポンス(ヘッダー) */
hx-location: { "path": "/item/123", "target": "#main", "swap": "innerHTML" }
3. ステップ・バイ・ステップ解説
- 「滑らかな移動」が必要な場面: ログイン成功後や、モーダルを閉じたあとの遷移など。
- ヘッダーの送信: サーバーで
hx-locationをセットします。 - URLバーの確認: 画面が切り替わると同時に、ブラウザのURLも正しく変わっているか確認します。
比較：hx-redirect vs hx-location
hx-redirect
- 方法: ページ全体を強制リロードして移動。
- 感覚: 昔ながらの「カチッ、真っ白、表示」という動き。
- 用途: ログアウト、外部サイトへの移動など。
hx-location
- 方法: HTMX経由で部分的に中身を入れ替えて移動。
- 感覚: モダンなSPAの「シュッ」と中身が入れ替わる動き。
- 用途: サイト内のページ遷移全般。
まとめ：初心者のための「シームレスな誘導」
hx-location を使いこなせれば、あなたのWebアプリはもはや「ページ集」ではなく、一つのつながった「体験」になります。
- ユーザーを「現実に」戻さない: 通信中であることを感じさせず、コンテンツが次々と入れ替わっていく快感。これがユーザーをアプリに夢中にさせます。
- URLと中身の一致: 自動的に
hx-push-urlと同じような効果が得られるため、URLの共有可能性（115.）も保たれます。 - サーバー主導のSPA: 本物のSPA（Reactなど）を作らなくても、サーバーからこのヘッダーを出すだけで、同じ質の「滑らかさ」が手に入る。これこそがHTMXの最強のメリットです。
途切れない体験、終わらない対話。hx-location を使って、サーバー側から自由自在に、かつ最高にスムーズにユーザーを導く、洗練されたWebナビゲーションを完成させてください。次の記事では、URLバーだけをこっそり直す「hx-push-urlヘッダー（134. hx-push-url）」をご紹介します。