Next.jsとGoogle Books APIs で書籍検索する

はじめに

学習したことのアウトプットとして記録しました。現在プログラミング学習中の実務未経験の者であり、技術的な内容などに誤りを含む可能性があるので不適切な記述などがありましたらコメントで教えていただけると幸いです

Google Books APIs

Google Books APIsは、Googleブックスにある情報を取得できるAPIです。検索する際の項目は（リクエスト）

書籍のタイトル
著者名
ISBN10 / ISBN13
Googleブックス上のIDなど

APIで以下の情報が入手できます（レスポンス）

Googleブックス上のID
書籍タイトル / サブタイトル
著者
出版日
書籍についての説明文（あらすじなど）
ISBN10 / ISBN13
ページ数
サムネ画像のURL

APIを利用するには楽天やAmazonのAPIと違って認証が必要なく、誰でも簡単に利用できます

https://developers.google.com/books/docs/v1/using?hl=ja

Next.js のプロジェクトを作成します。

npx create-react-app search-books

pages/api/ の下に books.ts を作成し、 Google Books APIs からデータを取得し、JSONデータを整形後、フロントに返す処理を書きます。

import type { NextApiRequest, NextApiResponse } from 'next';
import { Book } from '@/types/types';

//Google Books API で書籍を検索する関数
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Book[]>
) {
  let q = req.query.q || '';
  q = Array.isArray(q) ? q[0] : q;
  const data = await getData(q);
  res.status(200).json(data);
}

// Google Books API の実行と取得結果（JSON）の整形を行う関数
export async function getData(query: string): Promise<Book[]> {
  const response = await fetch(
    '<https://www.googleapis.com/books/v1/volumes?q=>' + encodeURIComponent(query)
  );
  const jsonData = await response.json();
  return jsonData.items.map((elem: any) => {
    return {
      id: elem.id,
      title: elem.volumeInfo.title,
      description: elem.volumeInfo?.description,
      pageCount: elem?.pageCount,
      image: elem.volumeInfo?.imageLinks?.thumbnail,
    };
  });
}

検索条件を設定するだけで、JSON形式で返ってきます

<https://www.googleapis.com/books/v1/volumes?q=検索したい用語>

複数語句検索したい場合は

<https://www.googleapis.com/books/v1/volumes?q=検索したい用語1> + 検索したい用語2

また次のようなフィールドを検索できます。

1	2
intitle:	タイトル
inauthor:	作成者
inpublisher:	パブリッシャー内
subject:	ボリュームのカテゴリリスト
isbn:	ISBN 番号
lccn:	米国議会図書館管理番
oclc:	Online Computer Library Center 番号

キーワードの後に続くテキストがそれぞれで見つかった結果を返します。

GET <https://www.googleapis.com/books/v1/volumes?q=flowers+inauthor:keyes&key=yourAPIKey>

書籍検索ページの作成

import axios from 'axios'

const fetcher = url => axios.get(url).then(res => res.data)

function App () {
  const { data, error } = useSWR('/api/data', fetcher)
  // ...
}

import { useState } from 'react';
import useSWR from 'swr';
:

  const [query, setQuery] = useState('');
  //検索ボタンをクリックした時の処理
  //サーバーサイドのAPIを呼び出し書籍情報を取得する
  const apiUrl = '/api/books?q=';
  const { data, error } = useSWR(
    query ? `${apiUrl}${encodeURIComponent(query)}` : null,
    fetcher
  );

検索フォーム

  return (
    <form onSubmit={handleFormSubmit}>
      <input
        type='text'
        placeholder='書籍検索'
        value={query}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          setQuery(e.target.value)
        }
      />
      <button type='submit'>
        検索
      </button>
    </form>
  );
}