プロジェクト概要
日本の昔ながらの居酒屋をモチーフにした、お酒の記録・検索Webアプリケーション。 ユーザーが自身の好みを再発見し、自分だけの「お酒の図鑑」を作成できる体験を提供する。
制作背景
居酒屋で日本酒やお酒を飲んだ時、その場で「美味しい」と感じるが、振り返った時に「あのお酒なんだっけ」となってしまうため、手軽に記録できるようなアプリが欲しかった。 ただ、スマホアプリは初期投資が掛かってしまうため、Webアプリとして作ることにした。
技術スタック
フロントエンド
- フレームワーク: Next.js 15 (App Router)
- 言語: TypeScript
- スタイリング: Tailwind CSS v4 (居酒屋風カスタムテーマ)
- フォント: Google Fonts (Yuji Syuku, Noto Serif JP)
バックエンド (BaaS)
- プラットフォーム: Supabase
- データベース: PostgreSQL
- 認証: Supabase Auth (メール・パスワード)
- 型定義: Supabase CLI による自動生成
インフラ・運用
- ホスティング: Cloudflare Pages
- 運用コスト: $0 (永続無料枠を活用)
- 商用利用: 可能 (Cloudflare Pages および Supabase の無料枠を利用)
開発方法
GeminiCLIを利用したAI駆動開発をした。
大まかな流れは以下の通り。
- プロトタイプ作成
- プロトタイプから仕様書・設計書を作成
- 技術選定
- 実装
- テスト・デプロイ
詰まったポイントと解決策
1. プロジェクト初期化時のファイル衝突
- 問題: GeminiCLIでの実行時、
create-next-appが空でないディレクトリでの実行を拒否。 - 解決策: 既存の仕様書やプロトタイプを一時的に
temp_backupフォルダへ退避させ、初期化後に元の場所へ戻す手順で対応。
2. Next.js バージョンとライブラリの互換性
- 問題: 最新の Next.js (16系) と
@cloudflare/next-on-pagesの依存関係が競合。 - 解決策: 安定版の
next@15を指定してプロジェクトを再作成。また、マイナーバージョンの不一致には--legacy-peer-depsを使用。
3. 型定義ファイルのエンコーディング問題
- 問題: PowerShell のリダイレクト (
>) で生成したsupabase.tsが UTF-16 形式になり、Next.js のビルドでパースエラーが発生。 - 解決策:
Get-ContentとSet-Content -Encoding utf8を組み合わせてファイルを UTF-8 に変換。
4. Cloudflare Pages での Edge Runtime 制約
- 問題: 動的ルート (
/sakes/[id]) のビルド時に、Edge Runtime への適合エラーが発生。 - 解決策: 対象の
page.tsxにexport const runtime = 'edge';を明示的に追加。
5. データベースのデータ重複
- 問題: 検索結果に同じお酒が重複して表示される。
- 解決策: 重複データを削除するクリーンアップSQLを実行し、
(name, type)の組み合わせに対してUNIQUE制約を追加して再発を防止。
今後の展望
- 写真アップロード機能の本格稼働（Supabase Storage）
- 味わいのレーダーチャート表示の実装
- ユーザー同士の感想共有機能（コミュニティ要素）の追加
- スマホアプリ版リリース
- 広告追加