6. テンプレートとスタイルの外部ファイル化

これまでのレッスンでは template にHTMLを文字列で直接書いてきましたが、実務ではHTMLとCSSをそれぞれ別ファイルに分けるのが一般的です。@Component の template を templateUrl: './xxx.component.html' に、styles を styleUrl: './xxx.component.css' に置き換えると、見た目はファイルに、ロジックはクラスに、と役割ごとにファイルが分かれます。

実務でこうする理由は、HTMLが数十行に育っても文字列の連結に悩まされず、エディタのHTML補完やフォーマッタの恩恵を受けられるからです。`ng generate component` でコンポーネントを作ると、最初からこの3点セット(.ts / .html / .css)が生成されます。学習用の短い例では inline の template が手軽ですが、実際のプロジェクトのコードはほぼこの形だと知っておきましょう。

styleUrl で指定したCSSは、そのコンポーネントの中だけに閉じて適用されます(スタイルのカプセル化)。同じクラス名を別のコンポーネントで使っても干渉しないので、命名のぶつかりを気にせずスタイルを書けるのが大きな利点です。

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

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

@Component({
  selector: 'app-profile-card',
  // 文字列で書く代わりに、外部ファイルを指す
  templateUrl: './profile-card.component.html',
  styleUrl: './profile-card.component.css',
})
export class ProfileCardComponent {
  userName = '田中';
}

// profile-card.component.html には普通のHTMLを書く:
//   <h2>{{ userName }}</h2>
// profile-card.component.css のスタイルはこの部品だけに適用される:
//   h2 { color: teal; }

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