JavaScriptのクラス構文、使いこなせてる？ES6から導入されたクラスの基本と継承をわかりやすく解説！
JavaScriptのクラス構文とは？ES6からの導入
JavaScriptにおけるクラス構文は、ES6（ECMAScript 2015）で導入された、オブジェクト指向プログラミングをより容易にするための機能です。従来のプロトタイプベースの継承に比べて、より直感的で分かりやすい構文を提供します。クラス構文は、実際にはプロトタイプベースの継承の糖衣構文であり、JavaScriptのオブジェクト指向の性質を根本的に変えるものではありません。
クラス構文を使うことで、オブジェクトの設計図であるクラスを定義し、それに基づいて複数のインスタンス（オブジェクト）を作成できます。これにより、コードの再利用性、保守性、可読性が向上します。
本記事では、JavaScriptのクラス構文の基本から継承までを、具体的なコード例を交えながら解説します。
クラスの定義とインスタンスの生成
クラスはclassキーワードを使って定義します。クラス名は慣例的に大文字で始めます。クラスの中には、コンストラクタ（constructor）とメソッドを定義できます。
class Animal {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(Hello, my name is ${this.name} and I am ${this.age} years old.);
}
}
上記の例では、Animalというクラスを定義しています。constructorは、クラスのインスタンスが生成される際に実行される特別なメソッドです。thisキーワードは、クラスのインスタンス自身を指します。
クラスからインスタンスを生成するには、newキーワードを使用します。
const dog = new Animal('Buddy', 3);
dog.sayHello(); // Output: Hello, my name is Buddy and I am 3 years old.この例では、Animalクラスのインスタンスであるdogを生成し、sayHelloメソッドを呼び出しています。
メソッドの定義
クラスには、コンストラクタ以外にも様々なメソッドを定義できます。メソッドは、クラスのインスタンスが持つ関数です。
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
getArea() {
return this.width * this.height;
}
}
この例では、RectangleクラスにgetAreaというメソッドを定義しています。このメソッドは、長方形の面積を計算して返します。
const rect = new Rectangle(10, 5);
console.log(rect.getArea()); // Output: 50クラスの継承
クラスの継承とは、既存のクラス（親クラスまたはスーパークラス）のプロパティとメソッドを、新しいクラス（子クラスまたはサブクラス）が引き継ぐことです。継承を使うことで、コードの再利用性を高め、より複雑なクラスを構築できます。
継承を行うには、extendsキーワードを使用します。
class Dog extends Animal {
constructor(name, age, breed) {
super(name, age);
this.breed = breed;
}
bark() {
console.log('Woof!');
}
}
この例では、DogクラスがAnimalクラスを継承しています。super()は、親クラスのコンストラクタを呼び出すための関数です。Dogクラスは、Animalクラスのnameとageプロパティに加えて、breedプロパティとbarkメソッドを持つようになりました。
const myDog = new Dog('Max', 5, 'Golden Retriever');
myDog.sayHello(); // Output: Hello, my name is Max and I am 5 years old.
myDog.bark(); // Output: Woof!このように、子クラスは親クラスのメソッドを呼び出すことができます。
参考リンク
まとめ
JavaScriptのクラス構文は、オブジェクト指向プログラミングをよりシンプルに行うための強力なツールです。クラスの定義、インスタンスの生成、メソッドの定義、そして継承を理解することで、より効率的で保守性の高いコードを書くことができます。ES6以降のJavaScript開発では、クラス構文を積極的に活用していきましょう。
