では「クラス設計でアロー関数と通常メソッドを混ぜて使う例」を見てみましょう。実務でありがちな「イベントハンドラ＋共通処理」を題材にします。
例：Todoリストクラス
class TodoApp {
constructor() {
this.todos = [];
// ボタンにイベントを登録
document.querySelector("#addBtn")
.addEventListener("click", this.handleAdd);
}
// ✅ アロー関数：イベントハンドラ（thisを固定したい）
handleAdd = () => {
const input = document.querySelector("#todoInput");
const text = input.value.trim();
if (text) {
this.addTodo(text); // ← thisが常にインスタンスを指す
input.value = "";
}
};
// ✅ 通常メソッド：共通処理（インスタンス間で共有したい）
addTodo(text) {
this.todos.push(text);
this.render();
}
// ✅ 通常メソッド：描画処理（インスタンス間で共有したい）
render() {
const list = document.querySelector("#todoList");
list.innerHTML = this.todos.map(t => `<li>${t}</li>`).join("");
}
}
💡 ポイント解説
- handleAdd（アロー関数）
- イベントリスナーに渡すので
thisが固定されている必要がある。 - そのためアロー関数で定義。
- イベントリスナーに渡すので
- addTodo / render（通常メソッド）
- どのインスタンスでも同じ処理を共有できる。
- プロトタイプに1つだけ定義されるので効率的。
✅ まとめ
- イベントハンドラやコールバック → アロー関数
thisが壊れないようにするため。
- 共通処理やユーティリティ → 通常メソッド
- インスタンス間で共有でき、メモリ効率が良い。
👉 こうして「アロー関数はイベントやコールバック専用」「通常メソッドは共通処理」という役割分担をすると、クラス設計がスッキリします。