はじめに
どうも、個人開発を始めたばかりのコーヒー愛好家です。
普段からコーヒーをよく飲む人なら、「あのとき飲んだコーヒーの味わいを、もう一度ちゃんと振り返りたい！」と思った経験はありませんか？
私もさまざまな豆や焙煎方法を試すうちに、しっかり記録をとっておきたいという気持ちが募り、飲んだコーヒーのログを記録するアプリを個人開発してみました。
個人開発は始めての経験なので、今回は対話型AI「Claude 3.7 sonnet」をフル活用しながら、企画から設計・コーディング、そしてVercelやSupabaseを使ったデプロイまでをまとめて体験してみた記録をシェアします。
アプリとしては、以下のポイントを重視して開発を進めました。
- 手元にあるスマホやPCから、すぐにコーヒーの味をメモ＆記録できる
- 過去の記録を一覧表示して、後日「この豆はどうだったかな？」を振り返りやすい
- できるだけ簡単に、低コストでデプロイ・運用したい
本記事では、Claude 3.7 sonnetを使った開発フローの様子から実際のアプリ設計、実装・デプロイ手順までを順に解説していきます。自分がハマったポイントや工夫点も共有しますので、同じように個人開発でAIを取り入れてみたい方の参考になれば幸いです。
できたもの
コーヒー記録アプリ
要件定義
今回、最初の構想としては、「コーヒーの味の感想を記録する」「味の記録としてはSCA (Specialty Coffee Asociation)の基準に準拠する」「無料でデプロイ＆公開できるようにする」「後から見やすく一覧できるようにする」程度のことしか考えてませんでしたが、カジュアルにChatGPT、Claudeとの対話をくり返し、以下のような画面にすることにしました。
要件整理（最低限の機能）
- ユーザー管理（Supabase Auth）
- Supabaseのメール/パスワード認証
- ゲストユーザーアクセス（特定の情報のみ閲覧可能）
- ユーザープロフィール基本情報
- コーヒー記録機能（Supabase Database）
- 店名（必須）
- コーヒー基本情報（原産国、焙煎度合い）
- 総合評価（五段階）
- 感想（自由記述）
- 飲んだ日時
- UI/表示機能（Next.js）
- レスポンシブなUI
- 記録一覧表示
- 記録の詳細表示
- 基本的な検索・フィルタリング
- 記録の追加・編集・削除フォーム
技術スタックの選定
技術スタックについては、とにかく無料でデプロイしたかったので、以下のプロンプトのもと、簡単そうな案をいくつか提案させました。
インフラ構成についてですが、個人開発のため無料、または低コストで構築できるインフラを提案してください。
すると返ってきたのは以下の案でした。
案1: Supabaseフルスタック型（最もシンプル）
フロントエンド: Vercel (Next.js)
バックエンド: Supabase API (サーバーレスAPI)
データベース: Supabase (PostgreSQL)
認証: Supabase Auth
ストレージ: Supabase Storage
メリット: 単一サービスで完結し、管理が容易
推定コスト: 無料枠のみで開始可能（500MB DB、5GB帯域まで）
案2: Firebase型（リアルタイム重視）
フロントエンド: Firebase Hosting
バックエンド: Firebase Functions
データベース: Firestore
認証: Firebase Auth
ストレージ: Firebase Storage
メリット: リアルタイム機能が強力、Google連携が容易
推定コスト: 無料枠のみで開始可能（低〜中規模トラフィックまで）
案3: フレキシブル構成（最も拡張性あり）
フロントエンド: Vercel / Netlify
バックエンド: Railway / Render
データベース: PlanetScale / Neon
認証: Clerk / Auth0
ストレージ: Cloudinary
メリット: 各サービスで最適なものを選択でき、拡張性と柔軟性が高い
推定コスト: 無料枠中心、成長時に5-10USD/月程度
各部設計
設計についても以下のプロンプトで出してみました。
今までの情報をもとに、
各詳細設計を出してください。
改めて見ると、他にもっといいプロンプトがある気がします。
DB設計
今回作成するのは
Users テーブル（Supabase Auth拡張）
id (PK, UUID) - Supabase認証で自動生成
email (STRING) - Supabaseで管理
created_at (TIMESTAMP)
name (STRING) - プロフィール用（オプション）
Coffee_records テーブル
id (PK, UUID)
user_id (FK, UUID) - Usersテーブルへの参照
shop_name (STRING, NOT NULL)
coffee_name (STRING)
country (STRING)
roast_level (ENUM: 'light', 'medium', 'medium-dark', 'dark')
rating (INTEGER, 1-5)
description (TEXT)
consumed_at (TIMESTAMP)
created_at (TIMESTAMP)
updated_at (TIMESTAMP)
ページ構成
pages/
├── index.js (ホーム/ランディングページ)
├── auth/
│ ├── signin.js (ログインページ)
│ ├── signup.js (ユーザー登録ページ)
│ └── reset-password.js (パスワードリセットページ)
├── dashboard.js (ユーザーダッシュボード)
├── coffee/
│ ├── index.js (記録一覧ページ)
│ ├── [id].js (記録詳細ページ)
│ ├── add.js (記録追加ページ)
│ └── edit/[id].js (記録編集ページ)
└── profile.js (プロフィールページ)
コンポーネント設計
components/
├── layout/
│ ├── Layout.js (共通レイアウト)
│ ├── Navbar.js (ナビゲーションバー)
│ └── Footer.js (フッター)
├── auth/
│ ├── AuthForm.js (認証フォーム共通コンポーネント)
│ └── AuthGuard.js (認証保護HOC)
├── coffee/
│ ├── CoffeeCard.js (コーヒー記録カード)
│ ├── CoffeeList.js (コーヒー記録リスト)
│ ├── CoffeeForm.js (コーヒー記録入力フォーム)
│ ├── CoffeeDetails.js (コーヒー記録詳細表示)
│ └── CoffeeFilter.js (検索・フィルタリングコンポーネント)
├── ui/
│ ├── Button.js (ボタンコンポーネント)
│ ├── Input.js (入力コンポーネント)
│ ├── Select.js (選択コンポーネント)
│ ├── Rating.js (評価コンポーネント)
│ ├── Card.js (カードコンポーネント)
│ └── Alert.js (アラート/通知コンポーネント)
└── profile/
└── ProfileForm.js (プロフィール編集フォーム)
実装
実装に関しては完全にやってもらいました。
また、
- Node.jsとnpmのインストール
- Next.jsプロジェクトの作成
- 必要なパッケージのインストール
- Tailwind CSSのセットアップ
- Supabaseアカウントとプロジェクトの作成
- Supabaseクライアントの設定
- プロフィールテーブルの作成
- コーヒー記録テーブルの作成
- トリガーの設定（更新日時自動更新）
- Supabase認証設定
- Next.jsプロジェクト構造の設定
- Vercelへのデプロイ
といった環境構築、パッケージ、DB周り、デプロイ
デバッグ
デバッグというより、詰まったところなのですが、
Vercelでなかなか初回のビルドが成功せず、閉口しました。
ルートディレクトリが間違っていたり、使用しているフォントが使えなかったりと、細かいエラーでClaudeも考慮できていなさそうなところを一つずつ修正し、動くようになりました。
次回に向けて・まとめ
今回は初めてClaudeを使って生成AIメインでの個人開発をしてみてみました。
プロンプトの作り方や、実装のこつ、環境構築でのポイントなど、足りない部分は多々感じましたが、驚異的な速さで一つのアプリが開発できてしまう点が非常に印象的でした。
このアプリはどんどん改善を重ね、一般のコーヒーファンに広く使ってもらえるようなものにゆっくり改善していければなと思います。
また、これからどんどん個人開発をしていこうと思います。