最新！JavaScript入門講座ークラスの継承をわかりやすく解説

クラスは複雑な処理や繰り返し使うような処理を定義して可読性や再利用性を上げる機能です。そこからさらに繰り返し使うため、クラスの継承というものがあります。これも、コードをよりよくするための機能です。

今回は初学者の方向けにクラスの継承についてわかりやすく解説していきます。

本記事のペルソナ

クラスについて学びたい方
クラスを使いこなしたい方
オブジェクト指向を学びたい方
JavaScript初学者の方

第28回クラスの基本

第30回 JSONの基本

継承の解説
1. 継承の概要
2. 継承のサンプルを解説
まとめ
参考文献

継承の解説

継承の概要

継承はあらかじめ定義したクラスの処理や変数といった機能を受け継ぎつつ、それに加えて独自の変数や機能をそなえたクラスを定義します。
これが継承です。継承もとのクラスを親クラス、今回継承させるクラスを子クラスといいます。またの名をスーパークラス、サブクラスともいいます。

書き方

class 親クラス名{

}

class 子クラス名 extends 親クラス名{

}

書き方は上のようになります。基本的にオブジェクト指向はこのようなことを繰り返していきます。特に、複雑な処理になってくるゲームはこういった構造で開発されていきます。

継承のサンプルを解説

では早速サンプルを見てみましょう。

class Company{
    constructor(name,kind,ticker,capital,total,expense){
        this.name = name;
        this.kind = kind;
        this.ticker = ticker;
        this.capital=capital;
        this.total = total;
        this.expense = expense;
    }

    getName(){
        return `企業名 : ${this.name}`;
    }

    getTicker(){
        return `ティッカー : ${this.ticker}`;
    }

    getTotal(){
        return `売り上げ : ${this.total}`;
    }

    getBenefit(){
        return `粗利益 : ${this.total-this.expense}`;
    }

}

class JpMorgan extends Company{
    constructor(name,kind,ticker,capital,total,expense,taxrate) {
        super(name,kind,ticker,capital,total,expense);
        this.taxrate = taxrate;
        this.service = "銀行・資産運用・持株会社";
    }

    func(){
        console.log(super.getName());
        console.log(super.getTicker());
        console.log(`法人税 : ${(this.total-this.expense)*this.taxrate}`);
        console.log(`サービス : ${this.service}`);
        console.log();
    }
}

class Adobe extends Company{
    constructor(name,kind,ticker,capital,total,expense,taxrate) {
        super(name,kind,ticker,capital,total,expense);
        this.taxrate = taxrate;
        this.works = "ソフトウェア・クラウド・Adobe Premire";
    }

    func(){
        console.log(super.getName());
        console.log(super.getTicker());
        console.log(`法人税 : ${(this.total-this.expense)*this.taxrate}`);
        console.log(`製品 : ${this.works}`);
        console.log();      
    }
}

class Berkshire extends Company{
    constructor(name,kind,ticker,capital,total,expense,taxrate) {
        super(name,kind,ticker,capital,total,expense);
        this.taxrate = taxrate;
        this.service = "持株会社";
        this.subsidiary = ["ジェネラル・リー","ミッドアメリカン・エナジー","ウェスコFC"];
    }

    func(){
        console.log(super.getName());
        console.log(super.getTicker());
        console.log(`法人税 : ${(this.total-this.expense)*this.taxrate}`);
        console.log(`サービス : ${this.service}`);
        console.log(`子会社 : ${this.subsidiary}`);
        console.log();     
    }    
}

const c1 = new JpMorgan("JPモルガン・チェース","株式会社","JPM",100000000000,4000000000000,200000000000,33);
const c2 = new Adobe("アドビ","株式会社","ADBE",1170000000000000,24000000000,3000000000,33);
const c3 = new Berkshire("バークシャー・ハサウェイ","株式会社","BAK.A",2000000000000,120000000000,3300000000,33);
c1.func();
c2.func();
c3.func();

$ node class.js

企業名 : JPモルガン・チェース
ティッカー : JPM
法人税 : 125400000000000
サービス : 銀行・資産運用・持株会社

企業名 : アドビ
ティッカー : ADBE
法人税 : 693000000000
製品 : ソフトウェア・クラウド・Adobe Premire

企業名 : バークシャー・ハサウェイ
ティッカー : BAK.A
法人税 : 3851100000000
サービス : 持株会社
子会社 : ジェネラル・リー,ミッドアメリカン・エナジー,ウェスコFC

はい、今回はクラスの継承ということでこの講座では比較的少々長いコードになっています。
このように、オブジェクト指向というのはモノをあらかじめ定義しておき、そこから発展させていくといったイメージになります。

この例だと、まずは会社というものをある程度定義しておきます。そこから、個別の会社をそれぞれ定義していくのです。コードを見てみると、大体の部分を再利用できていることが分かるかと思います。

スーパークラスの変数やメソッドにアクセスするには、super()を使う必要があります。これをすることによってスーパークラスの変数やメソッドにアクセスし、使い回すことが可能です。この機能をオーバーライドといいます。