Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
【A-3】 
SSJSでも使える!Javascriptで 
www.ktrick.com 
オブジェクト指向プログラミング入門 
KTrick 合同会社代表田付和慶
自己紹介 
• 田付和慶(たつきかずのり) 
• ケートリック合同会社代表 
• 米国で7年間、IBM Connect (旧Lotusphere) の 
オンラインソリューションをXPages で開発してきました。 
• 会社のスローガン 
「...
XPagesでの開発を難しく感じる 
原因って何でしょう?
1つはやっぱりJavascript? 
しかも 
クライアントサイド? 
サーバーサイド? 
いきなり2つも覚えろとか・・・(T_T)
最近ではネットでJavascriptのサンプル 
漁ってみると、 
こんなんだったり、 
var func1 = function(){ 
alert("hello!"); 
} 
こんなんだったり、 
var myButton = new B...
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 
プロトタイプチェイン 
オブジェクト(実体)を数珠...
このように、 
Javascriptではクラスではなくプロトタイプチェインという機構を使い 
オブジェクト指向プログラミングを実装しているので、 
プロトタイプベースオブジェクト指向言語 
なんて呼ばれています。
それでは、 
ここからは実際のコードで説明をしていきます。 
※基本的にクライアントサイドJavascriptとして考えて下さい。 
サーバーサイドJavascriptではalert() 等できないためですが、基本の考え方は同じです。
まずは基本。
Objectの作り方 
var obj = { }; 
空っぽのオブジェクトが出来ました。
Objectの構造 
var obj = { 
key: value 
}; 
プロパティ(キーと値の組み合わせ) 
単純ですがこれだけです。 
var obj = { 
name : “Apple”, 
size : 500 
}; 
ale...
Javascriptでは関数も「値」(第一級オブジェクト) 
var obj = { 
func1 : function( ) {alert(“hoge”); } 
}; 
obj.func1(); // Output “hoge” 
var ...
どんどんいきましょう。 
いよいよプロトタイプチェインの説明です。 
JavascriptのOOPの真骨頂
Javascriptのプロトタイプチェインを学ぼうとするとき 
しばしば以下の2つのキーワードが登場します。 
➲ __proto__ ➲prototype 
この2つの意味の違いをしっかりと理解することが 
Javascript OOPを理解...
➲ __proto__
__proto__ 
・Javascriptでは全てのオブジェクトは 
内部プロパティ[[Prototype]]を持つ 
という仕様があります。 
内部プロパティと言っているので、本来 
は外から参照出来ない性質のもの 
とは言いつつ、実際には...
こんなイメージ 
Object (実体) 
Object (実体) 
Object (実体) 
Object (実体) 
Dele 
gate 
Dele 
gate 
Dele 
gate 
__proto__ 
__proto__ 
__p...
コードで確認(__proto__が使えるchrome,firefoxで動きます) 
「It is Apple」 
が出力されます 
var obj = { 
name : “none”, 
callMe : function() { alert...
コードを順番に確認(1) 
「It is Apple」 
が出力されます 
オブジェクトを生成。 
name, 
callMe 
のプロパティを持つ 
objApple オブジェクトを生成。 
nameプロパティに”Apple”を持つ 
obj...
コードを順番に確認(2) 
オブジェクトを生成。 
name, 
callMe 
のプロパティを持つ 
objApple オブジェクトを生成。 
nameプロパティに”Apple”を持つ 
objBlackbox オブジェクトを生成。 
プロパ...
コードを順番に確認(2) 
オブジェクトを生成。 
name, 
callMe 
のプロパティを持つ 
objApple オブジェクトを生成。 
nameプロパティに”Apple”を持つ 
objBlackbox オブジェクトを生成。 
プロパ...
コードで確認(メソッドの確認) 
var obj = { 
name : “none”, 
callMe : function() { alert(“It is ” + this.name); } 
}; 
var objApple = { n...
コードで確認(メソッドの確認) 
var obj = { 
name : “none”, 
callMe : function() { alert(“It is ” + this.name); } 
}; 
var objApple = { n...
コードで確認(メソッドの確認) 
(2)__proto__にあるオブジェクトを検索(objApple) 
var obj = { 
name : “none”, 
callMe : function() { alert(“It is ” + t...
コードで確認(メソッドの確認) 
(1) objBlackboxには 
callMe() メソッドがない 
(3) objAppleにもcallMe() メソッ 
ドがない 
(2)__proto__にあるオブジェクトを検索(objApple)...
コードで確認(メソッドの確認) 
(4)__proto__にあるオブジェクトを検索(obj) 
(1) objBlackboxには 
callMe() メソッドがない 
(3) objAppleにもcallMe() メソッ 
ドがない 
(2)...
コードで確認(メソッドの確認) 
(4)__proto__にあるオブジェクトを検索(obj) 
(1) objBlackboxには 
callMe() メソッドがない 
(5) objにcallMe() メソッドを発見! 
(3) objApp...
コードで確認(属性の確認) 
var obj = { 
name : “none”, 
callMe : function() { alert(“It is ” + this.name); } 
}; 
var objApple = { nam...
コードで確認(属性の確認) 
(1) callMe() メソッドが呼ばれます 
(2) name 属性を参照 
※this は自身のオブジェクトを 
var obj = { 意味しています 
name : “none”, 
callMe : f...
コードで確認(属性の確認) 
(1) callMe() メソッドが呼ばれます 
(2) name 属性を参照 
※this は自身のオブジェクトを 
意味しています 
(3) objBlackboxにはname属性 
がない 
var obj ...
コードで確認(属性の確認) 
(4)__proto__にあるオブジェクトを検索(objApple) 
(1) callMe() メソッドが呼ばれます 
(2) name 属性を参照 
※this は自身のオブジェクトを 
意味しています 
(3...
コードで確認(属性の確認) 
(1) callMe() メソッドが呼ばれます 
(2) name 属性を参照 
※this は自身のオブジェクトを 
意味しています 
(5) objAppleにnameを発見! 
(3) objBlackbox...
コードで確認(属性の確認) 
(6) objにもname属性はあるが 
、参照されない 
(1) callMe() メソッドが呼ばれます 
(2) name 属性を参照 
※this は自身のオブジェクトを 
意味しています 
(5) objA...
このように自オブジェクトにない機能 
(関数)、属性(変数)に対して 
__proto__を通して移譲(Delegate) 
しながらキーが見つかるまで検索して 
いく仕組み… 
これが 
プロトタイプチェイン 
Object (実体) 
Ob...
__proto__ の役割、ご理解頂けたでしょうか?
ん???、ちょっと待って下さい 
__proto__ (別名:[[Prototype]])は内部プロパティだから本来、外部から扱えないもの。 
じゃあ、理解できてもこんなコード使えないじゃないか? 
objApple.__proto__ = o...
はい、使わないで下さい!
実は内部的な動作を理解してもらいやすくするために 
var objApple = { name : “Apple”}; 
objApple.__proto__ = obj; 
こんなコードを書きましたが、同等の処理をさせる別の記述があります。
new演算子です 
var obj = new Frout(“Apple”); 
(例)今までのサンプルコードもOOP風に書き換えが必要になってきます。 
このコードに関して 
後で解説します。 
var Frout = function( p...
➲ prototype 
わすれちゃいけない、もう一つのキーワード「prototype」 
__proto__でプロトタイプチェーンの理解出来たし、説明いらない、 
なんて言わないで下さい。 
違いを理解するのがとっても大切!
prototype 
・Javascriptでは、 
全ての関数オブジェクトはprototype プロパティを持つ 
という仕様があります。 
ん? 関数オブジェクト?? 初登場です。 
でも安心してください、もう知ってます。
関数オブジェクトとは 
var func = function( ){}; 
こういうの 
実は、前述していました。関数であっても「値」として扱える(第一級オブジェクト) 
というやつです。
改めまして、 
全ての関数オブジェクトにはprototype プロパティを持ちます。 
例えば、 
var func = function( ){}; 
alert( func.prototype ); 
とすると、undefinedとはならず...
ちょっと前で触れたnew 演算子で、 
オブジェクトが生成されるときに使われます!
コードで確認 
(今までのサンプルコードの書き換え版) 
コンストラクタの定義 
関数オブジェクトを生成。 
name変数は未定義。 
Frout オブジェクトのprototype 
プロパティにメソッドを追加 
new演算子でobjApple...
var objApple = new Frout(“Apple”); 
newした時の処理を擬似的に表現すると 
var obj = {}; 
obj.__proto__ = Frout.prototype; 
Frout.apply(obj,...
newした時の処理を擬似的に表現すると 
var obj = {}; 
obj.__proto__ = Frout.prototype; 
Frout.apply(obj, arguments ); 
return obj; 
(1) オブジェ...
newした時の処理を擬似的に表現すると 
var obj = {}; 
obj.__proto__ = Frout.prototype; 
Frout.apply(obj, arguments ); 
return obj; 
Frout.pr...
newした時の処理を擬似的に表現すると 
var obj = {}; 
obj.__proto__ = Frout.prototype; 
Frout.apply(obj, arguments ); 
return obj; 
Frout.pr...
newした時の処理を擬似的に表現すると 
var obj = {}; 
obj.__proto__ = Frout.prototype; 
Frout.apply(obj, arguments ); 
return obj; 
Frout.pr...
newした時の処理を擬似的に表現すると 
var obj = {}; 
obj.__proto__ = Frout.prototype; 
Frout.apply(obj, arguments ); 
return obj; 
Frout.pr...
__proto__の解説で使ったサンプル 
newした時の処理を擬似的に表現した処理 
var obj = {}; 
obj.__proto__ = Frout.prototype; 
Frout.apply(obj, arguments );...
__proto__ とprototype の違い、ご理解頂けたでしょうか? 
__proto__ prototype 
プロトタイプオブジェク 
トを格納し、 
newされたときに 
__proto__ 
に代入されることで 
プロトタイプチェ...
では、ちょっと頭の体操
Frout オブジェクトの準備で 
var Frout = function( name ) { 
this.name = name; 
} 
Frout.prototype.callMe = function() { alert(“It is...
OOPの観点から見ると良くないです 
でも、動きます
理由: 
このコードでは、prototype を使わず、コンストラクタ関数の中で定義されてしまいます。 
var Frout = function( name ) { 
this.name = name; 
this.callMe = func...
応用
冒頭で紹介したサンプルコード 
( function() { 
//関数の中身・・・ 
}() ); 
カッコばかりのこの関数、いったいどういった動作をするでしょう?
結論を先に述べると、 
無名関数を作って即時呼び出し 
を行っています。
関数オブジェクト 
関数オブジェクトが返された直後に 
、その関数を呼び出している。 
即時関数 
を生成。 
変数で受けていない 
無名関数。 
( function() { 
//関数の中身・・・ 
}() ); 
即時関数には2つある? ...
応用その2 …
OOPと言うのだったらprivate 変数で隠蔽化ぐらいはしたくなりませんか? 
結果は… 
var Frout = function( name ) { 
this.name = name; 
} 
Frout.prototype.callM...
(当然ながら、)参照できてしまいますorz 
でもちょっとまって
こんな感じで(魔)改造します 
var FroutModel = (function() { 
// private変数 
var name = “none"; 
(魔)改造前 
// コンストラクタ 
var cls = function(p...
var FroutModel = (function() { 
// private変数 
var name = “none"; 
// コンストラクタ 
var cls = function(pname){name = pname;}; 
/...
なんだか大分クラスっぽくなりました。
ほかにも、クラスっぽい継承もこんなふうに実装出来ます。 
var FroutModel = (function() { 
// private変数 
var name = “none"; 
// コンストラクタ 
var cls = funct...
コードの説明は今までの応用である程度説明できます。是非パズル感覚でチャレンジしてみてください。 
var FroutModel = (function() { 
// private変数 
var name = “none"; 
// コンスト...
今回、 
XPagesの話が1つも出ませんでしたが、
今回のJavascriptの内容は 
クライアントサイドJavascript 
サーバーサイドJavascript 
どちらにも通用する概念です。
試しに最後のクラスっぽい実装のオブジェクトをSSJSのスクリプトライブラリにコピペして 
もそのまま動きます。 
var AppModel = (function() { 
// private変数 
var name = “none"; 
/...
スクリプトライブラリにコピペ
XPagesから呼び出し 
出力結果 
一旦viewScopeに 
newしたオブジェクトを 
格納しています
XPagesでOOPを利用するときの注意点 
viewScopeにnewしたオブジェクトを格納しましたが、 
オブジェクトを永続的に保持して利用出来るようにするため、Xspプロパティより「ページをメモリに保存する」を選択します。
いかがでしたでしょうか? 
Javascriptのオブジェクト指向プログラミングは 
理解するまで色々と試してみるのが一番だと思います。 
なんせHTMLファイル1つで試せます。 
<!DOCTYPE html> 
<html> 
<head>...
気づいたらDojoもjQueryももう怖くない、かも
参考• 最強オブジェクト指向言語JavaScript 再入門 
株式会社フォーエンキーのノジマ様のスライド 
http://www.slideshare.net/yuka2py/javascript-23768378 
• ブログXPagesで...
ご清聴ありがとうございました
www.ktrick.com 
この文書はクリエイティブ・コモンズ表示- 継承2.1 日本ライセンスの下に提供されています。
Upcoming SlideShare
Loading in …5
×

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

12,727 views

Published on

XPagesDay 2014 (2014/11/18) 【A-3】「SSJSでも使える!Javascriptでオブジェクト指向プログラミング入門」で使用したスライドになります。

Published in: Technology
  • Dating for everyone is here: ❶❶❶ http://bit.ly/2F4cEJi ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/2F4cEJi ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THI5 BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. 【A-3】 SSJSでも使える!Javascriptで www.ktrick.com オブジェクト指向プログラミング入門 KTrick 合同会社代表田付和慶
  2. 2. 自己紹介 • 田付和慶(たつきかずのり) • ケートリック合同会社代表 • 米国で7年間、IBM Connect (旧Lotusphere) の オンラインソリューションをXPages で開発してきました。 • 会社のスローガン 「若い力を集結させたIBM 技術者集団をめざす!」(特にICS)
  3. 3. XPagesでの開発を難しく感じる 原因って何でしょう?
  4. 4. 1つはやっぱりJavascript? しかも クライアントサイド? サーバーサイド? いきなり2つも覚えろとか・・・(T_T)
  5. 5. 最近ではネットでJavascriptのサンプル 漁ってみると、 こんなんだったり、 var func1 = function(){ alert("hello!"); } こんなんだったり、 var myButton = new Button({ label: "Show me!", onClick: function(){ myDialog.set("content", “Hello!"); myDialog.show(); } }, "progbutton").startup();
  6. 6. Javascriptっていえば、 function func1(param){ alert(param); } こうじゃないの? なんでfunction が後ろに来ちゃうの?
  7. 7. 他にも、こういったの見たことありませんか? ( function () { //関数の中身・・・ }() ); おいおいちょっと、、、カッコ多くないか? これ、最後のカッコ本当にいるの???
  8. 8. お作法だからしかたないんだ… で諦めていませんか?
  9. 9. このセッションでは そういった Javascriptの構造を少し紐解いて 言語への理解を深くしてもらえたらと思っています。
  10. 10. オブジェクト指向プログラミング そもそも、オブジェクト指向プログラミング(OOP)をすると なんのメリットがあるのでしょうか?
  11. 11. OOPの概念や仕組みについて触れだすとこのセッションをフルに使っても時間が足らないので割愛しますが、 主なメリットとして ・プログラムの可読性が高まる ・プログラムの再利用がしやすい ・拡張や仕様変更に強くなる 結果、 テストにかかる時間を減らせ、デスマーチの確率を減らせる。 あと、オブジェクト指向が分かっているとなんだかカッコいい、という風潮がある などなど
  12. 12. オブジェクト指向 この言葉から なにを思い浮かべますか?
  13. 13. クラス移譲 オブジェクト指向プログラミング オーバーロード ポリモーフィズム Java C++ 抽象クラス C# オーバーライド 継承 派生クラス インスタンス UML
  14. 14. オブジェクト指向プログラミングの経験者なら 「クラス」 を真っ先に思いうかべた人もいると思います。
  15. 15. では、 Javascriptにもクラスってあるの?
  16. 16. ないです。 諸説あり
  17. 17. クラスがなくてどうやって オブジェクト指向プログラミング(OOP)するの?
  18. 18. その答えは…
  19. 19. プロトタイプチェイン
  20. 20. そもそも、Javascriptにあるのは オブジェクトのみ
  21. 21. オブジェクト指向なんだから、 オブジェクトがあればいいのです!(強気) クラスなんて飾りです! クラスベースの言語にはそれがわからんのです! (錯乱)
  22. 22. そもそも、クラスってこんなの 親Class (型) 子Class (型) Object (実体) Object (実体) Object (実体) NEW NEW NEW クラスでオブジェクトの「型」をあ らかじめ定義しておき、そのクラス をもとに実体を生成して利用する。 こうすることで、クラスがもつ機能 (関数)や属性(変数)を持った実 体が量産出来る。
  23. 23. クラスを持たない Javascriptでは…
  24. 24. こんなイメージ Object (実体) Object (実体) Object (実体) Object (実体) Dele gate Dele gate Dele gate プロトタイプチェイン オブジェクト(実体)を数珠つな ぎのように繋げて、 オブジェクト自身が知らない関数 や変数への呼び出しがあれば、繋 がりのある別のオブジェクトに移 譲(Delegate)することで見つか るまで遡っていくイメージ。 Dele gate Object (実体)
  25. 25. このように、 Javascriptではクラスではなくプロトタイプチェインという機構を使い オブジェクト指向プログラミングを実装しているので、 プロトタイプベースオブジェクト指向言語 なんて呼ばれています。
  26. 26. それでは、 ここからは実際のコードで説明をしていきます。 ※基本的にクライアントサイドJavascriptとして考えて下さい。 サーバーサイドJavascriptではalert() 等できないためですが、基本の考え方は同じです。
  27. 27. まずは基本。
  28. 28. Objectの作り方 var obj = { }; 空っぽのオブジェクトが出来ました。
  29. 29. Objectの構造 var obj = { key: value }; プロパティ(キーと値の組み合わせ) 単純ですがこれだけです。 var obj = { name : “Apple”, size : 500 }; alert(obj.name); (例)
  30. 30. Javascriptでは関数も「値」(第一級オブジェクト) var obj = { func1 : function( ) {alert(“hoge”); } }; obj.func1(); // Output “hoge” var func = function( ){}; だから変数に代入できます。 そして変数から変数へコピー などの操作もできます。 (例)オブジェクトのプロパティにも代入できます。
  31. 31. どんどんいきましょう。 いよいよプロトタイプチェインの説明です。 JavascriptのOOPの真骨頂
  32. 32. Javascriptのプロトタイプチェインを学ぼうとするとき しばしば以下の2つのキーワードが登場します。 ➲ __proto__ ➲prototype この2つの意味の違いをしっかりと理解することが Javascript OOPを理解する上でとても重要になります
  33. 33. ➲ __proto__
  34. 34. __proto__ ・Javascriptでは全てのオブジェクトは 内部プロパティ[[Prototype]]を持つ という仕様があります。 内部プロパティと言っているので、本来 は外から参照出来ない性質のもの とは言いつつ、実際には__proto__というプロパティでプログラム から扱える実装が多い。(ChromeやFirefox)
  35. 35. こんなイメージ Object (実体) Object (実体) Object (実体) Object (実体) Dele gate Dele gate Dele gate __proto__ __proto__ __proto__ __proto__
  36. 36. コードで確認(__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(); 空っぽなのに
  37. 37. コードを順番に確認(1) 「It is Apple」 が出力されます オブジェクトを生成。 name, callMe のプロパティを持つ objApple オブジェクトを生成。 nameプロパティに”Apple”を持つ objBlackbox オブジェクトを生成。 プロパティはなにも持たない。 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();
  38. 38. コードを順番に確認(2) オブジェクトを生成。 name, callMe のプロパティを持つ objApple オブジェクトを生成。 nameプロパティに”Apple”を持つ objBlackbox オブジェクトを生成。 プロパティはなにも持たない。 var obj = { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; objApple.__proto_ _にobjを代入 var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; objBlackbox.callMe();
  39. 39. コードを順番に確認(2) オブジェクトを生成。 name, callMe のプロパティを持つ objApple オブジェクトを生成。 nameプロパティに”Apple”を持つ objBlackbox オブジェクトを生成。 プロパティはなにも持たない。 objApple.__proto_ _にobjを代入 objBlackbox.__proto__に objAppleを代入 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();
  40. 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. 41. コードで確認(メソッドの確認) var obj = { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; (1) objBlackboxには callMe() メソッドがない objBlackbox.callMe();
  42. 42. コードで確認(メソッドの確認) (2)__proto__にあるオブジェクトを検索(objApple) var obj = { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; (1) objBlackboxには callMe() メソッドがない objBlackbox.callMe();
  43. 43. コードで確認(メソッドの確認) (1) objBlackboxには callMe() メソッドがない (3) objAppleにもcallMe() メソッ ドがない (2)__proto__にあるオブジェクトを検索(objApple) 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();
  44. 44. コードで確認(メソッドの確認) (4)__proto__にあるオブジェクトを検索(obj) (1) objBlackboxには callMe() メソッドがない (3) objAppleにもcallMe() メソッ ドがない (2)__proto__にあるオブジェクトを検索(objApple) 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();
  45. 45. コードで確認(メソッドの確認) (4)__proto__にあるオブジェクトを検索(obj) (1) objBlackboxには callMe() メソッドがない (5) objにcallMe() メソッドを発見! (3) objAppleにもcallMe() メソッ ドがない (2)__proto__にあるオブジェクトを検索(objApple) 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();
  46. 46. コードで確認(属性の確認) var obj = { name : “none”, callMe : function() { alert(“It is ” + this.name); } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj; var objBlackbox = { }; objBlackbox.__proto__ = objApple; (1) callMe() メソッドが呼ばれます objBlackbox.callMe();
  47. 47. コードで確認(属性の確認) (1) callMe() メソッドが呼ばれます (2) 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();
  48. 48. コードで確認(属性の確認) (1) callMe() メソッドが呼ばれます (2) name 属性を参照 ※this は自身のオブジェクトを 意味しています (3) objBlackboxにはname属性 がない 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();
  49. 49. コードで確認(属性の確認) (4)__proto__にあるオブジェクトを検索(objApple) (1) callMe() メソッドが呼ばれます (2) name 属性を参照 ※this は自身のオブジェクトを 意味しています (3) objBlackboxにはname属性 がない 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();
  50. 50. コードで確認(属性の確認) (1) callMe() メソッドが呼ばれます (2) name 属性を参照 ※this は自身のオブジェクトを 意味しています (5) objAppleにnameを発見! (3) objBlackboxにはname属性 がない (4)__proto__にあるオブジェクトを検索(objApple) 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();
  51. 51. コードで確認(属性の確認) (6) objにもname属性はあるが 、参照されない (1) callMe() メソッドが呼ばれます (2) name 属性を参照 ※this は自身のオブジェクトを 意味しています (5) objAppleにnameを発見! (3) objBlackboxにはname属性 がない (4)__proto__にあるオブジェクトを検索(objApple) 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();
  52. 52. このように自オブジェクトにない機能 (関数)、属性(変数)に対して __proto__を通して移譲(Delegate) しながらキーが見つかるまで検索して いく仕組み… これが プロトタイプチェイン Object (実体) Object (実体) あった Object (実体) Object (実体) Dele gate Dele gate Dele gate ない ない ない
  53. 53. __proto__ の役割、ご理解頂けたでしょうか?
  54. 54. ん???、ちょっと待って下さい __proto__ (別名:[[Prototype]])は内部プロパティだから本来、外部から扱えないもの。 じゃあ、理解できてもこんなコード使えないじゃないか? objApple.__proto__ = obj; と思いませんか?
  55. 55. はい、使わないで下さい!
  56. 56. 実は内部的な動作を理解してもらいやすくするために var objApple = { name : “Apple”}; objApple.__proto__ = obj; こんなコードを書きましたが、同等の処理をさせる別の記述があります。
  57. 57. 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”);
  58. 58. ➲ prototype わすれちゃいけない、もう一つのキーワード「prototype」 __proto__でプロトタイプチェーンの理解出来たし、説明いらない、 なんて言わないで下さい。 違いを理解するのがとっても大切!
  59. 59. prototype ・Javascriptでは、 全ての関数オブジェクトはprototype プロパティを持つ という仕様があります。 ん? 関数オブジェクト?? 初登場です。 でも安心してください、もう知ってます。
  60. 60. 関数オブジェクトとは var func = function( ){}; こういうの 実は、前述していました。関数であっても「値」として扱える(第一級オブジェクト) というやつです。
  61. 61. 改めまして、 全ての関数オブジェクトにはprototype プロパティを持ちます。 例えば、 var func = function( ){}; alert( func.prototype ); とすると、undefinedとはならず、prototype プロパティが存在することが確認できます。 でも、関数オブジェクトを定義した直後では、 prototypeは何も値を持たない空っぽのオブジェクトを参照しています。 では、これが何に使われるのでしょうか・・・
  62. 62. ちょっと前で触れたnew 演算子で、 オブジェクトが生成されるときに使われます!
  63. 63. コードで確認 (今までのサンプルコードの書き換え版) コンストラクタの定義 関数オブジェクトを生成。 name変数は未定義。 Frout オブジェクトのprototype プロパティにメソッドを追加 new演算子でobjApple オブジ ェクトを生成。 objAppleのプロトタイプチェイ ンよりFroutのprototypeを継承 var Frout = function( pname ) { this.name = pname; } Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; var objApple = new Frout(“Apple”); objApple.callMe(); 「It is Apple」が出力されます。 objApple.prototype.callMe() ではないことに注目 次のスライドで 触れます
  64. 64. var objApple = new Frout(“Apple”); newした時の処理を擬似的に表現すると var obj = {}; obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj;
  65. 65. newした時の処理を擬似的に表現すると var obj = {}; obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj; (1) オブジェクトを生成 var objApple = new Frout(“Apple”);
  66. 66. newした時の処理を擬似的に表現すると var obj = {}; obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj; Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; (1) オブジェクトを生成 Frout.prototype にはcallMe メソッ ドがあります (2) prototype プロパティを__proto__ に代入 var objApple = new Frout(“Apple”);
  67. 67. newした時の処理を擬似的に表現すると var obj = {}; obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj; Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; (1) オブジェクトを生成 Frout.prototype にはcallMe メソッ ドがあります (2) prototype プロパティを__proto__ に代入 (3) コンストラクタ関数を実行 コンストラクタとは 関数オブジェクト生 成時に一度だけ呼び 出される関数 var objApple = new Frout(“Apple”);
  68. 68. newした時の処理を擬似的に表現すると var obj = {}; obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj; Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; (1) オブジェクトを生成 (2) prototype プロパティを__proto__ に代入 (3) コンストラクタ関数を実行 コンストラクタとは 関数オブジェクト生 成時に一度だけ呼び 出される関数 (4) 処理したオブジェクトを返す Frout.prototype にはcallMe メソッ ドがあります var objApple = new Frout(“Apple”);
  69. 69. newした時の処理を擬似的に表現すると var obj = {}; obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj; Frout.prototype.callMe = function() { alert(“It is ” + this.name); }; (1) オブジェクトを生成 (2) prototype プロパティを__proto__ に代入 (3) コンストラクタ関数を実行 コンストラクタとは 関数オブジェクト生 成時に一度だけ呼び 出される関数 (4) 処理したオブジェクトを返す Frout.prototype にはcallMe メソッ ドがあります var objApple = new Frout(“Apple”); var objApple = new Frout(“Apple”);
  70. 70. __proto__の解説で使ったサンプル newした時の処理を擬似的に表現した処理 var obj = {}; obj.__proto__ = Frout.prototype; Frout.apply(obj, arguments ); return obj; obj をFrout.prototype だと置き換えたら どちらもcallMe() メソッドを持つことに なることが想像できます。 Frout.prototype.callMe = function() {…}; var obj = { name : “none”, callMe : function() { … } }; var objApple = { name : “Apple”}; objApple.__proto__ = obj;
  71. 71. __proto__ とprototype の違い、ご理解頂けたでしょうか? __proto__ prototype プロトタイプオブジェク トを格納し、 newされたときに __proto__ に代入されることで プロトタイプチェインを 作り出す。 プロトタイプチェインの 検索の仕組みそのもの。 newされたオブジェクト のprototype が自動で格 納される。 積極的に使って 行きましょう 概念の理解のために必要。 実際はnewとprototypeで実 装させよう
  72. 72. では、ちょっと頭の体操
  73. 73. Frout オブジェクトの準備で 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. 74. OOPの観点から見ると良くないです でも、動きます
  75. 75. 理由: このコードでは、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. 76. 応用
  77. 77. 冒頭で紹介したサンプルコード ( function() { //関数の中身・・・ }() ); カッコばかりのこの関数、いったいどういった動作をするでしょう?
  78. 78. 結論を先に述べると、 無名関数を作って即時呼び出し を行っています。
  79. 79. 関数オブジェクト 関数オブジェクトが返された直後に 、その関数を呼び出している。 即時関数 を生成。 変数で受けていない 無名関数。 ( function() { //関数の中身・・・ }() ); 即時関数には2つある? //即時関数1 (function () { //関数の中身・・・ }()); //即時関数2 (function () { //関数の中身・・・ })(); どちらも即時関数として機能しますが、 JSLint(http://www.jslint.com/)では 前者のコードの方が好ましいようです。 というなんとも複雑な処理を経ていました。 ページが読み込まれた時、一度だけ処理をする、といった時に使われます。
  80. 80. 応用その2 …
  81. 81. OOPと言うのだったらprivate 変数で隠蔽化ぐらいはしたくなりませんか? 結果は… 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 変数だったら 参照できないはず これって private 変数? protected 変数? public 変数?
  82. 82. (当然ながら、)参照できてしまいますorz でもちょっとまって
  83. 83. こんな感じで(魔)改造します 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 Frout = function( name ) { this.name = name; } Frout.prototype.callMe = function() { alert(“It is ” + this.name); };
  84. 84. 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. 85. なんだか大分クラスっぽくなりました。
  86. 86. ほかにも、クラスっぽい継承もこんなふうに実装出来ます。 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. 87. コードの説明は今までの応用である程度説明できます。是非パズル感覚でチャレンジしてみてください。 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. 88. 今回、 XPagesの話が1つも出ませんでしたが、
  89. 89. 今回のJavascriptの内容は クライアントサイドJavascript サーバーサイドJavascript どちらにも通用する概念です。
  90. 90. 試しに最後のクラスっぽい実装のオブジェクトを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. 91. スクリプトライブラリにコピペ
  92. 92. XPagesから呼び出し 出力結果 一旦viewScopeに newしたオブジェクトを 格納しています
  93. 93. XPagesでOOPを利用するときの注意点 viewScopeにnewしたオブジェクトを格納しましたが、 オブジェクトを永続的に保持して利用出来るようにするため、Xspプロパティより「ページをメモリに保存する」を選択します。
  94. 94. いかがでしたでしょうか? Javascriptのオブジェクト指向プログラミングは 理解するまで色々と試してみるのが一番だと思います。 なんせHTMLファイル1つで試せます。 <!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>
  95. 95. 気づいたらDojoもjQueryももう怖くない、かも
  96. 96. 参考• 最強オブジェクト指向言語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/
  97. 97. ご清聴ありがとうございました
  98. 98. www.ktrick.com この文書はクリエイティブ・コモンズ表示- 継承2.1 日本ライセンスの下に提供されています。

×