はじめに
JISOUで学習しているHeyho-です。
Reactの学習の一環として、個人アプリのアイデア出しからMVP作成、そしてアプリ開発までを行いました。
約1ヶ月という限られた期間で、「0から1を作る」という初めての経験を通じて、多くの学びと気づきを得ることができました。
この記事では、アプリの概要や開発の過程、苦戦した点、工夫した点をまとめたいと思います。
作成したアプリの概要
今回作成したのは、「家にある調味料から代替品を提案してくれるアプリ」です。
たとえば「豆板醤がない」ときに、「味噌＋七味唐辛子＋ごま油」など、
家にある調味料を組み合わせて代替できるアイデアをAIが提案してくれます。
開発のきっかけ
私は普段から料理をするのが好きなのですが、
「調味料を買っても結局使い切れずに捨ててしまう」
「代替調味料を調べても、家にない調味料が代わりに出てくる」
という悩みがありました。
家庭によって持っている調味料はさまざまです。
そこで、「自分の家にある調味料だけで代替案を出してくれるアプリがあれば便利では？」
と思い、このアプリを開発しました。
アプリで解決したかった課題
このアプリでは以下のような課題を解決します。
- 使い切れずに余りがちな調味料の無駄を減らす
- 家にあるもので料理を完結できる
- 食材を買い足さずに済むため、節約や時短にもつながる
また、食事制限（ヴィーガン・グルテンフリーなど）やアレルギー情報を登録することで、
自分に合った代替案を提案してくれるのも特徴です。
機能概要
ログイン画面
Supabase Authを使って、Googleアカウントでログインできるようにしました。
ログイン後は、ユーザー専用データを扱えるようにしています。
新規登録画面
各ユーザーごとに「家にある調味料」や「食事制限（アレルギー・ヴィーガンなど）」を選択できます。
調味料はチェックボックス形式にすることで、ユーザーの入力負担を最小化しました。
検索画面
登録時の情報を引き継ぎ、代替したいものを入力して検索ボタンをクリックすると、Gemini APIを利用して代替提案を生成します。
検索結果は履歴として即座に反映されます。
使用技術
| カテゴリ | 使用技術 |
|---|---|
| フロントエンド | React / TypeScript / Vite |
| 認証・DB | Supabase (Auth, Postgres) |
| テスト | Vitest/React Testing Library |
| デプロイ | Firebase Hosting |
| スタイリング | TailwindCSS /shadcn/ui |
| CICD | Github Actions |
| AIツール | Gemini API |
Geminiを使用した理由とChatGPTとの違い
今回のAI提案部分では、Gemini APIを使用しました。
理由は、以前参加したハッカソンでGeminiを利用した経験があり、
その知識を活かして自分のアプリにもAIを実装してみたいと考えたためです。
ChatGPTでも同様のことは実現できますが、
今回は「AIを使う」よりも「AIを自分のアプリに組み込む」ことを重視しました。
Geminiを選んだことで、APIキーの設定やリクエストの送信、レスポンスの扱いなど、
AIをアプリに実装する流れを具体的に体験できたことが大きな学びでした。
結果の精度よりも、「AIをどう組み込むか」を学ぶことを目的としており、
そこがChatGPTを直接使う場合との大きな違いです。
実装で工夫したポイント
- 入力欄に「代替したい食材名」を1つ打ち込むだけで検索できるようにし、「文章で入力する」手間をなくしました。
- 家にある調味料はチェックボックス形式で登録でき、 見やすくスクロールできるよう調整しました。
- 家にある調味料は人それぞれ異なるため、ユーザーごとに代替案を検索できるようにしました。
- 全ユーザーのデータを集計して「よく使われている調味料ランキング」を表示できるようにし、一般的に使われている調味料を可視化し、今後の開発に活かせるようにしました。
苦戦したポイントと学び
設計の難しさとMVP思考の重要性
初めて自分でMVP（最小限の価値あるプロトタイプ）を設計してみたのですが、
実際に実装を進めてみると「この機能を追加したいけれど、今のテーブル設計では対応できない」といった問題が何度も起きました。
結果的に手戻りやテーブル構成の大きな変更が必要になり、 事前にデータ構造をしっかり詰める大切さを痛感しました。
ただ一方で、完璧に設計してから作ろうとすると、なかなか手を動かせなくなることにも気づきました。
まずは動くものを作り、そこから改善していく
このMVP思考がとても重要だと感じました。
小さく作って少しずつ育てていくことで、開発がより前向きに進められるという発見がありました。
Supabase Authによるセッション管理
Supabaseを使ってGoogleログインを実装しましたが、
リロード時にセッション情報が保持されず、画面がログイン状態からログアウト状態に戻ってしまう現象に悩まされました。
原因を調べていくうちに、セッションの仕組み自体を理解できていなかったことに気づきました。
そこで仕組みを一から学び直し、最終的には onAuthStateChange で状態を監視し、
sessionStorage に保持することで解決することができました。
この経験を通して、フロントエンド開発でも認証やセッション管理の理解は欠かせないと実感しました。
個人開発での学習の深まり
今回の開発では、講座や教材で扱っていない技術（Supabase Auth、Gemini API連携など）を自分で調べて実装しました。
最初はなかなか動かず苦戦しましたが、
「自分のアプリを動かすために必要な技術」という明確な目的があったことで、自然と学習意欲が高まりました。
このときに気づいたのは、目的が明確だと理解のスピードが格段に上がるということです。
必要に迫られて学ぶことで、知識が“実感を伴って身につく感覚を得られました。
アイデアの壁を越える難しさ
最初は「TODOアプリ」や「レシピアプリ」など、既に世の中にあるアイデアしか思いつきませんでした。
「ユーザーに価値を届ける」「他と差別化できる」というテーマを意識しても、どうすればよいか悩み、何度も行き詰まりました。
講師との壁打ちを通して、ようやく自分の中から新しいアイデアを引き出すことができました。
この経験からアイデアの考え方を学び、日常の中で不便だと感じたことに意識を向ける習慣が身につき、
「この問題は他の業界ではどのように解決しているのだろう」と考えるようになりました。
小さく作ることの大切さ
開発当初は、やりたいことをすべて盛り込みたくなり、
気づけばやることが増えすぎてモチベーションが下がってしまいました。
しかし、「まずは最小限の機能を完成させよう」と意識を切り替えたことで、
小さくても動くものを作る達成感を味わえ、開発を続けるモチベーションにつながりました。
この経験を通じて、小さく作って育てていくことが個人開発を継続するコツだと気づきました。
完璧を目指すより、まず動かしてみる。そこから次の課題が自然と見えてくる。
この考え方は今後の開発でも大切にしていきたいです。
期間を設けることの大切さ
今回は「1ヶ月で完成させる」という期限を決めて開発を進めました。
結果的に、この期限を設けたことが大きな推進力になりました。
制限時間があることで、優先順位を意識し、
「今やるべきこと」に集中できたのが良かった点です。
もし期限がなかったら、機能を追加し続けて終わらなかったと思います。
この経験を通して、期限を設けることも設計の一部だと感じました。
短期間で一度リリースし、そこから改善を繰り返していく流れのほうが、
学びのサイクルを早く回せると気づきました。
今後追加したい機能
調理器具の代替提案機能
調味料だけでなく、調理器具も代替できるようにしたいです。
日用品を使った代替案をAIで提案する機能を追加したいと考えています。
調味料のユーザー登録機能
現在はDBに登録済みの調味料のみが選択可能ですが、
ユーザー自身が新しい調味料を登録できるようにしたいです。
また、調味料数が増えた際も検索・チェックしやすいUIに改善したいと考えています。
Google以外でのログイン対応
今回開発期間を１ヶ月にしていたのでGoogleでのログインだけに絞りましたが、名前やメールアドレスでも登録できるようにしたいと考えています。
終わりに
半年前まではReactやTypeScriptを使ったことがなく、開発経験が全くなかった自分が、
今回、自分の力で個人アプリを完成させられたことにとても驚いています。
今回の開発を通して感じたのは、技術を学ぶこと以上に「開発を通して得た気づき」こそが大きな財産になるということです。
設計・学習・モチベーション・時間管理どれも、実際に手を動かしてみなければわからないことばかりでした。
この経験を通じて、小さくてもまず形にしてみる勇気と、
課題を学びに変える姿勢の大切さを学ぶことができました。
まだまだ技術は未熟ですが、これからも個人開発を続けながらスキルを磨き、
エンジニアとして成長していきたいと考えています。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼