メインコンテンツまでスキップ

MVC 教育コンテンツ（TypeScript版）アウトライン：全17章🎓✨

対象：TS初級〜中級／MVC初めて／設計超入門 環境：Windows🪟 + VS Code🧑‍💻 AI：Copilot / Codex 等導入済み前提🤖💡 題材：**CampusTodo（課題メモ）**📚✅（ブラウザで動く）

第1章：MVCってなに？まず“分ける理由”をつかもう🧠✨​

  • ゴール：Model / View / Controller を自分の言葉で説明できる💬

  • 内容：

    • MVC＝役割分担（混ぜるとしんどい😇）
    • UI変更に強くなる理由💪

  • ミニ演習：Todoアプリの処理を3つに分解して書く📝

  • AI活用🤖：MVCを「学園祭」に例えて説明してもらう🎪

第2章：開発環境（Windows＋VS Code）＋AI相棒の使い方🤝🛠️🤖​

  • ゴール：迷わず動かせる状態にする🚀

  • 内容：

    • Node.js（2026最新版）＋VS Code拡張
    • ViteでTSをサクッと動かす🧩
    • AI利用ルール：小さく生成・差分レビュー・丸呑み禁止⚠️

  • 演習：プロジェクト作成→起動→ブラウザ表示🎉

  • AI活用🤖：「次に確認すること」を3つに絞って出してもらう🔎

第3章：題材の要件を決める（ここが設計の入口）📌✨​

  • ゴール：作る範囲を決めて迷子にならない🧭

  • 内容：

    • ユーザーストーリー（追加したい、完了にしたい等）
    • 画面に必要な情報を整理👀

  • 演習：最小機能（追加/一覧/完了）を決める✅

  • AI活用🤖：要件の抜け漏れチェックをしてもらう📋

第4章：Model入門①：データを型で表す（TodoItem）📦🧷​

  • ゴール：Todoのデータ構造をTypeScriptで表現できる

  • 内容：

    • type / interface の使い分け
    • TodoItem（id/title/done/dueDate…）
    • “無効な状態”を作らない意識🛡️

  • 演習：仮データ3件を作って表示準備🧪

  • AI活用🤖：必要なプロパティ候補を出してもらい、最小に絞る✂️

第5章：View入門①：DOM表示は“表示だけ”にする🎨🙅‍♀️​

  • ゴール：Viewにロジックを入れすぎない

  • 内容：

    • View＝DOM生成/更新担当
    • ルールや保存処理はViewに置かない🚫

  • 演習：Todo一覧をDOMに描画する📋✨

  • AI活用🤖：「見やすいHTML構造案」を3つ提案してもらう🧁

第6章：Controller入門①：入力（イベント）を受けて指示する🎮➡️🧠​

  • ゴール：Controller＝交通整理を理解する🚦

  • 内容：

    • ボタン/フォーム送信のイベント受け取り
    • Model更新→View再描画の流れ🔁

  • 演習：追加ボタンでTodoが増える➕✅

  • AI活用🤖：「イベント設計の注意点」を箇条書きで出してもらう🧾

第7章：MVCが回る！データフロー（更新→再表示）を固定する🔁✨​

  • ゴール：MVCの“回転”を体に入れる🌀

  • 内容：

    • ControllerがModelを更新
    • ViewはModelの状態を表示
    • 依存の向き（ModelがViewを知らない）🚫

  • 演習：完了トグル（done切替）✅🔁

  • AI活用🤖：責務混ざりチェックをAIレビューで🧐

第8章：Controller入門②：ルーティング的な“操作表”を作る🗺️📌​

  • ゴール：if地獄を避ける（KISS）🍀

  • 内容：

    • 操作（Action）を整理する
    • コマンド/イベントの対応表の作り方🧾

  • 演習：操作追加が楽になる構造にする🧱

  • AI活用🤖：分岐を減らす案を3つ出してもらう✨

第9章：Model入門②：不変条件（ルール）をModel側に寄せる🛡️📦​

  • ゴール：ルールを散らさない

  • 内容：

    • タイトル空欄NG、期限は過去NGなど
    • ルールはModel（またはDomain）で保証する💪

  • 演習：無効データを作れない/通せないようにする🚫

  • AI活用🤖：不変条件候補を列挙してもらう🧠

第10章：ViewModel導入：表示都合でModelを汚さない🧺✨​

  • ゴール：表示用の形を作れる

  • 内容：

    • ViewModel＝表示のための加工
    • 例：期限を「あと◯日」表示、重要度ラベル🏷️

  • 演習：一覧をViewModel経由で描画する📋✨

  • AI活用🤖：ViewModel案を出してもらい最小に削る✂️

第11章：Validationとエラーメッセージ（優しく案内）😌🚨​

  • ゴール：失敗してもUXが崩れない

  • 内容：

    • 形式チェック（空欄など）
    • ルールチェック（Model側）
    • エラー表示の考え方（怖い文言にしない）🌸

  • 演習：エラーでも落ちずに表示できるようにする🧯

  • AI活用🤖：優しいエラーメッセージ文案を作ってもらう💬

第12章：Service層でControllerを太らせない🍔➡️🥗​

  • ゴール：Fat Controller回避！

  • 内容：

    • Controller＝調整
    • Service＝処理（追加/完了/編集など）

  • 演習：追加処理をServiceへ移す🔁

  • AI活用🤖：「この処理はどこ？」判定してもらう🧐

第13章：永続化①：まずはLocalStorageで保存する💾✨​

  • ゴール：再読み込みしても残る🎉

  • 内容：

    • 永続化は“外部”なので責務分離
    • LocalStorageは学習にちょうどいい🍀

  • 演習：保存→復元を実装✅

  • AI活用🤖：保存フォーマット（JSON）案を出してもらう📄

第14章：永続化②：Repositoryで差し替え可能にする🔁🧲​

  • ゴール：保存先変更に強くなる

  • 内容：

    • ITodoRepository 的interface
    • LocalStorage実装は外側へ🧱

  • 演習：Service→Repository経由に統一する✅

  • AI活用🤖：interface設計を提案してもらい最小にする✂️

第15章：テスタブルMVC：依存を注入する（DIの超入門）🔌🧪​

  • ゴール：テストできる形にする

  • 内容：

    • new直書きを減らす
    • FakeRepositoryで差し替えできる🧸

  • 演習：Fakeで動作確認（手動でもOK）✅

  • AI活用🤖：「テストしにくい点」を指摘してもらう🔍

第16章：テスト入門（Model/Serviceを守る）🛡️🧪✨​

  • ゴール：壊れやすい部分にテストを当てる

  • 内容：

    • まず守るのはModel/Service
    • 正常/異常/境界値📏

  • 演習：Modelテスト1本＋Serviceテスト1本✍️

  • AI活用🤖：境界値テスト案を出してもらう🧠

第17章：総合演習（完成）＋ふりかえり（MVCを説明できる）🎓🌸​

  • ゴール：MVCで作って、構造を説明できる状態にする🗣️✨

  • 内容：

    • 検索/並び替えなど軽め機能追加🔍
    • リファクタ（命名/責務/依存方向）🧹
    • README作成（使い方＋MVC構造）📘

  • 成果物：CampusTodo完成✅＋構造説明メモ📝

  • AI活用🤖：README下書き生成→自分で直して完成✨