Sencha Touch 2の基礎 – クラスシステム その２

前回に引き続きSenchaのクラスシステムについて見て行きたいと思います。前回の終わりに、クラスシステムは初期化の際、configの要素ごとに自動的にゲッタとセッタメソッドを作成するという話をしました。今回はこのセッタについてのもう少し詳しいお話から。

ApplierとUpdater

Sencha Touch 2ではセッタメソッドを実行する前後に２つのフックポイントを用意しています。フックポイントとは、そのデータに何か編集を加えたり、変換したりするためのポイントで、フィルタみたいなもんです。はい、フィルターの方がしっくりきますね。とにかくそれがこのApplierとUpdaterです。 一般的なセッタを考えると以下の様なプロセスを取ることが多いです。

1. 検証、フィルタリング、変換
2. 実際の割り当て
3. 通知、依存関係のアップデート

この1と3の部分にSenchaはApplierとUpdaterというメソッドを予め用意しておき、操作したい場合は自由に操作できるようにしています。具体的な使い方の例としては、以下のように使用できます。

name要素の値をユーザーのインプットで取得するとします。この時、setName()メソッドを使って値を設定しますが、その前に「名前の前にかならず”Mr.”を付ける」、「頭文字は大文字にする」といった処理を行いたいとします。これが上記で言う「フィルタリング」や「変換」に当たり、applierで処理することができます。また、名前が変更された後はダイアログで「名前が変更されました」と通知したいとします。これが3の部分の処理にあたり、updaterで処理することができます。 このような処理を行うのがapplierとupdaterです。

普段はセッタだけで十分機能するので、あまり気にすることはありませんが、このような機能があらかじめ用意されていることを知っておくと、効率的にコードを書いていくことができます。

ApplierとUpdaterの使い方

実際のプログラムでどのように使うことができるか、先ほどの例をとって見ていきいましょう。クラスは前回サンプルとして挙げたPersonクラスを使ってみます。

Ext.define('My.sample.Person', {

    config: {				//初めの属性値の初期設定
        name: 'Anonymous',
        age: 0,
        gender: 'Male'
    },

    constructor: function(config) {
    	this.initConfig(config); //ここでゲッタ、セッタを自動生成
    },

    applyName: function(newName, oldName) { //applyName: function(newName)でも可 
        return 'Mr. ' + newName; //セットする名前には必ずMR.をつける
    },

    updateName: function(newName, oldName) {
        alert('Name changed. New name is: ' + newName);
    }
});

14行目でセットされた値をフィルタリングしています。イニシャルを大文字にする処理は面倒くさいので書きませんでしたが、それもここで行えます。実行は以下のように行います。

var robert = Ext.create('My.sample.Person', {
    name: 'Robert',
    age: 21
});

alert(robert.getName()); //alerts 'Mr. Robert'
robert.setName('Alex'); //alerts 'Name changed. New name is: Mr. Alex'
alert(robert.getName()); //alerts 'Mr. Alex'

Dependency（依存関係）

他のクラスを自分のクラスで使う際に、ほとんどの言語が”include“や”import“といった処理を行うように、Senchaもクラスの中で他のクラスを使う時はまずそれらを読み込んでやらないと行けません。では、どのように読みこめばいいのでしょうか。今、クラスはファイルごとにjsファイルとして書かれているので、jsを使い慣れた人なら、index.htmlに次の一文を書いて読み込むでしょう。

<script src="My/sample/Class1.js"></script>

では、このClass1.jsがさらにClass2.jsを必要としていたらどうでしょう。このコードより前に、もう一文Class2.jsを読み込むコードがいります。では、Class2がもっとクラスを必要としていたら？新たなクラスを使用する度に必要なクラスが全て読み込まれているか、自分でチェックするのは面倒です。

この依存関係を解決するためにSenchaは”requires”という要素を用意しています。 そのクラスの処理で必要なクラスはこのrequiresに書いておく。そうすれば、Senchaはまだその必要なクラスが読み込まれていなければ読み込み、読み込まれていれば何もしないという処理を自動で行なってくれます。そして、もっと重要なことは、先ほどのような場合でも、それぞれのクラスにrequiresが定義されているので、Class1さえ読み込めば、Class2、さらに上の階層のクラスと、このルールを守っている限り、必要なクラスは自動で読み込んでくれるのです。

この仕組によって、開発者はクラスの依存関係をあまり気にせずにコーディングをすることができます。 実際の書き方を見てみましょう。先ほどのPersonクラスのupdateNameメソッドを変更し、Senchaが用意したデフォルトのアラートウィンドウを出すようにしてみます。

Ext.define('My.sample.Person', {
    requires: [
        'Ext.MessageBox' //Senchaのデフォルトアラートメッセージを表示するのにこのクラスが必要
    ],

    /* .... */

    updateName: function(newName, oldName) {
        Ext.Msg.alert("Name changed.","New name is: "　+ newName); //Senchaのデフォルトアラートを表示
    }
});

このアラートウィンドウの表示には、Ext.MessageBoxというクラスを用います。したがって、それを3行目で読み込んでいます。そしてupdateNameメソッドの中でそれを使用しています。これだけで、他のクラスを読み込むことができます。   これでSenchaのクラスシステムの基礎をざっと説明できたと思います。あとは、サンプルプログラムを見るなり、チュートリアルを見るなりして、どんどん書いていってください。

一応終わる前にSenchaの命名規則を紹介しておきます。

名前の付け方

クラス

クラス名はアルファベットと数字のみで名前をつけてください。数字は一応許可されていますが、推奨はされていません。技術的な理由での使用に制限してください。ハイフンやアンダーバーなどの記号は使えません。

• ☓ MyCompany.useful_util.Debug_Toolbar
• ◯ MyCompany.util.Base64

クラス名は適切なパッケージや名前空間でまとめてください。viewに関するクラスはviewというフォルダのなかに入れて、”名前空間.view.クラス名”などにしてください。最低でもアプリ名を名前空間として名前空間のフォルダ内に入れ、”名前空間.クラス名”のようにしてください。

• MyCompany.data.CoolProxy
• MyCompany.Application

一番上の階層の名前空間とクラス名はキャメルケースで書きます（単語の頭文字を大文字にし、スペース無しでくっつけたもの）。その他、真ん中に来るグループ名などは、全て小文字にしてください。

• MyCompany.form.action.AutoLoad

Senchaによって提供されているクラス以外は名前空間に”Ext”を使用してはいけません。

頭字語（HTML、JSONなど）の場合も、キャメルケースを使って記述してください。

• ☓ Ext.data.JSONProxy → ◯ Ext.data.JsonProxy
• ☓ MyCompary.parser.HTMLParser → ◯ MyCompany.util.HtmlParser
• ☓ MyCompany.server.HTTP → ◯ MyCompany.server.Http

メソッド名と変数名

クラス名と同様で、メソッド名や変数名もアルファベットと数字のみで構成してください。こちらも数字は技術的な理由での使用に制限してください。ハイフンやアンダーバーなどの記号は使えません。

メソッド名、変数名もキャメルケースで記述してください。

メソッド名

• ◯ encodeUsingMd5()
• ☓ getHTML() → ◯ getHtml()
• ☓ getJSONResponse() → ◯ getJsonResponse()
• ☓ parseXMLContent() → ◯ parseXmlContent()

変数名

• var isGoodName
• var base64Encoder
• var xmlReader
• var httpServer

プロパティ名

クラスの要素名もキャメルケースで記述します。定数の場合は全て大文字にします。

• Ext.MessageBox.YES = "Yes"
• Ext.MessageBox.NO = "No"
• MyCompany.alien.Math.PI = "4.13"

Senchaの命名規則は以上のような感じです。他にもSenchaの慣例みたいなものもありますが、その辺は出てきた時に解説します。

今回はここまで。