【JavaScript】後からJavaScriptに実装された「class」を試してみました

　どうも！LSSです！！

プログラム言語の進化の歴史の中で、「オブジェクト指向」という考え方が取り入れられるようになり、今やほとんどのプログラム言語で「オブジェクト指向」の概念が取り入れられています。

で、そのオブジェクト指向言語につきものなのが「クラス」という概念です。

オブジェクト＝モノ
クラス＝型

で、「クラスって何？型ってどういう事？」の説明によく引き合いに出されるのが「たい焼き」の話。

「たい焼き」は小麦粉の生地が魚のカタチになっていて、中にあんこが入っているスイーツですが、その「魚のカタチ」にするのに
「焼き上げた後からいちいち魚のカタチになるように彫刻する」
なんて作り方はしません。

あらかじめ、魚のカタチにくぼませた鉄板に生地を流し込むと、たい焼きの形に焼き上がりますね。

この「鉄板」に当たるのが「クラス」
そこに生地を流し込んで焼いた「たい焼き」がオブジェクト、って事になります。

鉄板を成型するのは、小麦粉を焼いた物を彫刻するよりも手間がかかりますが、一度作ってしまえば、あとは生地を流し込むだけで、たい焼きが量産できる、というメリットがあります^^

ところが…JavaScriptには、ながらく「クラス」の概念がありませんでした。

代わりに？「プロトタイプ」という概念がありましたが、比較的近年（2015年頃）になって、JavaScriptにも「クラス」の概念が導入されました！

導入された、といっても、解釈・実行するのはブラウザのほうですが、今ではほとんどのブラウザのJavaScriptで「クラス」を扱う事ができます。
※InternerExplorerは未だに未実装ですが

クラス定義

クラスの定義は、

class クラス名{
クラスの定義内容
}

という書き方で行います。

定義内容の中に「コンストラクタ」という処理を書きます。

書き方は

constructor(引数){処理内容}

という書き方で、これは「そのクラスのオブジェクトが新規作成された時」に行う処理となります。

例えば…

class Taiyaki{
constructor(an){this.an=an;}
}

という「taiyaki」クラスを定義しておき、

oyatsu=new Taiyaki('つぶあん');

としてoyatsuオブジェクトを生成すると、

document.write(oyatsu.an);

とする事で、「oyatsuオブジェクトのanプロパティである'つぶあん'」が出力される事になります。

実行例:

コード

「とりあえず試してみた」だけの内容となりましたｗ

実は、「SVGお絵描きツール」を作ろうと色々考えているうちに、「まだ触った事のないクラスの概念を使ってみるのがいいんじゃないか？」と思い至り、とりあえず試してみた感じです。

以前、Kotlinのほうでもクラスについて試していました。

その頃の記事は↓このカテゴリですが、今回のJavaScript版も同じカテゴリに入れちゃっておきます。

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^