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

第5回 シングルページアプリケーションを拡充する

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

はじめに

本稿は前回のシングルページアプリケーションの基礎を作成するの続編です。Vue Routerを使用して,データを取得する方法やフック関数について解説します。また,Vue Routerの機能を組み合わせた簡単なシングルページアプリケーション(以下SPA)の実装例を紹介します。

データの取得

SPAではページ遷移をした際に,APIを通じて取得したデータをUIに表示する場面が頻繁にあるでしょう。Vue Routerを使ったアプリでは,Vueのコンポーネントのcreatedwatchを使って実装するのが一般的です。

前回の記事のサンプルコードでは,トップページとユーザー一覧ページがあるシンプルなSPAを作成しました。このSPAを拡張して,ユーザー一覧ページに切り替えたタイミングでユーザーの情報を取得して表示してみましょう。

ナビゲーションのHTMLのテンプレートは前回の記事のものと変わりません。

<div id="app">
  <router-link to="/top">トップページ</router-link>
  <router-link to="/users">ユーザー一覧ページ</router-link>
  <router-view></router-view>
</div>

/usersにアクセスした時のユーザー一覧用のコンポーネントが,前回までのものと比べて少し複雑になりそうです。したがって,今回は文字列をtemplateプロパティにセットするのではなく,HTML上に定義したテンプレートから読み込むようにしてみましょう。

<script type="x-template" id="user-list">
  <div>
    <div class="loading" v-if="loading">ロード中...</div>
    <div v-if="error" class="error">
      {{ error }}
    </div>
    <!-- usersがロードされたら各ユーザーの名前を表示する -->
    <div v-for="user in users" :key="user.id">
      <h2>{{ user.name }}</h2>
    </div>
  </div>
</script>

上記のテンプレートHTMLは,rootのVueをmountする対象が記述されているHTMLと同じファイル内に記述します。

次は,このテンプレートを使用して,ユーザー一覧データを表示するコンポーネントのJavaScriptの実装です。

// 擬似的にAPI経由で情報を取得したようにする
var getUsers = function (callback) {
  setTimeout(function () {
    callback(null, [
      {
        id: '001',
        name: 'Takuya Tejima'
      },
      {
        id: '002',
        name: 'Yohei Noda'
      }
    ])
  }, 1000)
}

var UserList = {
  // HTML上のscriptタグのidを指定する
  template: '#user-list',
  data: function () {
    return {
      loading: false,
      // 初期値の空配列を定義
      users: function () { return [] },
      error: null
    }
  },

  // 初期化時にデータを取得する
  created: function () {
    this.fetchData()
  },

  // ルーティングが変更された時に再度データを取得するために$routeの変更をwatchする
  watch: {
    '$route': 'fetchData'
  },

  methods: {
    fetchData: function () {
      this.loading = true
      // 取得したデータの結果をusersに格納する
      getUsers((function (err, users) {
        this.loading = false
        if (err) {
          this.error = err.toString()
        } else {
          this.users = users
        }
      }).bind(this))
    }
  }
}

これでコンポーネントの実装は完了です。次に,Vue Router初期化時に/usersへのアクセスとUserListコンポーネントをマッピングします。この部分は前回の内容と変わりません。

  var router = new VueRouter({
    routes: [
      {
        path: '/top',
        component: {
          template: '<div>トップページです。</div>'
        }
      },
      {
        path: '/users',
        component: UserList
      }
    ]
  })

  var app = new Vue({
    router: router
  }).$mount('#app')

実行すると,"ロード中"と表示された後に,以下のような結果が表示されるでしょう。

図1 データ取得後のUI

図1 データ取得後のUI

コードサンプルはこちらで確認できます。

著者プロフィール

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

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

GitHub:tejitak
Twitter:@tejitak

コメント

コメントの記入