Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.学ぶ ExtendsとSuper()による継承の理解 | JavaScriptクラスと継承の習得
JavaScriptロジックとインタラクション

bookExtendsとSuper()による継承の理解

メニューを表示するにはスワイプしてください

クラス継承とは何か

JavaScriptでは、extendsキーワードを使用してクラス間の関係を確立します。子クラスは独自のプロパティやメソッドを追加したり、親クラスのものをオーバーライドしたりできます。

子クラスは親クラスの特化バージョンと考えることができます。親クラスが車の設計図であれば、子クラスは電気自動車のような特定のタイプの車を表します。電気自動車は基本的な機能（車輪、ハンドル）を継承しつつ、機能（バッテリー、充電システム）を追加または変更できます。

extendsキーワードの使い方

extendsキーワードは、あるクラスが別のクラスを継承するために使用します。子クラスは親クラスのすべてのプロパティとメソッドを継承します。


              
1234567891011121314151617181920

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

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class extending the Animal class
class Dog extends Animal {
  bark() {
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog('Rex');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex barks!
copy

この例では、Dog クラスが Animal クラスを継承しており、親クラスの makeSound() メソッドを引き継いでいます。Dog クラスは独自の bark() メソッドも追加しています。

子クラスにおけるコンストラクタの利用

子クラスを作成する際は、親クラスのプロパティだけでなく、独自のプロパティも初期化する必要があります。これは constructor メソッドを使って行います。ただし、親クラスが正しく初期化されるように、super() 関数を使って親クラスのコンストラクタを呼び出す必要があります。

重要: 子クラスにコンストラクタがある場合、super() にアクセスする前に必ず this を呼び出す必要があります。そうしないとエラーになります。

super() を使った親クラスのコンストラクタ呼び出し

super() 関数は、子クラスのコンストラクタ内から親クラスのコンストラクタを呼び出すために使用します。これにより、親クラスのコンストラクタで定義されたプロパティやロジックが正しく初期化された後、子クラスで新たな機能を追加できます。


              
1234567891011121314151617181920212223242526

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

  makeSound() {
    console.log(`${this.name} makes a sound.`);
  }
}

// Child class with its own constructor
class Dog extends Animal {
  constructor(name, breed) {
    // Call the parent class constructor using super()
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name}, the ${this.breed}, barks!`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound(); // Output: Rex makes a sound.
dog.bark(); // Output: Rex, the German Shepherd, barks!
copy

この例では、Animal という基本クラスがあり、コンストラクタで name プロパティを初期化し、汎用的なサウンドメッセージを出力する makeSound メソッドを持っています。Dog クラスは Animal を継承し、独自のコンストラクタで name と breed の両方を引数として受け取ります。Dog のコンストラクタ内では、super() 関数を使って親クラスのコンストラクタを呼び出し、name が正しく設定されるようにしています。さらに、Dog には犬種に特化したメッセージを出力する新しいメソッド bark が追加されています。Dog 犬種の Rex という新しい German Shepherd インスタンスを作成すると、makeSound と bark の両方を呼び出すことができ、継承された動作と新しい動作の両方を確認できます。

extends と super() を使用する際の重要ポイント

継承: extends キーワードを使うことで、子クラスは親クラスのプロパティやメソッドを継承できます。

子クラスのコンストラクタ: 子クラスでコンストラクタを定義する場合は、必ず super() を使って親クラスのコンストラクタを呼び出します。

this の利用: 子クラスのコンストラクタ内で super() にアクセスする前に、this を呼び出す必要があります。

メソッドのオーバーライド: 親クラスと同じ名前のメソッドを子クラスで定義することで、親クラスのメソッドをオーバーライドできます。また、必要に応じて super.methodName() を使い、子クラスから親クラスのメソッドを呼び出すことも可能です。

例：メソッドのオーバーライドとsuper()の使用

親クラスのメソッドを子クラスでオーバーライドしつつ、新しいロジックの一部として親クラスのメソッドも呼び出したい場合があります。その際はsuper.methodName()を使用します。


              
1234567891011121314151617181920212223242526272829

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

  makeSound() {
    console.log(`${this.name} makes a generic sound.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  // Override the makeSound method
  makeSound() {
    // Call the parent class's makeSound method
    super.makeSound();
    console.log(`${this.name}, the ${this.breed}, barks loudly.`);
  }
}

const dog = new Dog('Rex', 'German Shepherd');
dog.makeSound();
// Output:
// Rex makes a generic sound.
// Rex, the German Shepherd, barks loudly.
copy

この例では、DogクラスがmakeSoundメソッドをオーバーライドしつつ、makeSoundを使って親クラスのsuper.makeSound()メソッドも呼び出しています。これにより、子クラスは親クラスの動作を完全に置き換えることなく拡張できます。

実例：Employee クラスと Manager クラス

Employee クラスと、それを拡張する Manager クラスのシナリオを考えます。Manager クラスは、基本の Employee 機能に新しい機能を追加します。


              
12345678910111213141516171819202122232425262728

            
class Employee {
  constructor(name, position) {
    this.name = name;
    this.position = position;
  }

  getDetails() {
    return `${this.name} works as a ${this.position}.`;
  }
}

class Manager extends Employee {
  constructor(name, position, department) {
    // Call the parent class constructor using super()
    super(name, position);
    this.department = department;
  }

  getDetails() {
    return `${super.getDetails()} They manage the ${
      this.department
    } department.`;
  }
}

const manager = new Manager('Alice', 'Manager', 'Sales');
console.log(manager.getDetails());
// Output: Alice works as a Manager. They manage the Sales department.
copy

この例では、Manager クラスが Employee クラスを拡張し、新しい department プロパティを追加しています。getDetails() クラスの Manager メソッドは、super.getDetails() を使って親クラスのメソッドを呼び出し、その後に部門固有の情報を追加します。

1. extends キーワードは何をしますか？

2. 子クラスのコンストラクタで super() を使う理由は何ですか？

3. 次のコードは何を出力しますか？

question mark

extends キーワードは何をしますか？

正しい答えを選んでください

question mark

子クラスのコンストラクタで super() を使う理由は何ですか？

正しい答えを選んでください

question mark

次のコードは何を出力しますか？

正しい答えを選んでください

すべて明確でしたか？

どのように改善できますか？

フィードバックありがとうございます！

セクション 1. 章 14

AIに質問する

expand

AIに質問する

ChatGPT

何でも質問するか、提案された質問の1つを試してチャットを始めてください

セクション 1. 章 14
some-alt