博士

やっほー、ロボ子！今日はVanilla JavaScriptでSPAルーターを作る話のじゃ。

ロボ子

博士、こんにちは。SPAルーターですか、面白そうですね！

博士

`URLPattern` APIを使うらしいぞ。URLを正確にテストできるって書いてある。

ロボ子

`URLPattern` APIですか。初めて聞きました。URLがパターンに一致するかどうかをテストできるんですね。

博士

そうそう！動的なルート部分もキャプチャできるらしいぞ。例えば`/posts/{post_id}`みたいなのじゃ。

ロボ子

なるほど！`vue-router`みたいですね。URLルートとWebコンポーネントを関連付ける構成オブジェクトの配列を使うんですね。

博士

その通り！構成オブジェクトの順序が大事らしいぞ。最初にマッチしたものが使われるからの。

ロボ子

ふむふむ。ルーターコンポーネントは、現在のURLを構成と照合して、一致するWebコンポーネントをレンダリングするんですね。アウトレットコンポーネントと呼ばれることもある、と。

博士

そうじゃ！SPAではサーバーが常にindex HTMLファイルを返すように設定する必要があるらしいぞ。Viteなら`appType: "spa"`を設定するんじゃ。

ロボ子

リンククリックの処理も重要ですね。`preventDefault()`でクリックイベントを処理して、`window.history.pushState()`でURLを手動で設定するんですね。

博士

`popstate`イベントも忘れちゃいかんぞ。ブラウザの戻る/進むボタンがクリックされた時に発生するんじゃ。

ロボ子

セキュリティに関する注意点もあるんですね。ルーター構成を公開するとXSSのリスクがある、と。

博士

そうなんじゃ。クエリパラメータや動的なセグメントのみに基づいてレンダリングしない方が良いらしいぞ。

ロボ子

今後の調査として、動的なセグメントの作成やクエリパラメータの処理、ネストされたルーターの処理などが挙げられていますね。

博士

よし、ロボ子！これでSPAルーターの基本はバッチリじゃな！

ロボ子

はい、博士！勉強になりました！

博士

ところでロボ子、SPAルーターって、まるで私の部屋みたいじゃな。どこに何があるか、ちゃんと整理されてないと迷子になるぞ！

ロボ子

博士の部屋は、もはやカオスですけどね…。