Webアプリ
献立作成アプリ「だれか決めて！晩ごはん」
概要
家族や友人と「今日のごはん、何にする？」を楽しく決められる献立投票アプリです。ホスト（作る人）とゲスト（投票する人）に分かれ、投票結果と自動生成を組み合わせて効率的に献立を決定します。
使用技術
- ・React / Vite
- ・JavaScript
- ・Vitest
- ・Firebase Authentication
- ・Firestore
- ・Firebase Hosting
- ・Firebase Cloud Functions
主な機能
- ・Firebase Authenticationでアカウント作成。
- ・自分の作れるメニューを登録・編集し、献立データを保存可能。
- ・ホストが発行したURLを共有してゲストを招待。ゲストは週ごとに投票可能。
- ・ゲストが気になるメニューに投票。投票結果はホストにリアルタイム反映。
- ・投票結果を優先し、それ以外の日はホストが登録したメニューをもとに自動で献立を提案。
- ・材料はオートコンプリート機能
- ・献立から自動でリスト生成。買い物中にチェックできる機能付き。
工夫した点 / 学んだこと
1. ゲスト・ホストの権限分離とセキュリティ
ホストとゲストでアクセスできるデータを分け、Firestore Security Rulesによるアクセス制御を行いました。ゲストへの招待URLはサーバー側で発行・管理し、使用回数や有効期限もFirestoreで制御しました。また、認証や権限判定などの重要な処理はサーバー側で行い、クライアント側で改ざんされても権限を変更できない構成を意識しました。さらに、同じゲストによる重複投票を防ぐため、ゲストIDを利用して投票済みかどうかを判定する仕組みを実装しました。
＜学んだこと＞
機能を実装するだけでなく、「誰が、どのデータに、どの操作をできるのか」を設計段階から考えることが重要だと学びました。
2. Firestoreのデータ構造を見直した経験
開発初期には、ゲストがアクセスするデータと個人情報を含む保護すべきデータを同じ構造に置いていました。Firestore Security Rulesを設計する中で、この構造では適切なアクセス制御が難しいことに気づき、ドキュメント構造を見直しました。データを用途やアクセス権限ごとに分け、必要なユーザーだけが必要なデータへアクセスできる構成に変更しました。
＜学んだこと＞
後からセキュリティを追加するのではなく、データ構造を設計する段階からアクセス権限を考える必要があることを学びました。
3. 家族が迷わず使えるUI/UX
家庭で継続的に利用することを想定し、操作をできるだけシンプルにすることを意識しました。例えば、『チェックリスト形式の買い物リスト」、『献立・材料の編集機能』、『材料入力時の候補表示』、『投票された献立が分かる表示』、『投票後のメッセージやイラスト』、などを実装しました。材料入力では候補から選択できるようにすることで、「玉ねぎ」「たまねぎ」など表記の揺れを減らし、買い物リストで同じ材料が別々に表示されることを防いでいます。また、元データにない材料を登録した場合はユーザーごとに保存し、次回以降の候補として表示するようにしました。
＜学んだこと＞
単に機能を追加するのではなく、実際に使う人が迷わず、繰り返し使いやすいかを考えてUI/UXを設計することが大事だと学んだ。
4. 週単位の献立・投票管理
1週間単位で献立を管理できるよう、週を識別するためのIDを用意し、献立と投票を週単位で紐付ける構成にしました。また、ゲストから投票された献立には表示上の目印を付け、通常の自動生成された献立と区別できるようにしました。
＜学んだこと＞
機能単体だけを見るのではなく、「どのデータとどのデータを、どの単位で関連付けるか」を考えてデータ設計することの重要性を学びました。
5. 秘匿情報の管理方法を見直した
開発中にAPIキーをGitHubへ公開してしまった経験から、秘匿情報の管理方法を見直しました。APIキーだけでなく、トークンやアカウント情報、環境ごとの設定値など、公開してはいけない情報を整理し、.envによる環境変数管理やpre-commitフックを利用して、秘匿情報をGitHubへ登録しにくい運用へ変更しました。
＜学んだこと＞
セキュリティは「問題が起きてから対応する」のではなく、最初から公開してよい情報と秘匿すべき情報を区別し、誤って公開しにくい仕組みを作ることが重要だと学びました。
詳細