コンテンツへスキップ

hifiveのクラスモジュール紹介(その1)「基本的な定義方法」

by : 2017/07/18

JavaScript(ECMAScript5)ではクラスを作成することができません。ECMAScript2015になって、ようやくクラスを使えるようになりました。しかしレガシーなブラウザでは実装されていないため、Babelのようなライブラリを使ってコードを変換するのが一般的です。

JavaScriptではprototypeやdefinePropertyなどを使ってクラス(的なもの)を実装しますが、hifiveではそういった面倒な仕組みを意識することなくクラスを実装できるモジュールを開発しました。この機能は1.3.1以降で利用できます。

今回はまず基本的な構造を紹介します。次のように書きます。重要なのは h5.cls.RootClass.extend になります。そして、 _super (親クラス)を引数として、オブジェクトを返却します。


var SampleClass = h5.cls.RootClass.extend(function (super_) {
return {
// クラス名(完全修飾名)
name: 'SampleClass',
// クラスのフィールド定義
field: {
},
// クラスのプロパティ(アクセサ)定義
accessor: {
},
// クラスのメソッド定義
method: {
constructor: function (initialValue) {
},
}
};
});

view raw

index.js

hosted with ❤ by GitHub

オブジェクトには基本的なキーとして name/field/accessor/method があります。それぞれクラス名、フィールド名、プロパティ、メソッドの4つになります。

フィールドの利用

例えばフィールドは次のようになります。_ではじめるのがルールです。


field: {
_count: null
},

view raw

index.js

hosted with ❤ by GitHub

プロパティの利用

プロパティは次のようになります。こちらは_を使いません。


accessor: {
scale: null
},

view raw

index.js

hosted with ❤ by GitHub

メソッドの利用

メソッドは初期で読み込まれるconstructor以外は自由に定義できます。クラスのインスタンスを作成する際に値を送ることもできます。


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;
}
}

view raw

index.js

hosted with ❤ by GitHub

インスタンス生成

そしてクラスのcreateメソッドを使ってインスタンスを生成します。


var sample = SampleClass.create(1);

view raw

index.js

hosted with ❤ by GitHub

後はこのインスタンスを使って自由にメソッドを呼び出せます。


sample.getValue();

view raw

index.js

hosted with ❤ by GitHub

外部に公開する

最後に外部(グローバル)に公開する場合です。これは h5.u.obj.expose を使います。例えば以下の例では hoge.fuga.SampleClass でアクセスできます。


h5.u.obj.expose('hoge.fuga', {
SampleClass: SampleClass
});

view raw

index.js

hosted with ❤ by GitHub


クラスを使ったサンプルをJSFiddleにアップしてあります。ごく基本的な機能だけですが、実装時の参考にしてください。

これから何回かに分けてクラスの使い方を紹介します。JavaやC#相当まではいきませんが、クラスを使うことでより生産性の高いコードが書けるようになるはずです。

クラスの作成と使用 – hifive

From → hifive

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。