JavaScript | クラス継承でアロー関数を使うときの実務的な注意点

では、「通常メソッド」と「アロー関数」を混ぜて使うクラス設計の練習問題を出してみますね。実際にコードを書いてみると理解が深まります。

練習問題 1：タイマーアプリ

次の仕様を満たす Timer クラスを作ってください。

• start メソッドで1秒ごとにカウントアップする
• stop メソッドでカウントを止める
• reset メソッドでカウントを0に戻す
• tick は アロー関数で定義し、setInterval のコールバックに使う

👉 ヒント：tick を通常メソッドにすると this が壊れるので、アロー関数にするのがポイントです。

練習問題 2：Todoリスト

次の仕様を満たす TodoApp クラスを作ってください。

• addTodo メソッド（通常メソッド）で新しいタスクを追加する
• removeTodo メソッド（通常メソッド）でタスクを削除する
• handleAdd は アロー関数で定義し、ボタンのクリックイベントに使う
• render メソッド（通常メソッド）でタスク一覧を表示する

👉 ヒント：イベントハンドラはアロー関数、共通処理は通常メソッドに分けるのがコツです。

練習問題 3：継承と super

次の仕様を満たす Animal クラスと Dog クラスを作ってください。

• Animal クラスに speak メソッドを定義（通常メソッド）
• Dog クラスで speak をオーバーライドし、super.speak() を呼んでから "ワン！" を出力する
• Dog クラスに bark を アロー関数で定義し、イベントハンドラ的に呼び出せるようにする

👉 ヒント：super を使うには通常メソッドでないといけません。

✅ まとめ

• イベントハンドラやコールバック → アロー関数
• 共通処理や継承で super を使う → 通常メソッド
• 実務では「混ぜて使う」のが自然で効率的