classの概要
| クラス定義 JavaScript予約語 | ||
|
class 概要 わかりやすく説明 |
||
|
classの基本的な使い方
以下は、classを使用してクラスを定義し、オブジェクトを作成する基本的な例です。
// クラスの定義
class Animal {
constructor(name) {
this.name = name; // プロパティの定義
}
speak() {
console.log(`${this.name} が鳴いています。`); // メソッドの定義
}
}
// クラスからオブジェクトを作成
const dog = new Animal("ポチ");
dog.speak(); // ポチ が鳴いています。
classキーワードでクラスを定義します。constructorメソッドは、オブジェクト生成時に呼び出され、初期化を行います。- クラス内にメソッドを定義して、オブジェクトで利用可能にします。
クラスの継承
JavaScriptのクラスはextendsを使って継承が可能です。これにより、既存のクラスを拡張して新たなクラスを作成できます。
// クラスの継承
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} が鳴いています。`);
}
}
class Dog extends Animal {
speak() {
console.log(`${this.name} がワンワンと鳴いています。`);
}
}
// 子クラスのオブジェクトを作成
const dog = new Dog("ポチ");
dog.speak(); // ポチ がワンワンと鳴いています。
extendsキーワードで親クラスを継承します。- 子クラスで親クラスのメソッドをオーバーライドできます。
- コードの再利用性と柔軟性が向上します。
静的メソッド
staticキーワードを使用すると、クラス自体に紐づく静的メソッドを定義できます。これらはインスタンスではなく、クラスから直接呼び出します。
// 静的メソッドの定義
class MathUtils {
static add(a, b) {
return a + b;
}
}
// 静的メソッドを呼び出し
console.log(MathUtils.add(5, 10)); // 15
- 静的メソッドはクラス名を通じて直接呼び出します。
- 特定のインスタンスに依存しないユーティリティ関数を提供する場合に便利です。
注意点
- クラス名の規則: クラス名はキャメルケースで記述するのが一般的です(例:
MyClass)。 - 動的プロパティの設定: クラス内で
thisを使って動的にプロパティを設定できますが、定義済みのプロパティとの混乱を避けるため注意が必要です。 - ES6未対応環境: 古い環境では
classがサポートされていないため、トランスパイラ(例: Babel)が必要な場合があります。
よくある質問
- Q: クラスのプロパティを直接定義することはできますか?
- A: ES6ではプロパティは
constructor内で定義する必要がありましたが、ES2022以降ではクラスフィールドを使用して直接定義できます。 - Q: クラスを使うと何が便利ですか?
- A: クラスは、オブジェクト指向プログラミングを採用することで、コードの再利用性や保守性を向上させます。
- Q: 継承の際に親クラスのメソッドを呼び出す方法は?
- A:
superキーワードを使って親クラスのメソッドを呼び出すことができます。
まとめ
classは、JavaScriptでオブジェクト指向プログラミングを実現するための強力な機能です。クラスの使用により、コードの構造化が容易になり、再利用性が向上します。
- クラスを使うことで、オブジェクトやメソッドを一元的に管理できます。
- 継承を活用して柔軟な設計を実現できます。
- 静的メソッドやクラスフィールドを活用し、効率的なコードを書きましょう。