サンプルコードで身につける: 開発サイクル — 自動リロードとエラーの読み方

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

1自動リロードを体感する

ng serve が起動していれば、保存するだけで再ビルドとブラウザ更新が自動で走ります。ターミナルに再ビルドのログが流れるのを確認しましょう。この「保存すれば反映される」リズムが開発の基本です。

# ng serve を起動した状態でファイルを編集・保存すると…

# ターミナルに再ビルドのログが自動で流れる:
# ➜ Local:   http://localhost:4200/
# Application bundle generation complete. [0.2 seconds]
# Page reload sent to client(s).

# 同時にブラウザも自動でリロードされ、変更が画面に反映される。
# 「保存 → 数秒待つ → 画面で確認」を小刻みに繰り返すのがコツ。
# 反映されないときは、まず ng serve が生きているか確認する

2NG8001 — 知らないタグ名エラーを読む

importsへの追加を忘れてタグだけ書くと、NG8001というエラーになります。メッセージには原因のファイルと行番号も含まれます。エラーコードと場所を読み取れれば、長い英文を全部理解する必要はありません。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  imports: [], // ← UserCard を追加し忘れている
  template: '<app-user-card />',
})
export class App {}

// ターミナルに出るエラー:
// [ERROR] NG8001: 'app-user-card' is not a known element
//   src/app/app.ts:6:13
//
// 読み方: NG8001(コード) + ファイル名と行番号(場所)。
// imports に UserCard を追加すれば解消する

3ターミナルのコンパイルエラーの読み方

文法ミスやタイプミスは、ブラウザに届く前にターミナルで検出されます。エラーは上から読み、最初の1件から直すのが鉄則です。1つの原因から複数のエラーが連鎖することがよくあるからです。

# タイプミス(userNaem)をしたときのターミナル出力例:
#
# ✘ [ERROR] NG9: Property 'userNaem' does not exist on type 'App'.
#   Did you mean 'userName'?
#     src/app/app.html:1:16
#
# 読み方の手順:
# 1. 最初のエラーから読む(後続は連鎖のことが多い)
# 2. ファイル名と行番号(app.html の1行目)で場所を特定
# 3. Did you mean ...? は修正候補の提案。だいたい当たっている
#
# エラーを直して保存すれば、自動で再ビルドされて復帰する

4DevTools Consoleで実行時エラーを見る

コンパイルは通っても、実行して初めて起きるエラーはブラウザ側に出ます。画面が真っ白になったらF12キーでConsoleを開くのが最初の一手です。赤い表示のスタックトレースから原因の場所をたどれます。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<p>{{ user.name }}</p>',
})
export class App {
  // 本来はAPIから取る想定のデータが、まだ null のまま
  user: { name: string } | null = null;
}

// コンパイルでは気づけず、実行時に Console に赤字で出る:
// ERROR TypeError: Cannot read properties of null (reading 'name')
//
// 画面が真っ白になったら F12 → Console を見るのが最初の一手

5エラーコードで検索して公式解説にたどり着く

NGで始まるコードは、そのまま検索すれば公式の解説ページが見つかります。長いエラーメッセージ全文より、コードで調べるほうが早く正確です。原因調査の途中経過は console.log で値を確かめるのも定番です。

// ── エラー調査の基本手順 ──
//
// 1. エラーコード(NG8001 など)をそのまま検索する
//    → angular.dev/errors/NG8001 のような公式解説が見つかる
//    代表例: NG8001 = 知らないタグ名(importsの追加忘れ)
//            NG8002 = 知らない属性名(バインディング先の間違い)
//
// 2. 値の中身が怪しいときは console.log で確かめる
export class DebugSample {
  save(data: { id: number }) {
    console.log('保存直前のdata:', data); // Console に中身が出る
  }
}