はじめに
湧き水APIを用いて熊本県の湧水一覧をVueのフレームワークであるVuetifyのtableで表示させてみました。
大まかな流れは以下の通りです。
- SpringWaterApi.vueページを追加するためにrouterの設定
- SpringWaterApi.vueにてaxiosを用いて湧き水のAPIを叩く
- SpringWaterApi.vueにて結果をテーブルで表示
開発環境
- Windows 11
- Vue 2.7.14
- Node.js 14.17.5
完成系
完成するとブラウザに以下のように表示されます。
完成系のソースコードは以下になります。
<template>
<v-app>
<v-data-table
:headers="headers"
:items="paginatedItems"
:server-items-length="totalItems"
:loading="loading"
:page.sync="page"
:items-per-page="itemsPerPage"
>
<template v-slot:item="{ item }">
<tr>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.furigana }}</td>
<td>{{ item.address }}</td>
<td>{{ item.latitude }}</td>
<td>{{ item.longitude }}</td>
<td>{{ item.overview }}</td>
</tr>
</template>
</v-data-table>
<v-pagination
v-model="page"
:length="totalPages"
@input="getPaginatedItems"
></v-pagination>
</v-app>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
headers: [
{ text: 'ID', value: 'id' },
{ text: '名前', value: 'name' },
{ text: 'ふりがな', value: 'furigana' },
{ text: '住所', value: 'address' },
{ text: '緯度', value: 'latitude' },
{ text: '経度', value: 'longitude' },
{ text: '概要', value: 'overview' },
],
items: [],
paginatedItems: [],
totalItems: 0,
page: 1,
itemsPerPage: 10,
loading: false,
};
},
computed: {
totalPages() {
return Math.ceil(this.totalItems / this.itemsPerPage);
},
},
created() {
this.getPaginatedItems();
},
methods: {
getPaginatedItems() {
this.loading = true;
axios
.get('https://livlog.xyz/webapi/springWater?q=熊本県')
.then((response) => {
this.items = response.data.result;
this.totalItems = response.data.result.length;
this.paginatedItems = this.items.slice(
(this.page - 1) * this.itemsPerPage,
this.page * this.itemsPerPage
);
this.loading = false;
})
.catch((error) => {
console.error(error);
this.loading = false;
});
},
},
};
</script>
このソースコードについて、これから説明していきます。
説明
今回はVue CLIを利用して作成したデフォルトのアプリに、SpringWaterApi.vueを追加する形で実装しています。
ファイル構成は以下のとおりです。
-
srcの中身
-
componentsの中身
-
routerの中身
SpringWaterApi.vueページを追加するためにrouterの設定
まず、HelLoWorld.vueからSpringWaterApi.vueに飛ぶためのrouterの設定をします。
srcフォルダの中に、router.jsというファイルを作成し、以下のように記述します。
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/HelloWorld.vue'
import SpringWaterApi from '../components/SpringWaterApi.vue'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/', component: Home },
{ path: '/springwaterapi', component: SpringWaterApi }
]
})
次に、main.jsに以下のソースコードを追加します。
import Vue from 'vue'
import App from './App.vue'
import router from './router/router' //追加
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
router, //追加
vuetify,
render: h => h(App)
}).$mount('#app')
また、HelLoWorld.vueにSpringWaterApi.vueへのリンクが表示されるように、App.vueのtemplateの中身も以下のように書き換えます。
<template>
<div id="app">
<router-view/>
</div>
</template>
これで、HelLoWorld.vueからSpringWaterApi.vueに飛ぶrouterの設定が完了しました。
SpringWaterApi.vueにてaxiosを用いて湧き水のAPIを叩く
続いて、SpringWaterApi.vueにて、axiosを用いて湧き水のAPIを叩きます。
- 湧き水API
湧水APIについては、以下の記事を参照ください。
- axios
Vueでaxiosを用いてAPIを叩く方法については、以下の記事を参照ください。
この記事のURLを、湧き水APIのURLに変更すれば、湧き水APIを叩くことができます。
axiosのGETリクエストのURLを***https://livlog.xyz/webapi/springWater?q=熊本県***に変更します。
クエリパラメータは熊本県で、JSON形式のレスポンスから「ID、名前、ふりがな、住所、緯度、経度、概要」の結果が得られます。
SpringWaterApi.vueにて結果をテーブルで表示
湧き水APIにアクセスできたら、その結果をVuetifyのテーブルを使用して表形式で表示します。
まずは、scriptタグ内で表示するデータの中身を設定します。
scriptタグ内のソースコードは以下のとおりです。
data() {
return {
headers: [
{ text: 'ID', value: 'id' },
{ text: '名前', value: 'name' },
{ text: 'ふりがな', value: 'furigana' },
{ text: '住所', value: 'address' },
{ text: '緯度', value: 'latitude' },
{ text: '経度', value: 'longitude' },
{ text: '概要', value: 'overview' },
],
items: [],
paginatedItems: [],
totalItems: 0,
page: 1,
itemsPerPage: 10,
loading: false,
};
},
- headersは表のヘッダー項目を表します。
- itemsの中にresponsedで得られたデータが入ります。
- paginatedItemsはページを分割します。
- totalItemsはページの最大数です。
- pageは初めに表示するページです。
- itemsPerPageを1ページごとに表示されるデータの数です。今回は1ページに10データ表示されるようにしています。
- loadingはテーブル内のデータがロード中の時、ロード画面を表示します。今回はfalseにしています。
表示するデータの中身が決まったら、templateタグ内で表示させます。
Vuetifyではv-data-tableの中にtrやtdなどを用いて表を出力することができます。
v-paginationではページネーションを設定することができます。
templateタグ内のソースコードは以下のとおりです。
<v-data-table
:headers="headers"
:items="paginatedItems"
:server-items-length="totalItems"
:loading="loading"
:page.sync="page"
:items-per-page="itemsPerPage"
>
<template v-slot:item="{ item }">
<tr>
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.furigana }}</td>
<td>{{ item.address }}</td>
<td>{{ item.latitude }}</td>
<td>{{ item.longitude }}</td>
<td>{{ item.overview }}</td>
</tr>
</template>
</v-data-table>
<v-pagination
v-model="page"
:length="totalPages"
@input="getPaginatedItems"
></v-pagination>
まとめ
今回は、湧き水APIを用いて熊本県の湧水一覧をVueのフレームワークであるVuetifyのtableで表示させてみました。
Vuetifyでは簡単にtableを表示できることができるので、今後も勉強していきます！