はじめまして。私は フリーランスエンジニア として、現在は フルスタック開発 および AI駆動開発 を学んでいます。
今回は、Next.js × Go を使ったフルスタック開発を、Cursor などの AI エディタを活用して実装した経験について紹介します。
※ 本記事は一部生成AIを利用して作成しています
作ったアプリ
何ができるの？
-
具材を選択してレシピを検索
- 4つの検索モードで、ライトユーザーから本格派まで幅広く対応
-
レシピを登録・公開
- ログインユーザーは自分のレシピを登録＆公開可能
- 材料からも検索でき、お気に入り・レビュー機能付き
-
レシピ名からの検索
- 通常のレシピ検索サービスとしても使えます
なぜ作ったの？
料理をしていると、どうしても具材が余ってしまいがちです。
私自身も、余った食材をうまく活用できず、腐らせて捨てる経験が何度もありました。
そんな悩みを持つ人は多いはず。だったら、**余った具材からレシピを検索できるサービスを作ろう！**と思ったのがきっかけです。
ユーザーの料理への関心が高まり、フードロス削減にも貢献できたら嬉しいです。
主要機能の紹介
具材選択機能
レシピ検索機能
レシピ登録機能
ユーザー機能
課題・改善点
レシピ数が致命的に少ない
他のレシピサイトは 1〜2万件 を超えるレシピを持つ中、当サービスのレシピ数は わずか95件。
なぜレシピが少ないのか？
- 画像は Adobe Firefly によるAI生成
- レシピ1件あたり 5〜7枚の画像生成が必要
- 各プロンプト作成に時間がかかる
現在、レシピデータの効率的な生成手法を模索中。
目標は最低でも 1000レシピ！
Lighthouse パフォーマンスが低い
主な原因：
- Next.js Image 最適化を無効化（Cloudflare R2の課金制限回避のため）
- Client Components の多用による JS バンドル肥大化
解決策
- 画像最適化の再検討
- アニメーションの簡略化などを検討中
E2Eテストを未実装
- 現状は手動検証と Jest による一部ユニットテストのみ
- 今後は Cypress や Playwright の導入を検討中
技術スタック
フロントエンド
- フレームワーク: Next.js 14.1.0
- 言語: TypeScript 5.8.3
- UIライブラリ: React 18.2.0
- スタイリング: CSS Modules (SCSS)
- 状態管理: Zustand 5.0.1
- データフェッチング: TanStack React Query 5.69.0 / Axios 1.8.4
- UI/UX補助: Framer Motion / React Icons / React Hot Toast / React Joyride
- ドラッグ&ドロップ: @dnd-kit/core
- アニメーション: @lottiefiles/dotlottie-react
- 日本語処理: Wanakana
バックエンド
- 言語: Go 1.23.2
- フレームワーク: Gin 1.10.0
- ORM: GORM 1.25.12
- DBドライバ: lib/pq
- キャッシュ: Redis (go-redis/v8)
- 認証: Supabase Auth
ストレージ / 外部サービス
- Supabase Storage / AWS S3
- OpenAI API (sashabaranov/go-openai)
- Google Cloud Translation API
データベース
- 本番DB: PostgreSQL 15
- キャッシュ: Redis
- マイグレーション: 自作カスタムスクリプト
インフラ
- コンテナ化: Docker & Docker Compose
- 開発環境: Supabase CLI
-
本番環境:
- フロントエンド：Vercel
- バックエンド：Render
- DB：Supabase PostgreSQL
- ストレージ：Cloudflare R2
良かったこと
- サービスの企画〜公開までを一人でやり切った
- モダン技術を多く取り入れたことで、技術力が一気に向上した
- バックエンドも実装したことで、API設計・型安全の理解が深まった
大変だったこと
Supabase × GORM の接続エラー
GORM のデフォルトは Prepared Statement 有効 ですが、Supabase の Transaction Pooler では未対応。
同時接続で競合が発生してしまい、エラー地獄に…。
解決策
- GORM / ドライバレベルで Prepared Statement を無効化
- 同時接続数を1に制限
ただし、無料枠の Supabase は Direct Connection（IPv4）に非対応だったため、妥協せざるを得ませんでした。
おわりに
この記事が、フルスタック開発 × AI × Supabase に興味がある方の参考になれば嬉しいです！
ご意見や改善アイディアがあれば、ぜひコメントで教えてください 🙏