コメント（// と /* */ と <!-- -->）

// 一行コメント — // から行末までがコメントになります（TypeScript ファイル内）。
const count = 0; // 行末コメント — コードの後にも書けます。

/*
  ブロックコメント — /* から */ までの範囲がコメントになります。
  複数行にわたる説明を書くときに使います。
*/

/**
 * JSDoc コメント — /** で始めるブロックコメントです。
 * クラス・メソッド・プロパティの直前に書き、型情報や説明を記述します。
 * @param value - 引数の説明
 * @returns 戻り値の説明
 */

対応するテンプレートファイルは次の通りです。

<!-- HTML コメント — テンプレートファイル（.html）でコメントを書くときに使います。 -->

<div class="container">
  <!-- この div はレイアウト調整用です。 -->
  <p>コンテンツ</p>
</div>

Angular コンポーネントやサービスのクラス・メソッドに JSDoc コメントを書くと、VS Code などのエディタがホバー表示でドキュメントを表示します。TypeScript と組み合わせることで型情報と説明の両方を提供できます。

Angular のテンプレートファイルでは HTML コメント（『<!-- -->』）を使います。Angular のテンプレート構文（ディレクティブ・バインディング）の外側であれば、通常の HTML コメントと同じように書けます。

Angular 17 以降の制御フロー構文（『@if』『@for』など）の内側にコメントを入れる場合も、HTML コメントとして記述します。ただし、ブラウザに送信される HTML にそのまま出力されるため、開発中のメモをコメントとして残す際は本番環境での出力を意識する必要があります。

<!-- Angular 17+ の制御フロー構文の中でコメントを書く例。 -->

@if (isLoggedIn) {
  <!-- ログイン済みユーザー向けコンテンツ。 -->
  <p>ようこそ、{{ userName }} さん。</p>
} @else {
  <!-- 未ログインユーザー向けコンテンツ。 -->
  <a href="/login">ログイン</a>
}

@for (item of items; track item.id) {
  <!-- track には一意の識別子を指定します。 -->
  <li>{{ item.name }}</li>
}

TypeScript（コンポーネント・サービス）

user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

/**
 * ユーザー情報を管理するサービスです。
 * HTTP 通信を通じてバックエンド API からユーザーデータを取得します。
 */
@Injectable({
  providedIn: 'root',
})
export class UserService {
  // API のベース URL。環境変数から取得するよう変更予定（#120 参照）。
  private readonly apiUrl = 'https://api.example.com/users';

  constructor(private http: HttpClient) {}

  /**
   * 指定した ID のユーザーを取得します。
   * @param id - ユーザーの一意識別子
   * @returns ユーザーオブジェクトを含む Observable
   * @throws ユーザーが存在しない場合は 404 エラーが発生します。
   */
  getUser(id: number): Observable<{ id: number; name: string; email: string }> {
    return this.http.get<{ id: number; name: string; email: string }>(
      `${this.apiUrl}/${id}`
    );
  }

  /**
   * 全ユーザーの一覧を取得します。
   * @returns ユーザー配列を含む Observable
   */
  getUsers(): Observable<{ id: number; name: string }[]> {
    return this.http.get<{ id: number; name: string }[]>(this.apiUrl);
  }
}

counter.component.ts

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

/**
 * カウンター機能を持つコンポーネントです。
 * インクリメント・デクリメント・リセット操作をサポートします。
 */
@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <button (click)="decrement()">-</button>
    <span>{{ count }}</span>
    <button (click)="increment()">+</button>
    <button (click)="reset()">リセット</button>
  `,
})
export class CounterComponent {
  count = 0;

  // カウントの最小値。0 未満にはさせない仕様（要件定義書 p.15 参照）。
  private readonly MIN_VALUE = 0;

  /** カウントを 1 増やします。 */
  increment(): void {
    this.count++;
  }

  /**
   * カウントを 1 減らします。
   * MIN_VALUE を下回る場合は何もしません。
   */
  decrement(): void {
    if (this.count > this.MIN_VALUE) {
      this.count--;
    }
  }

  /** カウントを初期値（0）に戻します。 */
  reset(): void {
    this.count = 0;
  }
}

HTML テンプレート

product-list.component.html

<!-- 商品一覧コンポーネントのテンプレートです。 -->

<!-- 読み込み中の表示。isLoading が true の間だけ表示されます。 -->
@if (isLoading) {
  <p>読み込み中...</p>
}

<!-- 商品が存在する場合のみリストを表示します。 -->
@if (products.length > 0) {
  <ul>
    @for (product of products; track product.id) {
      <!-- track には product.id を指定して差分更新を効率化しています。 -->
      <li>{{ product.name }} — {{ product.price }}円</li>
    }
  </ul>
} @else {
  <!-- 商品が 0 件のときのフォールバック表示。 -->
  <p>商品がありません。</p>
}

Angular では TypeScript ファイルと HTML テンプレートの2種類のファイルでコメントを書きます。TypeScript ファイルでは一行コメント（『//』）・ブロックコメント（『/* */』）・JSDoc コメント（『/** */』）が使えます。HTML テンプレートでは HTML コメント（『』）を使います。

コンポーネントやサービスのクラス・公開メソッドには JSDoc コメントを書いておくと、VS Code がホバー表示でドキュメントを提示するようになります。特にサービスの公開 API や、他のコンポーネントから利用される入力プロパティ（『@Input』）には JSDoc を書いておくと、チーム開発時に参照コストが下がります。

コメントは「何をしているか」ではなく「なぜそうしているか」を書くと効果的です。コードを読めば明らかな処理を逐一コメントで説明するのはノイズになります。変更履歴や削除したコードをコメントとして残す必要もありません。それらはバージョン管理（git）で追跡できます。