It was knocked out in knockout.js in Using knockout.js, i made a lot of mistakes.

1. knockout.jsにknockoutされた話
2014/02/28
Fukuoka
Frontend
Frogs
Ex
Hiroyuki
Tashima

2. “GGoodd ffiigghhtt oonn tthhee ssiiddee
wwiitthh tthhee bbeesstt FFrraammeewwoorrkk..”
-- NNaappoolleeoonn BBoonnaappaarrttee
神は最高のフレームワークを使う側に味方する
- ナポレオン・ボナパルト

3. まずはじめに

4. は？誰？

5. 【自己紹介】
田 fb
hiroyuki.tashima
島
@HiroyukiTashima
寛 ・日本唐揚協会公認カラアゲニスト
・株式会社gumi
West
之 ・フロントエンドエンジニア

6. knockout.jsにknockoutされた話

7. なぜ
knockout.js ？

8. まずはこちらを
ご覧いただきたい
(・ワ・) :
福岡出張中のHさん(仮)
たしま：(・ε・)

9. (・ワ・)
たしまさん、knockout.jsってフレームワーク
使いませんか？

10. ア、イイデスネー > (・ε・)

11. (・ワ・)
knockout.jsだとかなりコード量減って
いい感じになりますよ〜

12. ア、イイデスネー > (・ε・)

13. (・ワ・)
たしまさんって何かフレームワーク使ってます？

14. ア、イイデスネー > (・ε・)

15. 要約

16. 表示物、データ多い

17. 表示物、データ多い
＋
DOM操作も多い

18. 表示物、データ多い
＋
DOM操作も多い
↓
js長くなる

19. 表示物、データ多い
＋
DOM操作も多い
↓
js長くなる
↓
(´･ω･`)わけわかめ

20. よわい(確信)

21. 表示物、データ多い

22. 表示物、データ多い
＋
DOM操作も多い

23. 表示物、データ多い
＋
DOM操作も多い
↓
knockout.jsを使う

24. 表示物、データ多い
＋
DOM操作も多い
↓
knockout.jsを使う
↓
コード量：減 動作：軽

25. つよい(確信)

26. で、knockout.jsを使うことに…

27. そもそも
knockout.jsとは？

28. knockout.jsとは？
knockout.jsは
データモデルを基盤とし、
リッチなUI構築を行う目的で開発された
JavaScriptライブラリである。

29. wikipediaのコピペを貼るんじゃあないよ！
> (・ε・#)

30. knockout.js
・UI用JavaScriptライブラリ
・jQuery等の別ライブラリとぶつからない
・MVVM(Model, View, ViewModel)
・DOM操作に関するコードがほぼいらない
・軽い(動作、容量)

31. knockout.js
3大ポイント

32. knockout.js
・MVVM
Model : Ajaxから受け取ったデータ
View : HTML
ViewModel : ページ内で一時的に使用、変更するデータ

33. knockout.js
・View(HTML)からbind指定
click, style, css, attr, …

34. knockout.js
・常に変数の変化を監視(observable)

35. 概要だけじゃよく分からんすなぁ
> (・ε・)

36. 使用例

37. テキスト入力 + ボタンclick
↓
window & テキスト表示

38. つまり
テキスト入力
ボタンclick

39. こうなる
ウィンドウ表示
テキスト表示

40. knockout.jsを使わない場合

41. HTML
<div
id="main">
<input
type="text"
id="inputForm"></input>
<buKon
onclick="openPopup()">
o
p
e
n
</buKon>
</div>
<div
id="popup"
style="display:none">
<div
style="opacity:1;">
<font
color="#ffffff">popupWindow</font><br
/>
<div
style="color:#ffffff;">input.value
:
<span
id="inputResult"></span>
</div>
<buKon
onclick="closePopup()">
c
l
o
s
e
</buKon>
</div>
</div>

42. HTML
JavaScriptでDOM取得するための
id、class指定が必要

43. JavaScript
var
popup
=
document.getElementById("popup");
var
input
=
document.getElementById("inputForm");
var
inputResult
=
document.getElementById("inputResult");
funcVon
openPopup(){
inputResult.innerHTML
=
input.value;
popup.style.display="block";
}
funcVon
closePopup(){
popup.style.display="none";
}

44. JavaScript
・DOM elementの取得
・styleの変更
・innerHTMLで変更

45. (´･ω･`)うーん…

46.
使
！
Knockout.js
！
聞話

47. knockout.jsを使った場合

48. JavaScript
変数をkoの監視対象に設定
funcVon
AppViewModel(){
this.popupVisible
=
ko.observable(false);
this.inputValue
=
ko.observable("");
}
ko.applyBindings(new
AppViewModel());
koを作動させる(第二引数なし→document全体が対象)

49. JavaScript
ViewModelの作成
変数の宣言&監視対象化
bindingしてkoを作動

50. HTML
<div="main">
<input
type="text"
data-­‐bind="value:
inputValue"></input>
<buKon
data-­‐bind="click:
popupVisible(true)">
o
p
e
n
</buKon>
</div>
変数をGET
<div
id="popup"
data-­‐bind="style:
{display:
popupVisible()
?
'block'
:
'none'
}">
<div
style="opacity:1;">
<font
color="#ffffff">popupWindow</font><br
/>
<div
style="color:#ffffff;">input.value
:
<span
data-­‐bind="text:
inputValue()"></span></div>
<buKon
data-­‐bind="click:
popupVisible(false)">
c
l
o
s
e
</buKon>
</div>
</div>
変数をSET

51. HTML
data-bind属性で関連付け
(koで監視中の変数とリンク)
DOM取得用のid, class不要
変数名() : getter
変数名(value) : setter

52. Before
var
popup
=
document.getElementById("popup");
var
input
=
document.getElementById("inputForm");
var
inputResult
=
document.getElementById("inputResult");
funcVon
openPopup(){
inputResult.innerHTML
=
input.value;
popup.style.display="block";
}
funcVon
closePopup(){
popup.style.display="none";
}

53. After
funcVon
AppViewModel(){
this.popupVisible
=
ko.observable(false);
this.inputValue
=
ko.observable("");
}
ko.applyBindings(new
AppViewModel());

54. 圧倒的ではないか
knockout.jsは

55. 次

56. Ajax通信(jQueryを使用)
↓
適当に表示物を更新

57. HTML
<div
id="main">
<buKon
data-­‐bind="click:
ajaxStart">
Ajax
Start
</buKon>
</div>
<div
id="popup"
data-­‐bind="style:
{display:
popupVisible
?
'block'
:
'none'
}">
<div
style="opacity:1;">
<font
color="#ffffff">popupWindow</font><br
/>
<div
style="color:#ffffff;">ajax
data<br
/>
<span
data-­‐bind="text:
ajaxData"></span></div>
<buKon
data-­‐bind="click:
popupVisible(false)
">close</buKon>
</div>
</div>

58. JavaScript (一部)
funcVon
AppViewModel(){
var
self
=
this;
self.popupVisible
=
ko.observable(false);
self.ajaxData
=
ko.observable();
self.ajaxStart
=
funcVon(){
$.ajax({
url:
“tset”,
type:
”GET",
success:
funcVon
(json){
var
jsonObj
=
ko.toJS(json);
self.ajaxData(jsonObj)
self.popupVisible(true);
}
})
}
}
ko.applyBindings(new
AppViewModel());

59. knockout.js？
ボコボコにしてやんよー
∧_∧
（ ･ω･)＝つ≡つ
（っ ≡つ＝つ
`/ ) ﾊﾞﾊﾞﾊﾞﾊﾞ
(ノ￣∪

60. (って思うでしょう？)

61. あれ？動かない…

62. なぜだ、なぜ動かん…

63. knockout.js
よくある落とし穴

64. knockout.jsの落とし穴
監視中(observable)の変数
getterとsetterをよく間違える！

65. knockout.jsの落とし穴
監視中(observable)の変数
getterとsetterをよく間違える！
getter → test_value()
setter → test_value(val)

66. knockout.jsの落とし穴
しかも

67. knockout.jsの落とし穴
しかも
<input
type="text"
data-­‐bind="value:
inputValue"></input>
valueへのbindはgetterの()は不要

68. knockout.jsの落とし穴
しかも
<input
type="text"
data-­‐bind="value:
inputValue"></input>
valueへのbindはgetterの()は不要
data-­‐bind=“style:
{display:
popupVisible()
?
‘block’
:
‘none’
}
"
でもこいつ↑には()必要

69. knockout.jsの落とし穴
しかも
<input
type="text"
data-­‐bind="value:
inputValue"></input>
valueへのbindはgetterの()は不要
data-­‐bind=“style:
{display:
popupVisible()
?
‘block’
:
‘none’
}
"
でもこいつ↑には()必要
(#
ﾟДﾟ) <
紛らわしいんじゃーい！

70. 事態は見えてきた、後は簡単だ

71. あれ？また動かない…

72. なぜだ、なぜ(ry

73. knockout.jsの落とし穴
同変数の監視化(ko.observable)は
2回目以降はスルーされる

74. knockout.jsの落とし穴
同変数の監視化(ko.observable)は
2回目以降はスルーされる
funcVon
AppViewModel(){
this.popupVisible
=
ko.observable(false);
this.popupVisible
=
ko.observable(true);
}
2回目はスルーされるのでfalseのまま

75. knockout.jsの落とし穴
ko.observableは1回のみ。
変数への代入はsetterで指定！
funcVon
AppViewModel(){
this.popupVisible
=
ko.observable(false);
this.popupVisible(true);
}
setterで変数の内容変更

76. 事態は見えて(ry

77. あれ？また…

78. 五飛教えてくれ。俺は後何回画像を張ればいい…？
俺はあと何回パプテマス様の画像を張ればいいんだ？
knockout.jsは俺に何も言ってはくれない…
教えてくれ、五飛！

79. knockout.jsの落とし穴
ko.applyBinding(koの作動)で
要素に指定できるViewModelは一つのみ
※applyBindingの第二引数で
DOM要素を指定可能※
※applyBindingの第二引数を指定しないと
document全体が対象となる※

80. knockout.jsの落とし穴
ko.applyBinding(koの作動)は
指定できるViewModelは一つのみ
ko.applyBindings(new
AppTestModel1());
ko.applyBindings(new
AppTestModel2());
同要素(document全体)2つはできんのだよ

81. knockout.jsの落とし穴
対応策

82. knockout.jsの落とし穴
対応策
ViewModelを一つのみにする

83. knockout.jsの落とし穴
対応策
ViewModelを一つのみにする
or
オブジェクトを作り、
それにViewModelをつなげる

84. knockout.jsの落とし穴
対応策
ViewModelを一つのみにする
or
オブジェクトを作り、
それにViewModelをつなげる
or
DOM指定で範囲を分ける

85. さすがにもうこれ以上
ひっかかることは

86. あっ
※お察し下さい※

87. knockout.jsまとめ
• JavaScriptコード量が大幅に減る
• HTML(View)との関連づけが簡単
• 動作がすごく軽い
• 大規模になると面倒くさい面が

88. こんな長いコード(500行)が
funcVon
draw(){
//draw
map
//draw
window
//
ctx.fillRect(0,
0,
SCREEN_WIDTH,
SCREEN_HEIGHT);
ctx.clearRect(0,
0,
SCREEN_WIDTH,
SCREEN_HEIGHT);
var
buff
=
0;
if(imageDrag){
buff
=
xDis
/
400
*
Math.PI
*
(-­‐1);
}
for(i
=
0;
i
<
IMG_NUM;
i++){
renderOrder[i]
=
i;
if((flagInfo[renderOrder[i]].rad
+
buff)
<
0){
flagInfo[renderOrder[i]].rad
=
flagInfo[renderOrder[i]].rad
+
Math.PI
*
circleMode;
}
else
if((flagInfo[renderOrder[i]].rad
+
buff)
>
(Math.PI
*
circleMode)){
flagInfo[renderOrder[i]].rad
=
flagInfo[renderOrder[i]].rad
-­‐
Math.PI
*
circleMode;
}
}
//sort
for
render
for(i
=
0;
i
<
IMG_NUM
-­‐
1;
i++){
for(j
=
(i
+
1);
j
<
IMG_NUM;
j++){
if(Math.abs(Math.PI
/
2
-­‐
(flagInfo[renderOrder[i]].rad
+
buff))
<
Math.abs(Math.PI
/
2
-­‐
(flagInfo[renderOrder[j]].rad
+
buff))){
var
tmp;
tmp
=
renderOrder[i];
renderOrder[i]
=
renderOrder[j];
renderOrder[j]
=
tmp;
}
}
}
for(i
=
0;
i
<
IMG_NUM;
i++){
if(
((flagInfo[renderOrder[i]].rad
+
buff)
>
(Math.PI
/
12))&&
((flagInfo[renderOrder[i]].rad
+
buff)
<
(Math.PI
/
12
*
11))
)
{
var
mag
=
ZOOM_MIN;
var
temp
=
Math.abs((flagInfo[renderOrder[i]].rad
+
buff)
-­‐
Math.PI
/
2);
if(temp
<
ZOOM_RANGE){
mag
=
mag
+(ZOOM_RANGE
-­‐
temp
/
ZOOM_RANGE)
*
ZOOM_MAX;
}
ctx.drawImage(
drawFlagObj[renderOrder[i]],
parseInt(RADIUS_SIDE
*
Math.cos(flagInfo[renderOrder[i]].rad
+
buff)
+
CENTER_X
-­‐
drawFlagObj[renderOrder[i]].width
/
2
/
2
*
mag),
parseInt(RADIUS_LENGTH
*
Math.sin(flagInfo[renderOrder[i]].rad
+
buff)
+
CENTER_Y
-­‐
drawFlagObj[renderOrder[i]].height
/
2
/
2
*
mag),
parseInt(drawFlagObj[renderOrder[i]].width
/
2
*
mag),
parseInt(drawFlagObj[renderOrder[i]].height
/
2
*
mag)
);
}
}
centerImageNo
=
flagInfo[renderOrder[IMG_NUM
-­‐
1]].imageNo;
if(
(mapState
==
NORMAL)&&
(imageDrag
==
false)
)
{
ctx.drawImage(
drawArrowObj[0],
parseInt(50),
parseInt((SCREEN_HEIGHT
/
2)
-­‐
drawArrowObj[0].height
/
2
+
7),
parseInt(drawArrowObj[0].width
/
2),
parseInt(drawArrowObj[0].height
/
2)
);
}
}
//main
loop
funcVon
mainLoop(){
var
drawInterval
=
setInterval(funcVon(){
if(mapState
==
AUTO_MOVE){
for(i
=
0;
i
<
IMG_NUM;
i++){
flagInfo[i].rad
+=
autoMoveRad;
}
autoMoveFrame++;
if(autoMoveFrame
>=
AUTO_MOVE_FRAME){
autoMoveFrame
=
0;
mapState
=
NORMAL;
//change
map
detail
var
temp
=
$(".flagTitle");
var
temp2
=
$("#VtleViewer");
var
element
=
temp[centerImageNo].cloneNode(true);
temp2.empty();
temp2.append(element);
}
}
draw();
},
1000
/
FPS);
}
}).call(this);

90. こうなる！(イメージ)
funcVon
AppViewModel(){
var
self
=
this;
self.popupVisible
=
ko.observable(false);
self.viewWindow
=
ko.observable(0);
$(“#statusWIndow”).swipeRight{
viewWindow(viewWindow()++);
}
$(“#statusWIndow”).swipeLe}{
viewWindow(viewWindow()-­‐-­‐);
}
}
ko.applyBindings(new
AppViewModel());

92. そう、knockout.jsならね

93. もうこれで使えるはず！
,.へ
___
ﾑ i
「 ﾋ_i〉 ゝ 〈
ﾄ ノ iニ(()
i
{
＿＿＿_
|
ヽ
i i ／__, ,
-­‐-­‐＼ i
}
| i ／（●)
(
●
)
＼ {､ λ
ト－┤. ／ （__人__） ＼ ,ノ ￣ ,!
i ゝ､_
| ´￣`
| ,.
'´ﾊ ,!
. ヽ、 ｀` ､,__＼ ／" ＼ ヽ／
＼ノ ﾉ ﾊ￣r/:::r―-­‐-­‐―/::７ ﾉ ／
ヽ. ヽ::〈； .
'::.
:'
|::/ / ,.
"
`ｰ ､ ＼ヽ::.
;::：|/ ｒ'"
／￣二二二二二二二二二二二二二二二二ヽ
|
答 | k
n
o
c
k
o
u
t
.
j
s │|
＼＿二二二二二二二二二二二二二二二二ノ

94. 別にアレをknockoutしても構わんだろう

95. もう何も怖くないし

96. ちょっと川の様子を見てくるよ！
/ / / / /
/
/
/ / / / /
/
ﾋﾞｭｰ ,.､
,.､ / /
/ / ∠二二､ヽ / /
/ / / （（ ´･ω･｀））
/
/
/ ~~
：~~~〈 /
/ / ノ ： _,,..ゝ /
/ / （,,..,）二i_,∠
/ /

97. fin.

98. 次回に続く！