3
約15分で読める
最初のプロジェクト
「ToDoアプリを30分で作る」ハンズオン。バイブコーディングの実際の流れを体験しよう。
このステップで学ぶこと
- バイブコーディングの実際の開発フローを体験する
- 最初のプロンプトの書き方を学ぶ
- AIとの対話的な改善サイクルを理解する
- 動くものを素早く作るコツを掴む
ハンズオン: ToDoアプリを30分で作る
このガイドでは、Claude Code を使って ToDoアプリを作ります。「完璧に作る」より「動くものを素早く作る」ことを目標にします。
準備（5分）
- Claude Code をインストール済みであることを確認
- 作業用ディレクトリを作成:
mkdir my-first-vibe && cd my-first-vibe claudeコマンドで起動
ステップ1: 最初のプロンプト（5分）
以下をそのまま Claude Code に貼り付けます:
HTML、CSS、JavaScript だけ（フレームワークなし）でシンプルなToDoアプリを作ってください。
要件:
- タスクを追加できる
- タスクを完了済みにできる（チェックボックス）
- タスクを削除できる
- データは localStorage に保存する（ページを閉じても消えない）
- スマートフォンでも使えるレスポンシブデザイン
1ファイル（index.html）にまとめてください。ステップ2: 動作確認（3分）
生成された index.html をブラウザで開きます:
open index.html # macOS
start index.html # Windowsタスクを追加→完了→削除して、基本動作を確認します。
ステップ3: 改善の指示（10分）
動くことを確認したら、改善を依頼します:
以下の点を改善してください:
1. デザインをモダンにしてください（カードUI、ホバーエフェクト）
2. タスクの編集機能を追加してください
3. 「全完了」「全削除」ボタンを追加してください
4. 完了タスクの数と未完了タスクの数を表示してくださいステップ4: さらに発展させる（残り時間）
気に入った機能をさらに追加してみましょう:
以下の機能を1つ追加してください:
- [優先度（高/中/低）を設定する機能]
- [期限日を設定してカウントダウン表示する機能]
- [タスクを検索する機能]バイブコーディングで学んだこと
このハンズオンで体験した重要な原則:
- 具体的に指示する — 「モダンなデザイン」より「カードUI、ホバーエフェクト」
- 一度に全部頼まない — 動くものを作ってから改善
- 確認してから次へ — 各ステップで動作確認
よくある躓きポイント
Q: AIが要件と違うものを作った A: より具体的な指示に書き直しましょう。「期待した動作: ○○、実際の動作: ○○」と明示します。
Q: エラーが出て動かない A: エラーメッセージをそのままコピペして「このエラーを修正してください」と伝えます。