Nuxt.js Google books a p i

Nuxt+GooglebooksAPIで本検索のアプリを作る①

Nuxt+GooglebooksAPIで本検索のアプリを作る①

最近、Nuxt.jsの勉強を始めたのでやってみたことを記録して行こうと思います。

Nuxt.jsとGooglebooksAPIを用いて本検索アプリケーション作成を目指したいと思います。

今回は単純にGooglebooksのwebapiアクセスする方法までやってみたいと思います。

目次

この記事の対象者

  • Vue.jsに触ったことがある人

  • Nuxt.jsで何か作ってみたい人

  • GooglebooksAPIなどの外部APIを利用してみたい人

  • axiosモジュールを利用してみたい

今回やってみること

今回は単純にGooglebooksのwebapiアクセスする方法までやってみたいと思います。

試しに「Nuxt」というキーワード検索した状態のデータを表示してみます。

開発環境はこちらの記事を参照してください ↓

DockerでMacにNuxtの環境を構築する

pluginの作成

vueファイル内のスクリプトにロジックを書くと、他の場所で再利用することができません。

全ファイルで使えるようにpluginsに共通のロジックを作成します。

今回は、plugins/axios.js に共通の基本リクエスト設定を定義し、plugins/webApi.js に共通のwebapi呼び出しメソッドを定義します。

~/plugins/axios.js を作成


export default function ({ $axios, redirect }) {
  // 外部接続する際の基本となるURLをあらかじめ設定
  $axios.defaults.baseURL = 'https://www.googleapis.com/books/v1/volumes?q=nuxt'

  // リクエストログ
  $axios.onRequest((config) => {
    console.log(config)
  })
  // レスポンスログ
  $axios.onResponse((config) => {
    console.log(config)
  })
  // エラーログ
  $axios.onError((e) => {
    console.log(e.response)
  })
}

~/plugins/webApi.js を作成


export default function () {
  // ここには後ほど記述します
}

nuxt.config.jsに追記


  plugins: [
    '~/plugins/axios.js',
    '~/plugins/webApi.js'
  ],

WebAPIを呼び出すメゾットを作成

~/plugins/webApi.js に記述


export default function ({ app }, inject) {
    inject('apiGoogleBook', () => {
        return app.$axios({
            url: '/',
            method: 'GET',
        })
    })
}

inject('名前',(関数))を使用することで、vueファイル内でapp.$名前()として呼び出すことができます

APIをページで呼び出してみる

axiosでgetしたGoogleBooksAPIの出力データはJSONデータで出力されます。

どのような形のJSONデータなのかはこちらのドキュメントを参照してください。

pages/index.vueに記述


<template>
  <div class="container">
    <h1>Nuxtの参考書を並べるサンプル</h1>
    <li v-for="(post, index) in posts" :key="index">
      <a>{{ post.volumeInfo.title }}</a>
    </li>
  </div>
</template>

<script>
export default {
  async asyncData(context) {
    const response = await context.app.$apiGoogleBook()
    return {
      posts: response.data.items,
    }
  },
}
</script>

うまく実行できていればこのように出力されると思います。

まとめ

今回はGooglebooksのwebapiアクセスして、「Nuxt」というキーワード検索した状態のデータを表示してみるところまで行いました。

次回は実際に検索ワードをユーザー側が指定して表示できるように作っていきたいと思います。

次回もお楽しみに!ありがとうございました!

関連記事

最近の投稿