では具体的な場面で「クラス内の通常メソッド」と「アロー関数」の違いを見比べてみましょう。特に イベント処理 や Reactコンポーネント での使い分けが分かりやすいです。
1. ブラウザのイベント処理での違い
通常メソッドの場合
class Button {
constructor(label) {
this.label = label;
const btn = document.querySelector("button");
btn.addEventListener("click", this.handleClick);
// ← thisが失われる
}
handleClick() {
console.log(this.label); // エラー: thisはundefined
}
}
new Button("送信");
→ 通常メソッドは呼び出し方によって this が変わるため、イベントリスナーに渡すと this がインスタンスを指さなくなります。
対策: constructor 内で this.handleClick = this.handleClick.bind(this) と書く必要がある。
アロー関数の場合
class Button {
constructor(label) {
this.label = label;
const btn = document.querySelector("button");
btn.addEventListener("click", this.handleClick);
// ← thisが固定されているのでOK
}
handleClick = () => {
console.log(this.label); // "送信"
}
}
new Button("送信");
→ アロー関数は外側の this を固定するので、イベントリスナーに渡しても問題なく動作します。
2. Reactコンポーネントでの違い
通常メソッドの場合
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
// thisを固定しないとエラーになる
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({ count: this.state.count + 1 });
}
render() {
return <button onClick={this.handleClick}>+1</button>;
}
}
→ bind(this) を忘れると this.setState が呼べずエラーになります。
アロー関数の場合
class MyComponent extends React.Component {
state = { count: 0 };
handleClick = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return <button onClick={this.handleClick}>+1</button>;
}
}
→ アロー関数を使えば bind(this) が不要になり、コードがシンプルになります。
まとめ
- 通常メソッド
- メモリ効率が良い（全インスタンスで共有される）
- ただし
thisが呼び出し方で変わるので注意
- アロー関数
thisが固定されるのでイベントやコールバックに便利- ただしインスタンスごとに関数が生成されるので、たくさんのインスタンスを作る場合は非効率になることも
👉 実務的には、
- イベントハンドラやコールバック用メソッド → アロー関数
- 共通処理やユーティリティ的なメソッド → 通常メソッド
と使い分けるのがベストです。