九回目ーークラス、メソッドの復習ーー
エディタで確かめながらしているので間違っていないと思います。
なのですが、同じ結果を出す方法がたくさんあり過ぎて何を使えばいいのか初心者の素人には難し過ぎますね。
意識が散漫として惰性的になっていたのを初心に帰り、まず『クラス』と『メソッド』の復習、それから新たに『オーバーライド』について書いていきます。
学んだことを書くだけでなく、何が難しかった、こう理解した、まだ疑問がある点を書いておこうと思います。
１．クラス
『クラス＝class』とは模型です。
模型というと大体のおもちゃ屋さんにあるプラスチックや樹脂で出来たプラモデル、家や車に限らず紹介する場合に作る三次元データ等を言いますね。
javascriptでの『class』は【基礎】、若しくは【基準】とも言えるのではないかと私は思いました。
例えば、料理のサンプル、漫画や文庫本、ゲームのディスク等です。
料理のサンプルは知りませんが、漫画や文庫本は会社が異なってもサイズが異なることはなく、ゲームも多くの開発会社があるのに同じ機種で同じディスクで作られています。
このような後から好みのペイントや組み込みなどが出来るものを言うのだと思いました。
まあ、まだ『class』を使った遊びとかをしていないので詳しい部分は先の話になりますが。
では、『class』の定義をします。
class クラス名 {
//処理内容
}
クラス名○○を定義しますよ、というだけの話です。
変数や定数のやり方と殆ど変わりありません。
同じですが、『=』が付かないのは注意が必要です。
２．コンストラクタ
次に『コンストラクタ＝constructor』についてです。
分かりやすく言うと、設計図自体の事です。
『class』を実行処理するには必要な記述で、これが無ければ必ずエラーとなります。
書く所は『class』の{}の中すぐです。
class Name = {
constructor() {
//処理内容
}
}
注意点は処理をさせるので『関数』であるということ。
関数は関数名の後に()を付けるのが当たり前なので、『constructor』の後にも必ずつけます。
これもエラーになる要因の一つです。
そして、出力するにはjavascriptの基本である『代入』が必要で
const 定数名 = new クラス名();
この形にはめれば出力されます。
class Name {
constructor() {
console.log(“私の名前は049です。”);
}
}
//定義したクラスを定数に代入
const name = new Name();
これだけでコンソール画面に出力される『class』のコードが組めました。
『class』にも定数にもnameを使っているので分かり難いと思いますが、別に同じ名前である必要性は全くありません。
AとBでも良いですし、頭文字を大きくするのが『class』と分けておけばいいと思います。
ですが、これを模型とは言いません。
どう見ても模型の中身(処理内容)に記述があるからです。
では、どのようにしたらいいのか。
そこに出てくるのが『オブジェクト{ }』です。
オブジェクトはプロパティ名と値を持つものでしたね。
しかも『class』も『constructor』も{ }を使っているという分かりやすく覚えやすいようになっています。
書き方はプロパティ名の最初に『this』を付けるだけ。
this.name = “049”;
こんな感じです。
変わりないのですごく覚えやすいですね。
でも、そこを理解していなかったがために混乱して難しく思っていたのです。
で、先ほどのコードに組み込むと
class Name {
constructor() {
this.my = “049”;
this.study = “Javascript”;
}
}
//定義したクラスを定数に代入
const name = new Name();
console.log(“私の名前は” + name.my + “です。”);
console.log(“今は” + name.study + “を勉強中です。”);
前回の復習で言った様に、態々『${` `}』を使わずとも『“”』でくくれば演算と同じ方式で出来ます。
出力結果は
【私の名前は049です。】
【今はJavascriptを勉強中です。】
ですが、まだ設計図は完成していません。
というか、consoleをオブジェクトに変えただけなので設計図の変更が出来ていません。
ではどのようにすればいいのか。
今度こそ正解を言います。
必要なのは『引数』と『呼び出し』となります。
復習ですが
引数とは、関数名()の()の中身のことを言います。
呼び出しとは、関数を実行する鍵の()の中身のことを言います。
最初に書く入れ物の事が『引数』、その入れる内容が『呼び出し』です。
なので、再び上記のコードを使い
class Name {
constructor(my, study) {
this.my = my;
this.study = study;
}
}
このように『class』内に変更を加えます。
分かり難いのなら『引数』の頭文字を大文字にしても良いですし、ローマ字にするのも手です。
そして、『呼び戻し』を『class』の鍵の()に記述します。
const name = new Name(“049”, “Javascript”);
後は同じコンソール出力のコードを書いて完成です。
これで設計図が出来上がりました。
例えば、nameに『田中』、studyに『数学』と書き換えれば
【私の名前は田中です。】
【今は数学を勉強中です。】
このように簡単に書き換えられます。
３．メソッド
一カ月前の学習で変に難しい事や説明をしたような記憶があります。
もしかしなくても的外れなことを言っているとも思います。
では、改めてメソッドについて私が理解したことを話します。
私が考えたメソッドはズバリ、『関数』ですね。
関数＝メソッドなのではなく
【実行処理】が『関数』で、その【関数名】が『メソッド』
ということです。
どういうことかというと
function greet() {
console.log(“こんにちは”);
}
greet();
この記述が関数で、greetがメソッドという認識と言うことです。
厳密には違うのかもしれませんが、多分こんなもんです。
そして、このメソッド=関数を『class』の中に書くことができます。
そのメリットが何なのかはちょっとわかりませんが。
class Name {
constructor(my, study) {
this.my = my;
this.study = study;
}
greet() {
console.log(“こんにちは”);
}
}
const name = new Name(“049”, “Javascript”);
console.log(“私の名前は” + name.my + “です。”);
console.log(“今は” + name.study + “を勉強中です。”);
こうすることで最後に【こんにちは】と出力できます。
勿論consoleの上に書けば最初に【こんにちは】と出力させることも出来ます。
その場合、console自体もメソッドの関数で括り、greetの下に記述すると同じ結果を出せます
class Name {
constructor(my, study) {
this.my = my;
this.study = study;
}
greet() {
console.log(“こんにちは”);
}
info() {
console.log(“私の名前は” + this.my + “です。”);
console.log(“今は” + this.study + “を勉強中です。”);
}
}
const name = new Name(“049”, “Javascript”);
こうですね。
パッと見ただけではわかりませんが、移動させたconsoleの中身が変わっています。
『name』が『this』に変わっています。
これは『class』内に記述している為と思えば良いでしょう。
逆に言うと、『{ }』の外に書いていたから定数名の『name』を頭に付けていた、ということです。
そして、極めつけにメソッド内でメソッドを呼び出す方法もあり
info() {
this.greet();
console.log(“私の名前は” + this.my + “です。”);
console.log(“今は” + this.study + “を勉強中です。”);
}
それにも『this』を使い、結局のところ『class』内で出力する物にはすべて付ける、ということになりました。
今回は此処までとします。
『オーバーライド』について最初に書いていますが、次回と言うことになります。
現在javascriptのランダム関数という奴でおみくじ、それからモンスターの出現を考えている最中なので、もしかするとそちらを書くかもしれませんが。
最終目的
・勿論手に職を付ける、若しくはお金を稼ぐ
・簡単なゲーム(リバーシや簡易シューティングなど)を作る
・フリーソフトで販売
短期目標
・大まかな流れを覚える
・プログラミングを理解する
上記の内容は覚える中で変わることがあると思います。
