IT~情報と技術

ドットインストール「詳解JavaScriptオブジェクト編」で勉強#07(クラスの継承)

ドットインストールというオンラインのプログラミング講座に「詳解JavaScript」というのがあります。

これでJavaScriptの基礎を勉強していきましょう。「基礎文法編」の次は「オブジェクト編」です。

今日のメイントピックは、クラスを継承してみよう、です。

詳解JavaScript

ドットインストールのレッスン一覧に「②もっと詳しくJavaScriptを学ぼう」というセクションがあります。

ここに3つ並んでいる

  • 詳解JavaScript 基礎文法編(全24回)
  • 詳解JavaScript オブジェクト編(全23回)
  • 詳解JavaScript DOM編(全15回)

で勉強していきたいと思います。

これまでの勉強した内容はこちらです。

オブジェクト編 #07

詳解JavaScript 基礎文法編 #07 クラスを継承してみよう ←講座はこちら

今日は、クラスを継承してみる、です。

クラスの継承

親クラスと子クラス

あるクラス(親クラス)をもとにして、似たようなクラス(子クラス)を作ることができます。

前回に引き続き、MDNの初心者のためのオブジェクト指向 Java​Scriptを見てみましょう。ここにある、専門のクラスあたりが参考になります。

このケースで求めているのは、包括的な人物ではなく、より特定のタイプである、教師と生徒です。OOP では、他のクラスを元にした新しいクラスを作ることができます。これらの新しい子クラスは、親クラスからデータやコード機能を継承することができ、すべてのオブジェクトタイプに共通する機能を、重複させるのではなく、再利用することができます。クラス間で機能が異なる場合は、必要に応じて特殊化された機能を直接定義することができます。(MDNの専門のクラスから)

まとめるとこんなことが書いてあります。

  • 親クラスのPerson:包括的な人物
  • 子クラスのTeacherとStudent:特定の人物タイプ
  • 子クラスは、親クラスからデータやコード機能を継承する(再利用する)ことができる。
  • 各子クラスには、その子クラスに必要な機能を直接定義することができる。
親クラスと子クラスMDNにある、親クラスから子クラス継承する説明。Personというクラス(親クラス)から、Teacher(子クラス①)とStudent(子クラス②)を作っています。
  • 英語の”inherit”は「継承」

講座の内容を表にするとこんな感じでしょうか。

name、score、showInfo()は親クラスであるPlayerから継承されて、子クラスのSoccerPlayerでは、独自のnumber、kick()が追加で定義されています。

親クラス 子クラス インスタンス
Player SoccerPlayer tsubasa
this.name 継承 tsubasa.name = ‘tsubasa’
this.score 継承 tsubasa.score = 99
this.number tsubasa.number = 10
showInfo() 継承 fkoji.showInfo() = name: tsubasa score: 99
kick() kick() = ‘Goal!’

今日のまとめ

親クラスから子クラスへの継承についてでした。

超スローペースなプログラミング学習ですが、マイペースでぼちぼち続けています。

JavaScriptはちょっと難しいですが、がんばって一通りやってみましょう!