前回、「引数」についてAIに説明してもらう上でJavascriptの引数への理解がちょっとだけ深まったので、今度は「クラス」についてAIに教えてもらうことにしました。
クラスの基本構文
JavaScriptのクラス(class)は、オブジェクトを作成するためのテンプレート（設計図）です。クラスを使うと、似たようなオブジェクトを効率よく作れるようになります。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
document.getElementById("output1").innerText = `こんにちは、私は${this.name}です。`; // こんにちは、私は太郎です。
document.getElementById("output2").innerText = `こんにちは、私は${this.name}、${this.age}歳です。`; // こんにちは、私は太郎、30歳です。
}
}
const person1 = new Person("太郎", 30);
person1.greet(); 各部分の説明
| 部分 | 説明 |
|---|---|
class Person | Personというクラスを定義 |
constructor | インスタンスが作られるときに実行される特別なメソッド（初期化処理） |
this.name / this.age | インスタンス自身のプロパティ |
greet() | クラスの中で定義された「メソッド」 |
クラスを使う理由
- 同じようなオブジェクトを簡単に作れる
- コードの再利用がしやすい（継承など）
- プログラムを整理しやすい
クラスの継承（Inheritance）
他のクラスを基にして、新しいクラスを作ることもできます。
class Student extends Person {
constructor(name, age, studentId) {
super(name, age); // 親クラス（Person）のconstructorを呼び出す
this.studentId = studentId;
}
showId() {
console.log(`学生IDは ${this.studentId} です。`);
}
}
const student1 = new Student("花子", 20, "S12345");
student1.greet(); // こんにちは、私は花子です。
student1.showId(); // 学生IDは S12345 です。親クラス（スーパークラス）
他のクラスが「継承（inherit）」する対象となる共通の性質や機能をまとめた基本クラス
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} が鳴いています`);
}
}子クラス（サブクラス）
親の性質を受け継ぎつつ、独自の機能や性質を追加できるクラス
class Dog extends Animal {
bark() {
console.log(`${this.name} がワンワンと吠えています`);
}
}
const dog1 = new Dog("ポチ");
dog1.speak(); // ポチ が鳴いています（親のメソッド）
dog1.bark(); // ポチ がワンワンと吠えています（子のメソッド）親クラス：Animal（動物）
└── 子クラス：Dog（犬）
└── 子クラス：Cat（猫）
子クラスの中で親クラスのプロパティやメソッドを呼び出す
子クラス内で親クラスの要素を再利用したい場合には「super」を使って参照することが可能です。
親クラスのコンストラクタを呼び出す
サブクラス（子クラス）でconstructorを定義する場合、必ず最初にsuper()を呼び出す必要があります。
class Animal {
constructor(name) {
this.name = name;
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name); // Animalのconstructorを呼び出す
this.breed = breed;
}
info() {
console.log(`${this.name}は${this.breed}の犬です。`);
}
}
const dog1 = new Dog("ポチ", "柴犬");
dog1.info(); // ポチは柴犬の犬です。親クラスのメソッドを呼び出す
子クラス内で親クラスのメソッドを再利用したい場合にもsuperを使います。
class Person {
greet() {
console.log("こんにちは！");
}
}
class Student extends Person {
greet() {
super.greet(); // Personのgreet()を呼び出す
console.log("学生です！");
}
}
const student1 = new Student();
student1.greet();
// こんにちは！
// 学生です！| 使い方 | 説明 |
|---|---|
super() | 親クラスのconstructorを呼ぶ |
super.method() | 親クラスのメソッドを呼ぶ |
まとめ
なぜクラスを使うの？
- 共通の処理をまとめて再利用できる
- コードの重複を減らせる
- 拡張しやすく、メンテナンスが楽になる
| 用語 | 意味 | 例 |
|---|---|---|
| 親クラス | 基本となるクラス | Animal |
| 子クラス | 親から機能を引き継ぐクラス | Dog extends Animal |
extends | 親クラスを継承するときに使うキーワード | class Dog extends Animal {} |
super() | 親クラスのconstructorやメソッドを呼び出すキーワード | super(name) |
Reply