【フロントエンド入門13】Vue RouterでのSPA構築｜シングルページアプリの基本を学ぶ

Vue.jsを使ったシングルページアプリケーション（SPA）では、ページ遷移を実現するためにVue Routerを利用します。Vue Routerを理解することで、複数ページにまたがるようなWebアプリケーションでも快適なユーザー体験を提供できます。本記事では、Vue Routerの基本的な使い方と、SPA構築のための基礎を初心者向けに詳しく解説します。

シングルページアプリケーション（SPA）とは？

SPAの概要

SPA（Single Page Application）とは、通常のWebアプリケーションのように複数のHTMLページを行き来するのではなく、1つのHTMLファイルで複数の画面を切り替える構造を持つWebアプリケーションのことです。

SPAのメリットとデメリット

• メリット
  • ページ遷移が高速で、ユーザー体験が向上する
  • サーバーの負荷が軽減される
  • リッチなユーザーインターフェースが構築できる
• デメリット
  • 初回読み込みが重くなる場合がある
  • ブラウザの戻るボタンや直接リンクへの対応が必要

Vue Routerとは？

Vue Routerの役割

Vue Routerは、Vue.js公式のルーティングライブラリであり、URLに応じたコンポーネントの表示を制御します。ページ遷移時にページ全体を再読み込みせずに必要な部分だけを切り替えることで、SPAの実現が可能になります。

Vue Routerのセットアップ

1. プロジェクトの作成

Vue CLIを使って新しいプロジェクトを作成します。

vue create my-vue-spa

インストールが完了したら、プロジェクトディレクトリに移動します。

cd my-vue-spa

2. Vue Routerのインストール

npm install vue-router

Vue Routerがインストールされたら、ルーティング設定を開始できます。

3. ルーターの設定ファイルを作成する

プロジェクト内のsrcディレクトリに新しいrouter/index.jsファイルを作成します。

router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

ルーターをVueアプリに登録する

Vueアプリにルーターを登録するために、main.jsを編集します。

src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App)
  .use(router)
  .mount('#app');

これでルーターがアプリ全体に適用され、各ルートに対応するコンポーネントが表示されるようになります。

基本的なルーティングの実装

1. コンポーネントの作成

各ページに対応するコンポーネントを作成します。

src/views/Home.vue

<template>
  <div>
    <h1>ホームページ</h1>
    <p>ここはホームページです。</p>
  </div>
</template>

src/views/About.vue

<template>
  <div>
    <h1>アバウトページ</h1>
    <p>このアプリについての情報を表示します。</p>
  </div>
</template>

2. ルートリンクの設定

ページ間のナビゲーションには<router-link>を使用します。

src/App.vue

<template>
  <div id="app">
    <nav>
      <router-link to="/">ホーム</router-link> |
      <router-link to="/about">アバウト</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

• <router-link>：指定したパスに対応するコンポーネントに遷移します。
• <router-view>：現在のルートに対応するコンポーネントが表示される領域です。

動的ルーティング

動的ルートの設定

動的ルートを使うと、URLの一部をパラメータとして扱い、ページごとに異なる内容を表示することができます。

例：動的ルートの設定

router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import UserProfile from '../views/UserProfile.vue';

const routes = [
  {
    path: '/user/:id',
    name: 'UserProfile',
    component: UserProfile
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

動的パラメータの取得

コンポーネント内で動的パラメータを取得するには、useRouteを使用します。

src/views/UserProfile.vue

<template>
  <div>
    <h1>ユーザー情報</h1>
    <p>ユーザーID: {{ userId }}</p>
  </div>
</template>

<script>
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const userId = route.params.id;

    return { userId };
  }
};
</script>

この例では、URLのパスから取得したユーザーIDを表示しています。

プログラムによるナビゲーション

Vue Routerでは、ユーザーの操作に依存せずプログラムからルートを変更することもできます。

例：ボタンをクリックしてページを遷移する

<template>
  <div>
    <button @click="goToAbout">アバウトページへ移動</button>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function goToAbout() {
      router.push('/about');
    }

    return { goToAbout };
  }
};
</script>

この方法を使えば、ユーザーの操作なしでプログラム的にページを遷移できます。

結論

Vue Routerを使うことで、Vue.jsを利用したSPAの構築が容易になります。基本的なルーティングから動的ルートの設定、プログラムによるナビゲーションまでをマスターすれば、複雑なWebアプリケーションの開発にも対応できるようになります。次は、ルートガードや遷移アニメーションなど、より高度な機能を学び、実際のプロジェクトに活かしていきましょう。