【結論】解決策 / 実行コマンド
初心者がClaude Codeでアプリを作る場合、雛形作成までを公式ジェネレーターで行い、Claude Codeには一機能ずつ実装させる方法が安全です。
「全部作って」ではなく、画面、状態管理、保存、テストを順番に完成させます。
# ターミナルで実行：ReactとTypeScriptの雛形を作成
npm create vite@latest my-todo-app -- --template react-ts
cd my-todo-app && npm install
# ターミナルで実行：開発サーバーを起動
npm run dev
# 別のターミナルで実行：Claude Codeを起動
claude具体的な手順・設定方法
- ブラウザで初期画面が表示されることを確認します。
- Gitを初期化して最初のコミットを作り、戻せる状態にします。
- Claude CodeへTODOの表示、追加、削除、保存を一つずつ依頼し、各段階で動作確認します。
実践プロンプト / 活用テクニック
# 起動後のセッション内で入力
まずTODOを追加して一覧表示する最小機能だけ実装してください。
変更前に対象ファイルを説明し、ReactとTypeScriptの既存構成を維持してください。
削除、永続化、ログイン機能はまだ追加しないでください。
実装後にnpm run buildを実行してください。注意点・よくあるエラーと対処法
Claude Codeがブラウザ画面を常に視覚確認できるとは限りません。
スクリーンショットやエラー内容を渡すか、Playwrightなどのテストを追加して検証可能にします。
開発サーバーをClaude Codeの前景プロセスで起動すると会話が止まる場合があるため、別ターミナルで起動してください。