【結論】Webアプリを段階的に開発する
Webアプリ開発は一つの指示で全自動化せず、要件、データモデル、API、UI、テスト、運用へ分割します。
Claude CodeではPlanモードで対象ファイルと実行予定コマンドを確認し、最小の垂直スライスから実装します。
データベース変更、Secrets、外部サービス、デプロイは別の承認工程へ分けます。
# ターミナルで実行：作業用リポジトリを作成
mkdir task-app && cd task-app && git init
# ターミナルで実行：Planモードで開始
claude --permission-mode plan
# ターミナルで実行：使用予定ポートを確認
lsof -i :3000 -i :5173 2>/dev/null || true
# ターミナルで実行：変更差分を確認
git diff --check
git diff --stat具体的な手順・設定方法
利用者、主要フロー、認証、データ、成功条件を定義します。
タスク作成と一覧表示だけの最小機能を設計し、APIとUIを一つずつ接続します。
単体、統合、E2E、アクセシビリティ、セキュリティを段階的に確認します。
実践プロンプト / 活用テクニック
# 起動後のセッション内で入力
タスク作成と一覧表示だけを持つ最小Webアプリの計画を作成してください。
DBスキーマ、API、UI、テスト、エラー状態を示してください。
パッケージ導入、ファイル作成、ポート起動、外部通信はまだ行わないでください。注意点・よくあるエラーと対処法
CORSエラーを許可オリジンの全開放で解決しないでください。
依存関係を大量追加すると脆弱性管理と更新が難しくなります。
本番データベースやクラウド環境へClaude Codeから直接変更を適用しないでください。