4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AI・機械学習 Qiita Tech Festa 2025
Qiita Tech Festa20252025年7月15日まで開催中！
@tama0931

Gemini PM × Claude エンジニアでコーヒーECサイトを完全構築していく話 - AI協働開発の新体験

4
Posted at

Gemini PM × Claude エンジニアでコーヒーECサイトを完全構築した話 - AI協働開発の新体験

はじめに - 開発の方向転換とvibe codingとの出会い

英語学習アプリの個人開発を約2週間ほど続けてきましたが、ある時点で大きな壁にぶつかりました。

🔄 開発方針の転換点

当初はiOSアプリでの展開を目指していましたが、いくつかの現実的な課題に直面：

  • 開発環境の制約: Windows環境でのiOS開発の限界
  • 市場競争の激化: 既存の英語学習アプリの完成度が高すぎる
  • 差別化の困難: 個人開発で大手に対抗するのは現実的ではない(あくまで僕の話)

そんな時、vibe coding（Web開発での直感的なプロトタイピング）の可能性に気づきました。
特にNext.js + Supabaseの組み合わせで、想像以上に短期間で本格的なWebアプリが作れることを実感。

☕ 新たなプロジェクトの始まり

そんなタイミングで、友人から「将来コーヒーショップを起業したい」という相談を受けました。
「これだ！」と思い、彼の事業支援も兼ねてコーヒーの生豆通販サイトの開発をスタート。

そして今回、AI同士によるチーム開発という革命的なアプローチを試してみました。

🎯 今回実装した機能

  • コーヒー豆カタログ（20種類の詳細情報）
  • AI味覚診断システム
  • ショッピングカート機能
  • Stripe決済完全統合
  • 注文管理システム（管理者・顧客両対応）
  • 法的要件ページ（特商法・プライバシーポリシー等）

🛠️ 技術スタック

  • フレームワーク: Next.js 15 (App Router)
  • 言語: TypeScript
  • データベース: Supabase (PostgreSQL + Row Level Security)
  • 決済: Stripe Checkout Session
  • UI: Tailwind CSS + Headless UI
  • 開発パートナー: Gemini PM + Claude Code 🤖

📋 AI協働開発の革命的な体験

🤖 チーム構成の実験

今回の最大の挑戦は、AI同士のチーム開発でした：

😱 予想外だった3つの発見

1. AIにも明確な「得意分野」がある

Gemini PM:

  • ユーザー視点での要件整理が神レベル
  • ビジネス戦略・優先順位付けが的確
  • 「いつローンチすべきか」の判断が絶妙

Claude エンジニア:

  • コード品質とセキュリティ対策が職人レベル
  • 技術選定の根拠が論理的
  • デバッグ・最適化が高速

2. 一人開発の「完璧主義地獄」から脱出

Phase 7完了時点でGemini PMが「ローンチ可能」と判断。
無限機能追加の罠から救ってくれました。

3. 24時間体制の威力

深夜でも早朝でも、AIは疲れない。
リアルタイムペアプロの効率が想像以上でした。

🗄️ システム設計の考慮点

エンタープライズ級のデータ設計

🎯 設計のポイント

  1. スケーラビリティ: 将来の機能拡張を考慮
  2. セキュリティ: Row Level Security (RLS) で完全データ分離
  3. パフォーマンス: インデックス最適化
  4. 法的対応: 注文情報の適切な保管・管理

🔧 実装アーキテクチャの工夫

型安全な環境変数管理

従来のprocess.env直接アクセスから、集中管理システムに移行：

// lib/env.ts - 型安全性を徹底
export const env = {
  supabase: {
    url: getRequiredEnv(process.env.NEXT_PUBLIC_SUPABASE_URL, 'SUPABASE_URL'),
    anonKey: getRequiredEnv(process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY, 'SUPABASE_ANON_KEY'),
  },
  stripe: {
    publishableKey: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
  },
};

export const getRequiredEnv = (value: string | undefined, name: string): string => {
  if (!value) {
    throw new Error(`Required environment variable ${name} is not set`);
  }
  return value;
};

Webhook連携での自動ステータス更新

// Stripe決済完了 → 注文ステータス自動更新
export async function POST(request: NextRequest) {
  const event = stripe.webhooks.constructEvent(body, signature, webhookSecret);
  
  switch (event.type) {
    case 'checkout.session.completed':
      const session = event.data.object;
      const orderId = session.metadata?.order_id;
      
      if (orderId) {
        await updatePaymentStatus(orderId, 'paid');
        await updateOrderStatus(orderId, 'processing');
      }
      break;
  }
}

🎨 UI/UX設計の実装ポイント

ユーザビリティ重視の設計思想

コーヒーという商材の特性を活かしたUI設計：

// 商品カードコンポーネント
const CoffeeCard = ({ coffee }: { coffee: Coffee }) => {
  return (
    <div className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
      <div className="relative h-48">
        <Image 
          src={coffee.image} 
          alt={coffee.name}
          fill
          className="object-cover"
        />
      </div>
      <div className="p-4">
        <h3 className="font-bold text-lg text-gray-900">{coffee.name}</h3>
        <p className="text-gray-600">{coffee.origin}</p>
        <div className="flex justify-between items-center mt-4">
          <span className="text-xl font-bold text-yellow-600">
            ¥{coffee.price.toLocaleString()}
          </span>
          <AddToCartButton coffee={coffee} />
        </div>
      </div>
    </div>
  );
};

モバイルファーストの徹底

  • 44px以上のタッチターゲット: 指での操作を最優先
  • レスポンシブグリッド: 全デバイスで最適表示
  • ローディング状態: ユーザーフィードバックを重視

😤 つまずいたポイントと解決策

1. Next.js 15 App Routerの罠

問題: Server ComponentとClient Componentの分離エラー

Error: You're importing a component that needs "next/headers". 
That only works in a Server Component.

解決策: 明確なファイル分離とコンポーネント設計

lib/
├── supabase.ts          # サーバー用
├── supabaseClient.ts    # クライアント用  
└── env.ts              # 共通環境変数管理

2. Stripe Checkout Session設定

問題: 商品価格の不整合で決済エラー

解決策: サーバーサイドでの価格検証システム

// セキュリティのため、価格は必ずDB再取得
const { data: product } = await supabase
  .from('green_coffees')
  .select('price')
  .eq('id', item.id)
  .single();

// フロント送信価格とDB価格の照合
if (item.price !== product.price) {
  throw new Error('Price validation failed');
}

3. 画像最適化の設定問題

問題: Unsplash画像でNext.js Image コンポーネントエラー

Error: hostname "images.unsplash.com" is not configured under images in your next.config.js

解決策: next.config.tsでの適切なドメイン設定

// next.config.ts
const nextConfig: NextConfig = {
  images: {
    domains: ['images.unsplash.com'],
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
      },
    ],
  },
};

🤖 AI協働開発の圧倒的なメリット

従来開発 vs AI協働開発

項目 従来の個人開発 AI協働開発
意思決定 一人で悩む→迷子になる PM判断で迷いなし
コード品質 レビュアー不在→品質ムラ AI によるリアルタイムレビュー
優先順位 技術偏重になりがち ビジネス視点で最適化
完成判断 永遠に完璧を求める 適切なタイミングでローンチ判断
デバッグ Stack Overflow漁り AIが即座に原因特定

特に感動した瞬間

  1. 自動プロジェクト理解: 関連ファイルを勝手に探して把握
  2. 同時複数ファイル編集: 一貫性を保った修正
  3. TODO自動管理: 複雑タスクを勝手に分解・追跡
  4. コンテキスト保持: セッション跨ぎでも作業継続

Claude CodeのTODO管理例：

  • ✅ Supabase データベース設計
  • ✅ 商品カタログ表示機能
  • ✅ ショッピングカート実装
  • ✅ Stripe決済統合
  • ✅ 注文管理システム
  • ✅ 法的要件ページ作成

📈 成果と学習効果

✅ 今回の達成内容

  • ローンチ可能なECサイト: 法的要件含めて完全対応
  • エンタープライズ級の設計: セキュリティ・スケーラビリティ両立
  • AI協働のノウハウ: 次世代開発手法の習得
  • 友人ビジネス支援: 実用的なプロダクト提供

🔥 開発効率の劇的向上

  • 開発速度: 体感で3-5倍向上
  • コード品質: バグ発生率が大幅減少
  • 完成度: 一人開発では不可能なレベル到達
  • 学習効果: 最新技術スタックの実践的習得

💡 学んだこと・今後への示唆

Next.js 15 + Supabase での実践的ベストプラクティス

  1. 型安全性の徹底: TypeScript + 環境変数管理
  2. セキュリティファースト: RLS + サーバーサイド検証
  3. パフォーマンス最適化: 画像・データベースクエリ最適化
  4. ユーザー体験: ローディング状態・エラーハンドリング

AI協働開発の新しい可能性

確信したこと：

  • AIは単なるツールではなく開発パートナー
  • 適切な役割分担で人間の能力を補完・拡張
  • 24時間稼働でプロジェクト推進力が圧倒的
  • 学習効率も大幅向上（AI が最適解を提示）

次世代エンジニアに必要なスキル

近い将来、「AIとのコミュニケーション能力」がエンジニアの必須スキルに。
プログラミング言語だけでなく、AI語も重要になりそうです。

🚀 次回の挑戦予告

Phase 8では以下の機能拡張を予定：

  1. 画像最適化システム: CDN導入とパフォーマンス向上
  2. ユーザー認証機能: 本格的な会員システム構築
  3. 在庫管理システム: リアルタイム在庫追跡
  4. レコメンドエンジン: AI活用の高度な商品推奨

引き続きGemini PM × Claude エンジニア体制で挑戦します！

おわりに - vibe coding から本格開発へ

英語学習アプリから始まった個人開発の旅が、こんな形で発展するとは想像もしていませんでした。

iOS開発の壁に直面した時は正直絶望しましたが、vibe coding との出会いで新しい可能性が開けました。
そして何より、AI協働開発という革命的な体験ができたのは大きな財産です。

友人のコーヒーショップ起業支援として始めたこのプロジェクトですが、
結果的に自分自身の技術的成長と、次世代の開発スタイルの体験につながりました。

個人開発に限界を感じている方、AI協働開発を試してみませんか？
きっと想像を超える世界が待っているはずです。

🔗 関連リンク

📝 技術スタック詳細

  • フレームワーク: Next.js 15 (App Router)
  • 言語: TypeScript
  • データベース: Supabase (PostgreSQL)
  • 認証: Supabase Auth + Row Level Security
  • 決済: Stripe Checkout Session
  • スタイリング: Tailwind CSS + Headless UI
  • デプロイ: Vercel
  • 開発支援: Gemini PM + Claude Code

最後まで読んでいただき、ありがとうございました！
いいね・ストック・コメントで応援いただけると、次の開発記事のモチベーションが爆上がりします 🚀

続編も書く予定なので、フォローしてもらえると嬉しいです！
ご質問・ご意見もお気軽にコメントでどうぞ 💬

#Next.js #TypeScript #Supabase #ECサイト #AI開発 #個人開発 #Stripe #コーヒー #起業支援

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?