メインコンテンツまでスキップ
KISS TS版YAGNI TS版SoC TS版ADR TS版HC/LC TS版DRY TS版リファクタリング TS版テスタブル TS版TDD TS版エラーモデリング TS版レイヤー TS版MVC TS版依存関係ルール TS版DIP TS版DI TS版Is-a/Has-a TS版SOLID TS版GoFデザインパターン TS版Observer TS版CQS TS版状態機械 TS版不変条件 TS版Entity/VO TS版DDD TS版集約/境界 TS版ドメインイベント TS版モジュラーモノリス TS版ヘキサゴナル TS版クリーンアーキ TS版ACL TS版API Contract TS版SemVer TS版DbC TS版冪等性 TS版CAP定理 TS版Outbox TS版Saga TS版CQRS TS版イベントソーシング TS版BC TS版

第15章：「安全チェック」ルーティン（毎回これ）✅🛟

ねらい🎯​

リファクタのたびに「確認漏れ」をゼロにするために、毎回まったく同じ順番で回す“安全チェック”を身につけるよ〜🧷✨ やることはシンプル👇

  • 型チェック🧷（TypeScript）
  • テスト🧪
  • 実行して体感チェック▶️
  • diff確認👀（意図しない変更が混ざってない？）

1) まずこれだけ覚える！安全チェック4点セット✅​

Concept: Checklist

✅ ① 型チェック（tsc）​

「型のズレ」「型の抜け」「危ないany」みたいなものを先に止めてくれるよ🧷✨ TypeScriptは5.9系のリリースノートも公開されていて、最近は --module node20 のような選択肢も安定扱いになってきてるよ（Node環境との整合が取りやすい）📦🧠。 (TypeScript)

✅ ② テスト​

リファクタは「動作を変えない」が大前提だから、テストが通る＝安心度が爆上がり🧪🫶 （章12〜13で作った“守り”が、ここで毎回効く！）

※ 2026のTS/フロント周りだと Vitest を採用するケースもかなり多いよ（Vitest 4.0のアナウンスも出てる）⚡🧪。 (Vitest)

✅ ③ 実行チェック​

最低限でOK！「いつも使う画面」「いつも叩くAPI」「いつも触るボタン」みたいな定番コースを1周するだけで安心が跳ね上がるよ▶️🎮

✅ ④ diff確認（超大事👀）​

最後に 差分を“人間の目”で読む！ AI提案が混ざってても、ここで止められる🛑🤖

2) “毎回これ”の回し方（1コミット分の型）👣💾​

Step 0：作業前の1秒チェック⏱️​

  • git status で「変な変更が残ってない」✅
  • できれば作業前に一回 npm test が緑か確認🟩（最初から赤だと迷子になりやすい🌀）

Step 1：変更は小さく👣​

  • リネームだけ
  • 抽出だけ
  • ifの整理だけ みたいに「1コミット1説明」📌

Step 2：型チェック🧷​

  • 通らなかったらここで止まる🛑 （この時点で直すのが一番ラク）

Step 3：テスト🧪​

  • 落ちたら原因を1つずつ潰す🔧 （“まとめて直す”は事故りやすい💥）

Step 4：実行して定番コース▶️​

  • 重要画面を1回開く
  • 重要操作を1回やる これで十分なことが多いよ😊

Step 5：diff確認👀​

  • 「意図した行だけ変わってる？」
  • 「関係ない整形や改行が混ざってない？」
  • 「ロジックが変わってない？」（ここ重要！）

Step 6：コミット💾​

  • メッセージは「何を良くしたか」が1行で言えるやつ🏷️✨

3) すぐ使える！npm scripts テンプレ📦✨​

package.json に、チェックをまとめたコマンドを用意しちゃうのが最強だよ🧠🛠️

{
  "scripts": {
    "typecheck": "tsc -p tsconfig.json --noEmit",
    "test": "vitest run",
    "test:watch": "vitest",
    "lint": "eslint .",
    "dev": "vite",
    "build": "vite build",
    "check": "npm run typecheck && npm run test && npm run lint"
  }
}
  • check が “安全チェックの入口” になって超ラク✅✨
  • vitest run はCIでも使いやすい🧪（採用してる場合ね）

4) VS Codeで“1発チェック”にする（Tasks）🧑‍💻⚡​

VS Codeは安定版が 1.108（リリース: 2026-01-08）で、Insidersは 1.109（2026-01-22時点で更新）みたいに月次で進むよ🗓️✨。 (Visual Studio Code) だから「タスク化」はずっと便利😊

.vscode/tasks.json 例👇（コマンド1発でチェック回す）

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "✅ check (typecheck+test+lint)",
      "type": "shell",
      "command": "npm run check",
      "problemMatcher": []
    }
  ]
}
  • Ctrl+Shift+P → Tasks: Run Task → ✅ check ... で実行できるよ🎮✅

5) 時間別メニュー（今日はどれ回す？）⏱️🧁​

🥚 30秒：ミニチェック​

  • 型チェック🧷
  • テスト🧪（速いやつだけ）

🍰 2分：標準チェック（おすすめ）​

  • 型チェック🧷
  • テスト🧪
  • 実行チェック▶️
  • diff確認👀

🎂 10分：重めチェック（仕上げ）​

  • npm run build 🏗️
  • 余裕があればE2E（あるなら）🎭

6) “失敗したとき”の読み方（よくある3つ）🧯😵​

① 型チェックが落ちた🧷💥​

  • まずは 最初のエラー1個だけ 見る👀 連鎖して何十個も出てるだけのことが多いよ🌀

② テストが落ちた🧪💥​

  • 落ちたテスト名 → 期待値 → 実際の値 の順に見る📌
  • 章14のデバッグ手法（ブレークポイント・ログ）をここで使う🔍🪵

③ diffが怪しい👀⚠️​

  • 変更が混ざったら一旦戻すのが正解！🔙✨
  • “整形の差分”と“ロジックの差分”が混ざると読みにくさMAX😇

7) AI活用ポイント🤖✅（お願い方テンプレ付き）​

🤖 ① チェックリストを“短文化”してもらう​

（PR説明やコミット前メモに貼る用）

安全チェックを「10秒で読めるチェックリスト」に短くして。
項目は ①型 ②テスト ③実行 ④diff の順で、各1行ずつ。

🤖 ② エラーログの“原因候補”を出してもらう（でも鵜呑み禁止🙅‍♀️）​

このTypeScriptのエラーを読んで、原因候補を3つと、
安全に直す順番（最小修正→改善）を提案して。
最後に「動作変更リスクがある点」も書いて。

🤖 ③ diffレビュー（動作が変わってないか）​

このdiffをレビューして。
「動作が変わってしまった可能性がある箇所」を指摘して、
確認すべき観点（テスト追加ポイントも）を箇条書きにして。

8) ミニ課題✍️🎒（安全チェック1周を体にしみ込ませる）​

お題🍀​

どこか1つ、ちょっと読みにくい関数を選んで👇の順で3コミットに分けるよ👣💾

  1. リネームだけ🏷️
  2. Extract Functionだけ✂️
  3. ifの整理だけ🧭

ルール📋✅​

各コミットごとに必ずこれを回す👇

  • npm run typecheck 🧷
  • npm test 🧪
  • 1回実行▶️
  • git diff 👀

まとめ🧿✨（コピペ用・安全チェック最短版）​

  • 型チェック🧷：通る？
  • テスト🧪：全部緑？
  • 実行▶️：定番コースOK？
  • diff👀：意図した差分だけ？
  • 説明📝：このコミットは1文で言える？

（おまけ）ツール更新の豆知識📌​

Node.js は 24.13.0 が LTS（セキュリティリリース）として 2026-01-13 に出てるよ🔒📦。 (Node.js)