コンテンツにスキップ

054. hx-current-url Header(「今どこにいるか」をサーバーへ伝える)

原理:Webアプリの「現在地」というコンテキスト

サーバーは迷子になりやすい

Webの通信において、サーバーは基本的に「届いたリクエスト」のことしか分かりません。 あなたが今、ブラウザのアドレスバーにどんなURLを表示しながらそのボタンを押したのか。実はサーバーは、教えてもらわない限り正確には知らないのです。

しかし、時には「今どのページからリクエストが送られたか」によって処理を変えたいことがあります。 - 「検索結果ページからボタンを押したなら、検索画面に戻してほしい」 - 「詳細ページから削除したなら、一覧ページへ飛ばしてほしい」 - 「今現在のURLを記録して、後ほど元の場所に戻れるようにしたい」

このように、ブラウザのアドレスバーに今表示されている「本当のURL」をサーバーへ伝えるためのヘッダーが hx-current-url です。


実践:現在地情報を活用したスマートな誘導

1. サーバー側での「帰り道」の決定(疑似コード)

ログインが必要な処理などで、完了後に元のページへ戻すためのURLを特定する例です。

# Ruby on Rails の例
def create_comment
  # 処理が終わったあと、どこへ戻すべきかをヘッダーから取得
  current_page = request.headers['hx-current-url']

  # ...コメントを保存...

  # 元のページに戻るための指示(Redirect)を出す
  response.headers['hx-redirect'] = current_page
  render plain: "保存しました。元のページに戻ります。"
end

2. リファラ(Referer)との違い

従来のWebにも「Referer(リファラ)」という、どのページから来たかを示すヘッダーがあります。しかし、HTMXで部分更新を繰り返していると、リファラの情報が古くなったり、SPAのような複雑な遷移では正確でなくなったりすることがあります。 hx-current-url は、その瞬間の「ユーザーの目に見えているURL」を正確に届ける、HTMX専用の特急便です。

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

  1. 自動送信: hx-gethx-post を使うとき、HTMXは現在のアドレスバーのURLを自動でこのヘッダーにセットして送ります。
  2. サーバーの利用: サーバー側でこのURLを読み取り、処理の条件分岐や、ログの記録、戻り先の指定などに活用します。
  3. SPAとの親和性: ページ遷移を伴わないHTMXアプリにおいて、サーバーがフロントエンドの「今の居場所」を知るための唯一の、かつ最も信頼できる手段となります。

特徴:正確な「現在」の記録

  • フルURLが届く: ドメイン名からパラメータ(?q=...)まで、完全なURLがそのまま届きます。
  • URL変更に追従: hx-push-url(037.URL更新)などでURLを書き換えていた場合、その「最新のURL」が正しく送られます。

まとめ:初心者のための「位置情報」の守り方

hx-current-url ヘッダーは、サーバーとブラウザが「今、私たちはこのページを一緒に作っているんだね」という共通認識を持つための共通言語です。

  • 文脈(コンテキスト)を知る: 同じ「保存」ボタンでも、トップページからの保存と、設定ページからの保存では意味が違うかもしれません。その判断材料をサーバーに提供しましょう。
  • UXの向上: 処理が終わった後、ユーザーを迷わせずに元の場所へ、あるいは期待通りの場所へ誘導するための強力なヒントになります。
  • デバッグの相棒: サーバーのログを見た時に、「どのURLからリクエストが飛んできたか」が明記されていると、問題の切り分けが非常に楽になります。

迷子のサーバーに、現在地を教える。hx-current-url を通じて、ユーザーの行動履歴に寄り添った、気が利くWebアプリを設計してください。次の記事では、通信を引き起こした「真犯人(要素)」を特定する hx-trigger(055. hx-trigger)をご紹介します。