[A 3]SSJSでも使える！Javascriptでオブジェクト指向プログラミング入門

【A-3】
SSJSでも使える！Javascriptで
www.ktrick.com
オブジェクト指向プログラミング入門
KTrick 合同会社代表田付和慶

自己紹介
• 田付和慶（たつきかずのり）
• ケートリック合同会社代表
• 米国で７年間、IBM Connect (旧Lotusphere) の
オンラインソリューションをXPages で開発してきました。
• 会社のスローガン
「若い力を集結させたIBM 技術者集団をめざす！」(特にICS)

XPagesでの開発を難しく感じる
原因って何でしょう？

1つはやっぱりJavascript？
しかも
クライアントサイド？
サーバーサイド？
いきなり2つも覚えろとか・・・(T_T)

最近ではネットでJavascriptのサンプル
漁ってみると、
こんなんだったり、
var func1 = function(){
alert("hello!");
}
こんなんだったり、
var myButton = new Button({
label: "Show me!",
onClick: function(){
myDialog.set("content", “Hello!");
myDialog.show();
}
}, "progbutton").startup();

Javascriptっていえば、
function func1(param){
alert(param);
}
こうじゃないの？
なんでfunction が後ろに来ちゃうの？

他にも、こういったの見たことありませんか？
( function () {
//関数の中身・・・
}() );
おいおいちょっと、、、カッコ多くないか？
これ、最後のカッコ本当にいるの？？？

お作法だからしかたないんだ…
で諦めていませんか？

このセッションでは
そういった
Javascriptの構造を少し紐解いて
言語への理解を深くしてもらえたらと思っています。

オブジェクト指向プログラミング
そもそも、オブジェクト指向プログラミング（OOP)をすると
なんのメリットがあるのでしょうか？

OOPの概念や仕組みについて触れだすとこのセッションをフルに使っても時間が足らないので割愛しますが、
主なメリットとして
・プログラムの可読性が高まる
・プログラムの再利用がしやすい
・拡張や仕様変更に強くなる
結果、
テストにかかる時間を減らせ、デスマーチの確率を減らせる。
あと、オブジェクト指向が分かっているとなんだかカッコいい、という風潮がある
などなど

オブジェクト指向
この言葉から
なにを思い浮かべますか？

クラス移譲
オブジェクト指向プログラミング
オーバーロード
ポリモーフィズム
Java
C++ 抽象クラス
C#
オーバーライド
継承
派生クラス
インスタンス
UML

オブジェクト指向プログラミングの経験者なら
「クラス」
を真っ先に思いうかべた人もいると思います。

では、
Javascriptにもクラスってあるの？

クラスがなくてどうやって
オブジェクト指向プログラミング（OOP）するの？

プロトタイプチェイン

そもそも、Javascriptにあるのは
オブジェクトのみ

オブジェクト指向なんだから、
オブジェクトがあればいいのです！（強気）
クラスなんて飾りです！
クラスベースの言語にはそれがわからんのです！
（錯乱）

そもそも、クラスってこんなの
親Class （型）
子Class （型）
Object （実体）
Object （実体）
Object （実体）
NEW
NEW
NEW
クラスでオブジェクトの「型」をあ
らかじめ定義しておき、そのクラス
をもとに実体を生成して利用する。
こうすることで、クラスがもつ機能
（関数）や属性（変数）を持った実
体が量産出来る。

クラスを持たない
Javascriptでは…

こんなイメージ
Object （実体）
Object （実体）
Object （実体）
Object （実体）
Dele
gate
Dele
gate
Dele
gate
オブジェクト（実体）を数珠つな
ぎのように繋げて、
オブジェクト自身が知らない関数
や変数への呼び出しがあれば、繋
がりのある別のオブジェクトに移
譲（Delegate)することで見つか
るまで遡っていくイメージ。
Dele
gate
Object （実体）

このように、
Javascriptではクラスではなくプロトタイプチェインという機構を使い
オブジェクト指向プログラミングを実装しているので、
プロトタイプベースオブジェクト指向言語
なんて呼ばれています。

それでは、
ここからは実際のコードで説明をしていきます。
※基本的にクライアントサイドJavascriptとして考えて下さい。
サーバーサイドJavascriptではalert() 等できないためですが、基本の考え方は同じです。

Objectの作り方
var obj = { };
空っぽのオブジェクトが出来ました。

Objectの構造
var obj = {
key: value
};
プロパティ（キーと値の組み合わせ）
単純ですがこれだけです。
var obj = {
name : “Apple”,
size : 500
};
alert(obj.name);
（例）

Javascriptでは関数も「値」（第一級オブジェクト）
var obj = {
func1 : function( ) {alert(“hoge”); }
};
obj.func1(); // Output “hoge”
var func = function( ){};
だから変数に代入できます。
そして変数から変数へコピー
などの操作もできます。
（例）オブジェクトのプロパティにも代入できます。

どんどんいきましょう。
いよいよプロトタイプチェインの説明です。
JavascriptのOOPの真骨頂

Javascriptのプロトタイプチェインを学ぼうとするとき
しばしば以下の２つのキーワードが登場します。
➲ __proto__ ➲prototype
この２つの意味の違いをしっかりと理解することが
Javascript OOPを理解する上でとても重要になります

__proto__
・Javascriptでは全てのオブジェクトは
内部プロパティ[[Prototype]]を持つ
という仕様があります。
内部プロパティと言っているので、本来
は外から参照出来ない性質のもの
とは言いつつ、実際には__proto__というプロパティでプログラム
から扱える実装が多い。（ChromeやFirefox）

こんなイメージ
Object （実体）
Object （実体）
Object （実体）
Object （実体）
Dele
gate
Dele
gate
Dele
gate
__proto__
__proto__
__proto__
__proto__

コードで確認（__proto__が使えるchrome,firefoxで動きます）
「It is Apple」
が出力されます
var obj = {
name : “none”,
callMe : function() { alert(“It is ” + this.name); }
};
var objApple = { name : “Apple”};
objApple.__proto__ = obj;
var objBlackbox = { };
objBlackbox.__proto__ = objApple;
objBlackbox.callMe();
空っぽなのに

コードを順番に確認（１）
「It is Apple」
が出力されます
オブジェクトを生成。
name,
callMe
のプロパティを持つ
objApple オブジェクトを生成。
nameプロパティに”Apple”を持つ
objBlackbox オブジェクトを生成。
プロパティはなにも持たない。
var obj = {
name : “none”,
};

コードを順番に確認（２）
name,
callMe
var obj = {
name : “none”,
};
objApple.__proto_
_にobjを代入

コードを順番に確認（２）
name,
callMe
objApple.__proto_
_にobjを代入
objBlackbox.__proto__に
objAppleを代入
var obj = {
name : “none”,
};

コードで確認（メソッドの確認）
var obj = {
name : “none”,
};

var obj = {
name : “none”,
};
(1) objBlackboxには
callMe() メソッドがない

(２)__proto__にあるオブジェクトを検索(objApple)
var obj = {
name : “none”,
};

(３) objAppleにもcallMe() メソッ
ドがない
var obj = {
name : “none”,
};

(４)__proto__にあるオブジェクトを検索(obj)
ドがない
var obj = {
name : “none”,
};

(４)__proto__にあるオブジェクトを検索(obj)
(５) objにcallMe() メソッドを発見！
ドがない
var obj = {
name : “none”,
};

コードで確認（属性の確認）
var obj = {
name : “none”,
};
(1) callMe() メソッドが呼ばれます

(２) name 属性を参照
※this は自身のオブジェクトを
var obj = { 意味しています
name : “none”,
};

意味しています
(３) objBlackboxにはname属性
がない
var obj = {
name : “none”,
};

(４)__proto__にあるオブジェクトを検索(objApple)
がない
var obj = {
name : “none”,
};

(５) objAppleにnameを発見！
がない
var obj = {
name : “none”,
};

(６) objにもname属性はあるが
、参照されない
(５) objAppleにnameを発見！
がない
var obj = {
name : “none”,
};

このように自オブジェクトにない機能
（関数）、属性（変数）に対して
__proto__を通して移譲（Delegate）
しながらキーが見つかるまで検索して
いく仕組み…
これが
Object （実体）
Object （実体）
あった
Object （実体）
Object （実体）
Dele
gate
Dele
gate
Dele
gate
ない
ない
ない

__proto__ の役割、ご理解頂けたでしょうか？

ん？？？、ちょっと待って下さい
__proto__ (別名：[[Prototype]])は内部プロパティだから本来、外部から扱えないもの。
じゃあ、理解できてもこんなコード使えないじゃないか？
と思いませんか？

はい、使わないで下さい！

実は内部的な動作を理解してもらいやすくするために
こんなコードを書きましたが、同等の処理をさせる別の記述があります。

new演算子です
var obj = new Frout(“Apple”);
（例）今までのサンプルコードもOOP風に書き換えが必要になってきます。
このコードに関して
後で解説します。
var Frout = function( pname ) {
this.name = pname;
}
Frout.prototype.callMe = function() { alert(“It is ” + this.name); };
var objApple = new Frout(“Apple”);

➲ prototype
わすれちゃいけない、もう一つのキーワード「prototype」
__proto__でプロトタイプチェーンの理解出来たし、説明いらない、
なんて言わないで下さい。
違いを理解するのがとっても大切！

prototype
・Javascriptでは、
全ての関数オブジェクトはprototype プロパティを持つ
という仕様があります。
ん？関数オブジェクト？？初登場です。
でも安心してください、もう知ってます。

関数オブジェクトとは
こういうの
実は、前述していました。関数であっても「値」として扱える（第一級オブジェクト）
というやつです。

改めまして、
全ての関数オブジェクトにはprototype プロパティを持ちます。
例えば、
alert( func.prototype );
とすると、undefinedとはならず、prototype プロパティが存在することが確認できます。
でも、関数オブジェクトを定義した直後では、
prototypeは何も値を持たない空っぽのオブジェクトを参照しています。
では、これが何に使われるのでしょうか・・・

ちょっと前で触れたnew 演算子で、
オブジェクトが生成されるときに使われます！

コードで確認
(今までのサンプルコードの書き換え版)
コンストラクタの定義
関数オブジェクトを生成。
name変数は未定義。
Frout オブジェクトのprototype
プロパティにメソッドを追加
new演算子でobjApple オブジ
ェクトを生成。
objAppleのプロトタイプチェイ
ンよりFroutのprototypeを継承
var Frout = function( pname ) {
this.name = pname;
}
objApple.callMe(); 「It is Apple」が出力されます。
objApple.prototype.callMe()
ではないことに注目
次のスライドで
触れます

newした時の処理を擬似的に表現すると
var obj = {};
obj.__proto__ = Frout.prototype;
Frout.apply(obj, arguments );
return obj;

var obj = {};
return obj;
(1) オブジェクトを生成

var obj = {};
return obj;
Frout.prototype
にはcallMe メソッ
ドがあります
(2) prototype プロパティを__proto__ に代入

var obj = {};
return obj;
Frout.prototype
ドがあります
(3) コンストラクタ関数を実行
コンストラクタとは
関数オブジェクト生
成時に一度だけ呼び
出される関数

var obj = {};
return obj;
出される関数
(4) 処理したオブジェクトを返す
Frout.prototype
ドがあります

__proto__の解説で使ったサンプル
newした時の処理を擬似的に表現した処理
var obj = {};
return obj;
obj をFrout.prototype だと置き換えたら
どちらもcallMe() メソッドを持つことに
なることが想像できます。
Frout.prototype.callMe = function() {…};
var obj = {
name : “none”,
callMe : function() { … }
};

__proto__ とprototype の違い、ご理解頂けたでしょうか？
__proto__ prototype
プロトタイプオブジェク
トを格納し、
newされたときに
__proto__
に代入されることで
プロトタイプチェインを
作り出す。
プロトタイプチェインの
検索の仕組みそのもの。
newされたオブジェクト
のprototype が自動で格
納される。
積極的に使って
行きましょう
概念の理解のために必要。
実際はnewとprototypeで実
装させよう

では、ちょっと頭の体操

Frout オブジェクトの準備で
var Frout = function( name ) {
this.name = name;
}
と記述しましたが、
this.name = name;
this.callMe = function() { alert(“It is ” + this.name); };
}
と書きたくなりませんか？これじゃダメでしょうか？

OOPの観点から見ると良くないです
でも、動きます

理由：
このコードでは、prototype を使わず、コンストラクタ関数の中で定義されてしまいます。
this.name = name;
this.callMe = function() { alert(“It is ” + this.name); };
}
つまり、
newによりオブジェクトが生成される度にこのメソッド(callMe())も新たに生成されてしまいます。
対照的に、prototype内に定義されたメソッド、変数はプロトタイプチェインの中に入る仕組みに合わせて、
オブジェクトが何度newされても同一のメモリから参照されるという仕組みになっているためメモリ効率がよくなります。

冒頭で紹介したサンプルコード
( function() {
}() );
カッコばかりのこの関数、いったいどういった動作をするでしょう？

結論を先に述べると、
無名関数を作って即時呼び出し
を行っています。

関数オブジェクト
関数オブジェクトが返された直後に
、その関数を呼び出している。
即時関数
を生成。
変数で受けていない
無名関数。
( function() {
}() );
即時関数には2つある？
//即時関数１
(function () {
}());
//即時関数２
(function () {
})();
どちらも即時関数として機能しますが、
JSLint(http://www.jslint.com/)では
前者のコードの方が好ましいようです。
というなんとも複雑な処理を経ていました。
ページが読み込まれた時、一度だけ処理をする、といった時に使われます。

OOPと言うのだったらprivate 変数で隠蔽化ぐらいはしたくなりませんか？
結果は…
this.name = name;
}
alert( objApple.name );
private 変数だったら
参照できないはず
これって
private 変数？
protected 変数?
public 変数？

（当然ながら、）参照できてしまいますorz
でもちょっとまって

こんな感じで(魔)改造します
var FroutModel = (function() {
// private変数
var name = “none";
(魔)改造前
// コンストラクタ
var cls = function(pname){name = pname;};
// public メソッド
cls.prototype.callMe = function() {alert("This is "+name);};
return cls;
} () );
this.name = name;
}

// private変数
return cls;
} () );
var objApple = new FroutModel(“Apple”);
alert( objApple.name );
objApple.callMe();
undefined となり隠蔽化
できたことを確認。
正常に呼び出せます

なんだか大分クラスっぽくなりました。

ほかにも、クラスっぽい継承もこんなふうに実装出来ます。
// private変数
// 親クラスの継承
cls.prototype = new BaseModel();
return cls;
} () );
こんな感じ。
BaseModel オブジェクトは
FroutModel オブジェクトと
同様な実装をしているもの
とします。

コードの説明は今までの応用である程度説明できます。是非パズル感覚でチャレンジしてみてください。
// private変数
return cls;
} () );
（ヒント）スコープチェインのルールに
よりスコープの外から中は見えない。
（ヒント）FroutModel 関数オ
ブジェクトの中で別関数オブジ
ェクトを生成。
（ヒント） FroutModel 内で生成
したオブジェクトを返している。
（ヒント）
即時関数である

今回、
XPagesの話が１つも出ませんでしたが、

今回のJavascriptの内容は
クライアントサイドJavascript
サーバーサイドJavascript
どちらにも通用する概念です。

試しに最後のクラスっぽい実装のオブジェクトをSSJSのスクリプトライブラリにコピペして
もそのまま動きます。
var AppModel = (function() {
// private変数
cls.prototype.func1 = function() {…};
return cls;
} () );
実際に、自分も
このオブジェクトの
構成をテンプレート
としてJavascript
でのOOPに利用して
います。

スクリプトライブラリにコピペ

XPagesから呼び出し
出力結果
一旦viewScopeに
newしたオブジェクトを
格納しています

XPagesでOOPを利用するときの注意点
viewScopeにnewしたオブジェクトを格納しましたが、
オブジェクトを永続的に保持して利用出来るようにするため、Xspプロパティより「ページをメモリに保存する」を選択します。

いかがでしたでしょうか？
Javascriptのオブジェクト指向プログラミングは
理解するまで色々と試してみるのが一番だと思います。
なんせHTMLファイル１つで試せます。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
// <![CDATA[
// private variable
var name = "hoge";
// メソッド
return cls;
}());
var frt = new FroutModel("Banana");
frt.callMe();
alert("frout.name="+frt.name);
// ]]>
</script>
</head>
<body>
</body>
</html>

気づいたらDojoもjQueryももう怖くない、かも

参考• 最強オブジェクト指向言語JavaScript 再入門
株式会社フォーエンキーのノジマ様のスライド
http://www.slideshare.net/yuka2py/javascript-23768378
• ブログXPagesで行こう！
IBMチャンピオンリコーITソリューションズ株式会社海老原賢次さんのブログ
https://www.ibm.com/developerworks/community/blogs/ebi/
• MDN > 開発者向けのWeb技術> Javascript
Mozilla Developer Network 内のJavascript ポータル
https://developer.mozilla.org/ja/docs/Web/JavaScript
• JSLint
バッドプラクティスに対して警告を出す構文チェッカー
http://www.jslint.com/

ご清聴ありがとうございました

www.ktrick.com
この文書はクリエイティブ・コモンズ表示- 継承2.1 日本ライセンスの下に提供されています。

[A 3]SSJSでも使える！Javascriptでオブジェクト指向プログラミング入門

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie [A 3]SSJSでも使える！Javascriptでオブジェクト指向プログラミング入門

Ähnlich wie [A 3]SSJSでも使える！Javascriptでオブジェクト指向プログラミング入門 (20)

Mehr von Kazunori Tatsuki

Mehr von Kazunori Tatsuki (8)

Kürzlich hochgeladen

Kürzlich hochgeladen (9)

[A 3]SSJSでも使える！Javascriptでオブジェクト指向プログラミング入門