クラスの中でアロー関数を使う理由は、主に this の扱い にあります。初心者がよくつまずくポイントなので、例を交えて整理しますね。
通常のメソッドとアロー関数の違い
通常のメソッド
class Counter {
constructor() {
this.count = 0;
}
increment() {
console.log(this); // 呼び出し方によって変わる
this.count++;
}
}
const c = new Counter();
c.increment(); // OK → this は c を指す
const fn = c.increment;
fn(); // エラー → this が undefined（またはwindow）になる
→ 通常のメソッドは、呼び出し方によって this が変わるため、イベントハンドラやコールバックに渡すときに this が失われやすいです。
アロー関数を使った場合
class Counter {
constructor() {
this.count = 0;
}
// プロパティにアロー関数を代入
increment = () => {
console.log(this); // 常にクラスのインスタンスを指す
this.count++;
}
}
const c = new Counter();
c.increment(); // OK
const fn = c.increment;
fn(); // これでもOK → this は c のまま
→ アロー関数は 自分専用の this を持たず、外側の this を固定的に使う ので、呼び出し方に左右されません。
クラス内でアロー関数を使うメリット
- イベントハンドラで便利
DOMイベントやReactのイベントでthisが変わらないので、bind(this)を書かなくて済む。
class Button {
constructor(label) {
this.label = label;
document.querySelector("button")
.addEventListener("click", this.handleClick);
}
handleClick = () => {
console.log(this.label); // 常にインスタンスのlabelを参照できる
}
}
- コールバック関数に渡しても安全
setTimeoutや配列操作に渡してもthisが壊れない。
class Timer {
constructor() {
this.seconds = 0;
}
start = () => {
setInterval(() => {
this.seconds++;
console.log(this.seconds);
}, 1000);
}
}
const t = new Timer();
t.start(); // 秒数が正しくカウントされる
- コードがシンプルになる
constructor内でthis.method = this.method.bind(this)と書く必要がなくなる。
⚠️ 注意点
- クラスのプロトタイプにメソッドが追加されず、インスタンスごとに関数が作られるため、メモリ効率は通常メソッドより劣る場合があります。
- そのため、イベントハンドラやコールバックで使うメソッドはアロー関数、
共通処理で多くのインスタンスが共有するメソッドは通常のfunction、と使い分けるのが実務的です。
✅ まとめ
クラス内でアロー関数を使う理由は、this を固定できるから。特にイベントハンドラやコールバックで「this がundefinedになる」問題を避けられるのが大きなメリットです。