【Angular】Componentの設計方針

angularのロゴ画像

AngularのComponentをどのように定義し、設計していくかをまとめてみた。

HTML5 Conference 2018で発表されたものを、備忘録を目的として文字に起こしただけなので、最後のYouTubeを見ていただけると。

Componentを4種類に分類

App Component

アプリケーションそのものを表す、トップレベル(最上位)のComponent。

  • アプリケーション全体の設定や、各Serviceの初期化処理などを行う
  • APIからの初期データの取得や、WebSocketの接続処理など
  • 初期化処理は基本的にServiceへ移譲し、シンプルに保つ

Page Component

Webページを表すURL単位のComponent。

ヘッダーやフッターを持つコンテナ。

  • 1URLにつき、1Page Componentを作成する(再利用はしない)
  • テンプレートはContainer ComponentやPresentational Componentで構成する
  • RouterやActivatedRouteなどのRouter関連の機能はこのComponentでのみ使用する

Container Component

Serviceを使用して状態管理を行うComponent。

  • ServiceとPresentational Componentのデータの受け渡しに専念し、ロジックを持たせない
  • 表示についてはPresentational Componentを使用し、このComponentでは行わない
  • テストが不要になるレベルでシンプルに保つ

Presentational Component

状態を持たない、表示専用のComponent。

ロジックを書かない。

  • シンプルなHTMLのみで構成する
  • Serviceを使用せず、@Inputのみを使用してデータを受け取る
  • テンプレート内のイベントは@Outputを使用して上位Componentへ伝播させる
  • このComponentでアプリケーションの大部分を構成するようにする

Component分類のコツ

  • Componentの分割は、開発規模に応じて柔軟で行う
  • たとえ冗長であっても、適切に分割することが重要
  • 表示専用のPresentational Componentをなるべく多く作成する
  • Container Componentが複雑にならないよう、Serviceに処理を寄せる

Componentのテストの粒度

App Component

E2Eテストでページ表示のテストを行う。

ユニットテストを書きづらい。

Page Component

E2Eテストでページ表示のテストを行う。

URLに対して表示されるか。

Container Component

Serviceに対するメソッドコールをユニットテストで確認する。

どこでどのメソッドが呼ぶのか。

Presentational Component

@Input、@Outputが適切に処理されているかユニットテストを行う。

表示と、データの伝播をテストする。

参考


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です