今回は以下のプロジェクトを修正します。

https://github.com/jirentaicho/typescript-figurecollection

サイトイメージ

対象ソース

この棚クラスとアイテムクラスの生成を、yamlファイルからデータを読み込んで行うようにします

const shelfa = new Shelf("ラブライブ", Array.of(
            new Item("kanon.jpg"),
            new Item("chisato.jpg"),
            new Item("ren.jpg"),
            new Item("keke.jpg"),
            new Item("sumire.jpg"),
        ));
    shelfa.setBackImage("lovelivetitle.png");

    const shelfb = new Shelf("とある", Array.of(
        new Item("misaka.jpg"),
        new Item("kuroko.jpg"),
        new Item("toaru.jpg"),
    ));
    shelfb.setBackImage("toarutitle.jpg");


    const shelfc = new Shelf("俺妹", Array.of(
        new Item("kirino.jpg"),
        new Item("oreimo.jpg"),
        new Item("ayase.jpg"),
    ));
    shelfc.setBackImage("oreimotitle.png");

    const shelfd = new Shelf("鬼滅", Array.of(
        new Item("rengoku.jpg"),
        new Item("giyu.jpg"),
        new Item("nezuko.jpg"),
    ));
    shelfd.setBackImage("kimetutitle.jpg");


    //ここsingletonにする
    const setting = Setting.getInstance();
    setting.addShelf("toaru",shelfa);
    setting.addShelf("lovelive",shelfb);
    setting.addShelf("oreimo", shelfc);
    setting.addShelf("kimetu", shelfd);
    
    const shelfarea = Dom.getElementByIdWithException(DomConst.SHELF_AREA_ID); 
    setting.drawDomShelfs(shelfarea);

現状はソースコードに、どの画像データでItemを作成するかべた書きになっているので管理が大変です。

js-yaml

前回、yamlファイルを非同期で読み込むことに成功しました。

まずはyamlファイルを読み取るためにjs-yamlをインストールします。

npm install --save @types/js-yaml

このjs-yamlを利用することで任意の型に適合させてyamlファイルをロードできます。

Yamlファイルを読み込んで適合させる型を作ります

export default class Yaml{
    public name = "";
    public imageName = "";
    public items : Array<String> =[];
}

作成するyamlファイルは上記の形に合わせて作成すればよいです。

-
  name: ラブライブ
  imageName: lovelivetitle.png
  items: 
  - kanon.jpg
  - keke.jpg
  - chisato.jpg
-
  name: とある
  imageName: toarutitle.jpg
  items: 
  - kuroko.jpg
  - misaka.jpg
  - toaru.jpg

クラスローダーの作成

リフレクションのようなものは使えないので、以下のページを参考にクラスローダーのようなものを作成しました。

TypeScript (Node.js) で文字列から動的にインスタンスを作成する方法

Typescript – Get all implementations of interface

以下作成したものです。

export type Constructor<T> = {
    new(...args: any[]): T;
    readonly prototype: T;
}

import DomItem from "../dom/DomItem";
import { Constructor } from "./Constructor";

export default class ClazzMake{
    
    public implementations: Constructor<DomItem>[] = [];

    GetImplementations(): Constructor<DomItem>[] {
        return this.implementations;
    }

    GetImplementationByName(name:string): Constructor<DomItem>{
        const result = this.implementations.find(i => i.name === name);
        if(result == undefined){
            throw new Error(`対象のクラスが存在しません name : ${name}`);
        }
        return result;
    }

    register<T extends Constructor<DomItem>>(ctor: T) {
        this.implementations.push(ctor);
        return ctor;
    }
}

動的にオブジェクトの生成を行う

これでyamlの読み込みと、動的にクラスを作成する術を手にしました。

直截newしていた記載は、yamlから動的にクラスを作成することで、このようになりました。

private async loadSettings(): Promise<void>{
    
    // yamlの読込
    const response = await FileManager.getDataWithFile('mylist.yaml');
    const data = await response.text();

    // class作成クラスをインスタンス化する
    const clazzMaker = new ClazzMake();
    clazzMaker.register(Item);
    clazzMaker.register(Shelf);

    //　Settingの作成
    const setting = Setting.getInstance();

    //　ここで型を指定しておくと、その通りに取得できるのでYaml用の型を作成しておく
    const yamlData = yaml.load(data) as Array<Yaml>;

    yamlData.forEach(elm => {
        // 空のItems配列を用意しておく
        const t_items : Array<Item> = [];
        // yamlのitems配列を走査して、Itemを作成する
        elm.items.forEach(item => {
            // Itemクラスの作成
            const clazz = clazzMaker.GetImplementationByName("Item");
            // tempのitems配列に入れておく
            t_items.push(new clazz(item) as Item);
        });

        // Shelfクラスを作成する
        const clazz = clazzMaker.GetImplementationByName("Shelf");
        // 先ほど設定したtempのItem配列のデータをセットする
        const shelf = new clazz(
            elm.name,
            t_items
        ) as Shelf;
        shelf.setBackImage(elm.imageName);

        //設定にshelfを追加する
        setting.addShelf(elm.name,shelf);

    });

    const shelfarea = Dom.getElementByIdWithException(DomConst.SHELF_AREA_ID); 
    setting.drawDomShelfs(shelfarea);

}

これで必要なページが増えてもyamlファイルを修正するだけで良くなりました。

ネストしたforeachが気色悪いですが。。。

設定

これはブラウザで動かしていてwebpackを使っているのですが、webpackはプロダクションモードにせず、デベロップメントモードにしています。

module.exports = {
    mode: "development", // バンドルモード
   // mode: "production",

文字列で動的にクラスを生成する際に、プロダクションモードにするとクラス名が変わってしまうからです。

また別リポジトリにてクラスローダーのジェネリクス版を作成しました。テストもあります。

https://github.com/jirentaicho/typescript-mysample/tree/main/src

TypeScriptでyamlファイルからオブジェクトを生成する