【 Vue.js】Vue.jsでGoogleBookAPIを取得する。

# GoogleBooksAPI概要

* Googleに登録されている本を検索する事ができる。
* 登録なしで使える：1000件/日
* 情報の精度、検索結果が少し弱い

# 使用API
[公式リファレンス](https://developers.google.com/books/docs/v1/using)
* base_url
    * `https://www.googleapis.com/books/v1/volumes?` + 検索query`q=ウーロン茶`
* response:json

``` json
{
  "kind": "books#volumes",
  "totalItems": 1484,
  "items": [
    {
      "kind": "books#volume",
      "id": "kFIgNwAACAAJ",
      "etag": "wn0MtLjELK0",
      "selfLink": "https://www.googleapis.com/books/v1/volumes/kFIgNwAACAAJ",
      "volumeInfo": {
        "title": "烏龍茶の魅力",
        "subtitle": "ポリフェノールに秘められた効果と効能",
        "authors": [
          "松井陽吉"
        ],

```

* 検索クエリのkeyを`q`にし、以下のいずれかの必須パラメータを含める。
    * intitle:検索ワード `q=intitle%検索ワード`
    * inauthor:検索ワード
    * inpublisher:検索ワード
    * subject:検索ワード
    * isbn:検索ワード
    * lccn:検索ワード
    * oclc:検索ワード
* その他オプション
    * Pagination
        * maxResults:1ページあたりの表示件数


# 完成図

* [URLSearchParams](https://developer.mozilla.org/ja/docs/Web/API/URLSearchParams![スクリーンショット 2021-12-15 17.28.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378066/77818410-f8df-017a-799b-baa7a865eeaa.png)
)
    * javascriptでは検索パラメーターを作成するにはURLSearchParamsコンストラクタを使用する。

```index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="keyword" />
      <button @click="Saerch(keyword)">検索</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script>
      let app = new Vue({
        el: "#app",
        data() {
          return {
            keyword: "",
            saerchResults: [],
          };
        },
        methods: {
          //クエリストリングの作成
          async Saerch(keyword) {
            this.saerchResults = []
            const baseUrl = "https://www.googleapis.com/books/v1/volumes?";
            const params = {
              q: `intitle:${keyword}`,
              maxResults: 40,
            };
            const queryParams = new URLSearchParams(params);
            console.log(baseUrl + queryParams)

            //fetchでjson取得
            const response = await fetch(baseUrl + queryParams)
              //responseをjsonに変換
              .then(response => response.json())
              .then(console.log())
              for (let book of response.items) {
                //jsonオブジェクトのtitle,imageLinks, descriptionまでアクセス
                let title = book.volumeInfo.title
                let img = book.volumeInfo.imageLinks ? book.volumeInfo.imageLinks : ''
                let description = book.volumeInfo.description
                //必要な情報をpush, title情報なければ空を追加
                this.saerchResults.push( {
                  title: title ? title : '',
                  image: img.thumbnail ? img.thumbnail : '',
                  //40文字以内
                  description: description ? description.slice(0, 40) : ''
                } )
              }
          },
        },
      });
    </script>
  </body>
</html>
```
[Vuedevツールで確認](https://qiita.com/nonkapibara/items/8b587013b6b817d6dfc4)

![スクリーンショット 2021-12-15 17.29.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/378066/2f929681-cd5a-2eee-125b-4acaad997b44.png)