はじめに

LiBではフロントエンド勉強会をしており、最近は勉強会の中でVue CLI UIを使ってアプリを作っています。

関連記事

Vue CLI UIを使いつつの実装がかなり勉強になったので、復習がてら「ユーザ一覧を表示するアプリ」を作ってみたいと思います。

Vue CLI UIでアプリを新規作成

詳しい方法は過去記事をご覧ください。

フロントエンド初心者がVueUIを使って爆速でVueアプリを立ち上げてみる

アプリを新規作成してすぐはこのような画面になっています。

f:id:shimodach:20190725200851p:plain

ユーザ一覧ページを作る(Vue Router)

ユーザ一覧を表示するためのページを作ります。ルーティングにはVueの公式ルータである Vue Router を使います。

Vue Routerプラグインを追加

サイドメニューからプラグイン画面に移動し、「Vue Routerを追加」ボタンを押します。

f:id:shimodach:20190725200909p:plain

追加が終わったらアプリを見てみます。

f:id:shimodach:20190725200923p:plain

リンクが追加されています。

Aboutを押してみます。

f:id:shimodach:20190725200945p:plain

Aboutページに飛びました🎉

自動生成されたコードを見ながら新規ページを作ってみる

コード差分を見ながら別のページを作ってみることにします。

単一ファイルコンポーネントの作成

差分を見てみると、About.vueというcomponentが自動生成されていました。

About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

同じ感じでUserコンポーネントを作っておきます。

User.vue

<template>
  <div class="user">
    <h1>This is a user page</h1>
  </div>
</template>

ルーティング

router.jsが新規で作成されていました。

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})

Pathとnameとcomponentを指定すれば良いらしい、ということで、同じようにルートを追加します。

},
{
  path: '/user',
  name: 'user',
  component: () => import('./views/User.vue')
}

ルートページにUserページへのリンクを追加

App.vueの差分を見てみます。

App.vue

 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link>
+    </div>
+    <router-view/>
   </div>
 </template>

<router-link to=“/PATH_NAME”></router_link>でリンクを貼れるようなので、同じようにuserページへのリンクを追加します。

<router-link to="/about">About</router-link> |
<router-link to="/user">User</router-link>

確認

自動生成されたコード差分を見る限りこれでUserページも作成できたはず、ということでアプリを見てみます。

f:id:shimodach:20190725201114p:plain

エラーは起きておらず、リンクが追加されています。「User」のリンクを押してみます。

f:id:shimodach:20190725201157p:plain

無事Userページができました🎉

APIを使ってユーザデータを取得する(axios)

Userページが準備できたので、次はAPIを使ってユーザデータを準備します。 HTTPクライアントには axios を使います。

なおAPIには Random User Generator という、登録不要でランダムなユーザ情報を返してくれるというものがあったので、それを使わせていただきます。

axiosプラグインを追加

プラグイン画面で「axios」で検索してインストールします。

f:id:shimodach:20190725201224p:plain

このプラグインを追加するときはUI上でコミットまでできるようなので、UI上でコミットします。

ユーザデータを取得

User.vueにscriptを追加します。

User.vue

<script>
export default {
  name: 'user',
  data: function() {
    return {
      users: []
    };
  },
  created: function() {
    var self = this;
    axios.get('https://randomuser.me/api/?results=10')
      .then(function (response) {
        console.log(response);
        self.users = response.data.results;
      });
  }
}
</script>

ユーザデータを取得できているかをコンソール出力で見てみます。

f:id:shimodach:20190725201245p:plain

無事axiosでデータを取得できました🎉

ユーザ情報を表示する(Vuetify)

取得したデータを元にユーザ情報を表示します。プラグイン一覧眺めていたら Vuetify が人気そうだったので、Vuetifyのコンポーネントを使ってユーザの顔写真と名前を表示することにしました。

Vuetifyプラグインの追加(と調整)

前述のプラグインと同様にボタンクリックでプラグインを追加できます。そのまま追加しようとするとApp.vueやHelloWorld.vueが上書きされてしまうので、設定でUse a pre-made template?をOFFにしておきます。

f:id:shimodach:20190725201256p:plain

Avatarコンポーネントを使ってみる

Vuetifyを使えるようになったので、Avatarコンポーネントを使ってみます。

User.vue

<template>
  <div class="user">
    <v-app>
      <v-content>
        <div v-for="(user, i) in users"
          v-bind:key="i">
          <v-avatar>
            <img
              v-bind:src="user.picture.thumbnail"
            >
          </v-avatar>
          <span>
            {{ user.name.first }}
          </span>
        </div>
      </v-content>
    </v-app>
  </div>
</template>

アプリを見てみます。

f:id:shimodach:20190725201309p:plain