Day 7 - 12/7
冷蔵庫番 - 食材の賞味期限管理アプリ
ReactTypeScriptTailwindCSSViteNode.jsVercelAPI
Claude CodeGenSpark
概要
概要
冷蔵庫の食材を簡単に管理できるWebアプリです。賞味期限が近い食材を色で分かりやすく表示し、食品ロスを減らすお手伝いをします。
主な機能
- 賞味期限管理: タップで簡単登録、期限が近づくと色でお知らせ
- 買い物リスト: 在庫状況から自動で買い物リスト生成
- ストック管理: 常備品の在庫状況を一目で確認
- デモモード: アカウント不要で即座に体験可能
技術スタック
- フロントエンド: React + TypeScript + Vite + TailwindCSS
- バックエンド: Node.js + Express + Prisma
- データベース: PostgreSQL（Railway）
- ホスティング: Vercel（フロントエンド）、Railway（バックエンド）
リンク
制作時間
16時間
学んだこと・振り返り
学んだこと
技術選定の重要性
- 新しい技術（Flutter）への挑戦は良いが、AIツールとの相性も考慮すべき
- 使い慣れた技術スタック（React/TypeScript）の方が、AIの支援を最大限活用できた
損切りの判断
- 1週間かけた実装を捨てる決断は難しかったが、結果的に正解だった
- 「作り直した方が早い」という判断ができるようになった
AIツールの使い分け
- GenSparkは調査・プランニングには有用だが、実装フェーズではClaude Codeの方が安定していた
- 開発環境や使用技術によってAIツールの得意・不得意がある
週末2日で完成できた要因
- 明確な仕様があった（1週間の試行錯誤で要件が固まっていた）
- Claude Codeとの対話で効率的に実装を進められた
- Vercel/Railwayなど慣れたインフラを使用した
初回プロンプト（計画）
## 制約条件
- **制作時間**: 5分
- **必須要素**: データベースのリレーション
- **ストレージ**: LocalStorageのみ
- **制限**: 外部ライブラリ1つまで
## こだわりポイント（特に重視）
- ⚡ **パフォーマンス**: 速度、最適化、効率的な処理
- 🔒 **セキュリティ**: 安全性、プライバシー保護
- 📱 **レスポンシブ**: PC・タブレット・スマホ対応
## 選択したキーワード
1. 食事
2. 通知する
3. 管理する
## お願い
上記の制約条件と選択したキーワードを考慮して、5分で作れる具体的なWebアプリのアイデアを3つ提案してください。
各アイデアには以下を含めてください：
1. **アプリ名**（キャッチーな名前）
2. **何を解決するアプリか**（1行で）
3. **主な機能**（3つ程度）
4. **なぜこの時間で完成できるか**（簡潔に）
できるだけクリエイティブで、キーワードを意外な形で組み合わせたアイデアを期待しています。
チャレンジ生成ツールで作成した最初の計画です
メインAIツールの評価
Claude Code
⭐⭐⭐⭐⭐
良かった点
- コードの品質が高く、一貫性のある実装ができた - エラーが発生しても的確に原因を特定し修正してくれる - 複雑なルーティングや認証周りも安定して実装できた - デプロイ設定（Vercel, Railway）もスムーズにサポート
改善してほしい点
- 長時間のセッションでコンテキストが切れることがある - プランモードと実装モードの切り替えが少し煩雑に感じる場面があった
総合コメント
最初GenSparkでFlutter開発を1週間試みたが、環境構築やビルドエラーで難航。結局すべて破棄してClaude Codeで週末2日で作り直した結果、安定した品質のアプリが完成した。使い慣れた技術スタック（React/TypeScript）との相性が非常に良く、生産性が格段に高かった。
公開日: 2025/12/7