SlideShare a Scribd company logo
1 of 98
【A-3】 
SSJSでも使える!Javascriptで 
www.ktrick.com 
オブジェクト指向プログラミング入門 
KTrick 合同会社代表田付和慶
自己紹介 
• 田付和慶(たつきかずのり) 
• ケートリック合同会社代表 
• 米国で7年間、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のプロトタイプチェインを学ぼうとするとき 
しばしば以下の2つのキーワードが登場します。 
➲ __proto__ ➲prototype 
この2つの意味の違いをしっかりと理解することが 
Javascript OOPを理解する上でとても重要になります
➲ __proto__
__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(); 
空っぽなのに
コードを順番に確認(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();
コードを順番に確認(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();
コードを順番に確認(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();
コードで確認(メソッドの確認) 
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();
コードで確認(メソッドの確認) 
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();
コードで確認(メソッドの確認) 
(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();
コードで確認(メソッドの確認) 
(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();
コードで確認(メソッドの確認) 
(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();
コードで確認(メソッドの確認) 
(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();
コードで確認(属性の確認) 
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();
コードで確認(属性の確認) 
(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();
コードで確認(属性の確認) 
(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();
コードで確認(属性の確認) 
(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();
コードで確認(属性の確認) 
(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();
コードで確認(属性の確認) 
(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();
このように自オブジェクトにない機能 
(関数)、属性(変数)に対して 
__proto__を通して移譲(Delegate) 
しながらキーが見つかるまで検索して 
いく仕組み… 
これが 
プロトタイプチェイン 
Object (実体) 
Object (実体) 
あった 
Object (実体) 
Object (実体) 
Dele 
gate 
Dele 
gate 
Dele 
gate 
ない 
ない 
ない
__proto__ の役割、ご理解頂けたでしょうか?
ん???、ちょっと待って下さい 
__proto__ (別名:[[Prototype]])は内部プロパティだから本来、外部から扱えないもの。 
じゃあ、理解できてもこんなコード使えないじゃないか? 
objApple.__proto__ = obj; 
と思いませんか?
はい、使わないで下さい!
実は内部的な動作を理解してもらいやすくするために 
var objApple = { name : “Apple”}; 
objApple.__proto__ = obj; 
こんなコードを書きましたが、同等の処理をさせる別の記述があります。
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 プロパティを持つ 
という仕様があります。 
ん? 関数オブジェクト?? 初登場です。 
でも安心してください、もう知ってます。
関数オブジェクトとは 
var func = function( ){}; 
こういうの 
実は、前述していました。関数であっても「値」として扱える(第一級オブジェクト) 
というやつです。
改めまして、 
全ての関数オブジェクトにはprototype プロパティを持ちます。 
例えば、 
var func = function( ){}; 
alert( func.prototype ); 
とすると、undefinedとはならず、prototype プロパティが存在することが確認できます。 
でも、関数オブジェクトを定義した直後では、 
prototypeは何も値を持たない空っぽのオブジェクトを参照しています。 
では、これが何に使われるのでしょうか・・・
ちょっと前で触れたnew 演算子で、 
オブジェクトが生成されるときに使われます!
コードで確認 
(今までのサンプルコードの書き換え版) 
コンストラクタの定義 
関数オブジェクトを生成。 
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() 
ではないことに注目 
次のスライドで 
触れます
var objApple = new Frout(“Apple”); 
newした時の処理を擬似的に表現すると 
var obj = {}; 
obj.__proto__ = Frout.prototype; 
Frout.apply(obj, arguments ); 
return obj;
newした時の処理を擬似的に表現すると 
var obj = {}; 
obj.__proto__ = Frout.prototype; 
Frout.apply(obj, arguments ); 
return obj; 
(1) オブジェクトを生成 
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); }; 
(1) オブジェクトを生成 
Frout.prototype 
にはcallMe メソッ 
ドがあります 
(2) prototype プロパティを__proto__ に代入 
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); }; 
(1) オブジェクトを生成 
Frout.prototype 
にはcallMe メソッ 
ドがあります 
(2) prototype プロパティを__proto__ に代入 
(3) コンストラクタ関数を実行 
コンストラクタとは 
関数オブジェクト生 
成時に一度だけ呼び 
出される関数 
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); }; 
(1) オブジェクトを生成 
(2) prototype プロパティを__proto__ に代入 
(3) コンストラクタ関数を実行 
コンストラクタとは 
関数オブジェクト生 
成時に一度だけ呼び 
出される関数 
(4) 処理したオブジェクトを返す 
Frout.prototype 
にはcallMe メソッ 
ドがあります 
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); }; 
(1) オブジェクトを生成 
(2) prototype プロパティを__proto__ に代入 
(3) コンストラクタ関数を実行 
コンストラクタとは 
関数オブジェクト生 
成時に一度だけ呼び 
出される関数 
(4) 処理したオブジェクトを返す 
Frout.prototype 
にはcallMe メソッ 
ドがあります 
var objApple = new Frout(“Apple”); 
var objApple = new Frout(“Apple”);
__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;
__proto__ とprototype の違い、ご理解頂けたでしょうか? 
__proto__ prototype 
プロトタイプオブジェク 
トを格納し、 
newされたときに 
__proto__ 
に代入されることで 
プロトタイプチェインを 
作り出す。 
プロトタイプチェインの 
検索の仕組みそのもの。 
newされたオブジェクト 
のprototype が自動で格 
納される。 
積極的に使って 
行きましょう 
概念の理解のために必要。 
実際はnewとprototypeで実 
装させよう
では、ちょっと頭の体操
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); }; 
} 
と書きたくなりませんか? これじゃダメでしょうか?
OOPの観点から見ると良くないです 
でも、動きます
理由: 
このコードでは、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); };
応用
冒頭で紹介したサンプルコード 
( function() { 
//関数の中身・・・ 
}() ); 
カッコばかりのこの関数、いったいどういった動作をするでしょう?
結論を先に述べると、 
無名関数を作って即時呼び出し 
を行っています。
関数オブジェクト 
関数オブジェクトが返された直後に 
、その関数を呼び出している。 
即時関数 
を生成。 
変数で受けていない 
無名関数。 
( function() { 
//関数の中身・・・ 
}() ); 
即時関数には2つある? 
//即時関数1 
(function () { 
//関数の中身・・・ 
}()); 
//即時関数2 
(function () { 
//関数の中身・・・ 
})(); 
どちらも即時関数として機能しますが、 
JSLint(http://www.jslint.com/)では 
前者のコードの方が好ましいようです。 
というなんとも複雑な処理を経ていました。 
ページが読み込まれた時、一度だけ処理をする、といった時に使われます。
応用その2 …
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 変数?
(当然ながら、)参照できてしまいます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; 
} () ); 
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; 
} () ); 
var objApple = new FroutModel(“Apple”); 
alert( objApple.name ); 
objApple.callMe(); 
undefined となり隠蔽化 
できたことを確認。 
正常に呼び出せます
なんだか大分クラスっぽくなりました。
ほかにも、クラスっぽい継承もこんなふうに実装出来ます。 
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 オブジェクトと 
同様な実装をしているもの 
とします。
コードの説明は今までの応用である程度説明できます。是非パズル感覚でチャレンジしてみてください。 
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 内で生成 
したオブジェクトを返している。 
(ヒント) 
即時関数である
今回、 
XPagesの話が1つも出ませんでしたが、
今回のJavascriptの内容は 
クライアントサイドJavascript 
サーバーサイド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に利用して 
います。
スクリプトライブラリにコピペ
XPagesから呼び出し 
出力結果 
一旦viewScopeに 
newしたオブジェクトを 
格納しています
XPagesでOOPを利用するときの注意点 
viewScopeにnewしたオブジェクトを格納しましたが、 
オブジェクトを永続的に保持して利用出来るようにするため、Xspプロパティより「ページをメモリに保存する」を選択します。
いかがでしたでしょうか? 
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>
気づいたら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 日本ライセンスの下に提供されています。

More Related Content

What's hot

クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介しくみ製作所
 
Ecmascript2015とその周辺について
Ecmascript2015とその周辺についてEcmascript2015とその周辺について
Ecmascript2015とその周辺について豊明 尾古
 
Start!! Ruby
Start!! RubyStart!! Ruby
Start!! Rubymitim
 
「Html sql」で図書館hpにアクセスしてみよう
「Html sql」で図書館hpにアクセスしてみよう「Html sql」で図書館hpにアクセスしてみよう
「Html sql」で図書館hpにアクセスしてみようKentaro Matsui
 
20120327 phpstudy58-phake
20120327 phpstudy58-phake20120327 phpstudy58-phake
20120327 phpstudy58-phakeKatsuhiro Ogawa
 
Javascripでオブジェクト指向
Javascripでオブジェクト指向Javascripでオブジェクト指向
Javascripでオブジェクト指向1000 VICKY
 
TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービューTypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービューAkira Inoue
 
大(中)規模Java script開発について
大(中)規模Java script開発について大(中)規模Java script開発について
大(中)規模Java script開発についてYuki Tanaka
 
探検!SwiftyJSON
探検!SwiftyJSON探検!SwiftyJSON
探検!SwiftyJSONYuka Ezura
 
Prophecyを使ったユニットテスト
Prophecyを使ったユニットテスト Prophecyを使ったユニットテスト
Prophecyを使ったユニットテスト Akio Ishida
 
PHP5.5新機能「ジェネレータ」初心者入門
PHP5.5新機能「ジェネレータ」初心者入門PHP5.5新機能「ジェネレータ」初心者入門
PHP5.5新機能「ジェネレータ」初心者入門kwatch
 
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1Nishida Kansuke
 
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1Nishida Kansuke
 
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)Hiroaki KOBAYASHI
 
Doma SQLテンプレートのしくみ
Doma SQLテンプレートのしくみDoma SQLテンプレートのしくみ
Doma SQLテンプレートのしくみToshihiro Nakamura
 
Algorithm 速いアルゴリズムを書くための基礎
Algorithm 速いアルゴリズムを書くための基礎Algorithm 速いアルゴリズムを書くための基礎
Algorithm 速いアルゴリズムを書くための基礎Kenji Otsuka
 
Kanazawa.js.Next
Kanazawa.js.NextKanazawa.js.Next
Kanazawa.js.Nextdynamis
 
マクロでBASEを操作しよう BASE Let's operate with macros
 マクロでBASEを操作しよう  BASE Let's operate with macros マクロでBASEを操作しよう  BASE Let's operate with macros
マクロでBASEを操作しよう BASE Let's operate with macroskoutarou watanabe
 

What's hot (20)

クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
 
Ecmascript2015とその周辺について
Ecmascript2015とその周辺についてEcmascript2015とその周辺について
Ecmascript2015とその周辺について
 
Start!! Ruby
Start!! RubyStart!! Ruby
Start!! Ruby
 
「Html sql」で図書館hpにアクセスしてみよう
「Html sql」で図書館hpにアクセスしてみよう「Html sql」で図書館hpにアクセスしてみよう
「Html sql」で図書館hpにアクセスしてみよう
 
20120327 phpstudy58-phake
20120327 phpstudy58-phake20120327 phpstudy58-phake
20120327 phpstudy58-phake
 
Javascripでオブジェクト指向
Javascripでオブジェクト指向Javascripでオブジェクト指向
Javascripでオブジェクト指向
 
TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービューTypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービュー
 
大(中)規模Java script開発について
大(中)規模Java script開発について大(中)規模Java script開発について
大(中)規模Java script開発について
 
Ruby test double
Ruby test doubleRuby test double
Ruby test double
 
探検!SwiftyJSON
探検!SwiftyJSON探検!SwiftyJSON
探検!SwiftyJSON
 
Prophecyを使ったユニットテスト
Prophecyを使ったユニットテスト Prophecyを使ったユニットテスト
Prophecyを使ったユニットテスト
 
Ajax 応用
Ajax 応用Ajax 応用
Ajax 応用
 
PHP5.5新機能「ジェネレータ」初心者入門
PHP5.5新機能「ジェネレータ」初心者入門PHP5.5新機能「ジェネレータ」初心者入門
PHP5.5新機能「ジェネレータ」初心者入門
 
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
 
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
 
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
仕事の手離れを良くする手段としての、静的検査のあるテンプレートエンジン (YATT::Lite talk at 2014 テンプレートエンジンNight)
 
Doma SQLテンプレートのしくみ
Doma SQLテンプレートのしくみDoma SQLテンプレートのしくみ
Doma SQLテンプレートのしくみ
 
Algorithm 速いアルゴリズムを書くための基礎
Algorithm 速いアルゴリズムを書くための基礎Algorithm 速いアルゴリズムを書くための基礎
Algorithm 速いアルゴリズムを書くための基礎
 
Kanazawa.js.Next
Kanazawa.js.NextKanazawa.js.Next
Kanazawa.js.Next
 
マクロでBASEを操作しよう BASE Let's operate with macros
 マクロでBASEを操作しよう  BASE Let's operate with macros マクロでBASEを操作しよう  BASE Let's operate with macros
マクロでBASEを操作しよう BASE Let's operate with macros
 

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

JavaScriptクイックスタート
JavaScriptクイックスタートJavaScriptクイックスタート
JavaScriptクイックスタートShumpei Shiraishi
 
Web技術勉強会 20110528
Web技術勉強会 20110528Web技術勉強会 20110528
Web技術勉強会 20110528龍一 田中
 
Java オブジェクトの内部構造
Java オブジェクトの内部構造Java オブジェクトの内部構造
Java オブジェクトの内部構造Taku Miyakawa
 
夏だからJava再入門
夏だからJava再入門夏だからJava再入門
夏だからJava再入門Katsumi Honda
 
JavaのGenericsとは?
JavaのGenericsとは?JavaのGenericsとは?
JavaのGenericsとは?Kenji Nakamura
 
ClassLoader Leak Patterns
ClassLoader Leak PatternsClassLoader Leak Patterns
ClassLoader Leak Patternsnekop
 
TypeScript と Visual Studio Code
TypeScript と Visual Studio CodeTypeScript と Visual Studio Code
TypeScript と Visual Studio CodeAkira Inoue
 
ちょっと詳しくJavaScript 特別編【悪霊の神々】
ちょっと詳しくJavaScript 特別編【悪霊の神々】ちょっと詳しくJavaScript 特別編【悪霊の神々】
ちょっと詳しくJavaScript 特別編【悪霊の神々】株式会社ランチェスター
 
An Internal of LINQ to Objects
An Internal of LINQ to ObjectsAn Internal of LINQ to Objects
An Internal of LINQ to ObjectsYoshifumi Kawai
 
Enumはデキる子 ~ case .Success(let value): ~
 Enumはデキる子 ~ case .Success(let value): ~ Enumはデキる子 ~ case .Success(let value): ~
Enumはデキる子 ~ case .Success(let value): ~Takaaki Tanaka
 
TypeScript 言語処理系ことはじめ
TypeScript 言語処理系ことはじめTypeScript 言語処理系ことはじめ
TypeScript 言語処理系ことはじめYu Nobuoka
 
"Hello World!" から始める Calc で LibreOffice Basic
"Hello World!" から始める Calc で LibreOffice Basic"Hello World!" から始める Calc で LibreOffice Basic
"Hello World!" から始める Calc で LibreOffice Basic78tch
 
pi-15. カプセル化, MVCモデル, オブジェクトのマッピング
pi-15. カプセル化, MVCモデル, オブジェクトのマッピングpi-15. カプセル化, MVCモデル, オブジェクトのマッピング
pi-15. カプセル化, MVCモデル, オブジェクトのマッピングkunihikokaneko1
 
わかるコードを書くために For writing clean code
わかるコードを書くために For writing clean codeわかるコードを書くために For writing clean code
わかるコードを書くために For writing clean codeEyes, JAPAN
 
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansaiJavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansaiTomohiro Kumagai
 

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

Objc lambda
Objc lambdaObjc lambda
Objc lambda
 
JavaScriptクイックスタート
JavaScriptクイックスタートJavaScriptクイックスタート
JavaScriptクイックスタート
 
Web技術勉強会 20110528
Web技術勉強会 20110528Web技術勉強会 20110528
Web技術勉強会 20110528
 
Java オブジェクトの内部構造
Java オブジェクトの内部構造Java オブジェクトの内部構造
Java オブジェクトの内部構造
 
named_scope more detail
named_scope more detailnamed_scope more detail
named_scope more detail
 
夏だからJava再入門
夏だからJava再入門夏だからJava再入門
夏だからJava再入門
 
JavaScript入門
JavaScript入門JavaScript入門
JavaScript入門
 
JavaのGenericsとは?
JavaのGenericsとは?JavaのGenericsとは?
JavaのGenericsとは?
 
ClassLoader Leak Patterns
ClassLoader Leak PatternsClassLoader Leak Patterns
ClassLoader Leak Patterns
 
前期講座08
前期講座08前期講座08
前期講座08
 
TypeScript と Visual Studio Code
TypeScript と Visual Studio CodeTypeScript と Visual Studio Code
TypeScript と Visual Studio Code
 
ちょっと詳しくJavaScript 特別編【悪霊の神々】
ちょっと詳しくJavaScript 特別編【悪霊の神々】ちょっと詳しくJavaScript 特別編【悪霊の神々】
ちょっと詳しくJavaScript 特別編【悪霊の神々】
 
An Internal of LINQ to Objects
An Internal of LINQ to ObjectsAn Internal of LINQ to Objects
An Internal of LINQ to Objects
 
Enumはデキる子 ~ case .Success(let value): ~
 Enumはデキる子 ~ case .Success(let value): ~ Enumはデキる子 ~ case .Success(let value): ~
Enumはデキる子 ~ case .Success(let value): ~
 
TypeScript 言語処理系ことはじめ
TypeScript 言語処理系ことはじめTypeScript 言語処理系ことはじめ
TypeScript 言語処理系ことはじめ
 
"Hello World!" から始める Calc で LibreOffice Basic
"Hello World!" から始める Calc で LibreOffice Basic"Hello World!" から始める Calc で LibreOffice Basic
"Hello World!" から始める Calc で LibreOffice Basic
 
pi-15. カプセル化, MVCモデル, オブジェクトのマッピング
pi-15. カプセル化, MVCモデル, オブジェクトのマッピングpi-15. カプセル化, MVCモデル, オブジェクトのマッピング
pi-15. カプセル化, MVCモデル, オブジェクトのマッピング
 
わかるコードを書くために For writing clean code
わかるコードを書くために For writing clean codeわかるコードを書くために For writing clean code
わかるコードを書くために For writing clean code
 
C++勉強会
C++勉強会C++勉強会
C++勉強会
 
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansaiJavaScriptCore.framework の普通な使い方 #cocoa_kansai
JavaScriptCore.framework の普通な使い方 #cocoa_kansai
 

More from Kazunori Tatsuki

「dominoワークフローはここまで進化した!v12クラウドネイティブがもたらす新たなアプリ運用」ケートリックウェビナー2021.06.25
「dominoワークフローはここまで進化した!v12クラウドネイティブがもたらす新たなアプリ運用」ケートリックウェビナー2021.06.25「dominoワークフローはここまで進化した!v12クラウドネイティブがもたらす新たなアプリ運用」ケートリックウェビナー2021.06.25
「dominoワークフローはここまで進化した!v12クラウドネイティブがもたらす新たなアプリ運用」ケートリックウェビナー2021.06.25Kazunori Tatsuki
 
Xpagesからさらにその先へ、最新Dominoアプリケーション開発で 企業のノーツアプリはこう生まれ変わる
Xpagesからさらにその先へ、最新Dominoアプリケーション開発で企業のノーツアプリはこう生まれ変わるXpagesからさらにその先へ、最新Dominoアプリケーション開発で企業のノーツアプリはこう生まれ変わる
Xpagesからさらにその先へ、最新Dominoアプリケーション開発で 企業のノーツアプリはこう生まれ変わるKazunori Tatsuki
 
XPagesDay 2016 「xpagesでjava開発するぞ!」
XPagesDay 2016 「xpagesでjava開発するぞ!」 XPagesDay 2016 「xpagesでjava開発するぞ!」
XPagesDay 2016 「xpagesでjava開発するぞ!」 Kazunori Tatsuki
 
20151118パートナーソリューションセミナー2015プレゼンテーション public
20151118パートナーソリューションセミナー2015プレゼンテーション   public20151118パートナーソリューションセミナー2015プレゼンテーション   public
20151118パートナーソリューションセミナー2015プレゼンテーション publicKazunori Tatsuki
 
IBM Connect Japan 2016 「ドミノアプリをカンタンWEB化!業務アプリ作成ツール 「Aveedo」のご紹介」
IBM Connect Japan 2016 「ドミノアプリをカンタンWEB化!業務アプリ作成ツール 「Aveedo」のご紹介」IBM Connect Japan 2016 「ドミノアプリをカンタンWEB化!業務アプリ作成ツール 「Aveedo」のご紹介」
IBM Connect Japan 2016 「ドミノアプリをカンタンWEB化!業務アプリ作成ツール 「Aveedo」のご紹介」Kazunori Tatsuki
 
20150225 テクテクlotus技術者夜会 ibm connect ed2015フィードバック 公開用
20150225 テクテクlotus技術者夜会 ibm connect ed2015フィードバック   公開用20150225 テクテクlotus技術者夜会 ibm connect ed2015フィードバック   公開用
20150225 テクテクlotus技術者夜会 ibm connect ed2015フィードバック 公開用Kazunori Tatsuki
 
[A 3]Javascript oop for xpages developers - public
[A 3]Javascript oop for xpages developers - public[A 3]Javascript oop for xpages developers - public
[A 3]Javascript oop for xpages developers - publicKazunori Tatsuki
 
【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要
【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要
【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要Kazunori Tatsuki
 

More from Kazunori Tatsuki (8)

「dominoワークフローはここまで進化した!v12クラウドネイティブがもたらす新たなアプリ運用」ケートリックウェビナー2021.06.25
「dominoワークフローはここまで進化した!v12クラウドネイティブがもたらす新たなアプリ運用」ケートリックウェビナー2021.06.25「dominoワークフローはここまで進化した!v12クラウドネイティブがもたらす新たなアプリ運用」ケートリックウェビナー2021.06.25
「dominoワークフローはここまで進化した!v12クラウドネイティブがもたらす新たなアプリ運用」ケートリックウェビナー2021.06.25
 
Xpagesからさらにその先へ、最新Dominoアプリケーション開発で 企業のノーツアプリはこう生まれ変わる
Xpagesからさらにその先へ、最新Dominoアプリケーション開発で企業のノーツアプリはこう生まれ変わるXpagesからさらにその先へ、最新Dominoアプリケーション開発で企業のノーツアプリはこう生まれ変わる
Xpagesからさらにその先へ、最新Dominoアプリケーション開発で 企業のノーツアプリはこう生まれ変わる
 
XPagesDay 2016 「xpagesでjava開発するぞ!」
XPagesDay 2016 「xpagesでjava開発するぞ!」 XPagesDay 2016 「xpagesでjava開発するぞ!」
XPagesDay 2016 「xpagesでjava開発するぞ!」
 
20151118パートナーソリューションセミナー2015プレゼンテーション public
20151118パートナーソリューションセミナー2015プレゼンテーション   public20151118パートナーソリューションセミナー2015プレゼンテーション   public
20151118パートナーソリューションセミナー2015プレゼンテーション public
 
IBM Connect Japan 2016 「ドミノアプリをカンタンWEB化!業務アプリ作成ツール 「Aveedo」のご紹介」
IBM Connect Japan 2016 「ドミノアプリをカンタンWEB化!業務アプリ作成ツール 「Aveedo」のご紹介」IBM Connect Japan 2016 「ドミノアプリをカンタンWEB化!業務アプリ作成ツール 「Aveedo」のご紹介」
IBM Connect Japan 2016 「ドミノアプリをカンタンWEB化!業務アプリ作成ツール 「Aveedo」のご紹介」
 
20150225 テクテクlotus技術者夜会 ibm connect ed2015フィードバック 公開用
20150225 テクテクlotus技術者夜会 ibm connect ed2015フィードバック   公開用20150225 テクテクlotus技術者夜会 ibm connect ed2015フィードバック   公開用
20150225 テクテクlotus技術者夜会 ibm connect ed2015フィードバック 公開用
 
[A 3]Javascript oop for xpages developers - public
[A 3]Javascript oop for xpages developers - public[A 3]Javascript oop for xpages developers - public
[A 3]Javascript oop for xpages developers - public
 
【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要
【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要
【C-3】ジャンボフェリー 予約システムの事例からみるXPagesを使った提案・開発の概要
 

Recently uploaded

5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一瑛一 西口
 
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)keikoitakurag
 
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdkokinagano2
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイントonozaty
 
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose EstimationToru Tamaki
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperleger Tokyo Meetup
 
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用KLab Inc. / Tech
 
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑Akihiro Kadohata
 
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfTakayuki Nakayama
 
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521Satoshi Makita
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員Sadaomi Nishi
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。iPride Co., Ltd.
 
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )iwashiira2ctf
 
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルCRI Japan, Inc.
 
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計atsushi061452
 
20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdfAyachika Kitazaki
 

Recently uploaded (16)

5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
5/22 第23回 Customer系エンジニア座談会のスライド 公開用 西口瑛一
 
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
 
Keywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltdKeywordmap overview material/CINC.co.ltd
Keywordmap overview material/CINC.co.ltd
 
情報を表現するときのポイント
情報を表現するときのポイント情報を表現するときのポイント
情報を表現するときのポイント
 
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
論文紹介:ViTPose: Simple Vision Transformer Baselines for Human Pose Estimation
 
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
Hyperledger Fabricコミュニティ活動体験& Hyperledger Fabric最新状況ご紹介
 
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
2024年5月17日 先駆的科学計算フォーラム2024 機械学習を用いた新たなゲーム体験の創出の応用
 
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
クラウド時代におけるSREとUPWARDの取組ーUPWARD株式会社 CTO門畑
 
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdfネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
ネットワーク可視化 振る舞い検知(NDR)ご紹介_キンドリル202405.pdf
 
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
ロボットマニピュレーションの作業・動作計画 / rosjp_planning_for_robotic_manipulation_20240521
 
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
部内勉強会(IT用語ざっくり学習) 実施日:2024年5月17日(金) 対象者:営業部社員
 
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その1) 2024/05/17の勉強会で発表されたものです。
 
Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )Intranet Development v1.0 (TSG LIVE! 12 LT )
Intranet Development v1.0 (TSG LIVE! 12 LT )
 
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイルLoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
LoRaWAN無位置ロープ型水漏れセンサー WL03A-LB/LSカタログ ファイル
 
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
研究紹介スライド: オフライン強化学習に基づくロボティックスワームの制御器の設計
 
20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf
 

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