Part4: 一覧と詳細

海未「今回は複数のアイドルの一覧画面を作ってみましょう」

海未「app.component.tsに、μ’sのメンバーの定義を追加します」

海未「AppComponentクラスにプロパティを追加して、値として先ほどのIDOLSを設定しましょう」

海未「ここまでは問題ないですね?」
穂乃果「さすがの穂乃果でも大丈夫だよっ!」
海未「それなら何の問題もないでしょう」
穂乃果「うー、駄目な方の指標に使われてる気がするよ・・・」

海未「Idolの配列があるわけですが、これを一覧にして表示してみます。テンプレートに9人分のタグを書くのは変更に弱すぎますから、ループを使いましょう」
ことり「テンプレートに、ループが書けるの?」
海未「ループや条件分岐など、基本的な制御構文はサポートされています」

海未「下半分は元のままなので、liタグの部分に注目してください」
穂乃果「*ngForとかどう考えても普通のHTMLじゃないものが書いてあるよね」
海未「それがループの書き方です。そのli要素をidolsの要素数だけ出力する、というものです」
ことり「JavaScriptにも同じ書き方あったよね。for (let idol of idols) {...}みたいな」
海未「それです。idolsに対するイテレーションになりますね」
穂乃果「ブラウザで見ると・・・うん、ちゃんと全員の名前が出てきた!」


海未「このあたりで、見た目も整えておきましょう。@Componentデコレータにはスタイルシートも書けるので、templateの次に以下のようにCSSを追加してください」

海未「中身はあまり気にする必要はないでしょう。テンプレートにクラスを追加します」

海未「多少はそれっぽくなったと思います」

Belonging Idols


海未「一覧の下には常に穂乃果が表示されていますが、ここは一覧で選んだアイドルを表示したいところですね」
ことり「選んだ人の名前を編集できる感じだといいね」
海未「ではここで、イベントハンドリングの方法を見てみましょう。一覧の誰かをクリックしたら、そのイベントに反応して何か処理をする、という書き方があります」

海未「テンプレートの抜粋ですが、(click)="onSelect(idol)"という記述を追加しました」
穂乃果「また変な書き方だ」
海未「これはよくあるonClickと同じような動きになります。li要素をクリックすると、onSelectという関数を呼び出します。もっとも、onSelectはまだ未実装ですが」
ことり「この引数のidolは、*ngForで列挙されたのが使われるのかな?」
海未「はい。ですから、一覧で誰をクリックしたかを判断することができるのです」

海未「イベントハンドラの方に移りましょう。AppComponentクラスに、今誰が選ばれているかを表すプロパティを追加します」

海未「次に、AppComponentクラスにonSelect関数を実装して、クリックされたアイドルをselectedIdolに設定します」

海未「テンプレートを修正して穂乃果の代わりにselectedIdolを表示するようにしましょう」

穂乃果「よーし、これで動くように・・・あれ?」
ことり「あれ?」
海未「これだけではあと一歩足りないのです。ブラウザのコンソールにエラーが吐かれていると思いますが、selectedIdolの初期値はundefinedですから」
ことり「あ・・・」
海未「初期状態では、アイドルの詳細を表示しないことにしましょう。*ngIfという書き方ができます」

ことり「そっか、条件分岐もできるんだったね」
海未「selectedIdolnullundefinedであればそのdiv自体が出力されなくなりますから、一覧で誰かを選ぶまでは詳細は表示されないという動きになります」


海未「最後に、一覧上で誰が選ばれているかが分かるように、スタイルを調整して選択されたアイドルの表示が変わるようにしましょう」

海未「[class.selected]のところが、データに応じてスタイルを動的に切り替えている部分です。idol === selectedIdolが真であれば、このli要素のclass属性にselectedという値を付与します」
穂乃果「新しい書き方がどんどん出てくるよー・・・覚えるの大変」
ことり「これは普通にスクリプトで頑張るよりすっきりするし見やすいかも」

Belonging Idols


海未「ここまでの実装を行った状態のapp.component.tsはこのようになります」

海未「ここまでAppComponentという1つのコンポーネントに全てを実装してきましたが、アプリケーションはコンポーネントの組合せでできているものです。次回はコンポーネントの分割について見てみましょう」


LINEで送る
Pocket


返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です