【JavaScript】class構文の継承方法を解説【extends】

という方向けのご紹介です。

執筆者

・独学でキルミーベイベーのゲームを作っている男
・javascriptが大好きな男

『クラス構文』の活用方法

クラス構文は、変数や定数をよりシンプルに活用するための機能です。

その中に「継承」という機能があります。
少しだけコツを覚えるだけでコードをより簡単にまとめることができる便利な機能です。

ちなみに、classの基本的な使い方はこちらでご紹介しておりますので、ご活用ください。class構文の使い方が驚くほどわかる！【オブジェクト指向】

継承　とは

継承を一言で表すと

となります。

継承、の言葉通りデーターを引き継ぐことです。
ゲームで言えば強いキャラのスキルを他キャラにピンポイントで引き継がせる、とイメージいただくとよいと思います。

継承には主に「extends」「super」の2つの方法がありますが
今回はより即効性があり、シンプルに使える「extends」を解説します。

サンプルコードと一緒に解説を致します。
コピペだけで使えるコードも載せておりますので是非、ご活用下さい。

extends の使い方

「extends」について説明します。

サンプルコード見てましょう。赤いボタンを押すとメッセージが表示されますね。

まずは継承元、関数を引き継ぎたいクラスを確認しましょう。

class habu{
　showMesseage(){
　　change.textContent = "「将棋の天才です」";
　　message.textContent = "「将棋の天才です」";
　}
}

showMesseage関数、今はhabu(羽生)クラスの中でしか使えません。
これをhuzii(藤井)クラスでも使えるように設定します。

class huzii extends habu{
  //[extends 〇〇] の〇〇で使われている関数を使用可能になる//
}

「class huzii extends habu」は
『habuクラスで設定した関数をhuziiクラスでも使えるようにする』という意味です。

extends の使用タイミング

extendsは、extendsの後に引き継ぎたいクラスの名前を書くだけなのでとてもシンプルですね。

という時に是非使ってみてください。

まとめ

最後に、クラス構文のextendsを使用する順番についてまとめます。