[超初心者が行く] Angular5 Tutorialしてみた5

Angular5 Tutorial コンポーネントを分ける!

Angular – Tutorial: Tour of Heroes を翻訳(意訳多め)しています。

[超初心者が行く] Angular5 Tutorialしてみた4の続き

前回は、入力したデータをリスト化して表示できるようにしました。

さて、今回はアプリ製作で欠かせないやり方として、機能毎にコンポーネントを分けるようにしましょう!

ここからが翻訳になります。

ビックリマークの部分は個人的にわからない用語の意味を載せています。
このように、本家Angularのサイトだけではわからない部分が多いため、本家以外の説明も載せているため、どこからどこまでが本家の情報なのか線引ができなくなっています。ご了承ください。

では、チュートリアルやっていきましょう!

詳細を表示するコンポーネントを作ろう!

現在、HeroesComponentはヒーローのリストと選択されたヒーローの詳細の両方を表示します。

1つのコンポーネントにすべての機能を保持しておくと、アプリケーションの拡張が維持できなくなります。 大きなコンポーネントを特定のタスクやワークフローに焦点を当てた小さなサブコンポーネントに分割しましょう。

このページでは、その最初のステップとして、ヒーローの詳細を表示する機能を別のコンポーネントに移します。

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

HeroDetailComponentを作成する

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

コマンド ng generate component herodetail

コマンドは、HeroDetailComponentファイルをスキャフォールドし、AppModuleでコンポーネントを宣言します。

スキャフォールド
scaffoldは簡単に言うと、ひとつの雛形を作成してくれるものなんだ。使用するデータの型などを指定して、自分の作りたいものの土台を作ることができるんだよ。
ここでは、コマンドを入力すればCLIがコンポーネントに必要な基本的なファイルとその中身を用意してくれることを意味します。
テンプレートを書く

ヒーロー詳細のHTMLをHeroesComponentテンプレート下部から切り取り、HeroDetailComponentテンプレートの生成されたボイラープレートに貼り付けます。

ボイラープレート
テンプレート的な文書のこと
貼り付けられたHTMLはselectedHeroを参照しています。 新しいHeroDetailComponentは、選択されたヒーローだけでなく、任意のヒーローを表示すようにします。 テンプレート内の全てを “selectedHero”から”hero”に置き換えてください。完了したら、HeroDetailComponentテンプレートは次のようになります。
src/app/hero-detail/hero-detail.component.html

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

HeroDetailComponentテンプレートは、Heroのコンポーネントのヒーロープロパティにバインドされます。

HeroDetailComponentクラスファイルを開き、Heroをインポートします。

src/app/hero-detail/hero-detail.component.ts (import Hero)

heroプロパティは@Input()デコレータで注釈されたInputプロパティでなければなりません。これは、HeroesComponentからヒーロー値をバインドするためです。

詳細はこちら Angular – Template Syntax

HeroDetailComponentクラスを呼び出すにはCSSセレクタのapp-hero-detailタグを使います。selectedHeroの値を渡すために[hero]=”selectedHero”をタグに組み込みます。

<app-hero-detail [hero]=”selectedHero”></app-hero-detail>

@Input()を使うために、@ angular / coreのimport文を修正します。

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

ヒーロープロパティを追加します。ヒーロープロパティの前には@Input()デコレータがいります。

@Input() hero: Hero;
src/app/hero-detail/hero-detail.component.ts (import Input)

これら二点がHeroDetailComponentクラスに行うべき変更です。 それ以上のプロパティはありません。 プレゼンテーションロジックはありません。 このコンポーネントは、ヒーロープロパティを使用してヒーローオブジェクトを受け取り、それを表示するだけです。

プレゼンテーションロジック
CSSを使ってスタイルを適応すること。
ここでは、HeroDetailComponentはスタイルシートが必要ないということ。

HeroDetailComponentを表示する

詳細表示はまだ、HeroesComponentに組み込まれています。

HeroesComponentクラスは変更しませんが、テンプレートを変更します。

その機能をHeroDetailComponentに移します。

2つのコンポーネントには親子関係があります。 親のHeroesComponentは、ユーザーがリストからヒーローを選択するたびに新しいヒーローを送信して、子のHeroDetailComponentを値を受け渡します。

HeroesComponentテンプレートを更新する

HeroDetailComponentセレクタは ‘app-hero-detail’です。 HeroesComponentテンプレートの下部に<app-hero-detail>要素を追加します。

HeroesComponent.selectedHeroをのヒーロープロパティにバインドします。

<app-hero-detail [hero]=”selectedHero”></app-hero-detail>

[hero] = “selectedHero”はAngularプロパティバインディングです。

これは、HeroComponentのselectedHeroプロパティからHeroDetailComponentのヒーロープロパティへの一方向データバインディングです。

ユーザーがリスト内のヒーローをクリックすると、選択したヒーローが変更されます。 selectedHeroが変更されると、プロパティバインディングがヒーローを更新し、HeroDetailComponentが新しいヒーローを表示します。

変更したHeroesComponentテンプレートは、次のようになります。

heroes.component.html

ブラウザがリフレッシュされ、アプリは前と同じように再び動作します。

何が変わったの?

 以前のように、ユーザーがヒーロー名をクリックするたびに、ヒーローの詳細がヒーローリストの下に表示されます。 今、HeroDetailComponentは、HeroesComponentの代わりにそれらの詳細を提示しています。オリジナルのHeroesComponentを2つのコンポーネントにリファクタリングすることで、現在も将来も利益が得られます。

  1. HeroesComponentの機能を分けることで、HeroesComponentを簡略化しました。
  2. 親のHeroesComponentに触れることなく、HeroDetailComponentを豊かなヒーローエディタに進化させることができます。
  3. ヒーロー詳細表示機能を気にすることなく、HeroesComponentを進化させることができます。
  4. 将来の別のコンポーネントやテンプレートでHeroDetailComponentを再利用することができます。

最終的なコードレビュー

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

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

src/app/heroes/heroes.component.html

まとめ

  • 再利用可能なHeroDetailComponentを作成しました。
  • 親HeroesComponentが子HeroDetailComponentへ値を受け渡すために、プロパティーバインディングを使用しました。
  • @Inputデコレータを使用して、外部のHeroesComponentによるヒーロープロパティのバインドを可能にしました。

次回はAngularのサービスを使ってみます!

今回は、コンポーネントを分けるだけだったのでそこまで難しくはありませんでした。

おもしろいですね。Angular。いろんなことができるし、仕組みがわかりやすい。

いろんなことができるんじゃないかと思わせてくれますね。

さて、次も楽しみながらやっていきましょう!

シェアする

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

フォローする