目次
Angular５ Tutorial コンポーネントを分ける！
Angular – Tutorial: Tour of Heroes を翻訳（意訳多め）しています。
[超初心者が行く] Angular５ Tutorialしてみた４の続き
前回は、入力したデータをリスト化して表示できるようにしました。
さて、今回はアプリ製作で欠かせないやり方として、機能毎にコンポーネントを分けるようにしましょう！
ここからが翻訳になります。
このように、本家Angularのサイトだけではわからない部分が多いため、本家以外の説明も載せているため、どこからどこまでが本家の情報なのか線引ができなくなっています。ご了承ください。
では、チュートリアルやっていきましょう！
詳細を表示するコンポーネントを作ろう！
現在、HeroesComponentはヒーローのリストと選択されたヒーローの詳細の両方を表示します。
1つのコンポーネントにすべての機能を保持しておくと、アプリケーションの拡張が維持できなくなります。 大きなコンポーネントを特定のタスクやワークフローに焦点を当てた小さなサブコンポーネントに分割しましょう。
このページでは、その最初のステップとして、ヒーローの詳細を表示する機能を別のコンポーネントに移します。
HeroesComponentはヒーローのリストのみを表示し、HeroDetailsComponentは選択されたヒーローの詳細を表示するようにしましょう。
HeroDetailComponentを作成する
Angular CLIを使用して、hero-detailという名前の新しいコンポーネントを生成します。
コマンドは、HeroDetailComponentファイルをスキャフォールドし、AppModuleでコンポーネントを宣言します。
scaffoldは簡単に言うと、ひとつの雛形を作成してくれるものなんだ。使用するデータの型などを指定して、自分の作りたいものの土台を作ることができるんだよ。
テンプレートを書く
ヒーロー詳細のHTMLをHeroesComponentテンプレート下部から切り取り、HeroDetailComponentテンプレートの生成されたボイラープレートに貼り付けます。
テンプレート的な文書のこと
@Input()heroプロパティを追加する
HeroDetailComponentテンプレートは、Heroのコンポーネントのヒーロープロパティにバインドされます。
HeroDetailComponentクラスファイルを開き、Heroをインポートします。
heroプロパティは@Input()デコレータで注釈されたInputプロパティでなければなりません。これは、HeroesComponentからヒーロー値をバインドするためです。
詳細はこちら Angular – Template Syntax
HeroDetailComponentクラスを呼び出すにはCSSセレクタのapp-hero-detailタグを使います。selectedHeroの値を渡すために[hero]=”selectedHero”をタグに組み込みます。
@Input()を使うために、@ angular / coreのimport文を修正します。
ヒーロープロパティを追加します。ヒーロープロパティの前には@Input()デコレータがいります。
これら二点がHeroDetailComponentクラスに行うべき変更です。 それ以上のプロパティはありません。 プレゼンテーションロジックはありません。 このコンポーネントは、ヒーロープロパティを使用してヒーローオブジェクトを受け取り、それを表示するだけです。
HeroDetailComponentを表示する
詳細表示はまだ、HeroesComponentに組み込まれています。
HeroesComponentクラスは変更しませんが、テンプレートを変更します。
その機能をHeroDetailComponentに移します。
2つのコンポーネントには親子関係があります。 親のHeroesComponentは、ユーザーがリストからヒーローを選択するたびに新しいヒーローを送信して、子のHeroDetailComponentを値を受け渡します。
HeroesComponentテンプレートを更新する
HeroDetailComponentセレクタは ‘app-hero-detail’です。 HeroesComponentテンプレートの下部に<app-hero-detail>要素を追加します。
HeroesComponent.selectedHeroをのヒーロープロパティにバインドします。
[hero] = “selectedHero”はAngularプロパティバインディングです。
これは、HeroComponentのselectedHeroプロパティからHeroDetailComponentのヒーロープロパティへの一方向データバインディングです。
ユーザーがリスト内のヒーローをクリックすると、選択したヒーローが変更されます。 selectedHeroが変更されると、プロパティバインディングがヒーローを更新し、HeroDetailComponentが新しいヒーローを表示します。
変更したHeroesComponentテンプレートは、次のようになります。
ブラウザがリフレッシュされ、アプリは前と同じように再び動作します。
何が変わったの？
以前のように、ユーザーがヒーロー名をクリックするたびに、ヒーローの詳細がヒーローリストの下に表示されます。 今、HeroDetailComponentは、HeroesComponentの代わりにそれらの詳細を提示しています。オリジナルのHeroesComponentを2つのコンポーネントにリファクタリングすることで、現在も将来も利益が得られます。
- HeroesComponentの機能を分けることで、HeroesComponentを簡略化しました。
- 親のHeroesComponentに触れることなく、HeroDetailComponentを豊かなヒーローエディタに進化させることができます。
- ヒーロー詳細表示機能を気にすることなく、HeroesComponentを進化させることができます。
- 将来の別のコンポーネントやテンプレートでHeroDetailComponentを再利用することができます。
最終的なコードレビュー
まとめ
- 再利用可能なHeroDetailComponentを作成しました。
- 親HeroesComponentが子HeroDetailComponentへ値を受け渡すために、プロパティーバインディングを使用しました。
- @Inputデコレータを使用して、外部のHeroesComponentによるヒーロープロパティのバインドを可能にしました。
次回はAngularのサービスを使ってみます！
今回は、コンポーネントを分けるだけだったのでそこまで難しくはありませんでした。
おもしろいですね。Angular。いろんなことができるし、仕組みがわかりやすい。
いろんなことができるんじゃないかと思わせてくれますね。
さて、次も楽しみながらやっていきましょう！