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

Presentation on theme: "SSJSでも使える！Javascriptで オブジェクト指向プログラミング入門"— Presentation transcript:

1 SSJSでも使える！Javascriptで オブジェクト指向プログラミング入門
KTrick 合同会社 代表 田付 和慶

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

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

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

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

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

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

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

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

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

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

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

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

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

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

16 ないです。 諸説あり

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

18 その答えは…

19 プロトタイプチェイン

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

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

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

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

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

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

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

27 まずは基本。

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

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

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

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

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

33 ➲ __proto__

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

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

36 コードで確認 （__proto__が使えるchrome,firefoxで動きます）
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」 が出力されます

37 コードを順番に確認（１） 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(); オブジェクトを生成。 name, callMe のプロパティを持つ objApple オブジェクトを生成。 nameプロパティに”Apple”を持つ objBlackbox オブジェクトを生成。 プロパティはなにも持たない。 「It is Apple」 が出力されます

38 objApple.__proto__に objを代入
コードを順番に確認（２） 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(); オブジェクトを生成。 name, callMe のプロパティを持つ objApple オブジェクトを生成。 nameプロパティに”Apple”を持つ objApple.__proto__に objを代入 objBlackbox オブジェクトを生成。 プロパティはなにも持たない。

39 コードを順番に確認（２） 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(); オブジェクトを生成。 name, callMe のプロパティを持つ objApple オブジェクトを生成。 nameプロパティに”Apple”を持つ objApple.__proto__に objを代入 objBlackbox オブジェクトを生成。 プロパティはなにも持たない。 objBlackbox.__proto__に objAppleを代入

40 コードで確認（メソッドの確認） 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();

41 (1) objBlackboxにはcallMe() メソッドがない
コードで確認（メソッドの確認） 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(); (1) objBlackboxにはcallMe() メソッドがない

42 (1) objBlackboxにはcallMe() メソッドがない
コードで確認（メソッドの確認） 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(); (２)__proto__にあるオブジェクトを検索 (objApple) (1) objBlackboxにはcallMe() メソッドがない

43 コードで確認（メソッドの確認） 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(); (３) objAppleにもcallMe() メソッドがない (２)__proto__にあるオブジェクトを検索 (objApple) (1) objBlackboxにはcallMe() メソッドがない

44 コードで確認（メソッドの確認） 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(); (３) objAppleにもcallMe() メソッドがない (４)__proto__にあるオブジェクトを検索 (obj) (２)__proto__にあるオブジェクトを検索 (objApple) (1) objBlackboxにはcallMe() メソッドがない

45 コードで確認（メソッドの確認） var obj = { name : “none”,
(５) objにcallMe() メソッドを発見！ 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(); (３) objAppleにもcallMe() メソッドがない (４)__proto__にあるオブジェクトを検索 (obj) (２)__proto__にあるオブジェクトを検索 (objApple) (1) objBlackboxにはcallMe() メソッドがない

46 (1) callMe() メソッドが呼ばれます
コードで確認（属性の確認） 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(); (1) callMe() メソッドが呼ばれます

47 (1) callMe() メソッドが呼ばれます
コードで確認（属性の確認） (２) name 属性を参照 ※this は自身のオブジェクトを 意味しています 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(); (1) callMe() メソッドが呼ばれます

48 コードで確認（属性の確認） var obj = { name : “none”,
※this は自身のオブジェクトを 意味しています 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(); (３) objBlackboxにはname属性がない (1) callMe() メソッドが呼ばれます

49 コードで確認（属性の確認） var obj = { name : “none”,
※this は自身のオブジェクトを 意味しています 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(); (３) objBlackboxにはname属性がない (４)__proto__にあるオブジェクトを検索 (objApple) (1) callMe() メソッドが呼ばれます

50 コードで確認（属性の確認） var obj = { name : “none”,
※this は自身のオブジェクトを 意味しています 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(); (５) objAppleにnameを発見！ (３) objBlackboxにはname属性がない (４)__proto__にあるオブジェクトを検索 (objApple) (1) callMe() メソッドが呼ばれます

51 コードで確認（属性の確認） var obj = { name : “none”,
※this は自身のオブジェクトを 意味しています 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(); (５) objAppleにnameを発見！ (３) objBlackboxにはname属性がない (４)__proto__にあるオブジェクトを検索 (objApple) (1) callMe() メソッドが呼ばれます

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

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

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

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

56 実は内部的な動作を理解してもらいやすくするために
var objApple = { name : “Apple”}; objApple.__proto__ = obj; こんなコードを書きましたが、同等の処理をさせる別の記述があります。

57 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”); このコードに関して 後で解説します。

58 わすれちゃいけない、もう一つのキーワード「prototype」
違いを理解するのがとっても大切！

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

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

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

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

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

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

65 newした時の処理を擬似的に表現すると var objApple = new Frout(“Apple”); var obj = {};
obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj; (1) オブジェクトを生成

66 newした時の処理を擬似的に表現すると var objApple = new Frout(“Apple”); var obj = {};
obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj; Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; Frout.prototype にはcallMe メソッドがあります (1) オブジェクトを生成 (2) prototype プロパティを __proto__ に代入

67 コンストラクタとは関数オブジェクト生成時に一度だけ呼び出される関数
var objApple = new Frout(“Apple”); newした時の処理を擬似的に表現すると var obj = {}; obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj; Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; Frout.prototype にはcallMe メソッドがあります (1) オブジェクトを生成 (2) prototype プロパティを __proto__ に代入 (3) コンストラクタ関数を実行 コンストラクタとは関数オブジェクト生成時に一度だけ呼び出される関数

68 コンストラクタとは関数オブジェクト生成時に一度だけ呼び出される関数
var objApple = new Frout(“Apple”); newした時の処理を擬似的に表現すると var obj = {}; obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj; Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; Frout.prototype にはcallMe メソッドがあります (1) オブジェクトを生成 (2) prototype プロパティを __proto__ に代入 (3) コンストラクタ関数を実行 コンストラクタとは関数オブジェクト生成時に一度だけ呼び出される関数 (4) 処理したオブジェクトを返す

69 コンストラクタとは関数オブジェクト生成時に一度だけ呼び出される関数
var objApple = new Frout(“Apple”); newした時の処理を擬似的に表現すると var obj = {}; obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj; Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; Frout.prototype にはcallMe メソッドがあります (1) オブジェクトを生成 (2) prototype プロパティを __proto__ に代入 (3) コンストラクタ関数を実行 コンストラクタとは関数オブジェクト生成時に一度だけ呼び出される関数 (4) 処理したオブジェクトを返す var objApple = new Frout(“Apple”);

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

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

72 では、ちょっと頭の体操

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

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

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

76 応用

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

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

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

80 応用 その２ …

81 private 変数だったら参照できないはず
OOPと言うのだったらprivate 変数で隠蔽化ぐらいはしたくなりませんか？ これって private 変数？ protected 変数? public 変数？ var Frout = function( name ) { this.name = name; } Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; var objApple = new Frout(“Apple”); alert( objApple.name ); private 変数だったら参照できないはず 結果は…

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

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

84 undefined となり隠蔽化できたことを確認。
var FroutModel = (function() { // private変数 var name = “none"; // コンストラクタ var cls = function(pname){name = pname;}; // public メソッド cls.prototype.callMe = function() {alert("This is "+name);}; return cls; } () ); var objApple = new FroutModel(“Apple”); alert( objApple.name ); objApple.callMe(); undefined となり隠蔽化できたことを確認。 正常に呼び出せます

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

86 BaseModel オブジェクトは FroutModel オブジェクトと同様な実装をしているものとします。
ほかにも、クラスっぽい継承もこんなふうに実装出来ます。 var FroutModel = (function() { // private変数 var name = “none"; // コンストラクタ var cls = function(pname){name = pname;}; // 親クラスの継承 cls.prototype = new BaseModel(); // public メソッド cls.prototype.callMe = function() {alert("This is "+name);}; return cls; } () ); こんな感じ。 BaseModel オブジェクトは FroutModel オブジェクトと同様な実装をしているものとします。

87 var FroutModel = (function() { // private変数 var name = “none";
コードの説明は今までの応用である程度説明できます。是非パズル感覚でチャレンジしてみてください。 （ヒント）スコープチェインのルールによりスコープの外から中は見えない。 var FroutModel = (function() { // private変数 var name = “none"; // コンストラクタ var cls = function(pname){name = pname;}; // 親クラスの継承 cls.prototype = new BaseModel(); // public メソッド cls.prototype.callMe = function() {alert("This is "+name);}; return cls; } () ); （ヒント）FroutModel 関数オブジェクトの中で別関数オブジェクトを生成。 （ヒント） FroutModel 内で生成したオブジェクトを返している。 （ヒント） 即時関数である

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

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

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

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

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

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

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

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

96 参考 最強オブジェクト指向言語 JavaScript 再入門 株式会社フォーエンキーのノジマ様のスライド ブログ XPagesで行こう！ IBMチャンピオン リコーITソリューションズ株式会社 海老原 賢次さんのブログ MDN > 開発者向けのWeb技術 > Javascript Mozilla Developer Network 内のJavascript ポータル JSLint バッドプラクティスに対して警告を出す構文チェッカー

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

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