환경

macOS Catalina 10.15.3
vue 3.0.1

vue-cli로 프로젝트 만들기

터미널에서 다음 명령을 치십시오.

$ vue crate my-project

프리셋은 Babel, Router, Vuex, Linter/Formatter, Unit Testing을 선택합니다.

만들 수 있으면 일단 동작 확인

$ cd my-project
$ npm run serve

이제 localhost:8080에 연결
다음 화면이 표시되어야 합니다.

구루 나비 API 액세스 키 얻기

구루 나비 API를 사용하려면 액세스 키가 필요하므로 다음 사이트에서 검색하십시오.
구루나비 Web Service

구루 나비 API에서 데이터 검색

먼저 /src 바로 아래에 api라는 디렉토리를 만듭니다.
이 안에 gnavi.js라는 파일을 만들고 그 안에 구루 나비 API에서 데이터를 검색하는 함수를 정의합니다.

my-project
 └── src/
     └── api/
         └── gnavi.js

단일 파일에 직접 메소드를 정의할 수도 있지만, 나누는 것이 보수성이 높아지거나 코드의 중복을 줄일 수 있습니다.

데이터를 얻으려면 axios를 사용하여 얻기 때문에 설치하지 않은 경우 다음 명령을 두드려야합니다.

$ npm install --save axios

그럼, 구루나비 API로부터 데이터를 취득해 갑니다.

gnavi.js

import axios from 'axios'

export default {
  searchShops(shopName) {
    // Promiseを返す
    return new Promise((resolve, reject) => {
      axios
        .get("https://api.gnavi.co.jp/RestSearchAPI/v3/?keyid=<ぐるなびAPIから取得したアクセスキー>", {
          // 店名検索
          params: {
            name: shopName
          })
          // 検索結果をresolve
          .then(shops => {
            resolve(shops.data.rest);
          })
          // エラーハンドリング
          catch(error => {
            const errorStatus = error.response.status;

            switch (errorStatus) {
              case 400:
                reject("不正なパラメータが指定されました");
                break;

              case 401:
                reject("不正なアクセスです");
                break;

              case 404:
                reject("お店が見つかりませんでした");
                break;

              case 405:
                reject("不正なアクセスです");
                break;

              case 429:
                reject("リクエスト回数上限超過");
                break;

              case 500:
                reject("処理中にエラーが発生しました");
                break;

              default:
                reject("不明なエラーです");
                break;
            }
        });
    })
  }
}

이제 구루 나비 API에서 데이터를 검색 할 수 있습니다.
이제 이 데이터를 보려면 src/components/HelloWorld.vue를 다시 작성합니다.

HelloWorld.vue

<template>
  <v-container>
    <v-row>
      <v-col cols="12" xs="10" sm="8" md="6" lg="4">
        <v-text-field label="店名" v-model="shopName" />
      </v-col>
      <v-col cols="2">
        <v-btn @click="loadShops" :loading="loading">検索</v-btn>
      </v-col>
    </v-row>

    <v-alert v-if="error_msg" type="error">{{ error_msg }}</v-alert>

    <v-row v-if="shops">
      <v-col cols="12" xs="12" sm="6" md="4" lg="3" v-for="(shop, index) in shops" :key="index">
        <v-card>
          <v-img :src="shop.image_url.shop_image1" />
          <v-card-title>{{ shop.name }}</v-card-title>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import gnavi from "@/api/gnavi.js";

export default {
  name: "HelloWorld",

  data() {
    return {
      shopName: null,
      shops: null,
      error_msg: null,
      loading: false
    };
  },

  methods: {
    loadShops() {
      this.shops = null;
      this.error_msg = null;
      this.loading = true;

      gnavi
        .searchShops(this.shopName)
        .then(res => {
          this.shops = res;
        })
        .catch(err => {
          this.error_msg = err;
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>

디자인을 쉽게 정돈하기 위해 vuetify를 사용합니다.
특히 이번 내용과는 관계 없기 때문에 도입 등은 생략합니다.

실행하면, 이런 느낌이 됩니다.

첫 화면


야마야를 입력하고 검색 버튼을 누르면


검색결과가 0건인 경우

요약

이번에는 구루 나비 API에서 데이터를 검색했습니다.
Vue.js나 Promise등의 설명을 생략했기 때문에, Vue.js나 JavaScript에 접한 적이 없는 분은, 모르는 곳이 있었을지도 모릅니다.
다만, 이번 코드를 복사하면, 일단 움직인다고 생각하기 때문에(vuetify를 인스톨하면), 여러가지 시험해 봐 주세요!