JavaScript の拡張: extends キーワードによる継承

JavaScript では、オブジェクト指向プログラミングの概念である「継承」を実現するために `extends` キーワードが用意されています。`extends` キーワードを使用することで、既存のクラス（スーパークラス）の機能を継承した新しいクラス（サブクラス）を作成することができます。この記事では、`extends` キーワードの使い方、継承の仕組み、そして具体的なコード例を通して JavaScript の拡張について詳しく解説していきます。

extends キーワードの基本的な使い方

`extends` キーワードは、クラス宣言またはクラス式の際に使用します。基本的な構文は以下の通りです。

class サブクラス名 extends スーパークラス名 {
  // サブクラスのプロパティやメソッドを定義
}

上記のコードでは、「サブクラス名」は新しく作成するサブクラスの名前、「スーパークラス名」は継承元のクラスの名前を表します。サブクラスは、スーパークラスのプロパティやメソッドを自動的に継承します。

コンストラクタの継承と super キーワード

サブクラスでコンストラクタを定義する場合、`super()` を呼び出すことでスーパークラスのコンストラクタを呼び出す必要があります。`super()` は、スーパークラスのコンストラクタを呼び出すための特別な関数です。`super()` は、サブクラスのコンストラクタ内でのみ使用できます。

class Animal {
  constructor(name) {
    this.name = name;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // スーパークラスのコンストラクタを呼び出す
    this.breed = breed;
  }
}

上記の例では、`Dog` クラスは `Animal` クラスを継承しています。`Dog` クラスのコンストラクタでは、`super(name)` を呼び出すことで `Animal` クラスのコンストラクタを呼び出し、`name` プロパティを初期化しています。`super()` を呼び出さないと、`name` プロパティが未定義のままになってしまいます。

メソッドのオーバーライド

サブクラスでは、スーパークラスのメソッドと同じ名前のメソッドを定義することで、メソッドをオーバーライドすることができます。オーバーライドされたメソッドは、スーパークラスのメソッドの代わりに呼び出されます。

class Animal {
  speak() {
    console.log("動物の鳴き声");
  }
}

class Dog extends Animal {
  speak() {
    console.log("ワンワン！");
  }
}

上記の例では、`Dog` クラスは `Animal` クラスの `speak()` メソッドをオーバーライドしています。`Dog` クラスのインスタンスで `speak()` メソッドを呼び出すと、「ワンワン！」と出力されます。

組み込みオブジェクトの拡張

`extends` キーワードは、カスタムクラスだけでなく、組み込みオブジェクトを拡張するためにも使用することができます。例えば、`Array` オブジェクトを拡張して、独自のメソッドを追加することができます。

class MyArray extends Array {
  sum() {
    return this.reduce((a, b) => a + b, 0);
  }
}

const numbers = new MyArray(1, 2, 3, 4, 5);
console.log(numbers.sum()); // 15

上記の例では、`MyArray` クラスは `Array` オブジェクトを継承し、`sum()` メソッドを追加しています。`sum()` メソッドは、配列の要素の合計値を返します。

継承のメリット

継承を使用することで、以下のメリットがあります。

メリット	説明
コードの再利用性	スーパークラスのコードを再利用することで、コードの重複を減らすことができます。
保守性の向上	共通の機能はスーパークラスにまとめることで、コードの変更が容易になります。
拡張性の向上	既存のクラスを拡張することで、新しい機能を追加することができます。

まとめ

`extends` キーワードは、JavaScript で継承を実現するための重要な機能です。`extends` キーワードを使用することで、コードの再利用性、保守性、拡張性を向上させることができます。

参考資料

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes/extends

よくある質問

Q1. 複数のクラスを継承することはできますか？

A1. いいえ、JavaScript では複数のクラスを直接継承することはできません。しかし、ミックスインなどのパターンを使用することで、複数のクラスの機能を取り入れることができます。

Q2. `extends` キーワードを使用せずに継承を実現することはできますか？

A2. はい、プロトタイプチェーンを使用することで、`extends` キーワードを使わずに継承を実現することができます。しかし、`extends` キーワードを使用した方が、コードが簡潔になり、可読性が向上します。

Q3. 継承とコンポジションの違いは何ですか？

A3. 継承は「is-a」関係を表し、コンポジションは「has-a」関係を表します。継承は、スーパークラスの機能をサブクラスが継承するのに適しており、コンポジションは、既存のオブジェクトを組み合わせて新しいオブジェクトを作成するのに適しています。

その他の参考記事:JavaScript クラスの継承