【要約】React + TypeScript + Supabase で旅行の持ち物リストを自動生成するアプリを個人開発した [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
開発者は、旅行の準備において毎回ゼロから持ち物を検討する非効率性に直面した。過去の経験に基づいた知見を蓄積・活用できないことが、主なペインポイントである。具体的には以下の課題があった。
- ・持ち物検討の繰り返しによる時間的コストの発生。
- ・「何を持ってきたか」という過去の知見がデータとして蓄積されない問題。
- ・認証基盤とデータベースの権限管理をいかに統合するかという技術的課題。
// Approach
開発者は、Firebase Auth と Supabase を組み合わせたハイブリッド構成を採用した。認証の容易さと、データベースの強力なアクセス制御を両立させるためのアプローチである。
- ・Firebase Auth で発行した JWT を Supabase の RLS で検証する仕組みを構築。
- ・
current_setting('request.jwt.claims', true)を用い、JWT のsubクレームを直接参照して権限判定を実施。 - ・過去の利用実績（
used: true）に基づき、クライアントサイドでアイテムの頻度を集計するロジックを実装。
// Result
開発者は、週末のみの開発でインフラコストを無料枠内に収めたアプリを完成させた。個人利用において、準備の負担を大幅に軽減することに成功している。
- ・Lighthouse Performance スコア 94 を達成。
- ・提案精度（体感）70%を実現し、準備の効率化に寄与。
- ・Supabase および Firebase の無料枠内で運用可能な構成を確認。
Senior Engineer Insight
> 認証基盤の使い分けによる開発速度の向上は、プロトタイピングにおいて合理的である。しかし、Firebase と Supabase の連携は設定の複雑さを伴う。データ量が増大した場合、クライアントサイドでの集計はボトルネックとなる。実戦投入時には、PostgreSQL の RPC を用いたサーバーサイド集計への移行が不可欠である。