はじめに
- 本記事はGeminiCodeAssistとGeminiAPIを使用して食事の献立を提案するアプリを作成した際の所感や備忘をまとめたものです
- 個人開発をはじめたいと思ってる人、GeminiCodeAssist、GeminiAPIがどんなものか知りたい人に対してご参考になれば幸いです
- 今回作成したアプリは主に個人の趣味利用的なものなので、収益化などは目指していません
- 筆者はまともな個人開発はほぼ初めてですので諸々温かい目で見てください
開発の経緯
個人開発の経緯としては、「とりあえずAIコーディングエージェントを使って何か作ってみたい！」という思いがあり、かつ「家庭の課題を何か解決できるといいな～」ということで、日々の食事の献立を考えるのが面倒なところにフォーカスしてそれをAIに提案してもらえるようなアプリを開発してみようというのがキッカケです。
普通に生成AIにプロンプト入力すれば良いんじゃない？という話ですが、特定の用途に特化したUIを構築したり、将来的にDBや各種サービスを連携させたりと拡張性を考えるとWebアプリを作る価値はあるかなと思っています。
勉強にもなりますしね。
作ったもの
作成したアプリがこちら。よろしければ使用してみてください。
※Googleアカウントが必要です
材料を入力して提案ボタンを押すとレシピを提案してくれます。
AIへのレシピ問合せはGeminiAPIを使用しています。
技術スタック
技術スタック一覧
| 項目 | 技術名 |
|---|---|
| AIコーディングエージェント | GeminiCodeAssist |
| AI通信 | GeminiAPI |
| フロント | React |
| バック | NestJS |
| 言語 | TypeScript |
| 基盤（ベース） | Vite / CRA |
| フロントデプロイ | Vercel |
| バックデプロイ | GoogleCloud(CloudRun) |
選定理由
- GeminiCodeAssist：以前業務でGitHubCopilotの使用経験があり、使用感が似てそうなGeminiCodeAssistとの比較をしてみたかった。無料枠で個人開発に十分そうな制限内容だった
■参考（無料で使用できる主なAIコーディングエージェント概要）
| 名称 | 無料枠制限概要 |
|---|---|
| Gemini Code Assist | コード補完: 月間180,000回まで（1日6,000回）、チャット: 1日240回まで |
| GitHub Copilot | コード補完: 月間2,000回、チャット: 月間50回まで |
| Claude (Claude Code) | 無料プランは無し。アカウント登録時に試用クレジットが配布される |
| Codeium | コード補完、チャットが完全無料とのこと。一部機能に制限あり |
| AWS CodeWhisperer | 個人開発者向けティアが無料。コード補完はあるがチャット機能はなさそう |
| Cursor | 無料版（Free Tier）あり。チャット機能は無制限で利用可能。一部機能に制限あり |
-
GeminiAPI：私用でGeminiをよく使っており、馴染みがあったかつ無料枠で十分に活用できそうだった。難しいプロンプトは作らないので正直ここは何でもよいが、Gemini系で固めて作ってみる
-
その他：使ったことあるフレームワークや言語をベースに構成
GeminiCodeAssistを実際に使ってみる
GeminiCodeAssistのセットアップ
VisualStudioCodeで拡張機能を入れれば使用可能になります。
インストールが完了すると画面横にGeminiCodeAssistが表示されるようになります。
GitHubCopilotと画面構成はほぼ同じですね。
Googleアカウントでログインすることで使用できるようになります。
GEMINI.mdファイルの作成
プロジェクトの要件や概要、技術スタックなどをGEMINI.mdに書いておくことでプロンプトを入力する際のベース情報としてくれる。GitHubCopilotでいうcopilot-instructions.mdと同じもの。
プロジェクト直下に.geminiフォルダを作成して、ファイルを配置すると読んでくれるみたいです。
（最初この情報が中々見つからなくてちょっとハマりました）
作成したGEMINI.mdの内容はこちら
## 🍳 AI 献立提案アプリ作成依頼プロンプト
### 1\. 開発要件
以下の仕様に基づき、Web アプリケーションを構築してください。
| 項目 | 詳細 |
| :----------------------- | :---------------------------------------------------------------------------------------------------------------- |
| **プロジェクト名** | `SmartRecipe` (献立提案アプリケーション) |
| **アプリ名** | レシピサポートくん |
| **技術スタック** | React (Vite/CRA ベース), TypeScript, CSS Modules, Nest.js（バックエンド）、モノレポ構成 |
| **使用 AIAPI** | GeminiAPI（gemini-2.5-flash） |
| **アプリケーション概要** | ユーザーが持っている食材やいくつかのオプションを入力すると、AI がその条件に合うレシピを提案するインターフェース。 |
| **データ構造** | レシピ一覧とレシピ詳細は以下の型を持つオブジェクトとする。 |
| **画面構成** | 以下のシンプルな単一画面構成とする。 |
**レシピの型定義 (`src/types/recipe.ts`)**
```typescript
export type Ingredient = {
name: string;
};
export type Recipe = {
id: string; // 一意のID
title: string; // 献立名
ingredients: Ingredient[]; // 必要な材料のリスト
steps: string[]; // 手順のリスト
time: number; // 調理時間（分）
};
```
**画面構成/機能 (`/`)**
| エリア | 機能 | 詳細 |
| :--------------- | :------------- | :----------------------------------------------------------------------------------------------------------------------------------- |
| **入力フォーム** | 材料入力 | ユーザーが所持している材料をリスト（オートコンプリート形式）を５つ、テキスト形式を一つ（カンマ区切り）で入力できるようにする。 |
| **オプション** | 検索オプション | 調理時間、提案数、ジャンル、子供用ご飯、キャンプ飯のオプションを指定できるようにする。 |
| **提案ボタン** | AI 提案実行 | 入力された材料リストとオプションを元に「AI に献立を提案してもらう」ボタンを設置。 |
| **結果一覧表示** | レシピ一覧 | AI からの提案（レシピデータ）を一覧表示する。レシピ名、調理時間、必要な材料をカード形式で表示。 手順は表示せず裏で持っておく |
| **結果詳細表示** | レシピ詳細 | レシピ一覧をクリックするとレシピ詳細データを表示する。レシピ名、調理時間、必要な材料、手順を表示。スクロールして確認できるようにする |
---
### 2\. フォルダ構成とファイル名
プロジェクトはモノレポ構成を採用します。
```
SmartRecipe/
├── frontend/
│ ├── src/
│ │ ├── components/
│ │ ├── pages/
│ │ ├── types/
│ │ ├── services/
│ │ ├── App.tsx
│ │ └── main.tsx
│ └── package.json
└── backend/
├── src/
│ ├── app.module.ts
│ └── main.ts
└── package.json
```
---
### 3\. コード規約と実装の具体的な指示
以下の規約を厳守して実装してください。
1. **状態管理:**
- ユーザーが入力した材料リストと、AI が提案したレシピ一覧の 2 つの状態を、ルートコンポーネント (`RecipePage.tsx`) で **`useState` を使用**して管理してください。
2. **型定義の徹底:** すべてのコンポーネントの Props、および定義したデータ型 (`Recipe`, `Ingredient`) には、**TypeScript の型定義を明確に**適用してください。
3. **スタイリング:** スタイルはすべて **CSS Modules**（`.module.css`）を使用して記述してください。
---
### 4\. 開始タスク
**Frontend (React)**
```bash
cd SmartRecipe/frontend
npm install
npm run dev
```
**Backend (Nest.js)**
```bash
cd SmartRecipe/backend
npm install
npm run start:dev
```
---
こちらの内容も何となく概要をGeminiに伝えてベースを作ってもらいました。
今回は特に使用していませんがconfig.yamlやstyleguide.mdを作成することでGitHubにプルリクエスト投げたりできるそうな。
ベースコードの作成
上記で作成したGEMINI.mdを参考にWebアプリのベースを作ってもらいます。
暫くすると一通りファイルの作成が終わり、Webアプリのベース（フロントのみ）が出来ました。
出来上がった画面がこちら。（今と名前が違うのは気にしないでください）
一つの指示を出すだけで数分で動くものが作れるのはすごい・・・。
バックエンドサーバー構築
続いてGeminiAPIに問合せするためのバックエンドサーバーを構築します。
最後にGEMINI.mdの更新してくれました。
swagger-uiの設定を行い、APIが実行できることを確認します。
GeminiAPIの連携
続いてこのアプリの根幹であるGeminiAPIとの連携です。
こちらもどうやるのか聞いてみます。
指示に従って必要パッケージのインストール後、Google AI StudioでAPIキーを作成します。
APIキーが作成できました。（一部情報消してます）
なお、GeminiAPIの無料枠の場合、モデルによりますが今回使用したものだと以下制限があります。
特にRPMがキツイですね。同接ユーザ数10人とかで使えなくなりそう。
APIキーをコピーして、各.envファイルに設定後、API処理の作成をお願いします。
こんな感じのAPIサービスが作られました。
更に作成したAPIをフロントから呼べるように指示します。
修正完了後、無事にフロントからGeminiAPIを呼び出しレシピが表示されるようになりました！
諸々リファクタリング
色々機能の追加をお願いしました。
こちらも問題なく完了！リファクタリング能力も非常に高いと感じます。
またデザインの変更も指示したり、細かい仕様の調整を行い、完成！！
使用してみた所感
評価できる点
Gemini Code Assist
- Gemini Code Assistの無料プランのみを使用してコーディングを実施してみたが、趣味での個人開発レベルであれば十分に使用できた
- GitHubCopilotと比較しても無料プランの制限が比較的幅広く、一日の空き時間に使用する程度であれば問題ない
- 何より自然言語での指示でアプリのプロジェクトを全体的に構築してくれる点は非常に良かった
- リファクタリング能力も非常に高く、ある程度指示を出せば、気を利かせて諸々の修正を一気に実施してくれる点も良かった
GeminiAPI
- GeminiAPIも無料枠で使用したが、瞬間的なアプリ利用者数が多くなければ問題なく使用できるものだった
- Gemini2.5FlashやGemini2.5Proなどの安定的なモデルも使用できる
気になった点
Gemini Code Assist
- GitHubCopilotと比較してどんどん修正してしまう傾向がありそう。一応修正時に1ファイルずつ聞いてはくれるが、「これってどうやるの？」レベルの指示でも「じゃあ修正していきますね！」って感じで実施してしまう。これに関しては一旦修正させて、レビューをするでもよいかもしれないです
- Agentモードで使用するモデルはこちらで選択は出来ないようですが、情報が古く誤った修正をひたすらされることがありました。
具体的に言うとGeminiAPIのモデル名をgemini-2.5-flash-lite使いたいのにgemini-1.5-flash-liteに修正しなおされる事象が起きてました。
- Agentモードだとなぜかコマンドブロックのコピーボタンがついてなく非常に使いづらい。Askモードではついている
- ガッツリ使うと1日の利用制限に引っかかる
体感で2～3時間程度で利用制限になりました。利用制限になると以下のような表示になる模様
（利用制限なのか、ネットワーク的なエラーなのか判別がつかないので、もうちょっとマシなメッセージを出してほしい・・・）
GeminiAPI
- 無料枠だとRPMの制限が厳しい。テストでリクエスト連打したら10回目くらいで落ちた。ちゃんとしたアプリをリリースしたいなら大人しく有料プランに入ると良い
- 初め
gemini-2.5-flashを使用していたが、アプリの動作が重たくなってストレスだった。テキストベースの情報を扱うだけであれば、gemini-2.5-flash-liteでよさそう
終わりに
- 初めてAIコーディングエージェントを使用して個人開発を実施してみましたが、非常に楽しかったです（気づいたらあっという間に一日の制限に引っかかることも）
- 何よりアイデアさえあれば、今の時代は簡単に動くものが作れることを体験できたので、個人開発のハードルが一気に下がった気がします
- 今回作成したアプリに関してはGoogleCloudの無料期間が90日なので、そちらが過ぎたら破棄するかもしれないですし、もっと機能拡張して正式リリースしても良いかなと思っています
- この情報がどなたかのご参考になれば幸いです。よろしければ皆さんもぜひお試しください
ご拝読ありがとうございました