継承(クラスの拡張)

このレッスンでは、JavaScriptのextendsを使ったクラスの継承を学び、共通の機能を持つクラスを効率よく設計できるようになることを目標にします。「JavaScript extends 使い方」「JavaScript クラス 継承」で調べている方向けの内容です。

extendsを使うと、既存のクラスの機能を引き継いだ新しいクラスを作れます。これを継承と呼びます。super()で親クラスのconstructorの処理を呼び出せます。「動物」という共通の設計図をもとに、「犬」「猫」のようにそれぞれ独自の鳴き方を追加していくイメージです。共通する部分を親クラスにまとめておくことで、同じコードを何度も書く手間を省けます。

サンプルコードでは、Animalクラスを親としてDogクラスを継承しています。Dogクラスではspeak()メソッドを独自に定義し直しており、これを「オーバーライド(上書き)」と呼びます。new Dog("ポチ")で作ったインスタンスは、Animalから引き継いだnameプロパティと、Dog独自のspeak()の両方を持っています。

初心者がよくつまずくのが、子クラスのconstructorの中でsuper()を呼び忘れることです。継承したクラスで独自のconstructorを定義する場合、thisを使う前に必ずsuper()を呼んで親クラスの初期化を行う必要があり、これを忘れるとエラーになります。継承の階層が深くなりすぎると設計が複雑になる点にも注意しましょう。

実際の開発現場では、「基本のボタン」を継承して「送信専用ボタン」「削除専用ボタン」を作るなど、共通部分をまとめつつ一部だけ機能を変えたいときに継承が使われます。オブジェクト指向設計の代表的なテクニックとして、大規模なアプリケーションの設計でも重要な考え方です。

親クラスのメソッドを完全に上書きするのではなく、親の処理も活かしつつ追加の処理を行いたい場合は、子クラスのメソッド内でsuper.speak()のようにsuperを使って親クラスのメソッドを呼び出すこともできます。

継承は便利な一方、親クラスと子クラスの関係が複雑になりすぎると、逆にコードが読みにくくなることもあります。「継承すべきか、それとも別々のクラスにすべきか」を設計段階で慎重に考えることも、実務では重要なスキルです。