今回も「クラス」についてみていきます。

---

１　クラス

　前回のコードです。

HTML（一部）

<script>
    class Tri{
        constructor(name, base, height){
            this.name = name;
            this.base = base;
            this.height = height;
        }
        calcArea() {
            return ( this.base * this.height ) / 2 ;
        }
    }

    tr1 = new Tri("三角形", 6, 8);
    tr2 = new Tri("さんかくけい", 8, 12);
    tr3 = new Tri("トライアングル", 8, 14);

    let area1 = tr1.calcArea();
    let area2 = tr2.calcArea();
    let area3 = tr3.calcArea();

    document.write("<p>" + tr1.name + "の面積は" + area1 + "です。</p>");
    document.write("<p>" + tr2.name + "の面積は" + area2 + "です。</p>");
    document.write("<p>" + tr3.name + "の面積は" + area3 + "です。</p>");
</script>

ブラウザ

　この例ではオブジェクトを一つ一つ扱っています。
　ところで、配列には文字列や数値などの値だけでなく、さまざまな要素を入れることができるのでしたね。
　そのことを利用してもっと短いコードにしてみましょう。

---

２　配列にオブジェクトを入れる

　下の例は、インスタンスを生成して配列に挿入するものです。

HTML（一部）

<script>
    class Tri{
        constructor(name, base, height){
            this.name = name;
            this.base = base;
            this.height = height;
        }
        calcArea() {
            return ( this.base * this.height ) / 2 ;
        }
    }

    let tris = [];
    tris.push(new Tri("三角形", 6, 8));
    tris.push(new Tri("さんかくけい", 8, 12));
    tris.push(new Tri("トライアングル", 8, 14));

    tris.forEach(function(tri){
        let area = tri.calcArea();
        document.write("<p>" + tri.name + "の面積は" + area + "です。</p>");
    });
</script>

ブラウザ

　まず、空の配列 tris を作成し、Tri クラスから生成したオブジェクトを３回にわたって、配列 tris に追加しています。

　その後、forEach メソッドを利用して、配列 tris から次々と要素を取り出し変数 tri に代入して、そのオブジェクト及びメソッドを呼び出して出力しています。

---

３　次回

　かなり効率的になってきましたね。
　次回は、継承とオーバーライドを学習します。