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

状態機械（State Machine）設計：30章 詳細アウトライン📚✨

Part 0：まずは安心して始める準備🧸​

第1章：この教材のゴールと全体像🎯​

  • ねらい：状態機械で「バグりにくい流れ」を作れるようになる😊
  • やること：最終的に「フォーム送信（成功/失敗/リトライ）」を状態機械で完成させる📨
  • 成果物：完成イメージ（状態の一覧と画面の振る舞いメモ）📝
  • AI活用：ゴール整理「この仕様を状態に分けて候補を出して」🤖✨

第2章：環境構築（Windows + VS Code + TypeScript）🛠️​

  • ねらい：迷子にならない土台を作る💪
  • やること：VS CodeでTypeScript実行、テスト、整形、Lintの基本セットを入れる🧰
  • 成果物：ミニプロジェクト雛形（実行・テストが動く）✅
  • AI活用：設定ファイルの説明をAIに「この設定の意味を初心者向けに説明して」📘🤖

Part 1：状態機械の「考え方」を体に入れる🐣​

第3章：状態機械ってなに？（超入門）🚦​

  • ねらい：「状態」と「イベント」で世界を見る👀✨
  • やること：信号・自販機・ログインなどで直感を作る🚥🥤🔐
  • 成果物：例題3つの「状態→イベント→次状態」メモ📝
  • AI活用：「身近な例で状態機械の例を3つ作って」🤖

第4章：なぜ必要？（if地獄のこわさ）😱​

  • ねらい：状態機械が“バグ防止装置”になる理由を知る🧯
  • やること：if/elseで状態管理して破綻するパターンを見る💥
  • 成果物：アンチパターン集（何が辛いか一言で）🧾
  • AI活用：「このコードの危険ポイントを“状態遷移”の観点で指摘して」🤖

第5章：用語を味方にしよう（6つだけ）📌​

  • ねらい：会話できる最低限の言葉を覚える😊
  • やること：State / Event / Transition / Guard / Action / Context を理解
  • 成果物：自分用ミニ辞書（1行説明）📚
  • AI活用：「それぞれを女子大生向けにたとえ話で」🌸🤖

第6章：手書きでやる！ミニ状態機械（ドア）🚪​

  • ねらい：最速で“できた感”を出す🎉
  • やること：Closed/Open/Locked とイベントで遷移を書いてみる✍️
  • 成果物：ドア状態機械（状態一覧＋イベント一覧）📝
  • AI活用：「ドアの禁止遷移も含めて表にして」🤖

第7章：状態遷移表（Transition Table）を作る📋✨​

  • ねらい：抜け漏れが一発で見える形にする🔍
  • やること：縦＝状態、横＝イベント、セル＝次状態（or禁止）で表を書く
  • 成果物：遷移表 v1（穴があってOK）🧾
  • AI活用：「この遷移表の抜け漏れを指摘して、追加イベント案も」🤖

第8章：状態遷移図（State Diagram）で直感を強化🧭​

  • ねらい：矢印で理解を加速する📈
  • やること：状態を丸、イベントを矢印ラベルで表現🟦➡️🟨
  • 成果物：遷移図 v1（手書きでもOK）🗺️
  • AI活用：「図にしたときに不自然な遷移がないかレビューして」🤖

第9章：抜け漏れチェック術（“全状態×全イベント”）🕵️‍♀️​

  • ねらい：「想定外ルート」を潰す💣→🧯
  • やること：禁止遷移の扱い（無視/エラー/ログ）を決める
  • 成果物：遷移表 v2（禁止の方針つき）✅
  • AI活用：「禁止遷移をどう扱うべきか候補を3つ」🤖

第10章：状態の粒度（細かすぎ/粗すぎ）⚖️​

  • ねらい：状態が増えすぎて辛いのを防ぐ😵‍💫
  • やること：UI状態と業務状態を混ぜないコツ🧩
  • 成果物：状態の整理（統合する/分けるメモ）📝
  • AI活用：「状態の粒度を調整する案を、メリデメ付きで」🤖

Part 2：イベント・ガード・アクションで“運用できる設計”へ🚀​

第11章：イベント設計（命名と分類）📣​

  • ねらい：イベント名で迷わなくする😊
  • やること：ユーザー操作/システム発生/タイマー系に分類⏱️
  • 成果物：イベント一覧（命名ルールつき）📃
  • AI活用：「イベント名の候補を“統一感ある命名”で出して」🤖

第12章：ガード（Guard）で“行ける/行けない”を守る🛡️​

  • ねらい：条件分岐を“散らさない”✨
  • やること：残高不足、未入力、権限なし、などをガードに置く
  • 成果物：遷移表にガード注釈を追加📝
  • AI活用：「このガード条件、どこに置くのが自然？」🤖

第13章：アクション（Action）で“遷移時の処理”を決める🧰​

  • ねらい：状態変更と処理（通知/保存）を整理する📦
  • やること：ログ、API呼び出し開始、画面メッセージ更新などの棚卸し
  • 成果物：各遷移のアクション一覧🧾
  • AI活用：「このアクション、状態に入れる？外に出す？理由つきで」🤖

Part 3：副作用を上手に扱う（ここで設計が急に強くなる✨）🌿​

第14章：副作用って何？（純粋/非純粋の分離）💥➡️🌼​

  • ねらい：「テストできる中心」を作る発想を掴む🧪
  • やること：状態機械の中心は“計算”、I/Oは外側へ
  • 成果物：副作用リスト（API/DB/タイマー/Storage等）📋
  • AI活用：「これは副作用？純粋？分類して」🤖

第15章：I/O境界を外へ（薄いアダプタ）🚪​

  • ねらい：状態機械が外の事情に汚されないようにする✨
  • やること：API呼び出しや保存を“外側の関数”に寄せる
  • 成果物：中心（状態遷移）と外側（I/O）の境界メモ📝
  • AI活用：「境界の切り方を図にするならどう描く？」🤖

第16章：副作用の渡し方3パターン（選べるようにする）🎛️​

  • ねらい：実装がブレなくなる👍
  • やること：①Effectリスト方式 ②コールバック方式 ③DI方式 を比較
  • 成果物：採用方式の決定（理由つき）✅
  • AI活用：「初心者がハマりにくいのはどれ？理由も」🤖

Part 4：TypeScriptで“型で守る”状態機械へ🔒✨​

第17章：Stateを型にする（ユニオン型）🧩​

  • ねらい：状態名の打ち間違いを消す🧹
  • やること：状態を“文字列の集合”として型にする
  • 成果物：状態型＋状態一覧の定義📝
  • AI活用：「状態名を統一感ある英語で提案して」🤖

第18章：Eventを型にする（判別可能ユニオン）🎫​

  • ねらい：イベントの種類が増えても破綻しない✨
  • やること：イベントごとに必要なデータを持たせる（例：idなど）
  • 成果物：イベント型（必要データ込み）📦
  • AI活用：「イベントごとに必要なデータ項目を提案して」🤖

第19章：Context（拡張状態）を型にする🧠​

  • ねらい：状態だけじゃ足りない“データ”を安全に管理する💖
  • やること：フォーム入力、エラー理由、リクエストIDなどをContextへ
  • 成果物：Context型＋更新方針（どこで書き換えるか）📝
  • AI活用：「Contextに入れるべきもの/入れないべきものを整理して」🤖

第20章：型安全① まずは“弱め”でOK（最低限ルール）🙂​

  • ねらい：難しい型芸に入る前に安全運転する🚗
  • やること：「状態変更する関数はここだけ」など最小ルールを決める
  • 成果物：実装ルール（3〜5個）📜
  • AI活用：「初心者向けに守るべきルールを5つ」🤖

第21章：型安全② 遷移表（Record）で読みやすくする📋✨​

  • ねらい：“仕様＝表”に寄せて保守をラクにする😊
  • やること：遷移を表データとして持つ（状態→イベント→次状態）
  • 成果物：遷移表データ（コードに起こす前提）🧾
  • AI活用：「遷移表をコードに落とすときの形を提案して」🤖

第22章：型安全③ 漏れ検出（禁止遷移をコンパイルで止める）🚫✅​

  • ねらい：“ありえない遷移”を作れない世界へ🌈
  • やること：漏れがあったらビルドで気づける仕組みを作る
  • 成果物：漏れ検出が効く遷移定義（方針）✅
  • AI活用：「漏れ検出を強くするほど何が難しくなる？注意点は？」🤖

Part 5：実装パターンで“ちゃんと動く”に落とす🧑‍💻✨​

第23章：実装① Reducerで作る（王道）🍰​

  • ねらい：state + event → next を安定して書けるようにする
  • やること：状態機械の中心関数を作る（純粋に寄せる）
  • 成果物：Reducer（状態遷移の中心）✅
  • AI活用：「このReducer、責務が混ざってないかレビューして」🤖

第24章：実装② Machine API（send方式）にする📮​

  • ねらい：使う側が楽になる形を作る😊
  • やること：send(event) で遷移し、必要ならEffectを返す設計にする
  • 成果物：Machineの薄いラッパー（使い方が簡単）✨
  • AI活用：「使う側のコード例を作って、使いづらさを指摘して」🤖

第25章：非同期（Loading/Timeout/Cancel）を入れる⏳🧯​

  • ねらい：現実のアプリに近づける💪
  • やること：API待ち、タイムアウト、キャンセルの状態と遷移を設計
  • 成果物：非同期対応の遷移表（待ち状態つき）📝
  • AI活用：「タイムアウト時のUX案を状態遷移で提案して」🤖

Part 6：大きくなっても崩れない整理術🏗️✨​

第26章：階層状態（親/子）で整理する🏢​

  • ねらい：状態が増えても見通しを保つ👀
  • やること：「送信中」という親状態の中に詳細を持つ、などの考え方
  • 成果物：親/子の整理案（どこを親にするか）📝
  • AI活用：「階層化するならどこ？理由つきで案を」🤖

第27章：並行状態（Parallel）で同時進行を扱う🧵🧵​

  • ねらい：“同時に起きること”をムリに1本化しない✨
  • やること：例えば「保存中」と「UIメッセージ表示」が並行、など
  • 成果物：並行に分ける案（分けたメリット）📝
  • AI活用：「並行にした方が良いもの/しない方が良いものを整理して」🤖

Part 7：失敗を味方にする（ここが実務で超大事）💖🧯​

第28章：エラーを状態にする（Error state）🚨​

  • ねらい：失敗しても“次の行動”が分かる設計にする😊
  • やること：失敗理由、ユーザー表示、次にできる操作（戻る/再試行）を状態で表す
  • 成果物：エラー状態つき遷移表＋表示方針📝
  • AI活用：「エラーを分類して、どれはユーザー表示/どれはログのみ？」🤖

第29章：リトライと復旧（Retryable/Not）🔁✨​

  • ねらい：通信失敗に強いアプリにする💪
  • やること：再試行回数、バックオフ、二重送信防止、キャンセル導線
  • 成果物：リトライ設計メモ（状態＋ルール）📜
  • AI活用：「“リトライできる失敗/できない失敗”の例を出して」🤖

Part 8：AI活用でスピードアップ＆総合演習🎓🌸​

第30章：総合演習（AIで設計→実装→テスト→ログ）🎉🤖​

  • ねらい：1本作って“自分の武器”にする💖

  • 題材：フォーム送信（Idle → Editing → Submitting → Success / Error）📨

  • 仕上げ要素：

    • テスト：遷移表から表駆動テストを作る🧪
    • ログ：遷移ログ＋相関ID（requestId）で追えるようにする🔍

  • AI活用（3段階）

    1. 設計：遷移表/図/禁止遷移の提案📋🧭
    2. 実装：Reducer/Machine/Effect方式のコードたたき台🧑‍💻
    3. レビュー：抜け漏れ・命名・責務分離・テスト漏れ指摘✅