JavaScriptのクラスの継承を超絶ミニマムで解説してみる！

この記事は約 5 分で読めます。

みなさんこんにちは！ヒロポンです！

やっぱりクラスを使ったオブジェクト指向は楽しいなーーとおもうのですが、もっとレベルアップしたいと思っていたら、デザインパターンというものがあるそうですね！

なんでも先人がいろいろ苦労した実装などのベストプラクティスをまとめている理論？みたいなもので、オブジェクト指向が理解できたら、次に行くステップだそうです！

オブジェクト指向ってクラスだけじゃなくて、ポリモーフィズムとか、継承とかいろんな要素がありますからね！

ベストな使い方を覚えているだけで色々プログラミングの幅が広がるのだと思います！

ってことで今回は、そんなオブジェクト指向からJavaScriptでの継承を超絶ミニマムで解説していきたいと思います！

この記事でもなんとなーーくわかったってなるのが目的なので、楽に読んでください！

プログラミングの継承はパワーアップ

さて継承といえば思い浮かぶのは、能力の継承とか皇位継承とかって感じだと思います。

が、

プログラミングにおける継承は少し意味が違います。

どう違うかというと、日本語での継承はその能力や地位を受け継いて、移譲されるってイメージです。

が、

プログラミングだとメソッドやフィールドがコピーされパワーアップするイメージです。

例えば、Aくんが魔力を持っていたとして、イオナズンが使えたとします。

BくんがA君を継承していたとすると、B君は魔力をステータスに持っており、イオナズンが使えた上で更に、回復力というステータスとベホマとかも使えます。

JavaScriptのコードで書いてみると以下のような感じになります。

'use struct';
class A君{
    constructor(魔力){
        this.魔力 = 魔力
    }
    
    イオナズン(){
    }
}

class B君 extends A君{
    constructor(魔力,回復力) {
        super(魔力);
        this.回復力 = 回復力
    }
    
    ベホマ(){
        
    }
}

A君は魔力を持っていて、イオナズンを使えます。

B君はA君を継承（extends）しているので、魔力を持っていてイオナズンを使えます。

さらにB君は回復力も持っていて、ベホマも使えるですね！

JavaScriptでクラスを継承する手順

では上記クラスの継承を順を追って説明していきます。

ベースクラスの定義

まずはベースクラスの定義をしてみましょう。

A君は魔力を授かった（コンストラクタで魔力を設定）

class A君{
    constructor(魔力){
        this.魔力 = 魔力
    }
}

A君はイオナズンを覚えた

class A君{
    constructor(魔力){
        this.魔力 = 魔力
    }
    
    イオナズン(){
        console.log("イオナズンを使った")
    }
}

これでベースクラスの定義は終わりです！

無事A君は魔力を授かってイオナズンも使えるようになりました！

継承先クラスの定義

B君はA君を継承した！（このタイミングでイオナズンは習得済み。魔力はまだ）

class B君 extends A君{

}

B君は魔力と新たに回復力を授かった！（このタイミングでA君を超える。魔力＆回復力＆イオナズン）

class B君 extends A君{
    constructor(魔力,回復力){
        super(魔力)
        this.回復力 = 回復力
    }
}

B君はベホマを覚えた

class B君 extends A君{
    constructor(魔力,回復力){
        super(魔力)
        this.回復力 = 回復力
    }

    ベホマ(){
        console.log("ベホマを使った")
    }
}

すごくシンプルな話これで継承は終わりです。

実際にA君とB君にイオナズンとベホマを使ってもらいましょう！

let A君 = new A(50);
let B君 = new B(100,150);

A君.Ionazun();

B君.Ionazun();
B君.Behoma();

クラスの定義はわかりやすいように日本語で行いましたが、このまま実行すると日本語でコード書くなーーとエラーになるので、一部アルファベットで書き換えました！

その上で実行すると下記のようになります！

以上！