では「class構文」と「関数リテラル／アロー関数」の関係を整理してみましょう。ここを押さえると、オブジェクト指向の理解がぐっと深まります。
class構文とは？
- JavaScriptでオブジェクトを作るための「設計図」を書く仕組み
- 実際には「コンストラクタ関数＋prototype」をわかりやすく書き直したもの
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`こんにちは、私は${this.name}です`);
}
}
let taro = new Person("太郎");
taro.sayHello(); // → こんにちは、私は太郎です
classと関数リテラル／アロー関数の違い
| 項目 | 関数リテラル | アロー関数 | class |
|---|---|---|---|
| 書き方 | function(){} | ()=>{} | class { constructor(){} } |
| thisの扱い | 呼び出し方で変わる | 外側のthisを引き継ぐ | インスタンス自身を指す |
| コンストラクタとして使えるか | ✅ 使える | ❌ 使えない | ✅ 使える |
| prototypeを持つか | ✅ 持つ | ❌ 持たない | ✅ 持つ |
| 主な用途 | 汎用的な関数、メソッド | 短い処理、コールバック | オブジェクト設計、クラスベースの開発 |
例題：同じことを3パターンで書いてみる
1. 関数リテラル（コンストラクタ関数）
function Animal(name){
this.name = name;
}
Animal.prototype.say = function(){
console.log(this.name + "が鳴いた！");
};
let dog = new Animal("ポチ");
dog.say(); // → ポチが鳴いた！
2. アロー関数（コンストラクタ不可）
let Animal = (name) => {
this.name = name;
};
// let dog = new Animal("ポチ"); // エラー！
👉 アロー関数は コンストラクタに使えない。
3. class構文
class Animal {
constructor(name){
this.name = name;
}
say(){
console.log(`${this.name}が鳴いた！`);
}
}
let dog = new Animal("ポチ");
dog.say(); // → ポチが鳴いた！
✅ まとめ
- 関数リテラル：昔からある書き方。コンストラクタやメソッド定義に使える
- アロー関数：短い処理やコールバックに最適。コンストラクタには使えない
- class構文：オブジェクト指向的に「設計図」を書くときに使う。内部的には関数リテラル＋prototypeの糖衣構文
💡 初心者へのおすすめ：
- 普段の処理 → アロー関数
- オブジェクトの設計 → class構文
thisを細かく制御したいときや古いコード対応 → 関数リテラル