Appearance
アプリ開発の実践
いよいよオリジナルアプリを作ります！
開発の流れ
Step 1: 要件定義を確定
午前中に作成した要件定義を、講師と一緒に確認します。
確認ポイント
- [ ] 「必須」の機能が3〜5個に絞られている
- [ ] 機能が具体的に書かれている
- [ ] 4時間で完成できそうな規模である
要件定義の最終チェック
markdown
## アプリ名
（例：勉強記録アプリ）
## 機能リスト（必須のみ）
1. 勉強記録の追加（科目、時間、日付）
2. 今日の勉強一覧表示
3. 記録の削除
4. 今日の合計時間表示
## 画面構成
- ホーム画面：記録一覧と入力フォームStep 2: プロジェクト作成
作業フォルダに移動
bash
cd ~/vibe-codingClaude Codeでプロジェクト作成
確定した要件定義をClaude Codeに伝えます。
Next.jsで[アプリ名]を作って。
機能：
1. [機能1]
2. [機能2]
3. [機能3]
4. [機能4]
画面構成：
- [画面1]：[内容]
- [画面2]：[内容]
デザインはシンプルでモダンに。
まずはデータベースなしで、画面と基本動作を作って。Step 3: 基本機能を実装
段階的に作る
一度に全部作らず、段階的に進めます。
フェーズ1：画面を作る
まず画面のレイアウトを作って。
データは仮のものでOK。フェーズ2：動作をつける
追加ボタンで新しいデータが追加されるようにして。
まだデータベースは使わなくてOK。フェーズ3：データベースを接続
Vercel Postgresに接続して、データを永続化して。
DAY1のToDoアプリと同じ方法で。こまめに確認
機能を追加するたびに、ブラウザで動作確認します。
開発サーバーを起動してStep 4: 動作確認・修正
確認チェックリスト
- [ ] データを追加できる
- [ ] 追加したデータが表示される
- [ ] ページ更新後もデータが残る
- [ ] 削除・編集ができる（機能がある場合）
- [ ] エラーが出ない
バグがあったら
[現象]というバグがある。修正して。
再現手順：
1. [手順]Step 5: デプロイ
GitHubにpush
このプロジェクトをGitHubにpushして。
リポジトリ名は [アプリ名] にして。Vercelでデプロイ
DAY1と同じ手順：
- Vercel にログイン
- 「Add New...」→「Project」
- リポジトリを選択
- Vercel Storageを接続（データベースを使う場合）
- 「Deploy」
公開URL確認
https://[アプリ名]-xxx.vercel.app動作することを確認してください。
Step 6: 発表準備
発表内容
- アプリ名
- どんなアプリ？（30秒で説明）
- デモ（実際に動かして見せる）
- 工夫したポイント
- 感想
発表のコツ
- 時間は1人2〜3分
- 画面を共有してデモを見せる
- URLをチャットでシェア
困ったときは
10分ルール
10分以上詰まったら、コーチに声をかけてください。
よくある問題と対処
| 問題 | 対処 |
|---|---|
| 画面が真っ白 | エラーを確認して修正して |
| データが保存されない | データベース接続を確認して |
| デプロイできない | ビルドエラーを確認して |
| 思った通りにならない | 具体的に期待と現状を伝える |
時間配分の目安
| 時間 | 作業 |
|---|---|
| 14:00〜14:30 | 要件確定、プロジェクト作成 |
| 14:30〜16:00 | 基本機能の実装 |
| 16:00〜17:00 | データベース接続 |
| 17:00〜18:00 | 動作確認、バグ修正 |
| 18:00〜18:30 | デプロイ |
| 18:30〜19:00 | 発表準備 |
遅れても大丈夫
予定通りにいかなくても、最低限の機能が動けばOKです。 完璧を目指さず、「動くもの」を作ることを優先してください。
早く終わった人へ
基本機能が完成したら、以下に挑戦してみましょう：
🎉 発表
完成したら、みんなの前で発表です！
発表の流れ
- 自分の番が来たら画面共有
- アプリの説明（30秒）
- 実際にデモ（1〜2分）
- 工夫したポイント、感想
- URLをチャットでシェア
みんなの発表を聞くとき
- 拍手で盛り上げる
- 質問があれば遠慮なく
- シェアされたURLにアクセスしてみる
2日間、お疲れ様でした！