JavaScript　extendsでクラスを継承する方法

JavaScriptにおいてextendsでクラスを継承する方法を詳しく解説します。

クラスの継承方法がよくわからなくて教えてほしいです！

もちろんです。JavaScriptにおいてクラスを継承する方法について、詳しく解説しましょう。

クラスの継承における基本的な概念

　JavaScriptにおいてクラスの継承を行うには、以下の概念について理解すると理解が深まります。

prototypeチェーン

　prototypeチェーンとは、オブジェクトの継承関係を表す仕組みです。各オブジェクトには、親オブジェクトへの参照があり、プロパティやメソッドを探索する際にこの参照をたどることで、必要な情報を見つけ出すことができます。

constructorメソッド

　constructorメソッドは、クラスを生成する際に呼び出される特別なメソッドです。このメソッドは、新しいインスタンスを生成するために必要な初期設定を行います。

superキーワード

　superキーワードは、親クラスの機能を呼び出すためのキーワードです。子クラスから親クラスの機能を呼び出す際に使用することができます。また、constructorメソッドで親クラスのconstructorメソッドを呼び出すこともできます。

クラスの継承を行う方法

JavaScriptにおいてクラスの継承を行う方法は以下の通りです。

extendsキーワードを使用する

　ES2015からはクラスの継承を行う際には、extendsキーワードを使用することで子クラスを定義することができます。子クラスの定義は、以下のように行います。

class ChildClass extends ParentClass {
  // ChildClassに固有のプロパティやメソッドを定義する
}

prototypeチェーンを操作して継承する

　prototypeチェーンを操作することでクラスの継承を行うことができます。この方法は、extendsキーワードを使用する方法よりも低レベルな方法ですが、JavaScriptにおいては発展的な技術としても利用されています。

この方法では、親クラスのprototypeオブジェクトを子クラスのprototypeオブジェクトに代入することで継承関係を作ります。

以下に、この方法を使ってクラスの継承を行うサンプルコードを示します。

function ParentClass() {
  // 親クラスのコンストラクタ処理
}

ParentClass.prototype.method1 = function() {
  // 親クラスのメソッド1
};

function ChildClass() {
  // 子クラスのコンストラクタ処理
}

ChildClass.prototype = Object.create(ParentClass.prototype);
ChildClass.prototype.constructor = ChildClass;

ChildClass.prototype.method2 = function() {
  // 子クラスのメソッド2
};

継承を理解するためのextendを使ったサンプル

　継承を理解するために、extendsキーワードを使ったサンプルプログラムを見ていきましょう。

まず、親クラスを定義します。以下が親クラスのサンプルコードです。

class ParentClass {
  constructor(name) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }
}

次に、この親クラスを継承した子クラスを定義します。以下が子クラスのサンプルコードです。

class ChildClass extends ParentClass {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
  sayHello() {
    console.log(`Hello, I'm ${this.name} and ${this.age} years old`);
  }
}

　ここで、子クラスでは親クラスのconstructor関数を呼び出すためにsuperキーワードを使用しています。また、子クラスでは親クラスのsayHello関数を上書きすることで、子クラス固有のsayHello関数を定義しています。

　最後に、子クラスをインスタンス化して、sayHello関数を呼び出してみましょう。

const child = new ChildClass("John", 30);
child.sayHello(); // Hello, I'm John and 30 years old

このように、extendsキーワードを使用することで簡単にクラスの継承を行うことができました。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

この記事のまとめ

extendsでクラスを継承する方法について解説しました。

クラスの継承方法についてよく理解できました！

継承を使用するときには必要最低限のものだけを継承するように注意しましょう。継承を適切に使用することで、可読性とメンテナンス性が向上することが期待されます。