作品はコチラ：https://portfoliofu.shop/airecipe/

概要

「冷蔵庫にある余り物」と「手持ちの調味料」から、AIが最適なレシピを提案するWebアプリケーションです。食材の廃棄ロスを減らし、日々の献立を考える心理的負担を軽減することを目的としています。

開発の背景と目的

日々の料理で生じる「あと少しだけ残った食材」を有効活用するため、ユーザーの状況（料理レベル、買い足しの可否）に応じたパーソナライズされたレシピ生成ツールとして設計しました。

主な機能

  • AIレシピ生成: Gemini APIを活用し、ユーザーの所持食材と調味料に限定したレシピを提案。
  • カスタマイズ可能な献立: ユーザーの料理スキル（初心者〜上級者）や、人数、買い足しの許可設定を反映。
  • 履歴・お気に入り管理: ローカルストレージを活用し、過去のレシピ履歴と「また作りたい」お気に入りレシピを即座に呼び出し可能。
  • UX重視のUIデザイン: Tailwind CSSによるモダンなインターフェースと、ローディング中のアニメーションでユーザーの待ちストレスを軽減。
  • 実用的な機能: 印刷/PDF保存機能により、レシピをデータ、紙で保管可能。

技術スタックとこだわりのポイント

本プロジェクトでは、フレームワークを使用せず、Vanilla JSで構築することで技術の核心を深く理解し、軽量かつメンテナンス性の高いコードを実現しました。

  • 使用技術: HTML5 / CSS / JavaScript / gemini canvas
  • AI連携: Gemini APIを利用したプロンプトエンジニアリング
  • セキュリティ: DOMPurifyによるMarkdown変換時のサニタイズ（XSS対策）を実施
  • 状態管理: localStorage を駆使し、APIキー保存から献立履歴まで、バックエンドサーバー不要で完結する動作を実現

制作時間
3.5時間