Vue.js入門 ―最速で作るシンプルなWebアプリケーション

第4回 シングルページアプリケーションの基礎を作成する

この記事を読むのに必要な時間:およそ 4.5 分

はじめに

この連載の前回までの記事で解説にあったように,Vue.jsはシンプルなViewレイヤのライブラリです。もしアプリケーションにシングルページアプリケーションとしての要件がある場合,ライブラリとしてVue.jsのみを使用した実装では少し困難になるでしょう。公式プラグインであるVue Routerを使えば,SPAを簡単に実現できるようになります。連載第4回目である本稿では,Vue.jsとVue Routerを使ったSPAの実装の基本について紹介します。

シングルページアプリケーションとは

シングルページアプリケーション(以下SPA)とは,1つのHTMLをロードして,ユーザーインタラクションに応じて動的にページを更新するWebアプリケーションです。通常のWebアプリケーションでは,ページ遷移時にサーバへアクセスしコンテンツをロードしますが,SPAではページ遷移をクライアントサイドで行います。その際に,Ajaxを使用して必要な時に必要なデータを取得してViewの表示を行います。そのため,より滑らかなユーザー体験を提供できるようになります。

一般的にSPAを実装するには,クライアントサイドでのページ遷移,データ取得,Viewのレンダリング,モジュール化されたコードの管理など,多くのことを考慮する必要があります。それらの機能を担ってくれるのがルーターと呼ばれるモジュールです。Reactに代表されるような最近の人気JavaScriptライブラリの多くは,ルーターの機能を本体もしくはプラグインとして提供しています。

Vue Routerの基礎

ルーターのインストール

Vue.jsのプラグインとして公式に提供されているSPA構築のためのルーティングライブラリがVue Routerです。Vue Routerは,ページ遷移先URLに対応するViewのレンダリング管理機能の他にも,便利なフック関数や遅延ローディングなどの機能を持っています。インストールするにはスクリプトタグでVue.js本体に続けて読み込んでください。以下のようにjsdelivrなどのCDNサービスを使うと便利です(執筆時点でのVue Routerの最新バージョンはv2.0.1です)。

<script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue.router/2.0.1/vue-router.min.js"></script>

ルートの定義

ルートとは,URLとViewの情報を保持する1つのレコードです。Vue Routerにおけるルートは,前回の記事で解説したVue.jsのコンポーネントを特定のURLにマッピングしたオブジェクトとして,ルーター初期化時のroutesオプションに設定されます。

// ルートオプションを渡してルーターインスタンスを生成します
var router = new VueRouter({
  // 各ルートにコンポーネントをマッピングします
  // コンポーネントはVue.extend() によって作られたコンポーネントコンストラクタでも
  // コンポーネントオプションのオブジェクトでも構いません
  routes: [
    {
      path: '/top',
      component: {
        template: '<div>トップページです。</div>'
      }
    },
    {
      path: '/users',
      component: {
        template: '<div>ユーザー一覧ページです。</div>'
      }
    }
  ]
})

// ルーターのインスタンスをrootとなるVueインスタンスに渡します
var app = new Vue({
  router: router
}).$mount('#app')

これだけで基本的なルートの定義は完了です。

SPAを実装していると,ユーザがアクセスするURLに対してパターンマッチングさせたいケースもあるでしょう。そのような場合はpath内のURLに:を使用してパターンを記述しましょう。マッチしたURL上のパラメータはコンポーネント内の$route.paramsからパターンに使用したパラメータ名と同じ名前でアクセスして取得することができます。

たとえば,ユーザの詳細ページを/user/:userIdというURLで受け付けて,URL内に含まれるユーザのIDに応じて表示を切り替えるようなUIを考えてみましょう。以下のコード例では,/user/123へアクセスがあった時に,コンポーネント内部でアクセスできる$route.params.userIdの値は123になります。

var router = new VueRouter({
  routes: [
    {
      // コロンで始まるパターンマッチング
      path: '/user/:userId',
      component: {
        template: '<div>ユーザーIDは {{ $route.params.userId }} です。</div>'
      }
    }
  ]
})

ページ遷移の実行

URLがマッチした時にマッピングされたコンポーネントをレンダリングして出力する先をrootのVueインスタンスがマウントしているHTML内に指定しましょう。<router-view>タグを使用します。

<div id="app">
  <!-- 現在のURLとマッチしたルートに定義されたコンポーネントがここにレンダリングされます -->
  <router-view></router-view>
</div>

この例ではブラウザで直接入力してアクセスしたURLとルート内でマッピングしたコンポーネントが<router-view>の部分にレンダリングされます。ただし,このままではページを開いてからページ遷移ができません。リンクを表示してページ遷移をできるようにしましょう。リンクの定義には<router-link>タグを使用します。

<div id="app">
  <!-- リンク先を `to` プロパティに指定します -->
  <!-- デフォルトで <router-link> は `<a>` タグとしてレンダリングされます -->
  <router-link to="/top">トップページ</router-link>
  <router-link to="/users">ユーザー一覧ページ</router-link>
  <router-view></router-view>
</div>

jsfiddleのサンプルを実行してみてください(jsfiddleではiframeを用いているためブラウザー上に表示されているURLは変更されません)。

以上,わずかなコード量でシンプルなSPAの基礎ができました。

著者プロフィール

手島拓也(てじまたくや)

新卒で入社した日本IBM研究所にて検索・テキスト解析ソフトウェア製品の開発に関わったのち,LINE株式会社にて数多くのLINEプラットフォーム開発を担当。その後,株式会社Indieの共同創業者&CTOとしてサービス開発全般を担当。

GitHub:tejitak
Twitter:@tejitak

コメント

コメントの記入