CoffeeScript入門、クラス継承とメソッドのオーバーライド

JavaScript でもプログラムがある程度の規模以上になると、クラスの継承やメソッドのオーバーライドなどを使いたくなります。しかし、素の JavaScript でのオブジェクト指向なプログラミングは、片手間で JavaScript を書く私には結構辛い。prototype ベースのオブジェクト指向プログラミングは、クラスベースのものに比べて難しいと感じます。

ということで、これまで見よう見まねだけで書いてた CoffeeScript を、ちょっと腰を据えて小1時間ほど勉強してみました。CoffeeScript であれば、class ベースのオブジェクト指向なプログラムをすっきり書けます。Ruby/Python/JavaScript が分かる人であれば、それほど学習コストも高くないと思います。

CoffeeScript

スポンサーリンク

クラスの継承やメソッドのオーバーライドなど、よく使いそうな機能の書き方の定石を知りたかったため、以下のページ等に目を通しました。

The Little Book on CoffeeScript – Classes
すぐに分かる CoffeeScript によるクラスの書き方 | Developers.IO
CoffeescriptのClassの作り方メモ – Qiita
CoffeeScript でクラスベースのオブジェクト指向プログラミングをするための基礎知識 – わからん

そのほか CoffeeScript の基本文法については、以下ページを参考。The Little Book on CoffeeScript の解説は素晴らしく分かりやすいです。あと入門であれば、定番のドットインストール。

The Little Book on CoffeeScript
CoffeeScript入門 (全13回) – プログラミングならドットインストール

書いてみた CoffeeScript でのクラス継承

学習のために、以下の CoffeeScript でのクラス継承とメソッドをオーバーライドするコードを書いてみました。Shape クラス(スーパークラス/親クラス)を、Rectangle(長方形)、Triangle(三角形)、Circle(円)のサブクラス(子クラス)が継承する例です。面積を求める area メソッドを、各々サブクラスでオーバーライドしています。

CoffeeScript だと、クラスの継承を extends を使ってすっきり書けました。メソッドのオーバーライドもちゃんと機能していますし、クラスメソッドとインスタンスメソッドの違い、クラス変数とインスタンス変数の違いもはっきりします。

素の JavaScript にコンパイル後のコード

CoffeeScript のコードは、CoffeeScript の TRY COFFEESCRIPT タブでコンパイルでき、コンパイル後の JavaScript コードと実行結果を確認できます。

上記クラス継承の CoffeeScript コードからコンパイルされた実際の JavaScript コードは以下です。ややこしいですけど、読めば何となく分かります。

コンパイル後の JavaScript コード解読

__extends による継承

・継承は、__extends メソッドを定義してそれを利用して実現。
・__extends メソッドは、親クラスのプロパティを子クラスにコピーする。
・ctor() がちょっとよく分かりませんが、ctor.prototype に親クラスの prototype(parent.prototype) を設定して、child.prototype に new ctor() を割り当てている。
・最後に child の __super__ に parent.prototype を割り当てて、__extends メソッドは child(子クラス)を return。

クラスメソッド

のように、class 定義の文脈で @ (this) を使ったプロパティ定義は…

のようにクラスのプロパティに変換されています。

constructor(コンストラクタ)

constructor は、

に変換。

public なインスタンスメソッド

class で @ なしで定義したメソッドは、インスタンスメソッドとなる。area は、

に変換されています。

その他 private メソッドの定義やクラスでファイルを分ける時など

private メソッドやファイルを分ける方法は、以下の記事が参考になりました。

すぐに分かる CoffeeScript によるクラスの書き方 | Developers.IO

private メソッドの定義は、class 内のローカルなメソッドとして定義して、呼び出しには call を使う。

CoffeeScript でクラスをファイル毎に分割する場合は、グローバル変数にクラス名を設定しないと、他のファイルから参照できません。なので、window オブジェクトを使います。window オブジェクトのプロパティとしてクラスを定義することで、他のファイルから参照可能になるそうです。

なるほどなー。

とりあえず CoffeeScript を使うと、オブジェクト指向なプログラムをすっきり書けることが分かって良かったです。ちょっと食わず嫌いで見よう見まねだけで使っていたのですが、今後は CoffeeScript を積極的に使っていこうと思います。間違っている箇所がありましたら、つっこみお願いいたします!

スポンサーリンク
オライリーのJavaScritp本(通称サイ本)は、昔かなり読み込みました。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!