hifiveのクラスモジュール紹介（その1）「基本的な定義方法」
JavaScript（ECMAScript5）ではクラスを作成することができません。ECMAScript2015になって、ようやくクラスを使えるようになりました。しかしレガシーなブラウザでは実装されていないため、Babelのようなライブラリを使ってコードを変換するのが一般的です。
JavaScriptではprototypeやdefinePropertyなどを使ってクラス（的なもの）を実装しますが、hifiveではそういった面倒な仕組みを意識することなくクラスを実装できるモジュールを開発しました。この機能は1.3.1以降で利用できます。
今回はまず基本的な構造を紹介します。次のように書きます。重要なのは h5.cls.RootClass.extend になります。そして、 _super （親クラス）を引数として、オブジェクトを返却します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var SampleClass = h5.cls.RootClass.extend(function (super_) { | |
| return { | |
| // クラス名（完全修飾名） | |
| name: 'SampleClass', | |
| // クラスのフィールド定義 | |
| field: { | |
| }, | |
| // クラスのプロパティ（アクセサ）定義 | |
| accessor: { | |
| }, | |
| // クラスのメソッド定義 | |
| method: { | |
| constructor: function (initialValue) { | |
| }, | |
| } | |
| }; | |
| }); |
オブジェクトには基本的なキーとして name/field/accessor/method があります。それぞれクラス名、フィールド名、プロパティ、メソッドの4つになります。
フィールドの利用
例えばフィールドは次のようになります。_ではじめるのがルールです。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| field: { | |
| _count: null | |
| }, |
プロパティの利用
プロパティは次のようになります。こちらは_を使いません。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| accessor: { | |
| scale: null | |
| }, |
メソッドの利用
メソッドは初期で読み込まれるconstructor以外は自由に定義できます。クラスのインスタンスを作成する際に値を送ることもできます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| method: { | |
| constructor: function (initialValue) { | |
| // 親クラスのコンストラクタ呼び出し | |
| super_.constructor.call(this); | |
| // 初期値を設定（インスタンス生成時に指定） | |
| this._count = initialValue; | |
| // 初期値を設定（直接指定） | |
| this.scale = 1; | |
| }, | |
| increment: function () { | |
| ++this._count; | |
| return; | |
| }, | |
| getValue: function () { | |
| return this._count * this.scale; | |
| } | |
| } |
インスタンス生成
そしてクラスのcreateメソッドを使ってインスタンスを生成します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var sample = SampleClass.create(1); |
後はこのインスタンスを使って自由にメソッドを呼び出せます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| sample.getValue(); |
外部に公開する
最後に外部（グローバル）に公開する場合です。これは h5.u.obj.expose を使います。例えば以下の例では hoge.fuga.SampleClass でアクセスできます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| h5.u.obj.expose('hoge.fuga', { | |
| SampleClass: SampleClass | |
| }); |
クラスを使ったサンプルをJSFiddleにアップしてあります。ごく基本的な機能だけですが、実装時の参考にしてください。
これから何回かに分けてクラスの使い方を紹介します。JavaやC#相当まではいきませんが、クラスを使うことでより生産性の高いコードが書けるようになるはずです。
hifive開発者ブログ 
コメントは受け付けていません。