[Angular6] コンポーネント設計編 サクッとチュートリアルしてみよう!

親コンポーネントと子コンポーネント

これまでは、HeroesComponentでヒーローのリストと選択されたヒーローの詳細の両方を表示していました。

アプリケーションが成長するにつれて、すべての機能を1つのコンポーネントに保存すること好ましいことではありません。そのためできるだけ一つのコンポーネントには一意の機能のみを持たせる方がいいでしょう。

こうしたコンポーネント毎の役割を分けることをコンポーネント設計と言います。

この項目では、ヒーローの詳細を別の再利用可能なHeroDetailComponentに移動することで、コンポーネント設計の理解を深めます。

HeroesComponentはヒーローのリストのみを表示し、HeroDetailComponentは選択されたヒーローの詳細を表示するようにしましょう。

ここでは前回のアプリと表面的には変わることはありませんが、今後アプリを作る上で理解しておいた方がいいコンポーネント設計について触れていきます。

HeroDetailComponentを作成しよう!

Angular CLIを使用して、hero-detailという名前の新しいコンポーネントを生成します。

ng generate component hero-detail

詳細情報のテンプレートをheroes.component.htmlからhero-detail.component.htmlにカットアンドペーストします。

hero-detail.component.html内のselectedHeroを全てheroに置き換えます。

src/app/hero-detail/hero-detail.component.html

今の段階では、hero-detail.componentはヒーローリストでクリックされても何も反応しません。そのため<app-hero-detail [hero]=”selectedHero”></app-hero-detail>をheroes.component.htmlの一番下に追加します。

heroes.component.html

app-hero-detailタグでhero-detail.componentを呼び出します。

そして[hero]="selectedHero"で選択されたヒーローオブジェクトを渡すことができます。これはAngularのInputという親子コンポーネント間受け渡し機能です。ただし、これは片方向データバインディングです。

Input()heroプロパティを追加する

hero-detail.component.tsを次のように書き換えます。

hero-detail.component.ts

heroプロパティはInput()デコレータで注釈されたInputプロパティでなければなりません。親コンポーネントからheroプロパティが受け渡されることを宣言するためです。

Input()デコレータはインポートしないと使えないことに注意してください。

import { Component, OnInit, Input } from '@angular/core';

これでヒーロープロパティを使用してヒーローオブジェクトを受け取り、それを表示することができます。他に変更することはありません。

なんでコンポーネントを分けるの?

HeroesComponentを単純化することができました。

今は公式から出来上がっているコードをそのまま使っているだけなのでコンポーネントを分ける理由は変わりにくいかもしれません。実際にアプリを作る場合は完成していない状態から作るため、「ここはもっとこうしないと」、「前の方が良かったかな」というように今回のように簡単にアプリ内の各機能を作れることはありません。

そのため、それぞれの役割を各コンポーネントに分けることで編集がしやすくなり、また元に戻すことも比較的簡単になります。今回でいうと、ヒーローリストの仕組みをかなり変えたとしても、[hero]=”selectedHero”のバインディングにさえ気を使えば、詳細表示機能は生きます。

これは実際にAngularでアプリを作る中でわかってくることでしょう。

最終的なコードの確認は公式をご覧ください。

次のステップ
次は便利ですが少しややこしい、サービスについて
チュートリアル続き:サービスを使ってみよう!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする