サンプルコードで身につける: テンプレートとスタイルの外部ファイル化

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

1最小の外部ファイル構成

template と styles を templateUrl / styleUrl に置き換えるだけで、HTMLとCSSが別ファイルに分かれます。tsファイルにはロジックだけが残り、役割ごとにファイルが分かれるのが実務の標準形です。ng generate component で作ると最初からこの形になります。

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

@Component({
  selector: 'app-user-card',
  // 文字列の代わりに、同じフォルダのファイルを相対パスで指す
  templateUrl: './user-card.component.html',
  styleUrl: './user-card.component.css',
})
export class UserCardComponent {
  userName = '田中';
}

// ファイル構成(3点セット):
//   user-card.component.ts   ← ロジック(このファイル)
//   user-card.component.html ← テンプレート
//   user-card.component.css  ← スタイル

2HTMLファイル側の中身

外部ファイルにしたHTMLは、文字列連結やエスケープを気にせず普通のHTMLとして書けます。{{ }} の補間や @if などのテンプレート構文もそのまま使え、エディタの補完やフォーマッタも効きます。テンプレートが数十行に育つ実務では、この読み書きしやすさが効いてきます。

<!-- user-card.component.html -->
<!-- 補間や制御フローなどのテンプレート構文もそのまま書ける -->
<article class="card">
  <h2>{{ userName }}さんのプロフィール</h2>
  @if (isOnline) {
    <p class="status">オンライン</p>
  } @else {
    <p class="status">オフライン</p>
  }
</article>

3CSSファイル側の中身と :host

styleUrl で読み込んだCSSはこのコンポーネントの中だけに適用されるので、.card のような一般的なクラス名でも他の部品と衝突しません。コンポーネント自身のタグ(ここでは app-user-card)にスタイルを当てたいときは :host セレクタを使います。部品の外枠の余白や幅は :host に書くのが定番です。

/* user-card.component.css */

/* :host はコンポーネント自身のタグ(<app-user-card>)を指す */
:host {
  display: block;
  margin-bottom: 16px;
}

/* このファイルのスタイルはこの部品の中だけに効く */
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
}

.status {
  color: seagreen;
}

4インラインと外部ファイルの使い分け

テンプレートが1〜2行で収まる小さな部品ならインラインの template が手軽で、ファイルを行き来せずに全体を見渡せます。行数が増えてきたら外部ファイルへ移すのが目安です。どちらも動きは同じなので、チームの規約や部品の規模に合わせて選びます。

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

// 小さな部品: インラインで完結させると見渡しやすい
@Component({
  selector: 'app-badge',
  template: '<span class="badge">NEW</span>',
  styles: ['.badge { color: crimson; font-weight: bold; }'],
})
export class BadgeComponent {}

// 育ってきた部品: 外部ファイルに分けて整理する
@Component({
  selector: 'app-order-form',
  templateUrl: './order-form.component.html',
  styleUrl: './order-form.component.css',
})
export class OrderFormComponent {}

5複数のスタイルファイルを読み込む

スタイルファイルが複数に分かれているときは、styleUrl の代わりに styleUrls: [...] と配列で指定できます。レイアウト用と配色用でファイルを分ける、共通の部品スタイルを読み込む、といった整理がしたいときに使います。1ファイルで足りるうちは styleUrl のままで十分です。

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

@Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  // 複数のCSSファイルは styleUrls に配列で並べる
  styleUrls: [
    './report-layout.css', // レイアウト(配置・余白)
    './report-theme.css', // 配色・文字の見た目
  ],
})
export class ReportComponent {}

// どのファイルのスタイルも、この部品の中だけに適用される