← Angular コース
1. コンポーネント — UIの基本単位
Angularの画面は、コンポーネントという部品を組み合わせて作ります。コンポーネントはTypeScriptのクラスに @Component デコレータを付けたもので、selector(HTMLタグ名)と template(表示するHTML)を指定します。selectorに app-hello と書けば、ほかの場所から <app-hello /> というタグで呼び出せます。
実務では、ヘッダー・検索フォーム・商品カードなど、画面を意味のある単位に分割してそれぞれをコンポーネントにします。部品ごとに見た目とロジックがまとまるので、修正の影響範囲が分かりやすく、同じ部品を複数の画面で再利用できます。
モダンなAngular(v17以降)ではコンポーネントはスタンドアロンが標準で、NgModuleへの登録は不要です。古い記事ではNgModuleにdeclarationsする書き方が出てきますが、新規コードでは使わないと覚えておきましょう。
サンプルコード(フレームワーク環境が必要なため表示のみ)
import { Component } from '@angular/core';
// @Component デコレータでクラスをコンポーネントにする
@Component({
selector: 'app-hello', // HTML側では <app-hello /> と書いて使う
template: '<h1>こんにちは、Angular</h1>',
})
export class HelloComponent {}
// 別のコンポーネントから使うときは、使う側の imports に
// HelloComponent を追加し、テンプレートに <app-hello /> と書く