では、クラス継承でアロー関数を使うときの実務的な注意点を整理してみましょう。特に React のクラスコンポーネントや、イベント処理を含むクラス設計でよく出てくる落とし穴です。
通常メソッド vs アロー関数（継承時の違い）
通常メソッド
- プロトタイプに登録される
superが使える（親クラスのメソッドを呼び出せる）- インスタンス間で共有されるので効率的
class Parent {
greet() {
console.log("Hello from Parent");
}
}
class Child extends Parent {
greet() {
super.greet(); // 親のメソッド呼び出しOK
console.log("Hello from Child");
}
}
new Child().greet();
// Hello from Parent
// Hello from Child
アロー関数
- インスタンスのプロパティとして定義される
superは使えない（構文エラー）- インスタンスごとに関数が生成される（効率は落ちる）
class Parent {
greet() {
console.log("Hello from Parent");
}
}
class Child extends Parent {
greet = () => {
// super.greet(); ❌ エラーになる
console.log("Hello from Child");
}
}
new Child().greet();
// Hello from Child
💡 実務的な注意点
- 親クラスのメソッドを拡張したいときは必ず通常メソッドを使う
- 例：
render()をオーバーライドする React クラスコンポーネント - 例：
toString()をオーバーライドするユーティリティクラス
- 例：
- イベントハンドラやコールバックはアロー関数が便利
thisが固定されるので、bind(this)を書く必要がなくなる- React の
onClickハンドラなど
- 混在させるのがベストプラクティス
- 共通処理やオーバーライド → 通常メソッド
- イベントハンドラやコールバック → アロー関数
📝 React クラスコンポーネントでの例
class Counter extends React.Component {
state = { count: 0 };
// アロー関数: イベントハンドラ
handleIncrement = () => {
this.setState({ count: this.state.count + 1 });
};
// 通常メソッド: 親クラス（React.Component）の render をオーバーライド
render() {
return (
<div>
<p>{this.state.count}</p>
<button onClick={this.handleIncrement}>+1</button>
</div>
);
}
}
renderは 通常メソッド（super.render()を呼べるようにするため）handleIncrementは アロー関数（イベントハンドラでthisを固定するため）
✅ まとめ
superを使う必要があるメソッド → 通常メソッド- イベントハンドラやコールバック → アロー関数
- 両方を適材適所で混ぜるのが実務的に最適