123. Handling Redirects(リダイレクト対応:サーバー主導で「場所」を強制移動させる)
原理:道案内をサーバーに任せる
処理が終わったら、別の場所へ送りたい
「ログインに成功したらダッシュボードへ」「保存が終わったら一覧画面へ」 このように、サーバー側での処理が完了したあとに、ブラウザを別のURLへ移動させることを「リダイレクト(Redirect)」と呼びます。
通常のWebサイトでは、サーバーが「次はあっちへ行け!」という命令(302などのステータスコード)を出せば、ブラウザが勝手に画面を切り替えてくれます。しかし、HTMX(部分更新)の世界では、「画面の一部を変えるつもりだったのに、いきなり別のページへ全画面移動させる」ための、特別な指示が必要になります。
実践:サーバーからの「強制移動」コマンド
1. hx-redirect ヘッダー
サーバー側で、レスポンスの中に hx-redirect という名前の特別なヘッダーを込めて返します。HTMXはこれを受け取ると、どんな部分更新の指示も中断して、そのURLへ「ページ全体をリロード」して移動させます。
2. hx-location ヘッダー(よりスマートな移動)
hx-redirect はページ全体をリロードしますが、hx-location を使えば、「HTMXのメリットを保ったまま、URLだけを変えて滑らかに中身を入れ替える」という、さらにスマートな移動が可能です(第8章で詳述)。
3. ステップ・バイ・ステップ解説
- 移動が必要な場面を探す: フォーム送信後など、同じ場所に留まるのが不自然な場所を見つけます。
- サーバー側の設定: プログラムの中で、レスポンスヘッダーに
hx-redirectを追加し、移動先のURLを書き込みます。 - 注意点: リダイレクトが起きると、今入力していたフォームなどの状態は(保存していない限り)消えてしまいます。
比較:クライアントでの遷移 vs サーバーでのリダイレクト
クライアントでの遷移 (hx-getなど)
- 主体: ブラウザ(HTML)側。
- 性格: ユーザーがリンクをクリックして「行きたい」と意思表示したとき。
サーバーでのリダイレクト (hx-redirect)
- 主体: サーバー(プログラム)側。
- 性格: 計算や保存の結果を見て、サーバーが「次はここだ!」と判断したとき(ログイン成功、権限エラーなど)。
まとめ:初心者のための「司令塔」の役割
サーバーサイドからのリダイレクト対応をマスターすると、アプリの「制御」がぐっと楽になります。
- 成功の印としての遷移: 何かが上手くいったときに画面を切り替えるのは、ユーザーに「終わった!」という安心感を与える良い方法です。
- セキュリティの壁: 「ここから先はログインが必要だよ!」とサーバーが判断した瞬間に、即座にログイン画面へ飛ばす。この強行突破もリダイレクトの重要な仕事です。
- ヘッダーは「裏の伝言」: HTMLという表舞台(中身)だけでなく、ヘッダーという「裏の伝言」を使ってブラウザと会話する。これぞ、HTMXらしい一歩進んだ開発スタイルです。
指示に従い、正しく導く。リダイレクトという「道案内」の技術を使いこなして、どんな複雑な処理のあとでもユーザーを迷わせることなく、次なる目的地へとスムーズに案内してください。次の記事では、既存のページと共存する「複数ページアプリ(124. MPA & HTMX)」の考え方をご紹介します。