Angular @Component デコレーターの主なパラメーター

# はじめに
`@Component`デコレーターで、`selector`、`templateUrl`、`styleUrls`、`providers`、`changeDetection`を頻繁に目にするので、それぞれの仕様についてまとめてみる。

`@Component`デコレーター内でパラメータは以下のように定義される。
``` sample.ts
@Component({
  selector: 'app-my-component', /*パラメーター*/
  templateUrl: './my-component.component.html', /*パラメーター*/
  styleUrls: ['./my-component.component.css'], /*パラメーター*/
  providers: [MyService] /*パラメーター*/
})
```

↑このようなパラメータの設定により、コンポーネントのメタデータを提供し、その動作や表示方法、依存関係などを明示的に定義する。

# パラメータ一覧
## selector
そのコンポーネントを**HTML内で使うためのタグの名前を定義する**もの

``` sample.ts
@Component({
  selector: 'app-my-component',
})
```

`app-my-component`という名前のセレクターを持つコンポーネントは、以下のようにHTMLファイル内でタグ名として使用することで、そのコンポーネントのビューが表示される。

```sample.html
<app-my-component></app-my-component>
```
コンポーネントのビューを定義するのは次に説明する`templateUrl`で行える。


## templateUrl

コンポーネントが使用する**HTMLテンプレート(ビュー)のURLを指定する**ためのもの

``` sample.ts
@Component({
  selector: 'app-my-component',
  templateUrl: './sample.component.html', // HTMLファイルの相対パス
})
```

上記コンポーネントは、以下のHTMLファイルをビューとして指定している。

``` sample.component.html
<div>
  <h1>Welcome to Angular!</h1>
</div>
```

`templateUrl`以外にも、`template`を使用して、テンプレートを直接TypeScriptの文字列として記述することも可能。

以下が両者の違いになる↓

| パラメーター         | 説明                      | 例                                      |
|-------------|---------------------------|-----------------------------------------|
| `templateUrl` | 外部HTMLファイルを参照     | `templateUrl: './sample.component.html'` |
| `template`   | 直接テンプレートを記述     | `template: '<div> <h1>Welcome to Angular!</h1> </div>'`             |

## styleUrls

コンポーネントのビューに適応するスタイルを定義する

``` sample.ts
@Component({
  selector: 'app-my-component',
  templateUrl: './sample.component.html', 
  styleUrls: ['./scss-sample.component.scss'] // スタイルファイルの相対パス
})
```

`sample.component.html`で定義されたビューに、`styleUrls`パラメータで `scss-sample.component.scss`を指定することで、スタイルを適用できる。

また、`templateUrl` 以外にも、`template` を使用して、テンプレートを直接 TypeScript の文字列として記述することも可能。  

以下が両者の違いになる↓

| パラメーター         | 説明                               | 例                                      |  
|-------------|----------------------------------|-----------------------------------------|  
| `styleUrls` | 外部のスタイルファイルを参照     | `styleUrls: ['./scss-sample.component.scss']` |  
| `styles`    | 直接スタイルを記述               | `styles: ['h1 { color: blue; }']`       |  

## providers

`providers`はコンポーネントが依存するサービスを指定するためのもの。
providers で指定したサービスは、対象のコンポーネントおよびその子コンポーネント内でのみ有効になり、そこで利用できるようになる。

``` sample.ts
@Component({
  selector: 'app-my-component',
  templateUrl: './sample.component.html', 
  styleUrls: ['./scss-sample.component.scss'],
  providers: [MyService] // ここでMyServiceを提供
})
```
この `providers` に `MyService` を指定すると、このコンポーネントとその子コンポーネントでは新しい`MyService`のインスタンスが作成される。

グローバルにサービスを提供したい場合は、app.module.ts(最上位のコンポーネント) の providers に登録するか、`@Injectable({ providedIn: 'root' })` を使う。


## changeDetection

変更検出（Change Detection）は、Angularにおいてコンポーネントのデータ変更を検知し、ビューを更新する仕組みである。
Angularはコンポーネントツリーを監視し、データの変更があれば対応するビューが再描画される。

`changeDetection`は、コンポーネントの変更検出方法を指定するための。

``` sample.ts
import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush // 変更検出方法を指定
})
```

`changeDetection`には、以下の2種類がある。

| 値                                | 説明                                                   |
|----------------------------------|------------------------------------------------------|
| `ChangeDetectionStrategy.Default` | デフォルトの動作（すべてのコンポーネントは、デフォルトでこの値が設定されている） |
| `ChangeDetectionStrategy.OnPush`  | パフォーマンス最適化（`@Input()` の変更や `Observable` の通知時のみ検出） |

`ChangeDetectionStrategy.OnPush` を適用することで、不要な再描画を防ぎ、アプリケーションのパフォーマンスを向上させることができるが、`@Input()`以外の変更（例えばサービスの変更など）は自動的に検出されないため、適切に `ChangeDetectorRef` を使用して手動で更新をトリガーする必要がある点注意。