AI コーディングツールでフルスタックアプリを開発する方法

・AIコーディングツールはフルスタック開発を加速させるが、構造化された利用が必須 ・Replit Agentはスケルトン作成に最適。10分程度で実行可能な状態を生成 ・Cursor Agentは明確なスコープのタスクで圧倒的に効率的 ・AIが苦手：複雑な状態管理、認証のエッジケース、ドメイン知識が必要なロジック ・最終的な20%（エラーハンドリング・セキュリティ・エッジケース）は人間のレビューが必須

今回作成するのは、基本的ながらフルスタックの要素をすべて含むタスク管理アプリです。 フロントエンド・バックエンドAPI・データベース・認証を網羅します。

仕様
・ユーザー認証（登録・ログイン・ログアウト） ・タスクの作成・表示・更新・削除 ・タイトル・説明・締切日・ステータスのフィールド ・ユーザーごとに自身のタスクのみ表示 ・Reactフロントエンド + Node.js/Expressバックエンド + PostgreSQL

使用プロンプト
「ReactフロントエンドとNode.js/Expressバックエンドでフルスタックなタスク管理アプリを作成してください。 PostgreSQLを使用し、JWTによるユーザー認証を実装してください。 タスクはタイトル（必須）、説明（任意）、締切日、ステータス（todo/in-progress/done）を持ちます。 データベーススキーマ、APIルート、シンプルなReact UIを作成してください。」

12分で生成された成果
・実行可能なExpressAPI（/auth /tasks） ・usersとtasksテーブルを持つPostgreSQLスキーマ ・ログインフォームとタスクリストのReactフロントエンド ・JWT認証機能

即時修正が必要な問題点
・JWTシークレットがハードコードされている（重大なセキュリティ欠陥） ・タスクエンドポイントに入力バリデーションがない ・Reactの状態管理が複雑化

Replitからコードをエクスポートし、gitリポジトリを初期化、 ローカルのPostgreSQLを設定します。

AIが本当に役立つ場面：環境設定ファイルの作成
Cursorに以下を指示し、env.exampleと起動スクリプトを生成させます。 「このプロジェクトの必須環境変数を文書化した.env.exampleを作成してください。 DATABASE_URL、JWT_SECRET、PORT、NODE_ENVを含め、 起動前に必須変数の存在を確認するスクリプトも作成してください。」

オープンな依頼ではなく、明確でスコープを絞った指示を出すことが重要です。

Cursorが得意なこと
・明確な仕様の機能実装 ・標準パターンのデータベースクエリ ・既存コード構造に沿ったエンドポイント追加 ・既存スタイルに合わせたReactコンポーネント

Cursorが苦手なこと
・複雑な状態管理 ・リアルタイム更新時の競合状態 ・暗黙的なビジネスロジックの考慮

AIによってテスト作成時間が大幅に短縮されます。

プロンプト例
「Jestとsupertestを使ってタスクAPIのユニットテストを作成してください。 作成、取得、更新、削除の各ケース（正常・異常）を網羅し、 テスト用データベースを使用してください。」

人間の介入が必須な項目
・エラーハンドリング：アプリ固有のエッジケース ・パフォーマンス：インデックスの必要性をAIは自発的に指摘しない ・セキュリティ：権限チェック・情報漏洩・詳細なエラーメッセージ ・ビジネスロジック：複雑な状態遷移や重複処理

1. Replit Agentでスケルトンを10分で作成 2. 即時セキュリティレビュー 3. ローカル環境に移行 4. Cursorでスコープを絞った機能開発 5. AIでテスト自動生成 6. セキュリティ・パフォーマンス・エッジケースを手動レビュー 7. デプロイと監視

・Replit Agent：初期スケルトン作成 ・Cursor：本開発・機能実装 ・Node.js / Express：バックエンド ・React：フロントエンド ・PostgreSQL：データベース