【結論】解決策 / 実行コマンド
Claude Codeでのアプリ開発は、いきなり完成品を丸投げせず、要件、雛形、機能、テストの順に小さく進めると成功率が上がります。
最初に公式ジェネレーターで土台を作り、Claude Codeには計画確認と差分レビューを挟みながら実装を任せます。
# ターミナルで実行：Vite公式ジェネレーターで雛形を作成
npm create vite@latest my-app -- --template react-ts
cd my-app && npm install
# ターミナルで実行：Gitを初期化して基準点を保存
git init && git add . && git commit -m "chore: initialize app"
# ターミナルで実行：Claude Codeを起動
claude具体的な手順・設定方法
CLAUDE.mdに使用技術、テストコマンド、変更禁止範囲を記載します。- 一機能ごとに計画、実装、テスト、差分レビュー、コミットを行います。
- 依存パッケージ追加時は公式文書と最新バージョンを確認し、ロックファイルをレビューします。
実践プロンプト / 活用テクニック
# 起動後のセッション内で入力
ReactとTypeScriptでTODO追加機能を実装してください。
最初に変更予定ファイルとデータ構造を提示してください。
承認後、src配下へ最小構成で実装し、Vitestのテストを追加して実行してください。
認証、DB、外部APIはまだ追加しないでください。注意点・よくあるエラーと対処法
開発サーバーは長時間動作するため、エージェントが待機状態になることがあります。
起動コマンドは別ターミナルで実行し、Claude CodeにはテストやHTTP確認を任せると安定します。
生成コードには脆弱性、古いAPI、過剰な依存が入り得るため、人間のレビューを省略しないでください。