18:I[93747,["/_next/static/chunks/fb1ea82a1730a90a.js","/_next/static/chunks/d8a3ac0781919c0a.js","/_next/static/chunks/444dfa8f953b7aef.js","/_next/static/chunks/77c15aec711b24a3.js"],"SandboxCard"] 19:Tba6,

開発のきっかけ

カクテルが好きでバーによく行くんですが、メニューに載っていないカクテルを注文したいときってあるじゃないですか。でも、店員さんに「こういう味のカクテルってありますか？」って聞くのがちょっと気が引けて。もっと事前に調べられたらいいなと思ったのがきっかけです。自分で材料を選んでカクテルを探せたり、AI に好みを伝えてレコメンドしてもらえたら便利だろうなと。

技術スタックと学び

技術スタックは Next.js 16（App Router）、Supabase（PostgreSQL + Storage）、shadcn/ui、Google Gemini API です。普段の仕事では Nuxt3-4 を使っているので、Next.js は v12 くらいで止まっていて。今回は App Router の勉強も兼ねて v16 に挑戦しました。また、Supabase も今回初めて触ったので、AI に聞きながらスキーマ設計からやりました。無料枠でもかなり使えるので、個人開発にはぴったりですね。

開発で苦労したこと

Gemini API のレート制限

一番大変だったのは、Gemini API でカクテルデータを生成する部分です。最初は一気に全部のカクテルを登録しようとしたんですが、API のレート制限が厳しくて。5 リクエストくらい送ると数時間使えなくなるんですよね。結局、毎日少しずつ手動で登録する運用に切り替えました。今も毎日 5〜10 件ずつ追加しているので、まだ完成には程遠いです。でも、逆に言えば育てていく楽しみがあるとも言えます。

素材名のゆらぎ問題

もう一つ大変だったのが、材料名の表記ゆれです。例えば「ライムジュース」と「ライム果汁」は同じものなのに、別の材料として扱われてしまう。これを手作業で修正するのが地味に時間がかかりました。AI が生成したデータを一度確認して、手動でマージする作業が今も続いています。自動化したい気持ちはあるんですが、100% の精度は難しいので、今は人間の目でチェックしています。

UI・UX へのこだわり

UI では、カクテルの詳細ページに「レシピ」と「作り方」をタブで切り替えられるようにしました。レシピだけ見たい人と、手順まで知りたい人の両方に対応するためです。また、材料からカクテルを逆引きできる機能も実装しました。「ウォッカがあるんだけど、何作れる？」みたいなときに便利です。今後はフィルタ機能を強化して、もっと直感的に探せるようにしたいですね。

サンドボックス

Cocktailpedia

サンドボックス

Cocktailpedia