プログラマが知るべき97のことxn--97-273ae6a4irb6e2hsoiozc2g4b8082p.com今のところ、AppComponentは次のようなたくさんの責任を負っています。エントリポイントとなることユーザーの配列をAPIから取得することユーザーの配列をリストとして表示することユーザーの情報を表示することこのままでは、AppComponentはいくつもの理由で変更されることになります。これは単一責任の原則に反しています。リストで反復される単位要素を分割することで、ひとつの責任を別のモジュールに切り出すことにしましょう。このコンポーネントの責任は、渡された1件のユーザーをリストアイテムとして表示することです。それ以外の理由でこのコンポーネントが変更されてはいけません。{{user.name}}結果として、AppComponentのテンプレートは次のようになります。AppComponentが持っていたユーザーリストをどのように表示するか、ユーザーの情報をどうレイアウトするかという責任から開放されました。今後、ユーザーリストにメールアドレスを表示したいとなっても、AppComponentは変更されません。[user]="user"></user-list-item></li></ul>UserListComponent続いてもうひとつの責任、ユーザーの配列をどのようにリストとして表示するかという関心事をAppComponentから切り出すことにしましょう。[user]="user"></user-list-item></li></ul>結果として、AppComponentのテンプレートは次のようになります。AppComponentの責任は、アプリケーションのエントリポイントであることと、ユーザーの配列を取得することになりました。ユーザーの配列をどのようにリストとして表示するかというUIの関心事はUserListComponentに分離できました。[users]="users"></user-list>​UIの責任はほとんどAppComponentから切り出すことができたので、次のページではユーザーの配列を取得する責任をサービスに切り出します。GitHubContentsコンポーネントの分割UserListItemComponentUserListComponent。