115. Deep Linking（ディープリンキング：どの「状態」へも、一本のURLで招待する）

原理：URLは「入り口」であり「状態」である

どこからでも、同じ景色が見えるか

素晴らしいWebアプリには、一つの大きな特徴があります。「特定の検索結果や、特定のタブが開いたままのURLをコピーして友達に送ったとき、友達がそのリンクを開けば、あなたが見ていたのと全く同じ景色（状態）が再現される」これを「ディープリンキング（Deep Linking）」と呼びます。

HTMXのような部分更新アプリでは、画面の一部だけをカチカチ変えがちですが、その「状態」がURLに反映されていないと、リロードした瞬間に元の（最初からやり直しの）画面に戻ってしまいます。

ディープリンキングの目的は、「ユーザーが今見ている画面の『状態』をすべてURLに込め、いつでもその地点から再開できるようにすること」です。

実践：いつでも「あの時」を再現する設計

1. 状態をURLに含める（クエリパラメータ）

例えば、絞り込み検索をしているとき。HTMXで検索結果を出すだけでなく、URLにもその条件を書き込む例です。

<!-- 
  検索を実行し、かつURLを "/search?q=apple" に置き換える (113.の応用) 
-->
<input type="text" name="q" 
       hx-get="/api/search" 
       hx-target="#results" 
       hx-replace-url="true"
       placeholder="検索語を入力...">

2. サーバー側での「初期化」への対応

ディープリンク (example.com/search?q=apple) を直接開いたとき、サーバーは「最初からその検索が実行された状態のHTML」を返さなければなりません。

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

URLバーを「鏡」にする: ユーザーが操作した重要なパラメータ（カテゴリ、検索文字、ページ番号など）は、常にURLバーに見えているように設定します（hx-push-url や hx-replace-url）。
直接アクセスを歓迎する: そのURLをブラウザに直接貼り付けて「Enter」を押したとき、ちゃんと正しい画面が出るかテストします。
部分的な描画と全体描画を分ける: HTTPリクエストが「HTMXから（hx-request）」か「通常アクセス」かをサーバーで見極め、返すHTMLの量を調整します（第7章で詳述）。

比較：URLが変わらないアプリ vs ディープリンク対応アプリ

URLが変わらない（悪い例）

現象: いくら検索しても、URLは常に example.com/search のまま。
弊害: お気に入りの商品の検索結果を保存できない。友達に教えられない。「戻る」が機能しない。

ディープリンク対応（良い例）

現象: 検索やフィルタのたびにURLが「今の状態」を正しく指し示す。
利点: ブックマークできる。リンクで直接そこへ飛べる。アプリの「使い勝手」がWeb全体と溶け込む。

まとめ：初心者のための「入り口」の設計

ディープリンキングは、あなたのアプリを「閉じたツール」から「開かれたWebリソース」へと格上げします。

URLはUIの一部: 目に見えるボタンと同じくらい、URLバーに何が出ているかは重要なユーザーインターフェースです。
「リロードテスト」を習慣に: 自分がある程度操作したあとに、ブラウザのリロードボタンを押してみましょう。もし全く別の画面に戻ってしまうなら、そこがディープリンキングの改善ポイントです。
シェアの喜び: 自分の作ったページが一本のURLで誰にでも伝えられる。これこそがWebの最大の魔法です。

どこからでも、何度でも。ディープリンキングを完璧にマスターして、ユーザーがいつでも好きな地点からあなたのWebアプリの世界へ飛び込める、真にオープンなナビゲーションを実現してください。次の記事では、履歴機能をより詳細に調整する「hx-history（116. hx-history）」を深掘りします。