【くらいあんとさいどるーてぃんぐ】

クライアントサイドルーティングとは？

最終更新: 2026年10月8日

💡 URLに合わせて、ブラウザの中で画面を切り替える

URLと表示する画面の対応をブラウザ側のJavaScriptで扱い、ページ全体を読み込み直さずに画面を切り替える仕組み。遷移先のデータやコードをサーバーから取得する場合もある。

📌 このページのポイント

/aboutへ切り替える例。必要に応じ、データやコードの通信も行う。

ひよこ

URLが変わるのに、ページ全体を読み直さないのはなぜ？

ペンギン先生

クライアントサイドルーティングでは、ブラウザ側のJavaScriptがURLに対応する画面を選んで表示するよ。たとえば/aboutへ移ったらAbout画面に切り替える。React RouterやVue Routerなどで実装できるんだ。

ひよこ

サーバーには何も取りに行かない？

ペンギン先生

遷移先のデータや、まだ読み込んでいないコードを取得する場合はあるよ。ページ全体を再読み込みしないことと、通信をしないことは別なんだ。表示までの速さも、取得するものや処理によるよ。

ひよこ

URLや戻るボタンは、どう扱うの？

ペンギン先生

History APIを使う方式ではpushState()などで履歴とURLを更新し、戻る・進むで起きるpopstateを扱うよ。ただしpushState()を呼ぶだけではpopstateは発生せず、画面も自動では変わらない。ルーター側で表示を更新するんだ。

ひよこ

URLと画面の対応は、どう決めるの？

ペンギン先生

ルーターにパスと画面の対応を設定するよ。/aboutならAbout、/ならHome、といった具合だね。別の方式として、URLの#より後ろを使うハッシュルーティングもあるんだ。

ひよこ

URLの/aboutを直接開いても同じ画面になる？

ペンギン先生

配信側の設定にもよるよ。HTML5履歴方式のSPAでは、直接アクセスや再読み込みでサーバーへそのパスを要求する。アプリのHTMLを返すフォールバックなどを設定し、存在しない画面の扱いも決めておく必要があるんだ。

まとめ：ざっくりこれだけ覚えればOK！

「クライアントサイドルーティング」って出てきたら「ブラウザ側でURLに応じて画面を切り替える仕組み」と思えばだいたいOK！

📖 おまけ：英語の意味

「Client-side Routing」＝クライアント側での経路制御

💬 Client-sideはブラウザなどのクライアント側、Routingは行き先を決めること。URLから表示する画面を選ぶ処理をブラウザで行うよ。サーバーとの通信が一切なくなるという意味ではないんだ。

参考資料