Angular コンポーネントとは

はじめに

Angularにはコンポーネントという概念がある。
自分が初めてAngularに触れたとき

コンポーネントってなんぞ?

っとなった覚えがあるので、コンポーネントについて簡単に解説したい。

コンポーネントって

コンポーネントはビュー(View)を定義し、制御するものである。←重要

ビューて何?

アプリケーションのユーザーインターフェース（UI）を構成するHTMLテンプレートのことを指す。

簡単に言うと、ビューは画面を表示する役割を担っているということ。

このビューの表示内容を更新したり、イベントバインディングを設定するといった制御する役割を担うのがコンポーネントである。

言葉だけではわかりづらいと思うので以下に図を示す。

上図のようにコンポーネントはビューの定義から制御まで、一貫してビューを管理する。

TypeScript上で以下のように記述する。

sample.ts

@Component({
  selector: 'app-example', // コンポーネントのセレクターを定義
  templateUrl: './example.component.html', // ビューを定義
  styleUrls: ['./example.component.css']   // スタイルを適用
})

• selector: 'app-example' → というタグ名で使えるようにする

• templateUrl: './example.component.html' → コンポーネントのビュー（HTMLファイル）を指定

• styleUrls: ['./example.component.css'] → コンポーネント専用のスタイル（CSSファイル）を指定

この設定により、<app-example> を使うと example.component.html の内容が表示され、example.component.css のスタイルが適用される。

まとめ

コンポーネントはAngularにおける基本的な構成要素であり、ビュー（画面表示）を定義し、それを制御する役割を担う。ビューはユーザーインターフェース（UI）を構成するHTMLテンプレートのことであり、コンポーネントはその表示内容を更新したり、イベントを処理したりする。コンポーネントはTypeScriptで@Componentデコレーターを使って定義し、selectorでHTMLタグを指定し、templateUrlでビューを、styleUrlsでスタイルを指定する。この仕組みにより、再利用可能なUIパーツを作成し、効率的な開発が可能となる。

ビューの制御については今後、別記事で解説したい。