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