notitie

日々感じたことをメモ書き

Angularのコンポーネントについて調べてみた

はじめに

Angularのコンポーネントについて調べてみたのでまとめてみる。 似たような言葉としてあるモジュールについての説明はこちら。

コンポーネントとは

コンポーネントとは、ページを構成するUI部品のことである。ビュー(HTML、CSS)、クラス、メタ情報などから構成されており、これら部品化されたコンポーネントを組み合わせることで、ページを組み立てていくのが基本。これをコンポーネント指向と呼ぶ。

コンポーネントを利用すると何が良いのか

画面一つ一つの要素を部品化しコンポーネントとして切り出すことで、保守のしやすいソースを記述できる。UIの部品をComponentとして分割していくことで、複雑なアプリもより見通しのよく、保守しやすいコードにすることができる。

コードを例にみてみる

app.component.tsは、アプリで最初に呼び出されるコンポーネントであり、これをルートコンポーネント(メインコンポーネント)と呼ぶ。

//①コンポーネントを定義するために必要となるオブジェクトをインポート
import { Component } from '@angular/core';

//③コンポーネントに関する情報を宣言
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>,
})

//②コンポーネントクラスを準備
export class AppComponent {
  name = 'Angular'
}

①コンポーネントを定義するために必要となるオブジェクトをインポート

これは文字どおりそのまま。

②コンポーネントクラスを準備

コンポーネントの本体はここにある。モジュールと同様、外部から参照できるようにexportキーワードで修飾しておく。

③コンポーネントに関する情報を宣言

クラス定義だけではコンポーネントとして見なされないので、@Componentデコレーターでコンポーネントの構成情報を宣言する。

@Componentデコレーターで利用できる主なパラメーター

パラメーター名 概要
selector コンポーネントの適用先を表すセレクター式
template コンポーネントに適用するビュー(テンプレート)

②と③を分かりやすく説明すると、
<my-app>要素に対して、<h1>Hello {{name}}</h1>というテンプレートを適用するためのAppComponentコンポーネントを定義したことになる。

コンポーネントとビューの連携について

Angularの世界では、コンポーネント側でデータを用意しておき、テンプレート側でデータを埋め込む場所や表示方法を定義する、という役割分担が基本。
コンポーネント側は②にあたり、テンプレート側は③にあたる。