88. こまめに動かして確認する — 小さく書いて小さく確かめる

コードは数行書くごとに保存して画面で確かめます。ng serve が自動で再ビルドしてくれるので、確認のコストはほぼゼロです。画面に出ない値は console.log で出力したり、DevTools の Console で確かめたりします。手段は何でもよいので「書いた直後に確かめる」を徹底するのが基本です。

こまめに確認する理由は、壊れたときに疑う範囲を直前の数行に絞れるからです。動いていた状態から1歩ずつ進んでいれば、原因は必ず最後の1歩にあります。実務のデバッグ力とは高度な技術というより、この「動く状態から離れない」習慣の積み重ねで、開発速度に直結します。

初学者の最頻パターンは、30分書き続けてから初めて動かし、大量のエラーに埋もれることです。まとめて書けばまとめて壊れます。エラーが複数出たら一番上の1つだけを読み、直してはまた確認します。console.log を仕込むのは恥ずかしいことではなく、確かめないまま進む方が危険です。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// ── 「1歩書いたら1回確かめる」の例 ──
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-favorite-button',
  template: '<button (click)="toggle()">{{ isFavorite() ? "★" : "☆" }}</button>',
})
export class FavoriteButton {
  isFavorite = signal(false);

  toggle() {
    // まず console.log だけ書いて保存 → クリックしてログが出るか確認
    console.log('クリックされた。現在の値:', this.isFavorite());
    // ログが出ることを確かめてから、切り替え処理を1行足して再確認
    this.isFavorite.update((v) => !v);
  }
}
// 「クリックが届いているか」→「値が変わるか」→「表示が変わるか」
// と1段ずつ確かめれば、壊れても疑う場所は直前の1段だけ

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗