← Angular コース
90. テストを書く理由 — 手動確認は改修のたびに破綻する
テストとは「コードが期待どおり動くか」を別のコードで自動確認する仕組みです。開発初期は自分の手で全画面を触って確認できますが、画面が10個、機能が50個と増えると、改修のたびに全部を触り直すのは不可能になります。自動テストなら、何百項目もの確認が数秒〜数十秒で終わり、何度でも繰り返せます。
テストには大きく3つの層があります。関数ひとつを検証する単体テスト、画面部品の表示や操作を検証するコンポーネントテスト、ブラウザで実際にアプリを通しで動かすE2Eテストです。下の層ほど速く安定して書きやすく、上の層ほど本番に近いぶん遅くて壊れやすい、というトレードオフがあります。
初学者の落とし穴は「全部の層を最初から完璧に書こう」として挫折することです。まずは一番簡単で見返りの大きい単体テストから始めましょう。ロジックを関数として切り出し、その関数にテストを書く。この習慣だけでも、改修の安心感は大きく変わります。
サンプルコード(フレームワーク環境が必要なため表示のみ)
// ── テストの3層(下ほど速い・多く書く) ──
//
// / E2Eテスト \ … ブラウザで通しで操作(少数)
// / コンポーネント \ … 部品の表示・操作を検証(中程度)
// / 単体テスト \ … 関数の入出力を検証(たくさん)
//
// 手動確認: 改修のたびに人間が全画面を触る → 時間がかかり漏れる
// 自動テスト: ng test 一発で全項目を数秒で再確認 → 何度でも回せる
//
// まずは一番下の「単体テスト」から始めるのが定石
サンプルコードで身につける(5本) →
学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。
公式ドキュメントで詳しく ↗