オブジェクトのクラスをコンポーネントから分ける

このレッスンでは、 コンポーネントで使っている オブジェクトのクラスを 別のモジュールに分けます。 今開いているのはコンポーネント app.component のコードですが そこにはまず、定数 const で HEROINES 大文字ですね。 その変数に データのリストがあります。 id と name という プロパティを持っているデータが 10 件配列に入っています。 そして、これを一旦たたみましょう。 それから styles スタイルシートの方も長いのでたたみます。 そうすると、この HEROINES という 定数の値は プロパティ AppComponent の プロパティの heroines に入ります。 そうすると、そのデータというのは この template ですね。 template の中で heroines を拾って ngFor でデータを１個１個 heroine という変数に取り出して そのデータの数だけ この template に従って li 要素を作っています。 その中では取り出した heroine の データの値を id それから name という形で 取り出して表示していることになります。 そして更にその１つ１つの項目 リスト li 要素のどれかをクリックすると click のディレクティブがありまして onSelect というメソッドが 呼び出されます。 これは AppComponent に 定められているメソッドで そして呼び出す時に heroines から １個１個取り出した heroine という 変数に入っている個別のデータの値を 渡すことになっています。 そうすると、そのクリックされた項目の データ （heroine １件）が selectedHeroine というプロパティに 設定されます。 そうすると、今度はまた こちらの下の方ですね。 template の下の方ですが selectedHeroine をとってきて その名前と id が表示される ということになっています。 最初にクリックするまで selectedHeroine の値は無いので データが空になってしまうので データが無い場合には表示しないという ngIf のディレクティブも 設定されています。 ということで、現在の動きを ブラウザで確認しておきます。 ngFor のディレクティブで li 要素が 10 件表示されています。 そしてスクロールバーを見ると これより下がありませんね。 クリックしていませんから selectedHeroine がまだありません。 クリックをすると selectedHeroine が設定されるので この下の方に スクロールできるようになりました。 ここにクリックしたデータが 表示されることになっています。 クリックする項目を変えれば 表示されるデータが変わるということです。 今回、この動きには特に 変更を加えません。 さて、はじめに定数に設定されていた 配列なんですが この配列は Heroine のオブジェクトの 配列だということで 型指定がされています。 その Heroine というのは このクラスですね。 このクラスの型に従ったデータ つまり、 id:number と、 name:string をもっているということです。 ちょっとこの Component の 関数をたたみますが こちらの方では heroines に この配列を設定しているわけですが selectedHeroine の方にも Heroine のデータ型が設定されています。 クリックした項目の データが入るわけですから やはり id、name をもった この形のデータなわけですね。 それからクリックした時設定される ということですから 当然 onSelect で渡されるデータ こちらも Heroine のクラスの データ型ということになっています。 これはこれで特に問題はないのですが コンポーネントのクラスは AppComponent です。 そこに違うクラス Heroine が入っていると 他からは見えづらいです。 あるいは他からもこの Heroine という クラスを使いたいといった時に不便です。 ということですので、これを 別のモジュール、ファイルに 分けてしまおうと思います。 では、これをコピーしておきましょう。 モジュールというのは ファイルのことです。 これを新たに設定しますので Visual Studio Code では この［新しいファイル］のボタンで クラスと同じく heroine ですね。 TypeScript ファイルですから .ts ということで ファイルを作ります。 ここに今コピーしたコードを ペーストします。 ［貼り付け］ということで。 ちょっとインデントがおかしいですね。 インデントを整えます。 こうでしょうか。 ではこれで保存します。 そしたら今度は戻りまして app.component の方です。 こちらは要らなくなりましたので コメントアウトします。 そうすると、赤い波線が付いて 怒られていますね。 Heroine という型指定をしてあるけれども こんな型は無いということで 別モジュールにしましたから そしてこのモジュールは エクスポートしてありますね。 ということはインポートができますので これをインポートします。 angular/core からコンポーネントを インポートしてありますが 同じ要領で import と。 そして { } の中は一旦空にしておいて from で、どこから読み込むのかと。 同じ階層の heroine だよ、と。 ts は要りません。 そうしてあげると、 ここで何を読み込むのかと言うと H と入れると、Heroine でしょ？と 教えてくれますので 先にこの from の方を指定すると このようにコード補完が効きます。 ということで、赤い波線が 無事消えました。 ですから、保存して確認しましょう。 ファイルを保存して ブラウザを見てみると 先程と特に表示は変わりません。 むしろ変わっては困るのですが。 一応念のため［表示］＞［開発 / 管理］＞ ［JavaScript コンソール ］を 確かめておくことにしましょう。 特にエラーは出ていないですね。 スクロールバーがかなり下の方まで 行っていますから 今のところ下には何も出ていませんが クリックをするとその項目が 下に表示される、 別の項目をクリックすれば その項目のデータが表示されるということで 特にエラーも出ずに これは console.log を 打ってあるからですね。 動作がおかしいわけではありません。 ちゃんと動いているということです。 console.log のステートメントは ここですね。 もう確認ができたので特に要りませんから コメントアウトしておきましょう。 このレッスンでは、コンポーネントで 使っている コンポーネントでない別のクラス AppComponent でない Heroine というコンポーネントを 別のモジュール、別ファイルに 分けました。 その場合、この指定をそのまま heroine というモジュールに コピーしました。 そして別モジュールにしましたので そのままではこの中で使えませんから エクスポートしてあったクラスを import で持ってきます。 そうすると、こちらから コメントアウトしてあっても ちゃんとこの Heroine という 型の指定が有効になって 元通りの動作ができた ということです。