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

---

１　オブジェクト

　オブジェクトにはさまざまなプロパティやメソッドを定義することができ、したがって単なる変数よりも、情報を整理して格納することができます。
　しかし、次のような場合はどうでしょうか。

HTML（一部）

<script>
    let tr1 = {
        name : "三角形",
        base : 6,
        height : 8,
        calcArea : function() {
            return ( this.base * this.height ) / 2 ;
        }
    }
    let tr2 = {
        name : "さんかくけい",
        base : 8,
        height : 12,
        calcArea : function() {
            return ( this.base * this.height ) / 2 ;
        }
    }
    let tr3 = {
        name : "トライアングル",
        base : 8,
        height : 14,
        calcArea : function() {
            return ( this.base * this.height ) / 2 ;
        }
    }

    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>

ブラウザ

　この例では定義の時点で値を入力しています。（さらに行数が増えるのを避けるためです。）
　このように３つのオブジェクトを定義してそれぞれ表示するだけでも、これだけの行数を要します。
　これまで、変数や繰り返し処理など、できるだけ少ないコードで処理を行うことに努めてきましたが、このオブジェクトの定義についても何とかならないのでしょうか？

---

２　クラス

　そこで「クラス」というものを利用します。

書式

class クラスの名前｛
    メソッドの名前（引数）{
        引数の処理
    }
｝

　もちろん、メソッドの名前や引数は複数記述することができます。
　なお、クラスは「オブジェクトを設計するもの」であるということができます。

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（一部）

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

「おや？」と思われた方、その通りです。
　オブジェクトではなく、constructor という特殊なメソッドで定義されていますね。

HTML（一部）

    tr1 = new Tri("三角形", 6, 8);

　そして、次の箇所では new クラス名 でオブジェクトを作っています。
　この生成されたオブジェクトのことを インスタンス といいます。

HTML（一部）

        constructor(name, base, height){
            this.name = name; ①
            this.base = base; ②
            this.height = height; ③
        }
    ・
    ・　　　　　　↑
    ・
    tr1 = new Tri("三角形", 6, 8); ① ② ③

　このインスタンスを生成する動きをわかりやすくすると上のようになります。
　まず、インスタンスを生成するときに、constructor メソッドが呼び出され、引数として指定されている、① “三角形” が name に、② 6 が base に、そして、③ 8 が height にそれぞれ代入されます。
　これが コンストラクタ の役割で、クラスからインスタンスを生成する際に呼び出されるメソッドです。

　これらのプロパティを持つオブジェクトが tr1 となります。
　メソッドについては前回説明したとおりの動きですね。
　今回の例では、これが３回繰り返されます。

---

４　次回

　さてだんだんと効率的になってきました。
　次回は、さらにコードを少なくする工夫をしてみたいと思います。