SoC（関心の分離）教育コンテンツ：TypeScript版アウトライン（全17章）🧠🧩✨
第1章：SoCってなに？30秒でつかむ超入門🎀
- SoC＝「変更理由が違うものは混ぜない」🧁
- “混ぜると事故る”の直感例（UI・ルール・通信がごちゃ混ぜ😇）
- この教材のゴール（見抜く→直す→保つ）✅✨
第2章：なぜ混ぜるとツラいの？“修正が怖いコード”の正体😵💫💥
- 仕様変更・UI変更・API変更が連鎖する🌊
- バグの居場所が分からない問題🔍
- 影響範囲（blast radius）を小さくする考え方💡
第3章：SoCとSOLID（特にSRP）をやさしくつなぐ🧩💖
- SRP＝責務＝変更理由📌
- SoCはSRPの“現場でのやり方”
- ミニ練習：「これはどの関心？」仕分け🎮
第4章：TypeScriptの世界の“関心”を棚卸ししよう🧺✨
- UI🖥️／状態管理🧠／業務ルール📏／通信🌐／永続化🗄️／ログ📈
- フロントでもバックでも共通の分け方🙆♀️
- “関心リスト”を作るワーク📝
第5章：Windows＋VS Codeの最小セットを整える🪟🛠️
- VS Code拡張（TS、Lint、Test、AI補助）🧰
- npmスクリプトで「迷わない実行」🏃♀️
- “詰まりポイント”回避メモ（PATH・権限・改行など）😇
第6章：プロジェクトの最小フォルダ設計（サイトの骨格）📁🏗️
- まずは軽い3〜4フォルダでOK🍰
- “公開API”を決める（exportのルール）🚪
- 循環参照を起こさない配置のコツ🌀🙅♀️
第7章：最強の第一歩！「純粋な処理」と「副作用」を分ける🧼⚡
- 純粋関数＝テストしやすい神パーツ✨
- 副作用＝通信・DB・ファイル・時刻など🌐🕒
- ミニ演習：1つの関数を「計算」と「I/O」に分割✂️
第8章：モジュール分割（ファイル境界）でSoCを作る🏠📦
- 1ファイル1責務の感覚
- util地獄を避ける（“便利箱”の罠）📦💥
- index.tsで“表の顔”を作る（バレル運用は慎重に）🙂
第9章：ライトな3層設計（UI / Application / Domain）🍰✨
- UI：表示と入力だけ🖥️
- Application：流れ（ユースケース）🧭
- Domain：ルール（変更に強い中心）🛡️
- 置き場迷子を防ぐチェック表✅
第10章：型で境界を守る（ドメイン型の作り方）🧠🛡️
- string乱用で事故る例（ID、金額、日付）💥
- “型で禁止する”って最強💪
- ミニ演習：入力→検証→ドメイン型に変換してから使う🔄
第11章：DTOとドメインを混ぜない（変換の設計）📦🔁
- APIの形（DTO）と業務の形（Domain）は違ってOK🙆♀️
- 変換（mapping）は「境界」に置く🚪
- 欠損・命名違い・単位違いを吸収する考え方🧽✨
第12章：依存の向き（DIPの入口）をSoCで体験🧲🌟
- 業務がライブラリ都合に引きずられないようにする
- “内側（ルール）”を守る構造🛡️
- Ports & Adaptersの超ミニ版🔌
第13章：DIの基本（まずは「渡すだけDI」でOK）💉😊
- newしないで外から渡すだけでも立派なDI✨
- 関数引数DI／コンストラクタDIの超基本
- ミニ演習：fetch部分を引数にして差し替え可能にする🔁
第14章：DIの実践（差し替え設計と境界の保ち方）🔄🧪
- 本番実装 vs テスト用実装の切り替え
- 依存が増えてきた時の整理（Factory/Composition Root）🏗️
- “DIやりすぎ”のサインも知る😵💫
第15章：テスト戦略（SoCがあると楽になる）🧪🌸
- 純粋ロジック：ユニットテストで高速✅
- I/O：薄い結合テストで最低限👌
- “何をどこまでテスト？”の決め方🎯
第16章：ケーススタディ（ごちゃ混ぜ→分離してスッキリ）📚🔥
- テーマ例：学園イベント申込🎓／カフェ注文☕（親しみやすい）
- Before：UIに全部😇 → After：層＋境界＋型で整理✨
- 段階リファクタ手順（止めずに直す）🔧🌱
第17章：AI導入前提のSoC運用（Copilot/Codex活用＋レビュー）🤖✅💖
- AIに「分離案を3案」出させるコツ🎁
- “責務・境界・依存”のレビュー観点チェックリスト🔍
- チーム/個人でSoCを崩さない運用ルール📌✨
- 次の学習ルート（SRP→DIP→クリーン/ヘキサへ）🚀
この17章版をベースに、次はどれを作りますか？😊✨
- 各章を「サイト用の見出し（h2/h3）」まで細分化して、記事化できる目次にする🧱📝
- 第16章のケーススタディを先に作って、最初から体験で覚える教材にする🎮🔥