javaScriptでオブジェクト指向

※この記事は9年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

みなさん、あけましておめでとうございます。
見てる人いんのかわからないブログですが、ひとまず挨拶。

なんて遅い挨拶だｗ

仕事でバッタバタで死んでました。
そんな中こんな記事書いてんなって話ですが。

今回は、解決策などではなく、考察というか、独り言的なことを書きますので、あしからず。

ズバリ、javaScriptにおけるオブジェクト指向な書き方だ。

最近、javaScriptで、ローカルブラウザアプリケーションの開発やっているので、
すっかりJSとお友達になってるのですが、
大規模開発なので、C++とか、Objective-Cなどなどと同様の、オブジェクト指向な書き方が必要となってきた。
しかし、他の言語であるような、"クラス"と呼ばれる概念はない。
だが、一応クラスの"ようなもの"は定義することが可能である。

クラス、とは、関数やプロパティをひとまとめにしたもので、
それを元にしたコピーである、"インスタンス"を生成することができる。
例えるなら、車の構造や使用法をまとめた企画書（クラス）があり、
それを元に、車（インスタンス）を大量生産することができるってわけだ。
オブジェクト指向言語になじみがない人でも、Flashをやってる人とかはインスタンスという言葉は知っているでしょう。
だいたい同じ扱い。

これが、かなり便利ｗ

javaScriptでのオブジェクト指向な書き方は、下記のエントリーが非常に参考になる。

●JavaScriptのオブジェクト指向の書き方｜jQuery入門5

だが、もともと、厳密にオブジェクト指向で書かなくてもいい、javaScriptでは、
わざわざクラスを使う必要がない。
しかし、こいつがとても便利でしかも、コードの行数をかなり抑えられるのだ。

たとえば、下記のような構造のオブジェクトを作るとしよう。

hogeObj {
  testA: { frame    : side: 25,
                      row : 125},
           zoom     : 15,
           paramName: 'テストAでござる'},
  testB: { frame    : side: 32,
                      row : 140},
           zoom     : 33,
           paramName: 'テストBでござる'},
  testC: { frame    : side: 65,
                      row : 200},
           zoom     : 56,
           paramName: 'テストCでござる'}
}

最高三階層のめんどくさいオブジェクトだ。
これを生成する時、なんも考えないでやると下記になる。

//変数を宣言
var hogeObj = new Object();

var testAFrame = new Object();
var testAObj = new Object();

var testBFrame = new Object();
var testBObj = new Object();

var testBFrame = new Object();
var testBObj = new Object();

//値を挿入
testAFrame.side = 25;
testAFrame.row = 125;
testAObj.frame = testAFrame;
testAObj.zoom = 15;
testAObj.paramName = 'テストAでござる';

testBFrame.side = 32;
testBFrame.row = 140;
testBObj.frame = testBFrame;
testBObj.zoom = 33;
testBObj.paramName = 'テストBでござる';

testCFrame.side = 65;
testCFrame.row = 200;
testCObj.frame = testCFrame;
testCObj.zoom = 56;
testCObj.paramName = 'テストCでござる';

hogeObj.testA = testAObj;
hogeObj.testB = testBObj;
hogeObj.testC = testCObj;

まぁ、めんどいけどこれくらいは大丈夫じゃない？と思う人もいようが、
だが、この構造のオブジェクトを使う、値を変更する関数が、何十個とあったらどうだろう？
いちいち、同じ工程を書かねばならないのだ。
そいつはうんざりだ。
上記の構造のオブジェクトを、returnで返す関数を作ったとしても、
構造のオブジェクトを返すだけだから、
オブジェクトの値を変更する場合、結局めんどうになる。
それよりはオブジェクトを生成した時点で、
そのオブジェクトの値を変更する関数もセットで入ってるなら、
それほど便利なことはない。

そこで"クラス"の登場なわけだ。

クラスで書くならならこうだ。

//クラスを定義
var frameClass = function(){
  this.side = 0;
  this.row = 0;
};
frameClass.prototype = {
  setValue: function(sideV, rowV){
    this.side = sideV;
    this.row = rowV;
  }
};

var objClass = function(){
  this.zoom = 1;
  this.paramName = '';
  this.frame = new frameClass;
};
objClass.prototype = {
  setValueZoomName: function(zoomValue, nameValue){
    this.zoom = value;
    this.paramName = nameValue;
  }
};


//クラスを使用する
var hogeObj = new Object();
hogeObj.testA = new objClass();
hogeObj.testB = new objClass();
hogeObj.testC = new objClass();

hogeObj.testA.frame.setValue(25, 125);
hogeObj.testA.setValueZoomName(15, 'テストAでござる');

hogeObj.testA.frame.setValue(32, 140);
hogeObj.testA.setValueZoomName(33, 'テストBでござる');

hogeObj.testA.frame.setValue(65, 200);
hogeObj.testA.setValueZoomName(56, 'テストCでござる');

となる。
最初はめんどうかもしれないが、
一度クラスを定義すれば、他の複数の関数からも、
インスタンスを生成し、クラスメソッドを使用すれば、
同じ構造のオブジェクトを生成できるわけだ。
同じ構造のオブジェクトを大量に使う、ゲームやらなんやらの大規模開発にはうってつけなのである。
行数もだいぶ節約できるってわけだ。

このオブジェクト指向、正直、Objective-Cやってた時は、全然わからなかったんだけど、
JSで大規模開発して、あぁなるほどね、と理解できたというｗ

さて、仕事に戻ろう・・・。