では「タイマーアプリ」のサンプルコードを一緒に作ってみましょう。
ここでは アロー関数と通常メソッドを混ぜて使う のがポイントです。
Timerクラスの実装例
class Timer {
constructor() {
this.seconds = 0;
this.intervalId = null;
}
// ✅ アロー関数：コールバック用（thisを固定したい）
tick = () => {
this.seconds++;
console.log(`経過時間: ${this.seconds}秒`);
};
// ✅ 通常メソッド：共通処理（インスタンス間で共有できる）
start() {
if (this.intervalId === null) {
this.intervalId = setInterval(this.tick, 1000);
}
}
// ✅ 通常メソッド
stop() {
clearInterval(this.intervalId);
this.intervalId = null;
}
// ✅ 通常メソッド
reset() {
this.stop();
this.seconds = 0;
console.log("リセットしました");
}
}
// --- 動作確認 ---
const timer = new Timer();
timer.start();
// 数秒後に止めたいとき
setTimeout(() => {
timer.stop();
console.log("ストップしました");
}, 5000);
💡 解説
- tick（アロー関数）
setIntervalに渡すときにthisが壊れないようにアロー関数で定義。- これで
this.secondsが常にインスタンスを指す。
- start / stop / reset（通常メソッド）
- 共通処理であり、インスタンス間で共有できるので通常メソッドにするのが効率的。
✅ まとめ
- コールバックで使う関数 → アロー関数
- 共通処理やインスタンス間で共有する関数 → 通常メソッド
👉 ここから発展させて「ブラウザの画面に経過時間を表示するタイマー」にしてみると、DOM操作と組み合わせてさらに理解が深まります。