湧水APIを用いて熊本県の湧水一覧を表示してみた（Vue2、Vuetify）

## はじめに
湧き水APIを用いて熊本県の湧水一覧をVueのフレームワークであるVuetifyのtableで表示させてみました。
大まかな流れは以下の通りです。

1. SpringWaterApi.vueページを追加するためにrouterの設定
1. SpringWaterApi.vueにてaxiosを用いて湧き水のAPIを叩く
1. SpringWaterApi.vueにて結果をテーブルで表示

## 開発環境
- Windows 11
- Vue 2.7.14
- Node.js 14.17.5

## 完成系
完成するとブラウザに以下のように表示されます。
![screencapture-witty-smoke-036ec5e10-2-azurestaticapps-net-2023-02-15-15_25_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/f21528ec-8c9d-3d9a-6b9d-f102b9d25c4e.png)


完成系のソースコードは以下になります。

```SpringWaterApi.vue
<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の中身
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/5511214d-0f04-ceb2-43ae-6c667c3613bb.png)

- componentsの中身
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/224be6fa-b9f3-9920-7d32-a0f0b8446359.png)

- routerの中身
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3124507/f8d32ede-8d82-4e75-5b8f-d46ed7889b66.png)


## SpringWaterApi.vueページを追加するためにrouterの設定
まず、HelLoWorld.vueからSpringWaterApi.vueに飛ぶためのrouterの設定をします。
srcフォルダの中に、router.jsというファイルを作成し、以下のように記述します。

```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に以下のソースコードを追加します。
```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の中身も以下のように書き換えます。
```App.vue
<template>
  <div id="app">
    <router-view/>
  </div>
</template>
```
これで、HelLoWorld.vueからSpringWaterApi.vueに飛ぶrouterの設定が完了しました。

## SpringWaterApi.vueにてaxiosを用いて湧き水のAPIを叩く
続いて、SpringWaterApi.vueにて、axiosを用いて湧き水のAPIを叩きます。

- 湧き水API
湧水APIについては、以下の記事を参照ください。

https://qiita.com/kkawano_neko/items/4d42dce349241e3de1c5

- axios
Vueでaxiosを用いてAPIを叩く方法については、以下の記事を参照ください。
この記事のURLを、湧き水APIのURLに変更すれば、湧き水APIを叩くことができます。

https://qiita.com/tatsuki-tsuchiyama/items/37559ebcf36c85cade59

axiosのGETリクエストのURLを***https://livlog.xyz/webapi/springWater?q=熊本県***に変更します。
クエリパラメータは熊本県で、JSON形式のレスポンスから「ID、名前、ふりがな、住所、緯度、経度、概要」の結果が得られます。

## SpringWaterApi.vueにて結果をテーブルで表示
湧き水APIにアクセスできたら、その結果をVuetifyのテーブルを使用して表形式で表示します。
まずは、scriptタグ内で表示するデータの中身を設定します。

scriptタグ内のソースコードは以下のとおりです。

```SpringWaterApi.vue
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タグ内のソースコードは以下のとおりです。

```SpringWaterApi.vue
        <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を表示できることができるので、今後も勉強していきます！