site iconKoei's Digital Garden

Archive

Routing - URLを状態として扱う画面遷移基盤

5 min read

Routing - URLを状態として扱う画面遷移基盤

ロードマップ: Vue.js学習ロードマップ

What（何についてか）

Routingは、URLに応じて表示する画面コンポーネントを切り替える仕組みである。VueのSPAでは、サーバーがページごとにHTMLを返すのではなく、ブラウザ上のアプリケーションがURL変化を監視し、対応する画面を描画する。

Why（なぜ必要か）

SPAでは、画面遷移のたびにHTML全体を再読み込みすると体験が重くなる。クライアントサイドルーティングを使うことで、アプリを再起動せずに現在のURLだけを状態として扱い、必要な画面だけを差し替えられる。

また、実務では単純な画面切り替えだけでなく、戻る・進む、直リンク、404、認可、ネスト画面、URLパラメータなどを安定して扱う必要がある。そのため、RoutingはUIの補助機能ではなく、複数画面アプリケーションの基盤として重要である。

How（どう動くか）

Server-Side Routing と Client-Side Routing

  • Server-Side Routing: URLごとにサーバーが新しいHTMLを返す
  • Client-Side Routing: ブラウザ側でURL変化を検知し、表示するコンポーネントを切り替える

VueのSPAでは後者が中心になる。

最小の自前Routing実装

公式ページでは、window.location.hash と動的コンポーネントを使った最小構成が示されている。

<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'
 
const routes = {
  '/': Home,
  '/about': About
}
 
const currentPath = ref(window.location.hash)
 
window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
})
 
const currentView = computed(() => {
  return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>
 
<template>
  <a href="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>

この例の流れは次のとおりである。

flowchart TD
  A["URL hash change"] --> B["currentPath ref を更新"]
  B --> C["computed currentView を再計算"]
  C --> D["routes から対応コンポーネントを選択"]
  D --> E["component :is で描画"]

本質

Routingの本質は、URLを状態として扱い、その状態に応じて表示コンポーネントを切り替えることにある。

  • currentPath: 現在のURL状態
  • routes: URLと画面の対応表
  • currentView: 現在URLから導かれる表示対象
  • <component :is="...">: 選ばれた画面の描画

Vue Router が抽象化する責務

自前実装で手書きしていた責務を、Vue Routerが実務向けに抽象化する。

責務自前実装Vue Router
URL変化の監視hashchange / History API を直接扱うルータが吸収する
URLと画面の対応routes オブジェクトroute record として宣言的に管理
画面描画<component :is="currentView" /><router-view />
画面遷移リンク<a href="#/..."><router-link>
404・認可・ネスト手作業で実装ルータ基盤上で整理しやすい

Options API → Composition API 差分（補足）

項目Options API（旧）Composition API（新）
URL状態data() で currentPath を持つref() で currentPath を持つ
派生ビューcomputed: { currentView() { ... } }computed(() => ...)
監視開始mounted() でイベント登録script setup で直接登録、必要に応じてライフサイクル併用
this 参照this.currentPathcurrentPath.value

Key Concepts

用語説明
RoutingURLに応じて画面を切り替える仕組み
Client-Side Routingブラウザ側でURL変化を処理して画面更新する方式
SPA1つのHTML/JSアプリの中で画面遷移を行う構成
History APIブラウザ履歴を操作してURL遷移を扱うAPI
hash routing# 以降を使って画面状態を表現する簡易ルーティング
dynamic component実行時に表示コンポーネントを切り替える仕組み
Vue RouterVue公式のルーティングライブラリ
router-view現在のルートに対応する画面を差し込む描画ポイント
router-linkルーティング用の宣言的リンクコンポーネント

実務での判断軸

  • 画面数が少なく、URL管理が不要ならルータなしでも成立する場合がある
  • 複数画面をURLとして表現するならVue Routerを導入する
  • 直リンク、戻る/進む、404、認可、ネスト構造が必要ならRouting基盤は必須である

Graph View

Backlinks