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

Angular5 Tutorial 入力をリスト化する!

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

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

前回は、入力したデータがアプリに繁栄されるようにコンポーネントを作りました。

このあたりから、いっきに難しくなっていく気配がありますが、へこたれずに取り組んでみます!

さて、今回はアプリで欠かせないユーザーが登録するデータをリスト化するようにコンポーネント等を編集していきます!

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

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

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

ヒーローリストを表示する

このページでは、Tour of Heroesアプリを展開してヒーローのリストを表示し、ユーザーがヒーローを選択して、その詳細を表示できるようにします。

ヒーローを作成する

ヒーローリストを作成するために、いくつかのヒーローをあらかじめ登録します。

最終的には、ユーザーが登録したヒーローのリストを表示しますが、 今のところ、こちらでいくつかの模擬ヒーローを作成し、それらをリスト表示させます。

src / app /フォルダーにmock-heroes.tsというファイルを作成します。10人のヒーローの配列としてHEROES定数を定義し、エクスポートします。 ファイルは次のようになります。

src/app/mock-heroes.ts

ヒーローを表示する

アプリにヒーローのリストを表示させましょう。
Heroes Componentクラスファイルを開き、mock-heroesをインポートします。

さらに、これらのヒーローをバインドするためのヒーロープロパティをクラスに追加します。

src/app/heroes/heroes.component.ts (import HEROES)

「ngFor」でヒーローを一覧表示する

HeroesComponentテンプレートファイルを開き、以下の変更を行います。

    • 最上階に<h2>
    • その下に、HTMLの順序付けられていないリスト(<ul>)
    • ヒーローのプロパティを表示する<li>
    • スタイル設定のためにCSSクラスを<SPAN>で振りわける

次のようにします。

heroes.component.html (heroes template)

次のようにブラウザで表示されるでしょう。

まだ、正しく表示されません。

今のheroes.component.htmlでは、1人分のデータしかを読み込むことしかできません、

しかし、読み込み先のmock-heroes.tsには、10人分のデータがあります。

そこで、「ngFor」を使います!

次のようにします。

すると、ブラウザは次のように表示されます。

*ngForはAngularのリピータ指令です。リスト内の各要素のホスト要素を繰り返します。

つまり、<li *ngFor=”let hero of heroes”>の各要素の意味は次のとおりです。

  • <li>がホスト要素
  • heroesはHeroesComponentクラス
  • heroはhero配列の現在の要素を返します

ngForの前にアスタリスク(*)を忘れないでください。 これはコードの重要な部分です。

スタイルを変えよう!

主人公のリストは魅力的なものにしましょう。マウスオーバーしたときに視覚的に変化させられたら最高にクールですよね。

最初のチュートリアルでは、styles.cssでアプリケーション全体の基本スタイルを設定しました。そのスタイルシートにはこのヒーローのリストのスタイルは含まれていませんでした。

コンポーネントを追加するときにそのスタイルを変えたいならば、styles.cssにコードを追記して表示を装飾を変えることができます。

ですが、特定のコンポーネントにプライベートスタイルを定義し、コンポーネント、コード、HTML、およびCSSをすべて1つの場所に保存することをお勧めします。

このアプローチにより、グローバルなスタイルと異なっていても、プライベートスタイル通りにコンポーネントを意図したスタイルにすることができます。

プライベートスタイルは、@Component.styles配列のインラインか、@Component.styleUrls配列でスタイルシートファイルとして定義します。

CLIがHeroesComponentを生成すると、HeroesComponentのための空のheroes.component.cssスタイルシートが作成され、次のように@ Component.styleUrlsにポイントされています。

src/app/heroes/heroes.component.ts (@Component)

heroes.component.cssファイルを開き、HeroesComponentのプライベートCSSスタイルを貼り付けます。

src/app/heroes/heroes.component.css

すると、次のような見やすいデザインになりました。

マウスオーバーすると次のように変化します。

heroes.component.cssスタイルはHeroesComponentにのみ適用され、他のコンポーネントのHTMLには影響しません。

詳細を表示する!

ヒーローリストのヒーローをクリックすると、ページの下部に選択したヒーローの詳細を表示するようにコンポーネントを作りましょう。

このセクションでは、ヒーローのクリックイベントでヒーロー詳細情報表示し、変更し、ヒーローの詳細を更新します。

クリックイベントバインディングを追加する

クリックイベントバインディングを<li>に次のように追加します。

heroes.component.html (template excerpt)

これは、Angularのイベントバインディング構文の例です。

「” (click)=”onSelect(hero)」の意味は、

<li>要素のクリックしたとき、AngularはonSelect(hero)を実行します。

onSelect()はHeroesComponentに記入します。 Angularは、*ngForで定義されたヒーローデータを返します。

クリックイベントハンドラを追加する

クリックしたヒーローに応じて受け渡しのデータが変わるため、クリックされたヒーローデータをselectedHeroを割り当てます。

そのため、コンポーネントのヒーロープロパティの名前をselectedHeroにします。

受け渡しは、onSelect()メソッドで行います。このメソッドは、テンプレートからクリックされたヒーローをコンポーネントのselectedHeroに割り当てます。

src/app/heroes/heroes.component.ts (onSelect)

詳細表示テンプレートを更新する

テンプレートは、もはや存在しない古いヒーロープロパティを参照しています。 そのため、ヒーローの名前をselectedHeroに変更します。

heroes.component.html (selected hero details)

「*ng」で空の詳細を非表示にする

ブラウザが更新された後、アプリケーションは壊れています。

ブラウザの開発者ツールを開き、コンソールで次のようなエラーメッセージを探します。

HeroesComponent.html:3 ERROR TypeError: Cannot read property ‘name’ of undefined

リスト項目の1つをクリックします。 アプリは再び正しく表示されます。 ヒーローがリストに表示され、クリックされたヒーローの詳細がページの下部に表示されます。

何が起こった?

アプリケーションを起動すると、selectedHeroの初期値は定義されていません。

選択されたヒーローがないので、{{selectedHero.name}}のバインディングは失敗します。

修正

選択したヒーローが存在する場合にのみ、選択したヒーローの詳細が表示するようにコンポーネントを修正します。

ヒーローの詳細HTMLを<div>で括ります。 Angularの*ngIfディレクティブを<div>に追加し、selectedHeroに設定します。

ngIfの前にアスタリスク(*)を忘れないでください。 これは構文の重要な部分です。

src/app/heroes/heroes.component.html (*ngIf)

ブラウザが更新されると、名前の一覧が再表示されます。 詳細領域は空白です。 ヒーローをクリックするとその詳細が表示されます。

なぜ動作するのか?

selectedHeroが未定義の場合、ngIfはDOMからヒーローディテールを削除します。

ユーザーがヒーローを選択すると、selectedHeroは値を持ち、ngIfはヒーローの詳細をDOMに組み込みます。

選択されたヒーローを装飾する

すべての<li>要素が同じように見える場合、リスト内の選択されたヒーローを識別することは困難です。

ユーザーが「Magneta」をクリックすると、ヒーローは次のような独特の微妙な背景色でレンダリングする必要があります。

レンダリング
レンダリング(rendering)とは、データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成することをいう。

Selected hero

選択されたヒーローの色付けは、以前に追加したスタイルの.selected CSSクラスの作業です。 ユーザーがクリックすると<li>に.selectedクラスを適用するだけです。

Angularクラスバインディングを使用すると、条件付きでCSSクラスの追加や削除が容易になります。 スタイルを設定する要素に[class.some-css-class] = “some-condition”を追加するだけです。

HeroesComponentテンプレートの<li>の中に[class.selected]バインディングを追加します。

heroes.component.html (toggle the ‘selected’ CSS class)

現在の行のヒーローがselectedHeroと同じ場合、Angularは選択したCSSクラスを追加します。 2人のヒーローが異なる場合、Angularはクラスを削除します。

つまり、ヒーローがクリックされ選択されれば、そのヒーローにクラスを追加します。

最終的なコード

あなたのアプリはこのライブサンプル/ダウンロードの例のように見えるはずです。

HeroesComponentスタイルを含む、このページで説明されているコードファイルは次のとおりです。

src/app/heroes/heroes.component.ts

src/app/heroes/heroes.component.html

src/app/heroes/heroes.component.css

まとめ

  • 「Tour of Heroes」アプリには、ヒーローリストと詳細ビューが表示された
  • ユーザーはヒーローを選択し、そのヒーローの詳細が見れる
  • * ngForを使用してリストを表示した
  • * ngIfを使用して、条件付きでHTMLのブロックを含めるか除外した
  • CSSスタイルクラスをクラスバインディングで切り替える

次回は詳細データのコンポーネントを分ける

今回は、リストの読み込みから、選択して、詳細データの表示までやりました。

次回はコンポーネント毎に役割を分けて、アプリ構築を簡単にわかりやすくするため、詳細データのコンポーネントを新しく作ります。

これは、どんなアプリ制作において重要なことで、のちのち変更したりすることを簡単にするために必要なことです。

さて、まだまだわからないことだらけですがチュートリアルも半分項目がおわりました。
もう半分、もう少しお付き合いください(^_^)

おまけ

個々まで作ってきた段階で、多少は遊べるようになっています。

例えばこんな感じ、

自分で情報を入力して、自分好みの英雄リストを作ることができます。

これでは、そこまで面白いわけではありませんが、この仕組を使って面白いことができそうなのはたやすく想像できますよね。

シェアする

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

フォローする