Zenn
🤔

Next.js × Google Books APIで検索システムを作ってみた

2024/12/29に公開
Next.js
API
shadcn/ui
tech

概要

アプリ名：cover-weather（表紙びより）

本屋や図書館で、本の表紙をなんとなく眺めているうちに、思いがけず素敵な本に出会ったことはありませんか？

ネット検索は便利で、すぐに目的の本が見つかりますが、ECサイトではレビュー数や価格、口コミなどが目に入り、表紙そのものとじっくり向き合う時間が少なくなりがちです。

そこで、本の評価項目をすべて排除し、純粋に表紙や情報だけを一覧で見ながらメモを取れる、シンプルなアプリ「表紙びより」を作りました。

URL

https://cover-weather-cxoi.vercel.app/

リポジトリ

https://github.com/muranakaaa/cover-weather

どうやって作っていったか

技術

  • Next.js 15.1.3
  • TypeScript 5
  • TailwindCSS 3.4.17
  • shadcn/ui
  • Google Books API

アプリをサクッと作成する際、自分はとりあえずNext.jsを選びます。理由は、これまで使用して慣れていることと、Vercelを使ってすぐにデプロイできる便利さです。

スタイリングには Tailwind CSS と shadcn/ui を組み合わせます。基本的なスタイル調整であれば、この2つで十分です。本当に簡単なアプリであれば、2つとも不要な場合もあります。

ディレクトリ構成

アプリを設計する際、私はまずディレクトリ構成を考えることが多いです。ディレクトリ構成は、いわば地図のような役割を果たします。この地図を基に、各機能やコンポーネントの配置場所を明確にし、アプリ全体の一貫性を保ちます。一方で、ステート管理や詳細なロジックといった実装部分は、構成がしっかりしていれば後からでも調整可能な枝葉の部分と言えるでしょう。

COVER-WEATHER
├── app/
│   ├── components/
│   │   ├── BookCard.tsx
│   │   ├── MemoSection.tsx
│   │   └── SearchBar.tsx
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/ui/
│   ├── button.tsx
│   ├── input.tsx
│   └── textarea.tsx
├── lib/
│   ├── googleBooks.ts
│   └── utils.ts
├── public/
├── .env.local
└── node_modules/

今回のアプリ「COVER-WEATHER」では、主要なコンポーネント（BookCard.tsx、MemoSection.tsx、SearchBar.tsx）を app/components/ に配置し、app/page.tsx に統合してメインページを構築しています。

API関連のロジックは lib/ に集約し、googleBooks.ts を通じて Google Books API を操作、検索結果をシンプルに処理しています。

実装の流れ

  • 環境構築
  • コンポーネント作成
  • APIの実装
  • UIのスタイリング

環境構築のゴールは、create-next-app を使用して Next.js プロジェクトを作成し、Tailwind CSS と shadcn を使える状態にすることです。インストール方法については、公式ドキュメントを参照するのが確実です。フロントエンドは技術の移り変わりが早く、以前使えたコマンドが使えなくなる場合もあるため、最新情報に従うのが得策です。

https://ui.shadcn.com/docs/installation/next
https://tailwindcss.com/docs/guides/nextjs

./app/page.tsx で Tailwind CSS と shadcn が正しく動作するか確認します。具体的には、Tailwind CSSで文字を赤くしたり、マージンを追加したりします。shadcn ではボタンを表示して動作を確認します。ホットリロードでこれらが即座に反映されれば成功です。

感想

基本的には、Google Books APIsをフロントに表示させただけのツールになります。ただ、個人的に検索バー+検索一覧+メモという構成でアプリを作ってみたかったので、とりあえずは満足です。

参照するデータを変えたり、絞り込み条件などを使えるようにすることで、できる幅は広がります。たとえばCSVファイルで大量のデータを入れて分析をしたり、スクレイピングでデータを入れてそこから効率的に調べられるオリジナルの検索システムにしてみたり。

参考記事

https://zenn.dev/rabee/articles/javascript-tool-google-books-api

Discussion