JavaScriptの継承extendsの仕組みをやさしく解説 クラスとオブジェクト指向の基本を初心者向けに理解しよう

1. JavaScriptの継承とは何か

1. JavaScriptの継承とは何か

JavaScriptの継承とは あるクラスの機能を別のクラスが引き継ぐ仕組みのことです クラスとは 設計図のようなものです そしてオブジェクトとは その設計図から作られた実際のものです オブジェクト指向とは 設計図をもとに部品を作る考え方です

例えば 乗り物という設計図があったとします そこには走る止まるという機能があります その設計図をもとに 車や自転車という新しい設計図を作ることができます このように 元のクラスの性質を受け継ぐことを継承といいます

JavaScriptでは extends というキーワードを使って継承を行います 継承を使うことで 同じ処理を何度も書く必要がなくなり コードの再利用がしやすくなります これはプログラミング初心者にとっても重要な考え方です

2. クラスの基本を復習しよう

2. クラスの基本を復習しよう

まずはJavaScriptのクラスの基本から確認します クラスは class というキーワードで作成します コンストラクタとは クラスからオブジェクトを作るときに最初に実行される特別なメソッドです

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

  speak() {
    console.log(this.name + "が鳴いています");
  }
}

const dog = new Animal("ポチ");
dog.speak();

ポチが鳴いています

この例では Animal というクラスを作りました name という情報を持ち speakという動作をします このようにクラスは データと動作をまとめて管理できます

3. extendsを使った継承の書き方

3. extendsを使った継承の書き方

それではJavaScriptの継承の書き方を見ていきます extendsを使うと 既存のクラスを引き継いだ新しいクラスを作ることができます

class Dog extends Animal {
  bark() {
    console.log(this.name + "がワンワンと鳴いています");
  }
}

const pochi = new Dog("ポチ");
pochi.speak();
pochi.bark();

ポチが鳴いています
ポチがワンワンと鳴いています

DogクラスはAnimalクラスを継承しています そのため speakメソッドも使えます さらに barkという新しい機能も追加できます これがJavaScriptのextendsによる継承の基本です

4. superの役割を理解しよう

4. superの役割を理解しよう

継承を使うときに大切なのが super です superとは 親クラスの機能を呼び出すためのキーワードです 特にコンストラクタを使う場合は superを必ず呼び出す必要があります

class Cat extends Animal {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  showAge() {
    console.log(this.name + "は" + this.age + "歳です");
  }
}

const tama = new Cat("タマ", 3);
tama.speak();
tama.showAge();

タマが鳴いています
タマは3歳です

super name と書くことで 親クラスのコンストラクタを呼び出しています これを忘れるとエラーになります JavaScriptの継承では superはとても重要です

5. メソッドの上書きとは

5. メソッドの上書きとは

継承では 親クラスのメソッドを子クラスで書き換えることもできます これを上書きといいます 上書きとは 同じ名前のメソッドを子クラスで再定義することです

class Bird extends Animal {
  speak() {
    console.log(this.name + "がピヨピヨと鳴いています");
  }
}

const piyo = new Bird("ヒヨコ");
piyo.speak();

ヒヨコがピヨピヨと鳴いています

この例では speakメソッドを上書きしています 同じメソッド名でも 子クラスの内容が優先されます これにより 柔軟な設計が可能になります

6. 継承を使うメリットと注意点

6. 継承を使うメリットと注意点

JavaScriptの継承を使うメリットは コードの再利用ができることです 同じ処理を何度も書かずに済みます また オブジェクト指向の設計がしやすくなります

一方で 継承を使いすぎると 構造が複雑になることもあります どのクラスがどの機能を持っているのか 分かりにくくなることがあります そのため 必要なときだけ使うことが大切です

JavaScriptのクラスと継承 extends super コンストラクタ メソッド上書き これらのキーワードを理解することで オブジェクト指向プログラミングの基礎が身につきます プログラミング未経験の方でも まずは簡単なクラスを作り そこから継承を試してみることで 自然と理解が深まります

JavaScriptの継承は Web開発 アプリ開発 フロントエンド開発など さまざまな場面で活用されます extendsの仕組みをしっかり理解して 効率的なコードを書けるようになりましょう

まとめ

まとめ

今回はJavaScriptの継承extendsの仕組みについて クラスとオブジェクト指向の基本から順番に理解してきました JavaScriptのクラスとは設計図であり その設計図から作られるものがオブジェクトです そしてオブジェクト指向とは データとメソッドをまとめて管理し 再利用しやすくする考え方です JavaScriptの継承は 既存のクラスの機能を引き継いで 新しいクラスを作ることができる重要な仕組みです

extendsを使うことで 親クラスのプロパティやメソッドを子クラスが利用できるようになります これにより 同じ処理を何度も書く必要がなくなり コードの再利用性が高まります JavaScriptの継承は フロントエンド開発やバックエンド開発などさまざまなWeb開発の現場で活用されています クラス設計をしっかり考えることで 保守しやすく読みやすいプログラムを書くことができます

また superの役割も重要です 子クラスでconstructorを定義する場合 親クラスのconstructorを呼び出すためにsuperを使います これにより 親クラスの初期化処理を正しく引き継ぐことができます JavaScriptのextendsとsuperの関係を理解することは オブジェクト指向プログラミングを理解するうえで欠かせません

さらに メソッドの上書きも継承の大切なポイントです 親クラスで定義されたメソッドを 子クラスで再定義することで 振る舞いを変更できます これにより 同じ名前のメソッドでも クラスごとに異なる動作を実現できます JavaScriptのクラス設計では 共通部分は親クラスにまとめ 差分だけを子クラスに書くという考え方が重要です

ここで JavaScriptの継承extends super コンストラクタ メソッド上書きの理解をさらに深めるために 簡単なサンプルプログラムをまとめとして確認しておきましょう クラスとオブジェクト指向の基本を意識しながら コードの流れを読み取ってみてください

class Vehicle {
  constructor(type) {
    this.type = type;
  }

  move() {
    console.log(this.type + "が移動します");
  }
}

class Car extends Vehicle {
  constructor(type, brand) {
    super(type);
    this.brand = brand;
  }

  introduce() {
    console.log(this.brand + "の" + this.type + "です");
  }
}

const myCar = new Car("車", "トヨタ");
myCar.move();
myCar.introduce();

車が移動します
トヨタの車です

このサンプルでは Vehicleクラスを親クラスとして定義し Carクラスがextendsで継承しています superを使って親クラスのconstructorを呼び出し typeを初期化しています そのうえで brandという新しいプロパティを追加しています このように JavaScriptの継承を使えば 共通の処理は親クラスにまとめ 個別の機能は子クラスに書くことができます

JavaScriptの継承extendsの仕組みを理解することは オブジェクト指向の基礎を理解することにつながります クラス コンストラクタ メソッド super 上書き これらのキーワードを一つずつ整理しながら学習することで 初心者でも確実にレベルアップできます まずは小さなクラス設計から始めて 実際に手を動かしてコードを書いてみることが大切です