九回目ーー継承、オーバーライドーー
今回は継承とオーバーライドについてです。
実際纏めてみると理解できる部分もあるので、その理解できる部分を忘れないようにする必要もあり、小説のネタを考えてきた時と同じようにメモ帳に書いておくのが良いと思いましたね。
１．継承
文字通り作った『Aクラス』を『Bクラス』という物に変える方法です。
使う場合はAとBに共通部分のあるクラスであることが必要……というより共通部分を引き継ぐとか、基礎にして別のクラスにするとかでしょうか。
はいまあ、なんのこっちゃ、という感じですね。
これはまた理解するのに時間がかかりそうで心の揺らぎを感じます。
ですが、何と無くjavascriptの書き方というか、こういうものなのだと言うのを理解でき始めた実感があるので、ポイントを探して覚え理解しようと思います。
話を戻しますが、『継承』について少し調べてみました。
メリットとして『コードの再利用』が挙げられるそうです。
ボタンを作るだけなら数行、多くても十数行で動きのあるボタンが作れます。
これがホームページ、しかもアニメーションやスライドショーや隠し要素などを盛り込むと何百というコードを書かなければならなくなり読むのが憂鬱になるんですよ。
なので、少しでも書くコードを少なくする、書いたコードを再利用するというのは共感できます。
ただ、難しいんですよね。
例えるなら『RPG』が挙げられるそうです。
初期キャラクターのクラスを『戦士クラス』、『魔法使いクラス』、『盗賊クラス』と作る感じだとか。
継承しただけでは皆同じになるので、戦士クラスには剣や斧、魔法使いには杖や本、盗賊には爪や鞭を個別に追加できるのも継承のメリットの一つです。
それだけなら理解できるのですが、実際に書くと頭が混乱するんですよね。
クラスを継承するには以下のコードを追加します。
class B(新しいクラス) extends A(既存クラス) { }
それを踏まえて前回のクラスに追加していきたいと思います。
class Name {
constructor(my, study) {
this.my = my;
this.study = study;
}
greet() {
console.log(“こんにちは”);
}
info() {
this.greet();
console.log(“私の名前は” + this.my + “です。”);
console.log(“今は” + this.study + “を勉強中です。”);
}
}
const name = new Name(“049”, “Javascript”);
name.info();
『誰が、何を勉強する』という内容のNameクラスでした。
これを別のクラスに継承するということは『太郎さんが、数学を勉強する』、『花子さんが、英語を勉強する』というように変えられる、ということです。
ただ、これだけなら新しいクラスにせず最後から2行目の『呼び戻し部分』を変更すればいいという話なんですが、一応書きます。
同じ部分は省略し、継承するクラス『Tanaka』を作り出力まで行います。
class Tanaka extends Name {
}
const tanaka = new Tanaka(“太郎さん”, “数学”);
tanaka.info();
『呼び出しを代入する定数』も変えるので最後の一行、関数の鍵も変わっています。
注意点はそこで、頭が混乱してくる部分でした。
では、次にRPGのキャラクターを使い継承したクラスにそれぞれの追加項目を入れたいと思います。
２．継承2
初期キャラクタークラスのコードを作ります。
内容は『職業』、『HP』、『MP』、『得意武器』、『特技』の五つとし、『勇者クラス』を作って台詞を追加します。
class Character {
constructor(name, HP, MP, weapon, atack) {
this.job = name;
this.hitPoint = HP;
this.magicPoint = MP;
this.specialWeapon = weapon;
this.atackComand = atack;
}
status() {
console.log("職業:" + this.job);
console.log("HP:" + this.hitPoint + "/MP:" + this.magicPoint);
console.log("専用武器:" + this.specialWeapon);
console.log("特技:" + this.atackComand);
}
}
class Brave extends Character {
greet() {
return "明日、16歳の誕生日か……夢の世界へ旅、たと、ぅzzz";
}
}
const brave = new Brave("勇者", 100, 75, "伝説の剣", "斬撃と雷魔法");
brave.status();
const speak = brave.greet();
console.log(brave.job + "『" + speak + "』");
一応しっかりと出力出来たので間違ってはいないと思います。
省略できる部分やおかしい使い方をしているとは思いますが(そこさえ分かりません汗)、こんな感じですね。
最後のセリフの部分はgreet関数でconsoleを使えば良い話なのですが、戻り値(return)も使えるということでこんな形となっています。
私が間違えやすかったところは、まだ覚えきれていないのでつい最初の一行、class○○の後に『＝』を付けてしまう所です。
他にもconstructorの中身をthis.の後を引数だと間違えたり(本当は変数名)しました。
間違えると時間がかかりますし、頭が混乱していきます。
間違えてもエディタ側がエラーを教えてくれるのですが、まあ英語ですから。それにエラーは分かっても対処が分からない。先ほども言いましたが、適したコードを書けているかもわからない。
それでも結果が出ていればそれでいいとも思います。
３．オーバーライド
いよいよ『オーバーライド(上書き)』です。
そう、上書き――私のイメージでは既存クラスの内容を書き換える……手を加えるという感じ、ですかね？
先ほどの『勇者クラス』の中にキャラクタークラスのstatus関数とconst brave～を入れます。
上書きというより追加とも言えますし、status関数の中身を書き換えてもいます。
結局のところ見たら何が起きているのか分かりますが、それが何の為なのかわからず、一から作れと言われても難しいですね。
class Brave extends Character {
status() {
console.log("職業:" + this.job);
console.log("HP:" + this.hitPoint + "/MP:" + this.magicPoint);
console.log(“専用武器:” + this.specialWeapon);
console.log("特技:" + this.atackComand);
const speak = this.greet();
console.log(this.job + "『" + speak + "』");
}
greet() {
return "明日、16歳の誕生日か……夢の世界へ旅、たと、ぅzzz";
}
}
const brave = new Brave("勇者", 100, 75, "伝説の剣", "斬撃と雷魔法");
brave.status();
変わった部分
CharacterクラスのstatusメソッドをBraveクラスの中に作り、最後の二行分を付けたすこと。
外に遭ったconst speak = brave.greet();はクラスの内部になるのでbraveが『this』に変更されること。
その下のコードもthisに変わっている。
新しいクラスもクラスであることは変わらないので、constructorを使うことができ、新しい配列を加えられます。
クラス{ }内すぐに
constructor(name, HP, MP, weapon, atack, sub) {
super(name, HP, MP, weapon, atack);
this.subJob = sub;
}
と、追加します。
新しいクラスに追加したい項目を先に書き、『super』の中には書かず同じようにプロパティを書く
statusメソッド内にサブ職業を出力するconsole
呼び出しに『錬金術』を追加
これでサブ職業も追加できました。
内容の出力はstatusメソッドの中で行われているので、status関数の呼び出しによって行われます。
クラスでの継承でしたが、継承自体はクラスでなくともできるみたいですね。
纏めてみると大体理解できるのですが、一から書こうとすると難しく、しっかりと理解できていないのだなぁ、と思えてなりません。
まずはjavascriptの勉強を終え、それから習ったことを使用したゲームやゲーム内のイベントなどを作っていこうと考えています。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
