JavaScriptのクラスってありますよね。
本記事では、クラスの基本概念、実際の使用方法、そしてクラスが導入される前の方法について解説します。
はじめに理解しておこう
クラスの使い方を理解するにあたって、３つの言葉の理解をしておく必要があります。
それはクラス、インスタンス、コンストラクタの３つです。
順番に解説していきます。
クラスとは？
クラスは、オブジェクトを生成するためのテンプレートです。設計図みたいなものだと思ってください。
クラスを定義することで、同じ構造と機能を持つオブジェクトを簡単に作成することができます。
JavaScriptでは、classキーワードを使ってクラスを定義します。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}この例では、Personという名前のクラスを定義しています。
クラスにはプロパティ（nameとage）とメソッド（greet）があります。
インスタンスとは？
インスタンスは、クラスをもとに作成された具体的なオブジェクトです。
クラスがテンプレートであるのに対して、インスタンスはそのテンプレートを使って生成された実際のオブジェクトです。
よりわかりやすくいうと、
クラスが設計図だとすると、インスタンスは設計図をもとに作った実際の「モノ」だと解釈してください。
（この辺は概念的に覚えるしかない）
let person1 = new Person('Alice', 30);
person1.greet(); // Hello, my name is Alice and I am 30 years old.ここでは、Personクラスのインスタンスであるperson1を作成しています。newキーワードを使ってクラスからインスタンスを生成します。
コンストラクタとは？
さて、ではコンストラクタとはなんでしょうか。
コンストラクタは、クラスのインスタンスが生成されるときに呼び出される特別なメソッドです。
インスタンスの初期化を行うために使用され、クラスのプロパティに初期値を設定します。
簡単にいうと、コンストラクタはnew したときに動くプロパティ初期化用メソッドです。
class Car {
constructor(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
displayInfo() {
console.log(`Car: ${this.make} ${this.model} (${this.year})`);
}
}
let myCar = new Car('Toyota', 'Corolla', 2021);
myCar.displayInfo(); // Car: Toyota Corolla (2021)この例では、Carクラスのコンストラクタが呼び出され、
make、model、yearプロパティが初期化されています。
コンストラクタがないとどうなる？
上記の例でいうと、コンストラクタが無ければ、インスタンスのプロパティが正しく初期化されないため、
メソッドを呼び出したときに期待される出力が得られません。
具体的には、constructorメソッドがなければ、make、model、yearのプロパティが設定されず、
undefinedとして扱われてしまいます。
実際に使ってみよう
では実際にクラスを使ってみましょう。
コードで解説
今回は色んな味のアイスクリームを提供するというの例にしてプログラムを書いてみます。
class IceCream {
constructor(name, flavor, color) {
this.name = name;
this.flavor = flavor;
this.color = color;
}
displayInfo() {
console.log(`IceCream: ${this.name}, Flavor: ${this.flavor}, Color: ${this.color}`);
}
}
// アイスクリームのインスタンスを生成
let chocoMint = new IceCream('Choco Mint Delight', 'Chocolate Mint', 'Green');
let vanillaDream = new IceCream('Vanilla Dream', 'Vanilla', 'White');
let strawberrySweet = new IceCream('Strawberry Sweet', 'Strawberry', 'Pink');
// インスタンスの情報を表示
chocoMint.displayInfo(); // IceCream: Choco Mint Delight, Flavor: Chocolate Mint, Color: Green
vanillaDream.displayInfo(); // IceCream: Vanilla Dream, Flavor: Vanilla, Color: White
strawberrySweet.displayInfo(); // IceCream: Strawberry Sweet, Flavor: Strawberry, Color: Pink
クラスは、アイスクリームの設計図です。IceCreamというクラスを定義し、このクラスにはアイスクリームの基本的な特性（name、flavor、color）が含まれています。
コンストラクタは、クラスのインスタンスが生成されるときに呼び出される特別なメソッドです。constructorメソッドの中で、アイスクリームのname、flavor、colorを初期化しています。これにより、インスタンスが作られたときにこれらの特性が設定されます。
インスタンスは、クラスから作られた具体的なオブジェクトです。ここでは、IceCreamクラスからchocoMint、vanillaDream、strawberrySweetという3つのインスタンスを作成しています。それぞれのインスタンスは、異なるname、flavor、colorを持っています。
コードを実行すると、それぞれのアイスクリームの情報が表示されてますね。
このように、クラスを使って設計図を作成し、コンストラクタを使って特性を設定し、具体的なインスタンスを生成して情報を表示することができます。
おまけ：ES5までclassは使えなかった
ここからはおまけでJavaScriptでは、ES5までclassが使えなかったという話をします。
今は使えるんで、見なくていいやって人は飛ばしてください。
関数オブジェクトとコンストラクタを使って疑似的なクラスを実現できた
ES5以前のJavaScriptではクラス構文がなかったため、
関数オブジェクトとコンストラクタ関数を使って同様の機能を実現していました。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
let person2 = new Person('Bob', 25);
person2.greet(); // Hello, my name is Bob and I am 25 years old.ES6以降のクラス構文は、オブジェクト指向プログラミングをより簡潔に書けるようになっています。
クラスを使うことで、コードがより読みやすく、保守しやすくなるのでクラスの書き方は理解しておくといいでしょう。
