JavaScriptでキレイなClassの作り方AICS

JavaScriptで大きなアプリケーションを作る場合、適切にクラス設計した方がメンテナビリティは高くなります．

そこで、JavaScriptのキレイなClassの作り方を紹介します．

ES6を使わず、現行のJavaScript仕様で実現出来るClassの作り方です．

まずはコードを見てください．

var Foo = (function() {
    // コンストラクタはクラス名と同一の関数名で定義する
    function Foo() {
        // private な変数はここで定義する．
        // 言語仕様上privateには出来ない．
        // _から始まる変数名にすることでprivateであることを示す．
        this._bar = "some value";
    };

    // this._barにアクセスしているので、_barの値は各インスタンス毎に保持できる
    Foo.prototype.getBar = function() {
        return this._bar;
    };
    Foo.prototype.setBar = function(bar) {
        this._bar = bar;
    };

    // private staticな変数であれば言語仕様上もprivateを実現できる．
    privateStaticVal = "test";

    // staticな変数へのアクセスにはthisをつけない．
    Foo.prototype.getStaticVal = function() {
        return privateStaticVal;
    };
    Foo.prototype.setStaticVal = function(val) {
        privateStaticVal = val;
    };

    return Foo;
})();

var Foo = (function() {

// コンストラクタはクラス名と同一の関数名で定義する

function Foo() {

// private な変数はここで定義する．

// 言語仕様上privateには出来ない．

// _から始まる変数名にすることでprivateであることを示す．

this._bar = "some value";

};

// this._barにアクセスしているので、_barの値は各インスタンス毎に保持できる

Foo.prototype.getBar = function() {

return this._bar;

};

Foo.prototype.setBar = function(bar) {

this._bar = bar;

};

// private staticな変数であれば言語仕様上もprivateを実現できる．

privateStaticVal = "test";

// staticな変数へのアクセスにはthisをつけない．

Foo.prototype.getStaticVal = function() {

return privateStaticVal;

};

Foo.prototype.setStaticVal = function(val) {

privateStaticVal = val;

};

return Foo;

})();

ポイントは、

ネームスペースを汚染しないよう、即時実行関数内に定義している．
privateな変数については命名規則(“_”アンダースコアで始める)によって表現する．
instance毎に違う値を持たせるために、thisのプロパティとしてを保持させる
static private な変数は従来の言語仕様でも実現できている．

Classを利用する場合は以下のようなコードになります．

<span class="kwd">var</span><span class="pln"> a </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">Foo</span><span class="pun">();</span>
<span class="kwd">var</span><span class="pln"> b </span><span class="pun">=</span> <span class="kwd">new</span> <span class="typ">Foo</span><span class="pun">();</span><span class="pln">
a</span><span class="pun">.</span><span class="pln">setBar</span><span class="pun">(</span><span class="str">'a'</span><span class="pun">);</span><span class="pln">
b</span><span class="pun">.</span><span class="pln">setBar</span><span class="pun">(</span><span class="str">'b'</span><span class="pun">);</span><span class="pln">
alert</span><span class="pun">(</span><span class="pln">a</span><span class="pun">.</span><span class="pln">getBar</span><span class="pun">());</span> <span class="com">// 'a' が表示される </span><span class="pln">
alert</span><span class="pun">(</span><span class="pln">b</span><span class="pun">.</span><span class="pln">getBar</span><span class="pun">());</span> <span class="com">// 'b' が表示される 
</span>

var a = new Foo();

var b = new Foo();

a.setBar('a');

b.setBar('b');

alert(a.getBar()); // 'a' が表示される

alert(b.getBar()); // 'b' が表示される

Stackflowのエントリーを参考に書いているので、一定程度の支持は得られているかと思います．

M	T	W	T	F	S	S
« Feb				Apr »
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

AICS

An Individual Changes the Society

JavaScriptでキレイなClassの作り方

Leave a Reply Cancel reply