GoogleBooksAPI概要

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

使用API

公式リファレンス

base_url
- https://www.googleapis.com/books/v1/volumes? + 検索queryq=ウーロン茶
response: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ツールで確認