博士

やっほー、ロボ子！今日のITニュースはURLがテーマなのじゃ。URLって、ただのアドレスじゃないって知ってた？

ロボ子

URLがアドレスじゃない？どういうことですか、博士？

博士

URLはユーザーインターフェースの一部で、状態を保持するコンテナとしての役割も果たすのじゃ！例えば、URLを共有すれば、相手に同じ状態を見せられるし、ブックマークすれば、特定の時点の状態を保存できるぞ。

ロボ子

なるほど！共有性、ブックマーク、ブラウザの履歴、ディープリンク…全部URLが提供するものなんですね。

博士

そうそう！URLの構造も重要じゃ。パスセグメント、クエリパラメータ、アンカーを使いこなせば、もっとリッチな表現ができるのじゃ。

ロボ子

パスセグメントは階層的なリソースナビゲーション、クエリパラメータはフィルタやオプション、アンカーはクライアントサイドのナビゲーションですね。

博士

その通り！クエリパラメータの使い方も色々あるぞ。区切り文字を使ったり、ネストされたデータをエンコードしたり、ブールフラグを使ったり、配列を使ったり…。

ロボ子

配列を使うのは、例えば`tags[]=frontend&tags[]=react`のように書くのですね。

博士

そうじゃ！URLを状態コンテナとして利用した例もたくさんあるぞ。PrismJSの設定、GitHubの行ハイライト、Google Maps、Figma、Eコマースのフィルタ…。

ロボ子

FigmaのURLにキャンバスの位置やズームレベルが含まれているのは知りませんでした！

博士

URLに含めるべき状態と、含めるべきでない状態があるのもポイントじゃ。検索クエリやフィルタは含めるべきだけど、機密情報や一時的なUI状態は避けるべきじゃ。

ロボ子

機密情報をURLに含めるのは絶対にダメですね！

博士

JavaScriptでURLを扱うなら、`URLSearchParams` APIが便利じゃ。ReactならReact RouterやNext.jsのフックを使うと良いぞ。

ロボ子

`URLSearchParams` API、使ってみます！

博士

URL更新のデバウンスも忘れずに！検索みたいに高頻度の更新は、URLの変更をデバウンスするのじゃ。

ロボ子

pushStateとreplaceStateの使い分けも重要ですね。pushStateは新しい履歴エントリを作成し、replaceStateは現在のエントリを更新…。

博士

URLはアプリケーションとその利用者間の契約として扱うのじゃ。明確な境界線、意味の伝達、キャッシュとパフォーマンスの向上、バージョニングと進化を考慮するのじゃ。

ロボ子

URLを契約として扱う…深いですね。

博士

アンチパターンも避けるのじゃ。メモリにのみ状態を保持するSPA、URLに機密データを含める、一貫性のない命名、複雑な状態をURLに詰め込む、URLの長さ制限を超える、Backボタンを壊す…。

ロボ子

Backボタンを壊すのは最悪ですね！

博士

というわけで、URLは奥が深いぞ！ところでロボ子、URLを短くするサービスって知ってる？

ロボ子

はい、Bitlyとかありますね。

博士

あれって、URLを短くする代わりに、個人情報がダダ漏れになるリスクがあるって知ってた？

ロボ子

えっ、そうなんですか！？

博士

…ってのは嘘じゃ！でも、URLは大切に扱うのじゃぞ！