Skip to content

program_overview.md

Latest commit

 

History

History
208 lines (131 loc) · 8.8 KB

program_overview.md

File metadata and controls

208 lines (131 loc) · 8.8 KB

📘 AIネイティブ・チーム開発ブートキャンプ (14 Days)

〜 Create with AI, Design with IPO, Manage with Git 〜

1. カリキュラムの概要

🎯 コンセプト

「コードを書くのはAI。設計と責任を持つのは人間。」 本カリキュラムは、AIエージェント（Claude Code等）を部下として使いこなしながら、エンジニアリングの本質である「データ構造」「アーキテクチャ」「チーム開発」を14日間で習得し、AIを相棒にしつつ、チーム開発の作法を守れるエンジニアになるための集中プログラムです。

👥 対象者

  • プログラミング初学者
  • プロダクト開発初心者

🏆 到達目標

  1. IPOの身体化: 全ての機能を「入力(Input)・処理(Process)・出力(Output)」で定義できる。
  2. 3層構造の理解: Webアプリが「クライアント・サーバー・データベース」という物理的に異なる場所で動いていることを理解する。
  3. データの永続化: 「メモリ上のデータ（揮発性）」と「データベース（永続性）」の違いを体感し、使い分けられる。
  4. AIと共創できる: AIに適切な指示（プロンプト）を出し、自分の実装力以上の成果物を出しつつ、コードの内容を理解している。
  5. チーム開発: Git/GitHubを用いて、複数人で安全にコードを変更・統合できる。

2. 開発環境・技術スタック

  • AIパートナー: Claude Code (または同等のAIエージェント)

  • 言語: Node.js (JavaScript)

  • フロントエンド: HTML / CSS (シンプルに)

  • データベース: SQLite (サーバーレスDB) + ORM (Prisma/Sequelize等)

  • ※SQLを直接書くことはせず、オブジェクト操作としてDBを扱います。

  • ツール: VSCode, Git, GitHub

3. 運用ルール (鉄の掟)

学習効果を最大化し、AIへの丸投げを防ぐためのルールです。

🛡️ ルール1: UIの前に「IPOカード」

「画面をおしゃれにする」前に、必ず機能のロジック（IPO）を設計します。 コードを書く（AIに指示する）前に、以下のカードを記述・提示しなければなりません。

📝 IPOカード (テンプレート)

  • Input (きっかけ): ユーザーが何を入力し、何をするか？
  • Process (裏側の処理): サーバーは何を受け取り、DBに何を保存/削除するか？
  • Output (結果): 処理後、画面はどう変化し、データはどうなっているか？

🛡️ ルール2: 3層構造の指差し確認

エラー発生時や機能追加時、手書きの図（クライアント・サーバー・DB）を用いて、「今、どこを触っているか」を指差し確認してからAIに指示を出します。

🛡️ ルール3: 自分の言葉で翻訳コメント

AIが書いたコードをそのままコミットすることを禁じます。 主要な処理には、「ここでDBに保存している」「ここでエラーチェックしている」といった日本語のコメントを追記してください。

4. 学習ロードマップ (全14日間)

フェーズ 期間 テーマ キーワード
Phase 1 Day 1-5 基礎とIPOの概念 CLI, 変数, 揮発性, 個人開発
Phase 2 Day 6-10 Web構造と永続化 Client/Server/DB, ログの場所
Phase 3 Day 11-13 チーム開発の作法 Git Flow, Conflict, Code Review
Phase 4 Day 14 リノベーション・ハッカソン 応用, 独自性, 発表

5. フェーズ別詳細タスク

Phase 1: IPOの徹底と「消えるデータ」 (Day 1 - Day 5)

目的: 「プログラムを終了すると変数は消える」という絶望（揮発性）を味わう。WebではなくCLI（黒い画面）で学ぶ。

  • Day 1: 環境構築 & Git始動

  • Repo作成、Clone、git add/commit/push の反復練習。

  • Day 2: CLIツール①「おしゃべり挨拶ボット」

  • Input(名前) → Process(条件分岐) → Output(挨拶) の基本形。

  • Day 3: CLIツール②「割り勘計算機」

  • Input(金額・人数) → Process(計算ロジック・端数処理) → Output(結果)。

  • Day 4: CLIツール③「儚きToDoリスト」

  • 配列(Array)を使ったタスク管理。

  • 重要体験: アプリを再起動し、登録したタスクが全て消えていることを確認する。

  • Day 5: コードレビュー (IPO解説)

  • 自分が作ったツールのIPOをメンターに説明する。

Phase 2: Web構造と「場所」の理解 (Day 6 - Day 10)

目的: クライアント・サーバー・データベースの物理的な場所の違いと、データの永続化を学ぶ。

  • Day 6: 場所の特定実験 (Logs)

  • Task: HTMLとサーバーそれぞれに console.log を仕込む。

  • 確認: ブラウザのF12に出るログ（Client）と、VSCodeに出るログ（Server）の違いを目撃する。

  • Day 7: CLIツール再現「忘れん坊のサイコロ」

  • Task: DBを使わず、サーバーがランダムな数字を返す。

  • 確認: サーバー再起動でデータ（前回の出目）が消えることを再確認。

  • Day 8: 不滅のゲストブック (Create)

  • Task: Client(Input) → Server → Database(Insert)。

  • SQLiteとORMを導入し、データをファイルに書き込む。

  • Day 9: 不滅のゲストブック (Read)

  • Task: Database(Select) → Server → Client(Output)。

  • 保存されたデータを画面に表示する。

  • Day 10: 永続化の証明

  • Task: サーバーを停止・PC再起動後にアプリを開き、データが残っていることに感動する。

Phase 3: チーム開発とコンフリクト (Day 11 - Day 13)

目的: 「他人の変更」と「自分の変更」を統合する作法を学ぶ。

  • Day 11: Base App (共有資産) の解析

  • チーム用リポジトリにある「Base CRUD App」（機能だけある無骨なアプリ）をClone。

  • コードを読み、IPOカードに書き起こして構造を理解する。

  • Day 12: コンフリクト演習

  • チーム全員で同じファイルの同じ行を編集し、わざと衝突させる。

  • 「どっちのコードを残す？」と相談しながら Merge する手順を学ぶ。

  • Day 13: 小機能追加 (Branch & PR)

  • 「タイトルの変更」など影響の小さい変更で、Branch作成 → PR → Review → Merge のサイクルを回す。

Phase 4: リノベーション・ハッカソン (Day 14)

目的: Base App を独自のプロダクトへ進化させる。

  • お題: 「この無機質なリストアプリを、誰かのためのツールに作り変えよ」

  • ルール:

  • 制限時間: 3時間

  • チーム: 2〜3名

  • Base App (CRUD機能付きリスト) からスタート。

  • 見た目（UI）の変更だけでなく、必ず 1つ以上の機能追加（IPOの変更） を行うこと。

  • 評価: 独自性、チーム連携（Git履歴）、IPOの理解度。

6. ディレクトリ構成

学習者はこの構成に従って開発を進めます。

learning-curriculum-repo/
├── program_overview.md               # このドキュメント
├── .gitignore
│
├── 📂 docs/                # 指示書・IPOテンプレート置き場
│   ├── ipo_card_template.md
│   ├── phase1_tasks.md     # Day 1-5 指示書
│   ├── phase2_web_app.md   # Day 6-10 指示書
│   └── ...
│
├── 📂 members/             # 【Phase 1-2】個人学習用エリア
│   ├── tanaka/             # ※他人のフォルダは原則触らない
│   │   ├── phase1_cli/
│   │   └── phase2_web/
│   └── suzuki/
│
└── 📂 team_product/        # 【Phase 3-4】チーム開発用エリア
    ├── src/                # Base App (ハッカソンの種)
    └── database/           # SQLiteファイル

7. 用語の定義 (共通言語)

本カリキュラムでは、混乱を避けるため以下の用語定義で統一します。

用語 意味 (場所) ログが出る場所 役割
Client クライアント (ブラウザ) 開発者ツール (F12) 画面表示、クリック検知
Server サーバー (Node.js) VSCode ターミナル データ処理、計算、DBへの命令
Database データベース (SQLite) (ファイルの中) データの長期保存
IPO Input-Process-Output - 全ての機能の基本構造