12章の振り返り 〜TABERU〜

作ったもの（TABERU）

• TABERUは、毎日のごはん作りに必要な「買い物リスト・献立・レシピ・予算」をひとつにまとめた、食卓管理アプリである。

• 日頃から、献立を立てて、買い物リストを手で作って、買いに行くという流れが面倒だった。

• その経験から、このアプリを作った。

• 買い物リストは、献立やレシピから作る方法と、手動で作る方法がある。必要なものと、追加で買いたいものを分けて作成できる。

• また、買い物はある程度決まった予算の中でしているので、予算機能も追加した。

• レシピ作成では、AIエージェントが材料の画像、もしくは材料名からレシピを作成する。

技術スタック

フロントエンド

• 言語：TypeScript

• フレームワーク：Next.js 16（App Router）／React 19

• スタイリング：Tailwind CSS v4

バックエンド

• 言語：TypeScript

• フレームワーク：Next.js（App Router／Route Handlers）

• データベース：PostgreSQL（Supabase）

• ORM：Prisma

• 認証：Supabase Auth（メール認証・Googleログイン）

• 画像保存：Supabase Storage

AI

• AIエージェント：Mastra

• モデル：Google Gemini（gemini-3.5-flash-lite）

開発環境・インフラ

• ホスティング：Vercel

• バージョン管理：Git、GitHub

• デザインカンプ：Figma

主要なライブラリ

• React Hook Form（フォーム・バリデーション）

• Zod（AIが返すデータの形のチェック）

• SWR（データ取得・キャッシュ）

つまずいたことと解決

1. AIによるレシピ新規作成

レシピ新規作成では、AIフレームワークのMastraを使用した。

起きたこと

画像とテキストのどちらから作成しても、材料とは関係のないレシピが作成されてしまった。AIに必要な情報を渡せていなかった。

原因を探した流れ

1. はじめは、AIのモデルや指示文の問題を疑った。しかし、どちらを修正しても結果は変わらなかった。

2. 入力情報のログを見ると、画像はimageとして入っており、問題はないように見えた。

3. tsxで画像とテキストでタグが違うように、AIが受け取る情報にも型のようなものがあるのではないかと考えて調べた。

解決

人数の自動変換で使った prompt ではなく、content を使えば正しく入力できることが分かった。ここを直したことで、AIによるレシピ新規作成ができるようになった。

学び

はじめて使うメソッドが多かった。まずは基本的な型を使って理解し、そのうえでより深く調べて使うのが良いと感じた。

2. 材料マスターにない材料の新規登録

起きたこと

レシピで使う材料は、材料マスターのidを外部キーとして参照しており、GET APIはそれで問題なく使えていた。

しかし、レシピを新規に作ると、材料マスターにない材料も増える。そのため、POST・PUT APIはGET APIと同じ方法では実装できず、材料がない場合は新しく登録する処理が必要になった。

原因

その処理の where には、ユニークなカラムを指定しなければならなかった。DB設計の時点では、そのことを意識できていなかった。

解決

幸い他のテーブルへの影響はなく、材料名のカラムをユニークにするだけで済んだ。

学び

実務ではDB設計が複雑なことも多く、影響が大きければ後戻りが大変になる。DB設計の段階で、アプリへの理解がより必要だと感じた。

AIの使い方

どう使ったか

AIは、実装したい機能のアドバイス役として使った。

• 追加の機能を実装するときは、テンプレートのコードをもとに、メソッドの型や使い方を説明してもらった。

• コードの生成自体には、あまり使わなかった。

決めていたルール

生成されたコードを使う場合も鵜呑みにせず、自分で説明できるコードだけを使う。

このルールのおかげで、エラーが出たときも非常に対処しやすかった。説明できるほどの解像度があれば、他のコードにどのくらい影響するのかが分かるからである。

感じたこと

AIによって開発スピードがこれまでより速くなっていることは、初めてアプリを作った自分でも実感した。

一方で、コードを読み解けない状態でAIにコードを生成してもらうと、次のようになる。

1. 出力が正しいか判断できない

2. プロンプトもそのレベルにとどまる

3. その結果、出力も解像度の低いコードになる可能性が高い

これは、このカリキュラムを通して最も強く感じたことである。出力されたものが正しいかを判断できる力を、今以上に養っていかなければならない。

今後

レスポンシブデザインの実装

スマホで利用されることが多そうなので、レスポンシブに対応させる必要がある。

他の人に使ってもらい、運用する

他の人に利用してもらうことで、改善点を見つけて修正していく。

使用した技術の理解を深める

オリジナルアプリの作成を通して使い、理解したコードが多くあるので、忘れないうちに復習しておく必要がある。