Leftover Recipe AI (冷蔵庫レシピAI)
はじめに
「今日の晩ご飯、何にしよう...」 「冷蔵庫にこの野菜が残ってるけど、レシピが思いつかない...」
こんな悩み、日常的に抱えていませんか？さらに、買った食材を使いきれず食品ロスになってしまう問題も気になるところです。
そこで今回は、そんな毎日の献立の悩みを解決するために、Webアプリ「Leftover Recipe AI（冷蔵庫レシピAI）」を開発しましたのでご紹介します！
Leftover Recipe AI とは？
Leftover Recipe AIは、冷蔵庫に残っている食材を入力するだけで、AI（Google Gemini）が創造的かつ実用的なレシピを提案してくれるWebアプリケーションです。 単にレシピを提案するだけでなく、調理時間や難易度、アレルギー食材の除外など、細かい条件設定も可能にしています。
主な機能：使いやすさと創造性を追求
1. 高度なAIレシピ生成（Gemini 2.5 Flash / Pro）
Googleの最新AIモデル Gemini 2.5 Flash / Pro を使用しています。その結果、食材の組み合わせから「えっ、こんな料理ができるの？！」という驚きのレシピから、定番の安定レシピまで幅広く提案してくれます。Geminiの創造性を料理に活かしました。
2. 美しい料理画像による視覚的提案
文字だけのレシピだとイメージが湧きにくいですよね。そこで、このアプリでは Unsplash API と連携し、生成されたレシピ名に関連する高品質な料理画像を自動で表示します。視覚的にも楽しめるのがポイントです。
3. 柔軟な条件設定
- ⏰ 調理時間: 「今日は時間がないから15分で！」
- 🍳 難易度: 「料理初心者だから簡単に」
- ⚠️ アレルギー: 「そばアレルギーなので除外して」
これらの要望をプロンプトに組み込むことで、あなたに最適なレシピが生成されます。
技術スタック解説：高速動作へのこだわり
フロントエンド
Vite + Vanilla JavaScript (ES6+)
あえてReactなどのフレームワークを使わず、軽量で高速な動作を目指しました。
AI
Google Gemini API (@google/genai SDK)
最新の Gemini 2.5 Flash モデルをデフォルトで使用し、応答速度を最適化しています。
画像連携
Unsplash API
高品質で商用利用可能な美しい画像を提供するため。
データ管理
LocalStorage
APIキーやお気に入りレシピはブラウザ内に保存されるため、セキュリティ面でも安心です。
こだわりの UI/UX
UI/UXでは「温かみのある料理サイト」を意識したカラーパレットを採用しました。さらに、レスポンシブデザインでスマホからでも快適に使えるように設計しています。 また、APIのレート制限（使いすぎ）などのエラーハンドリングにも力を入れました。ユーザーが迷わないように親切なエラーメッセージを表示するようにしています。
さいごに
個人開発として作ったこのアプリですが、自分自身も毎日の料理で実際に使っています。「冷蔵庫の掃除もできて、美味しい料理も食べられる」。まさに一石二鳥のアプリになりました。 APIキーさえあれば誰でも無料で使えるので、ぜひ試してみてください！