はじめに
こんにちは。今回、北米から日本への引っ越しに伴い、これまでお世話になった方々への感謝の気持ちを込めて、無料のガレージセールを実施することにしました。
どうせなら、Garage Sale用のWebページを作って公開したい――そう思い立ち、Cursor（LLM開発環境）とGoogle Spreadsheetを使って、自分のポートフォリオサイト上に商品リストを表示するページを作りました。
結果として、わずか2時間程度でしっかりとしたWebページを構築できたので、その手順や工夫した点をQiitaで共有します！
最終的なサイトはこちら → https://www.kenimamura.com/garage-sale
使用した技術スタック
- Cursor（開発環境 & AIとの対話でコーディング）
- Google Sheets API（商品データの取得元）
- Vercel（ホスティング）
- Next.js（Webフロントエンド）
- Tailwind CSS（スタイリング）
フロー全体
段階①：Garage Sale 商品リストページの作成
1. Google Sheets APIで商品データ取得
-
必要パッケージのインストール（
googleapisなど） -
ユーティリティ関数を作成し、サーバーサイドでデータを取得
-
Google Cloud Consoleで以下の設定を実施：
- プロジェクト作成
- Sheets APIの有効化
- サービスアカウント作成・鍵(JSON)取得
- Spreadsheetの共有設定でサービスアカウントに読み取り権限を付与
2. 商品リストのページを作成
- Next.jsのページコンポーネントを用意
- スタイリング（Tailwind CSS）で見やすいデザインに
3. 認証まわりのエラー対応
-
netモジュールエラーなど、クライアントサイドでのAPI呼び出し失敗対策 - APIルートを作成してサーバーサイドで認証処理を実行
-
@google-cloud/local-authからサービスアカウント認証へ切り替え
4. 環境変数の設定
-
.env.localにキーやスプレッドシートIDを設定 - JSONファイルの配置場所も要確認
段階②：検索・フィルター機能の追加
1. 検索バーの実装
- 商品名・説明文に対応した検索機能を追加
- 大文字小文字を無視したリアルタイムフィルタリング
2. ステータスフィルター（On Sale / Sold Out）
- ドロップダウンで絞り込み機能を提供
- 検索バーと組み合わせて使えるUI設計
3. UI/UXの工夫
- 検索バーとフィルターを横並び（狭い画面では縦並び）
- モダンなデザイン＋ホバー・フォーカス時のアニメーション追加
結果と感想
CursorとLLM対話ベースの開発を活用したことで、2時間で完成度の高いサイトを構築することができました。
これまでWeb開発に自信がなかった方でも、CursorのようなAI開発支援ツールを使えばかなり実用的なものが作れる実感を得ました。
みなさんも何かのお別れや感謝のタイミングに、こんなプロジェクトに挑戦してみてはいかがでしょうか？
公開サイト
👉 https://www.kenimamura.com/garage-sale
ぜひ、何か気になるアイテムがあれば持ち帰ってください！全部無料です！