Part5: 複数のコンポーネント

穂乃果「どうしよう海未ちゃん!ライブビューイングすらチケット取れないよ~」
海未「私に言われても困ります!恨むならe+を恨んでください」
ことり「Aqoursはファーストライブから大人気ですごいね♪」
穂乃果「これ東京ドームでも埋まるんじゃないの~?」


海未「さて、前回まででアイドルの一覧と詳細を実装しましたが、それらは全てAppComponentに実装されていました」
穂乃果「それで困る感じしなかったけどなぁ・・・」
海未「これが非常に小さなアプリケ-ションだからそう思えるのです。規模の大きなアプリケーションになると、コンポーネントを分割して見通しをよくしたり再利用したりするのが一般的です」

海未「一覧の下にある詳細表示の部分を、AppComponentから切り離してみることにしましょう。IdolDetailComponentという新しいコンポーネントを作ることにします」


海未「idol-detail.component.tsというファイルを作成して、以下のように実装してください。これはまだ何もしないコンポーネントです」

ことり「ファイル名とコンポーネント名って、やっぱり対応してるの?」
海未「はい。まず、コンポーネント名はComponentで、ファイル名は拡張子を除いてcomponentで終わるのが一般的です。その手前は、ファイル名はdash-caseもしくはkebab-caseといってコンポーネント名の単語を-で区切ったものになります」
穂乃果「ケバブ・・・じゅるり」
ことり「はいはい、終わったら食べに行こうね」

海未「では、IdolDetailComponentにテンプレートを追加しましょう」

海未「見覚えのあるコードのはずですが」
ことり「AppComponentにあったのと同じだね」
海未「はい。あの部分を、このコンポーネントに移植するのです」

海未「idolというプロパティが参照されていますが、IdolDetailComponentidolプロパティはありませんね。それに、Idolクラスの定義もありません」
穂乃果「そっか、このままじゃ動かないんだ」
ことり「Idolクラスは、こっちにも書く・・・?」
海未「それはDRYではありませんね。両方のコンポーネントから参照できるように、別ファイルに切り出しておきましょう。idol.tsファイルにコードを移動します」

海未「app.component.tsidol-detail.component.tsの両方に、このIdolクラスをインポートする処理を追加します」

海未「これでIdolクラスが使えるようになったので、IdolDetailComponentidolプロパティを追加します」

海未「問題は表示すべきデータです。アイドルのデータ自体はまだapp.component.tsに書かれていましたね」
ことり「そこから一覧を表示して、選択したアイドルの情報を詳細に出してたんだよね。ってことは、このIdolDetailComponentに選択されたアイドルを渡してあげないといけない?」
海未「その通りです。そのためには、IdolDetailComponentidolプロパティは他のコンポーネントからの入力を受け付ける必要があります」
穂乃果「引数みたいなものかな」
海未「微妙なところですが、まあ間違ってはいませんね」

海未「受け取る側のコンポーネントでは、このように@Input()デコレータを付けるだけです」
ことり「デコレータ、ほんとにたくさん出てくるね」
海未「先に進むとまだありますよ。ともかく、IdolDetailComponentの方は一旦これで完成です」


海未「IdolDetailComponentを使うように、app.module.tsapp.component.tsを修正していきます。まずはapp.module.tsからいきましょう」

海未「今作ったコンポーネントをインポートします。次に、@NgModuleデコレータのdeclarationsに追記です」

海未「このアプリケーションで使うコンポーネントを全て書くのがdeclarationsです。これで、IdolDetailComponentを使えるようになりました」

海未「最後にapp.component.tsです。これまで特に触れませんでしたが、@Componentselectorに気付いていましたか?」
穂乃果「全っ然」
ことり「穂乃果ちゃん、もうちょっと何か言い様はないのかな・・・」
海未「・・・idol-detail.component.tsを見返してください。こういう記述がありました」

ことり「あったね、そういえば」
海未「これはテンプレートのタグ名になります。呼び出し側のコンポーネントのテンプレートに以下のような記述を入れると」

海未「その部分にIdolDetailComponentのテンプレートが展開されます。AppComponentであれば」

海未「このように書き換えることができます。表示や動作は何も変わりませんが、中身はだいぶ変わりましたね」
ことり「1つ1つのテンプレートが短くなるからわかりやすくなるね」
穂乃果「IdolDetailComponentって他の画面でも使えるんだよね?使い回せるのは便利だねっ!」


海未「では次回は、app.component.tsに直接書かれているアイドルのデータを切り離す作業を通じて、サービスについて学んでみましょう」


LINEで送る
Pocket


返信を残す

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