リファクタリング教材(全40章アウトライン)🛠️✨
対象:TypeScript初級〜中級/リファクタリング初めて🔰/設計は超入門🌱 環境:Windows🪟+Visual Studio Code🧑💻(AI拡張機能あり🤖)
この教材で身につくこと🌸
- 壊さずに改善する「安全な手順」👣🛟
- よくある“臭いコード”の見つけ方&直し方👃✨
- TypeScriptの型・テスト・Lint・AIを味方にして、怖くない改善ができる🧷🧪🤖
- “設計っぽい話”に入る前の、超やさしい整理の感覚が掴める🧱🌱
各章の基本フォーマット📚
- ねらい🎯
- コード例(ビフォー/アフター)🧩➡️✨
- 手順(小さく刻む)👣
- ミニ課題✍️
- AI活用ポイント🤖(お願い方+チェック観点✅)
Part 0:リファクタの全体像(迷子にならない地図)🗺️✨
第1章 リファクタリングとは?(10分で要点)⏱️🛠️
- ねらい:定義と価値をサクッと理解する
- 学ぶこと:動作を変えずに内部を良くする/なぜ必要?
- ミニ課題:リファクタと改修を見分けるクイズ🧠
- AI:定義の言い換えを作ってもらう🤖📝
第2章 改修・バグ修正と混ぜないコツ🔀🚧
- ねらい:「今日やること」を1つに絞れるようになる
- 学ぶこと:混ぜると差分が読めなくなる理由
- ミニ課題:変更内容を「分類」してみる📌
- AI:コミットメッセージ案の生成✍️🤖
第3章 リファクタの黄金手順(安全3点セット)🛟✅
- ねらい:毎回同じ手順で安心して進める
- 学ぶこと:①守りを置く→②小さく変える→③すぐ確認
- ミニ課題:手順カードを並べ替える🃏
- AI:手順のチェックリスト化📋🤖
Part 1:環境準備(壊れにくい土台づくり)🧰🪟
第4章 学習用プロジェクトを動かす(最短で成功体験)🚀
- ねらい:まず動かして安心する
- 学ぶこと:npm scripts/実行/デバッグの入口
- ミニ課題:1行変更→実行→戻す🔁
- AI:README整備の提案を出してもらう🤖
第5章 VS Code必須操作(リファクタの道具)🧑💻🧰
- ねらい:VS Codeで安全に直す基本操作を覚える
- 学ぶこと:検索・置換/リネーム/参照へ移動
- ミニ課題:安全リネーム体験🏷️
- AI:ショートカット学習カード生成🃏🤖
第6章 Gitの超基本①(コミット=セーブ)💾🧷
- ねらい:戻れる安心感を手に入れる
- 学ぶこと:add/commit/log/diff(最小だけ)
- ミニ課題:3回コミットして差分を見る👀
- AI:コミット文の添削🤖✅
第7章 Gitの超基本②(ブランチで実験する)🌿🧪
- ねらい:安全に試せる流れを作る
- 学ぶこと:ブランチ作成→作業→戻す
- ミニ課題:ブランチで大胆に直して戻る🔙
- AI:PR説明文の下書き生成📝🤖
第8章 「小さく刻む」練習(1コミット1説明)👣📌
- ねらい:差分を小さく保てるようになる
- 学ぶこと:変更を分割する考え方
- ミニ課題:大きな変更案を“分割設計”する🧩
- AI:分割案を複数出して比較する🤖🔍
Part 2:守りを固める(テスト・型・静的チェック)🛡️🧪🧷
第9章 フォーマット統一(読みやすさの土台)🎀🧹
- ねらい:見た目の揺れをゼロへ
- 学ぶこと:自動整形/保存時フォーマット
- ミニ課題:整形だけのコミットを作る🧷
- AI:設定の意図を説明してもらう🤖
第10章 Lint導入(危ない書き方を減らす)👮♀️⚠️
- ねらい:ミスを早めに発見する
- 学ぶこと:よくある警告の意味/直し方
- ミニ課題:警告を3つ直してみる🔧
- AI:警告の原因と安全な直し方を提案🤖✅
第11章 TypeScriptの型チェックを味方にする🧷✨
- ねらい:型を「安全ネット」として使える
- 学ぶこと:strict寄りの考え方/推論の見方
- ミニ課題:型エラーを直して通す✅
- AI:型改善案を出してもらい採用判断🤖
第12章 テストの最小導入(まず1本)🧪🥚
- ねらい:壊してない保証を作る
- 学ぶこと:ユニットテストの形/期待値の書き方
- ミニ課題:重要関数にテスト1本追加✍️
- AI:テストケース候補を列挙させる🤖📋
第13章 ゴールデンマスター(テストが無いときの守り)👑🛟
- ねらい:既存動作を“固定”してから直す
- 学ぶこと:入出力ログ・スナップショット的発想
- ミニ課題:現状出力を保存して比較する🔁
- AI:入力パターン生成でカバーを増やす🤖
第14章 デバッグとログ(観測してから触る)🔍🪵
- ねらい:怖いコードでも状況を把握できる
- 学ぶこと:ブレークポイント/ログの置き方
- ミニ課題:バグっぽい挙動を観測する👀
- AI:観測ポイント案を出してもらう🤖
第15章 「安全チェック」ルーティン(毎回これ)✅🛟
- ねらい:確認漏れをなくす
- 学ぶこと:型チェック→テスト→実行→diff確認
- ミニ課題:チェックリストで1周回す📋
- AI:チェック項目の自動生成&短文化🤖
Part 3:臭いコードの見つけ方(直す前に気づく力)👃✨
第16章 コードの臭い入門(代表パターン)👃📌
- ねらい:「直すサイン」を知る
- 学ぶこと:長い関数/重複/巨大if/曖昧な名前
- ミニ課題:臭い探しビンゴ🎯
- AI:臭い箇所の候補を指摘させる🤖🔍
第17章 リファクタの優先順位(どこから直す?)🧭
- ねらい:重要度で判断できる
- 学ぶこと:変更頻度が高い/バグが出る/読みにくい
- ミニ課題:優先順位付けワーク📝
- AI:優先順位の理由を文章化🤖
第18章 変更を分割する設計(作業の道筋)🧩👣
- ねらい:いきなり大改造しない
- 学ぶこと:安全な順序(名前→抽出→分離→置換)
- ミニ課題:分割ロードマップ作成🗺️
- AI:ロードマップ案を比較(短期/堅実)🤖
Part 4:超定番リファクタ(ここだけでかなり強い)💪✨
第19章 リネーム①(変数名が世界を救う)🏷️🌍
- ねらい:意味が伝わる名前にする
- 学ぶこと:名付けのコツ(名詞/動詞/単位)
- ミニ課題:曖昧名を10個改善✍️
- AI:候補名を出してもらい選ぶ🤖
第20章 リネーム②(関数・ファイル・型名)📁🧩🏷️
- ねらい:プロジェクト全体の読みやすさUP
- 学ぶこと:責務が伝わる粒度/命名ルール
- ミニ課題:命名ルールを1枚にまとめる📄
- AI:命名ポリシーの叩き台作成🤖📝
第21章 Extract Function(長い関数を分割)✂️📦
- ねらい:1関数1目的に近づける
- 学ぶこと:切り出しの境界/良い関数名
- ミニ課題:30行関数を3〜5個に分割🧩
- AI:切り出し候補の提案→採用判断🤖✅
第22章 Inline / Extract Variable(変数の整理)🧺🪄
- ねらい:読みやすい“名前付きメモ”を作る
- 学ぶこと:一時変数の適量/邪魔な変数の削除
- ミニ課題:読みにくい式を整える🔧
- AI:式の説明文を作ってもらい命名に反映🤖
第23章 Guard Clauses(ネストを減らす)🚦✨
- ねらい:見通しの良い流れにする
- 学ぶこと:早期return/例外条件を先に処理
- ミニ課題:ネスト3段を1段へ🔁
- AI:変形手順をステップ化してもらう🤖👣
第24章 条件式のリファクタ(意図を名前にする)🧾➡️🏷️
- ねらい:ifが「日本語で読める」ようにする
- 学ぶこと:条件の抽出/否定の整理
- ミニ課題:複雑条件を関数化✅
- AI:条件の言い換え(日本語/英語)生成🤖
第25章 マジックナンバー・文字列の退治🔢🪄
- ねらい:意味が分かる定数へ
- 学ぶこと:const/enum的な扱い/単位の明示
- ミニ課題:数値だらけコードを定数化🧹
- AI:定数名の候補作り🤖
第26章 重複排除①(同じ知識は1か所へ)🔁🧠
- ねらい:修正漏れを防ぐ
- 学ぶこと:共通化の見極め(“知識”が同じか)
- ミニ課題:重複ロジックを1関数にまとめる🧩
- AI:共通化しすぎリスクの指摘をさせる🤖⚠️
第27章 重複排除②(ユーティリティ地獄を避ける)🧯🧰
- ねらい:共通化の置き場を迷わない
- 学ぶこと:近くに置く/責務で置く/命名で守る
- ミニ課題:置き場所のルールを決める📁
- AI:フォルダ構成の候補比較🤖
第28章 if/switch整理(分岐を育てる)🧭🧹
- ねらい:分岐が増えても崩れない形へ
- 学ぶこと:ケース分割/デフォルトの扱い
- ミニ課題:巨大switchを読みやすく整理📦
- AI:ケース追加時の抜けを指摘させる🤖✅
第29章 ループ整理(map/filterで意図を見せる)🌀🍃
- ねらい:「何をしたいか」を前面に出す
- 学ぶこと:配列操作の基本パターン
- ミニ課題:for文を宣言的に書き換え🧩
- AI:読みやすさ比較コメントを作らせる🤖
Part 5:TypeScriptらしい改善(型でバグを封じる)🧷🛡️
第30章 null/undefined整理①(発生パターン理解)🫧🧠
- ねらい:なぜnullが出るのか分かる
- 学ぶこと:未設定・欠損・検索失敗の区別
- ミニ課題:nullが混ざる流れを図にする🗺️
- AI:欠損ケースの洗い出し🤖📋
第31章 null/undefined整理②(安全な書き方)🛟🧷
- ねらい:落ちないコードにする
- 学ぶこと:安全アクセス/デフォルト値戦略
- ミニ課題:落ちやすい箇所を安全化✅
- AI:安全化パターンを3案出させる🤖
第32章 any卒業①(unknownへの切り替え)🎓🧷
- ねらい:曖昧さを減らす第一歩
- 学ぶこと:anyの危険/unknownの位置づけ
- ミニ課題:anyをunknownに置換して守る🛡️
- AI:置換候補箇所の抽出🤖🔍
第33章 any卒業②(narrowingの基本)🔍🧩
- ねらい:安全に型を絞れる
- 学ぶこと:typeof / in / instanceof の使い方
- ミニ課題:入力を判定して処理を分ける🚦
- AI:判定条件の網羅性チェック🤖✅
第34章 any卒業③(ユーザー定義型ガード)🧷🧠
- ねらい:型チェックを関数にまとめる
- 学ぶこと:型ガード関数の形/再利用
- ミニ課題:DTOを安全に検証する✅
- AI:型ガード生成→テストも一緒に作らせる🤖🧪
第35章 Union型で状態を表す(許される値を固定)🚦🧷
- ねらい:変な値が入りにくい設計へ
- 学ぶこと:リテラルUnion/状態の表現
- ミニ課題:statusをUnion型にする🏷️
- AI:状態設計案(増えた時の形)を出させる🤖
第36章 判別可能Union(switchの取りこぼし防止)🧷✅
- ねらい:ケース漏れをコンパイルに見つけてもらう
- 学ぶこと:タグ設計/網羅性の考え方
- ミニ課題:分岐追加でエラーが出る体験👀
- AI:タグ名・構造の提案🤖
Part 6:境界と責務(設計の超入門にやさしく触れる)🧱🌱
第37章 関心の分離(SoC)入門:混ぜないだけで勝てる🎭✨
- ねらい:ごちゃ混ぜを解消する感覚を掴む
- 学ぶこと:表示/計算/保存を分ける
- ミニ課題:ファイルを役割で3分割📁
- AI:役割ラベル付けの提案🤖🏷️
第38章 I/Oを外へ(テスタブル設計の入口)🚪🧪
- ねらい:ロジックを単体で検証できる形へ
- 学ぶこと:純粋関数っぽい中心/薄いアダプタ
- ミニ課題:API呼び出しを外に追い出す📤
- AI:境界の切り方候補(小/中/大)🤖
第39章 interfaceで差し替え可能に(DIPの超入口)🔌🧩
- ねらい:依存の向きを整える第一歩
- 学ぶこと:抽象を介して実装を差す
- ミニ課題:Repository風interfaceを作る🧱
- AI:interfaceのメソッド粒度レビュー🤖✅
Part 7:実戦で進める(レガシー・移行・運用)🚀🛟
第40章 総合演習:段階リファクタで完成させる🎓✅🤖
-
ねらい:40章分を“手順で再現”できる
-
やること:
- 守りを置く(テスト/型/観測)🛡️
- 小さく改善(命名→抽出→分離→置換)👣
- AI提案は必ず検証(差分・型・テスト)🤖✅
-
成果物:読みやすく・直しやすいミニアプリ✨
-
仕上げ:リファクタチェックリストで自己採点📋🌸
付録:この教材の“お守り”チェックリスト🧿✨(各章で繰り返し使う)
- 変更は小さい?👣
- 型チェックは通る?🧷
- テストは通る?🧪
- 動作は同じ?✅
- 差分は説明できる?📝
- AI提案を鵜呑みにしてない?🤖⚠️
この40章構成は、詰め込みを避けて「1章=1テーマ」に近づけた設計になっています🌷😊