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

リファクタリング教材(全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テーマ」に近づけた設計になっています🌷😊