hifiveのクラスモジュール紹介（その3）「フィールド/アクセサ」
JavaScript（ECMAScript5）ではクラスを作成することができません。ECMAScript2015になって、ようやくクラスを使えるようになりました。しかしレガシーなブラウザでは実装されていないため、Babelのようなライブラリを使ってコードを変換するのが一般的です。
JavaScriptではprototypeやdefinePropertyなどを使ってクラス（的なもの）を実装しますが、hifiveではそういった面倒な仕組みを意識することなくクラスを実装できるモジュールを開発しました。この機能は1.3.1以降で利用できます。
今回はクラスのフィールド、アクセサについて紹介します
フィールドについて
フィールドはインスタンスで用いる変数になります。基本的に外部から直接変更することはありません。defaultValueを使って規定値を設定できます。
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 HelloClass = h5.cls.RootClass.extend(function (super_) { | |
| return { | |
| // クラス名（完全修飾名） | |
| name: 'HelloClass', | |
| // クラスのフィールド定義 | |
| field: { | |
| _name: null, | |
| _scale: { | |
| defaultValue: 0 | |
| }, | |
| _read: { | |
| defaultValue: "This is read only" | |
| } | |
| }, | |
| } |
アクセサについて
フィールドにアクセスするためのget/setメソッドを提供するのがアクセサです。
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 HelloClass = h5.cls.RootClass.extend(function (super_) { | |
| return { | |
| // クラス名（完全修飾名） | |
| name: 'HelloClass', | |
| // クラスのフィールド定義 | |
| field: { | |
| _name: null, | |
| _scale: { | |
| defaultValue: 0 | |
| }, | |
| _read: { | |
| defaultValue: "This is read only" | |
| } | |
| }, | |
| accessor: { | |
| accessible: null, | |
| scale: { | |
| get: function() { | |
| return this._scale; | |
| }, | |
| set: function(val) { | |
| this._scale = val * 100; | |
| } | |
| }, | |
| read: { | |
| get: function() { | |
| return this._read; | |
| } | |
| } | |
| }, | |
| } | |
| } |
アクセサ名をnullで定義した場合、自動的に _p_アクセサ名 でget/setが定義されます。また、getだけを定義した場合は読み取り専用のアクセサになります。
アクセサはフィールドにそのまま値を入れるだけでなく、計算した上で入力/出力できます。
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
| scale: { | |
| get: function() { | |
| return this._scale; | |
| }, | |
| set: function(val) { | |
| this._scale = val * 100; | |
| } | |
| }, | |
| hello.scale = 200; | |
| hello.scale // -> 20000 |
読み取り専用にするために
JavaScriptの 'use strict'; を使うことで読み取り専用のアクセサに書き込みを行おうとしたり、存在しないアクセサへのアクセスをエラーにできます。
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
| // これはエラーになります | |
| try{ | |
| hello.read = "Update string"; | |
| }catch(e) { | |
| result.val(result.val() + "\n" + e); | |
| } | |
| result.val(result.val() + "\n" + hello.read); | |
| // これはエラーになります | |
| try{ | |
| hello.unknown = "Update!"; | |
| }catch(e) { | |
| result.val(result.val() + "\n" + e); | |
| } |
適切に開発していくためにも 'use strict'; を使っていくべきでしょう。
今回のコードは JSFiddle にアップロードしてあります。実装時の参考にしてください。
サーバサイドの開発に慣れている方にとってはクラスや継承は当たり前のものでしょう。これによって実装がとても簡単に、生産性高いものになるはずです。ぜひhifiveのクラス機能を使いこなしてください。
hifive開発者ブログ 
コメントは受け付けていません。