5.1 クラスの宣言
ECMAScript 6 (ES6) がJavaScriptに導入されたことで、オブジェクトを作成し、継承を管理するための新しい構造である キーワードclassが出てきたんだ。クラスはオブジェクトを作成したりプロトタイプを使って操作するのに、 より便利で分かりやすいシンタックスを提供してくれるんだよね。
JavaScriptのクラスは、既存のプロトタイプベースの継承システムに対するシンタックスシュガーなんだよね。 これにより、オブジェクトの作成と管理がもっと分かりやすく、構造的になるんだ。
クラスの宣言
JavaScriptでクラスを宣言するには、キーワードclassを使ってクラス名を続けて書く。 クラスの本文は波括弧{}の中に記述するんだ。
例:
JavaScript
class Person {
// クラスのメソッド
greet() {
console.log('Hello!');
}
}
// クラスのインスタンス作成
const person = new Person();
person.greet(); // 出力: Hello!
クラスの式
クラスは宣言と式の両方で宣言できる。クラスの式は名前付きまたは無名にできるんだ。
名前付きクラスの例:
JavaScript
const Person = class PersonClass {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // 出力: Hello!
無名クラスの例:
JavaScript
const Person = class {
greet() {
console.log('Hello!');
}
};
const person = new Person();
person.greet(); // 出力: Hello!
5.2 クラスのフィールドとメソッド
クラスのプロパティ
ES6ではクラスのプロパティはコンストラクタ内でしか宣言できない。しかし、より新しいバージョンのJavaScript（ES2022） ではクラスフィールドが導入され、コンストラクタの外でプロパティを宣言できるようになったんだよね。
コンストラクタ内でプロパティを使う例:
JavaScript
class User {
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
クラスフィールドを使う例（ES2022）:
JavaScript
class User {
username = 'default_username';
email = 'default@example.com';
constructor(username, email) {
this.username = username;
this.email = email;
}
}
const user = new User('john_doe', 'john@example.com');
console.log(user.username); // "john_doe"
console.log(user.email); // "john@example.com"
説明:
- 最初の例では、プロパティ
usernameとemailはコンストラクタ内で宣言され、初期化される - 2番目の例では、プロパティ
usernameとemailはクラスフィールドとしてコンストラクタの外で宣言される
クラスのメソッド
クラスはクラス本文内でメソッドを含むことができる。これらのメソッドは、自動的に作成されたオブジェクトのプロトタイプに追加されるんだ。
クラスのメソッドの例:
JavaScript
class Animal {
speak() {
console.log('Animal speaks');
}
eat() {
console.log('Animal eats');
}
}
const animal = new Animal();
animal.speak(); // 出力: Animal speaks
animal.eat(); // 出力: Animal eats
3.3 クラスの使用例
複雑なオブジェクトの作成
クラスを使うと、様々なメソッドやプロパティを持つ複雑なオブジェクトが作れるんだ。
例:
JavaScript
class Car {
constructor(brand, model) {
this.brand = brand;
this.model = model;
}
startEngine() {
console.log(`${this.brand} ${this.model} engine started.`);
}
stopEngine() {
console.log(`${this.brand} ${this.model} engine stopped.`);
}
}
const myCar = new Car('Toyota', 'Camry');
myCar.startEngine(); // 出力: Toyota Camry engine started.
myCar.stopEngine(); // 出力: Toyota Camry engine stopped.
GO TO FULL VERSION