Dev Study
← 解説「ng generate component — 部品の雛形を自動生成する」に戻る

サンプルコードで身につける: ng generate component — 部品の雛形を自動生成する

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

1基本の生成コマンドと出力

ng generate component 名前 で、フォルダと3点セット(.ts / .html / .css)が生成されます。CREATE の行が生成されたファイルの一覧です。どこに何が作られたかを毎回確認する癖をつけましょう。

ng generate component user-card

# 出力(CREATE の行が生成されたファイル):
# CREATE src/app/user-card/user-card.ts (250 bytes)
# CREATE src/app/user-card/user-card.html (26 bytes)
# CREATE src/app/user-card/user-card.css (0 bytes)
# CREATE src/app/user-card/user-card.spec.ts (600 bytes)

# .ts   … クラス(ロジック)
# .html … テンプレート(見た目)
# .css  … スタイル(このコンポーネント専用)
# .spec.ts … テストファイル(今は気にしなくてよい)

2生成された .ts ファイルの中身

ケバブケースで渡した user-card が、クラス名では UserCard に、selector では app-user-card に変換されています。デコレータもファイル参照も設定済みなので、生成直後からすぐ使える状態です。

// src/app/user-card/user-card.ts(生成直後の中身)
import { Component } from '@angular/core';

@Component({
  selector: 'app-user-card',       // タグ名(app- が自動で付く)
  imports: [],
  templateUrl: './user-card.html', // 見た目は隣の .html に
  styleUrl: './user-card.css',     // スタイルは隣の .css に
})
export class UserCard {}          // クラス名はパスカルケース

// user-card(コマンド) → UserCard(クラス) → app-user-card(タグ)
// という機械的な命名変換を覚えておこう

3生成したコンポーネントを画面に出す

生成しただけでは画面に何も表示されません。使う側(ここではApp)の imports にクラスを追加し、テンプレートにタグを書いて初めて表示されます。この2つを忘れるのが最初の定番のつまずきです。

// src/app/app.ts — App から UserCard を使う
import { Component } from '@angular/core';
import { UserCard } from './user-card/user-card';

@Component({
  selector: 'app-root',
  imports: [UserCard], // ← 1. 使うクラスを imports に追加
  template:
    '<h1>ユーザー一覧</h1>' +
    '<app-user-card />', // ← 2. selector のタグを書く
})
export class App {}

// 「生成 → importsに追加 → タグを書く」の3ステップ

4フォルダ指定と --dry-run オプション

パス付きの名前を渡すと、指定したフォルダの下に生成できます。--dry-run を付けると実際にはファイルを作らず、何が生成されるかだけ確認できます。慣れないうちは --dry-run で先に確認すると安心です。

# パスを付けると、指定フォルダの下に生成される
ng generate component pages/login
# => src/app/pages/login/ に3点セットが生成される

# --dry-run: 実際には作らず、何が生成されるかだけ表示する
ng generate component user-card --dry-run
# CREATE src/app/user-card/user-card.ts (250 bytes)
# ...
# NOTE: The "--dry-run" option means no changes were made.

# 場所や名前に自信がないときは、まず --dry-run で確認する

5コンポーネント以外も生成できる

generate はコンポーネント専用ではなく、サービスやガードなど様々な雛形を作れます。今は「component以外も作れる」とだけ知っておき、それぞれの登場時に使い方を覚えれば十分です。

# ng generate は様々な雛形に対応している

# サービス(ロジックの置き場。後のレッスンで登場)
ng generate service user
# => src/app/user.service.ts

# インターフェース(データの型定義)
ng generate interface product
# => src/app/product.ts

# 短縮形: g と一文字エイリアスの組み合わせが実務の定番
ng g c user-card   # component
ng g s user        # service