classの継承について

こんにちは。向日葵です。

現在HTML5プロフェッショナル認定試験レベル2を勉強中です。その中で私が理解できなかった部分を私なりに解釈したものを紹介します。

今回はclassの継承についてです。

Classとは

そもそもclassとは何者なのか

以下、こちらのサイトからの引用です。

クラスはオブジェクトを作成するためのテンプレートです。処理するためのコードでデータをカプセル化します。 JS のクラスはプロトタイプに基づいて構築されていますが、一部の構文や意味はクラスに独特のものです。

何やら難しく言っていますが、オブジェクトを作るための設計図のようなものだと認識してれば大丈夫だと思います。

なぜclassを使うのか

例えば人を表すオブジェクトを作るとします。数人程度であれば、それぞれ個別に定義しても問題ないかもしれません。しかし100人の場合どうでしょうか？100人分の情報を1つずつ定義するのは現実的ではありません。そこで、人という設計図(クラス)を1つ作成し、必要な分だけインスタンスを生成します。そうすることで同じ構造を持つオブジェクトが何度でも作成できます。

classの書き方

以下のように記述します。

class Person {
    constructor(name, job) {
        this.name = name;
        this.job = job;
    }

    introduce() {
        console.log(`私は${this.name}です。職業は${this.job}です。`);
    }
}

const villagerA = new Person('村人A', '剣士');
const villagerB = new Person('村人B', '魔法使い');
villagerA.introduce();
villagerB.introduce();

これでインスタンスが2つ生成されます。

classの継承

classの継承とは

継承はよく既存のクラスからの機能を引継ぐや継承すると説明されると思います。それだといまいちピンと来なかったので私なりに解釈してみました。

例えば村人Aと村人Bがいるとします。どちらも同じ人間という種族です。人間は名前、ＨＰ、ＭＰを持っています。また攻撃することもできます。しかし攻撃方法は職業によって異なります。

ここで村人Ａを剣士、村人Ｂを魔法使いに就職させます。村人Ａは剣士なので切りつけることができますが、魔法を放つことはできません。一方、村人Ｂは切りつけることができませんが、魔法を放つことができます。

ここで重要なのは村人Ａも村人Ｂも共通して名前、ＨＰ、ＭＰを持っていることです。逆にいうと村人Ａと村人Ｂの違いは攻撃手段です。つまり攻撃手段を差別化しているということです。

このように名前、ＨＰ、ＭＰのような共通の性質を親クラスに記述し、切りつける、魔法を放つのような職業ごとに異なる部分を子クラスに記述します。こうすることで、共通の性質を引継ぎつつ共通部分と職業ごとの違いを分けて管理できます。そのため共通部分を修正したい場合は親クラスを修正するだけで済み保守性が向上します。

クラス継承の書き方

class Person {
    constructor(name, hp, mp) {
        this.name = name;
        this.hp = hp;
        this.mp = mp;
    }

    attack() {
        console.log('攻撃した');
    }
}

class Knight extends Person {
    constructor(name) {
        super(name);
    }

    slash() {
        console.log(`${this.name}が切りつける`);
    }
}

class Wizard extends Person {
    constructor(name) {
        super(name);
    }

    fireball() {
        console.log(`${this.name}が火魔法を放つ`);
    }
}

const villagerA = new Knight('村人A');
const villagerB = new Wizard ('村人B');
villagerA.attack();
villagerA.slash();
villagerB.attack();
villagerB.fireball();

なぜ保守性があがる

先ほど「共通部分を修正したい場合は親クラスを修正するだけで済み保守性が向上します。」と説明しました。なぜ保守性があがるのでしょうか。

簡単にいうと修正箇所が1箇所で済むからです。

例えば新しいステータス「運気」を追加することになったとします。もし継承していなかった場合、各職業ごとにluckを追加する必要があります。つまり職業の数分同じ記述をするということです。

一方で継承していれば親クラスのみにluckを追加するだけで済みます。あとで修正や削除をしたいとなった場合も親クラスを修正するだけで済みます。修正が漏れることもなくコードが重複することもありません。そのため保守性が向上します。

最後に

最後まで見ていただきありがとうございます。

次回も勉強中に躓いたところについてブログにしたいと思います。