では「クラス内でアロー関数を避けた方がいいケース（落とし穴）」を整理してみましょう。
アロー関数を避けるべき場面
1. プロトタイプメソッドとして共有したいとき
- アロー関数で定義したメソッドは インスタンスごとに新しい関数が作られる ため、メモリ効率が悪くなります。
- たくさんのインスタンスを作るクラスでは、通常のメソッドの方が効率的です。
class User {
// アロー関数だとインスタンスごとに別の関数が生成される
sayHello = () => console.log("Hello");
}
// 通常メソッドならプロトタイプに1つだけ定義される
class User2 {
sayHello() {
console.log("Hello");
}
}
2. thisを動的に切り替えたいとき
- アロー関数は外側の
thisに固定されるため、呼び出し方でthisを変えたいケースには不向きです。
class Greeter {
constructor(name) {
this.name = name;
}
// 通常メソッドなら call/apply/bind で this を変えられる
greet() {
console.log(`Hello, ${this.name}`);
}
// アロー関数は this が固定されるので切り替え不可
greetArrow = () => {
console.log(`Hello, ${this.name}`);
};
}
const g = new Greeter("Taro");
g.greet.call({ name: "Hanako" }); // Hello, Hanako
g.greetArrow.call({ name: "Hanako" }); // Hello, Taro ← thisが固定されている
3. オブジェクトのメソッドとして使うとき
- オブジェクトリテラルのメソッドにアロー関数を使うと、
thisがそのオブジェクトを指さなくなります。
const obj = {
name: "太郎",
sayName: () => {
console.log(this.name); // undefined
}
};
obj.sayName(); // 期待通り動かない
4. getter/setter や コンストラクタには使えない
- アロー関数は コンストラクタ関数 にはできません。
- また、getter/setter のような特殊メソッドにも不向きです。
class Person {
// NG: コンストラクタにアロー関数は使えない
// constructor = () => { ... } // エラー
constructor(name) {
this._name = name;
}
// getter/setterは通常のメソッドで書く
get name() {
return this._name;
}
}
✅ まとめ
- アロー関数が便利な場面
- イベントハンドラ
- コールバック（map, filter, setTimeoutなど）
thisを固定したいとき
- 通常のメソッドが適している場面
- 多数のインスタンスで共有する処理
thisを動的に切り替えたいとき- getter/setter、コンストラクタ
👉 実務的には「イベントやコールバックはアロー関数、それ以外は通常メソッド」と覚えておくと安全です。