AIとの開発フロー
AIを使った開発には「効率的な進め方」があります。このページでは、プロジェクトを始めてから完成までの流れを解説します。
開発の全体的な流れ
1
要件を整理する
何を作りたいか、どんな機能が必要かを明確にする
2
AIに設計を相談する
どんな構成で作るか、どんなファイルが必要かを相談
3
バックエンド（API）を作る
FastAPIでデータの保存・取得などのAPIを作成
4
フロントエンド（画面）を作る
Next.jsでユーザーが操作する画面を作成
5
連携させる
フロントエンドからバックエンドのAPIを呼び出す
6
動作確認・修正を繰り返す
実際に動かして問題があれば修正
ステップ1: 要件の整理方法
開発を始める前に、以下の質問に答えを用意しておきましょう。
チェックリスト
-
□
何を作りたいか？
例：Todoリストアプリ、ブログ、ECサイトなど
-
□
どんな機能が必要か？
例：ログイン、一覧表示、検索、投稿、編集、削除など
-
□
どんな画面が必要か？
例：ホーム、詳細、フォーム、設定など
-
□
どんなデータを扱うか？
例：ユーザー情報、投稿内容、商品データなど
ポイント：最初から完璧を目指さなくてOK。まずは最小限の機能（MVP）から始めましょう。
ステップ2: AIに設計を相談する
相談の例
Todoアプリを作りたいです。 機能： - Todoの一覧表示 - 新しいTodoの追加 - Todoの完了/未完了切り替え - Todoの削除 技術： - フロントエンド: Next.js (TypeScript) - バックエンド: FastAPI - スタイリング: Tailwind CSS この構成で作る場合、どんなファイル構成になりますか？ また、どの順番で作っていくのが良いですか？
AIが提案した構成を確認し、疑問があれば質問しましょう。
ステップ3-5: 開発の進め方
バックエンドから作る理由
- APIが先にあると、フロントエンドが何を呼び出すか明確になる
- /docs でAPIの動作確認ができる
- フロントエンド開発時にAPIを待つ必要がなくなる
小さく作る、こまめに確認する
機能を作る
→
動作確認
→
問題なければ次へ
→
繰り返し
一度に大きな変更をせず、小さな変更を積み重ねていくと、問題が起きても原因を特定しやすい。
エラーが出たときの対処法
1. エラーメッセージを読む
エラーには原因のヒントが書いてあります。
TypeError: Cannot read property 'map' of undefined
at TodoList (src/components/TodoList.tsx:15:23)
- TypeError：型に関するエラー
- Cannot read property 'map' of undefined：undefinedに対してmapを呼んだ
- TodoList.tsx:15:23：ファイル名と行番号
2. AIに質問する
エラーメッセージをそのまま貼り付けて質問：
以下のエラーを修正してください： TypeError: Cannot read property 'map' of undefined at TodoList (src/components/TodoList.tsx:15:23) 発生状況：ページを開いたときにエラーになります
3. よくあるエラーパターン
undefined/null関連
→ データがまだ取得できていない状態でアクセスしている
CORS error
→ バックエンドのCORS設定が不足
404 Not Found
→ APIのURLが間違っている、またはサーバーが起動していない
覚えておこう：エラーは悪いことではありません。むしろ「何が問題か」を教えてくれる親切なメッセージです。
第2部完了！
開発環境とAIツールの学習が完了しました。次は実際にアプリを作っていきましょう！