この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
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が適切に処理されているかユニットテストを行う。
表示と、データの伝播をテストする。
