【Angular】Componentの設計方針

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が適切に処理されているかユニットテストを行う。

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

参考