5. ng generate component — 部品の雛形を自動生成する

新しいコンポーネントは手書きせず、CLIに作らせます。ng generate component user-card と実行すると、src/app/user-card/ フォルダに .ts(クラス)・.html(テンプレート)・.css(スタイル)の3点セットが生成されます。クラスには @Component デコレータと selector が設定済みで、すぐにタグとして使える状態になっています。

実務でCLI生成が標準なのは、ファイル名・クラス名・selectorの命名が機械的に揃うからです。コマンドにはケバブケース(user-card)で渡すと、クラス名はパスカルケース(UserCard)、selectorは app- 付き(app-user-card)に自動変換されます。この対応関係を知っておくと、他人のコードでもファイルとタグをすぐ結び付けられます。

生成しただけでは画面に何も出ない、というのが最初のつまずきポイントです。使う側のコンポーネントの imports に生成したクラスを追加し、テンプレートに <app-user-card /> と書いて初めて表示されます。「生成 → importsに追加 → タグを書く」の3ステップで覚えましょう。

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

# コンポーネントの雛形を生成(名前はケバブケースで渡す)
ng generate component user-card

# 生成されるファイル(3点セット + テスト)
# CREATE src/app/user-card/user-card.ts       # クラス(UserCard)
# CREATE src/app/user-card/user-card.html     # テンプレート
# CREATE src/app/user-card/user-card.css      # スタイル
# CREATE src/app/user-card/user-card.spec.ts  # テスト

# 命名の対応関係:
#   コマンドに渡す名前: user-card(ケバブケース)
#   クラス名:          UserCard(パスカルケース)
#   selector:          app-user-card(app- が付く)

# 短縮形もある(g は generate、c は component の略)
ng g c user-card

サンプルコードで身につける(5本) →

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

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