Download as PDF, PPTX
Uploaded byNarami Kiyokura
How do you like knockout?
『合同勉強会 in 大都会岡山 -2014 Winter-』の同名のセッションの資料 http://gbdaitokai.doorkeeper.jp/events/15289
More Related Content
![[社内勉強会]SPAのすすめ](https://cdn.slidesharecdn.com/ss_thumbnails/spa-160304020346-thumbnail.jpg?width=640&height=640&fit=bounds)
![[予告篇] みんなで同時プレイするクイズWebアプリでCodeQuizに挑戦！](https://cdn.slidesharecdn.com/ss_thumbnails/osc13do-jsakamoto-trailer-130905063238--thumbnail.jpg?width=640&height=640&fit=bounds)
How do you like knockout?
- 1. How do youlike knockout? 合同勉強会in 大都会岡山-2014 Winter- 2014/12/13 OITEC きよくらならみ
- 2. 自己紹介 •きよくらならみ –@kiyokura –kiyokura.hateblo.jp •NET系の開発やWebアプリ開発 –Microsoft MVP for ASP.NET/IIS •近況：#Ｒ社
- 3. コミュニティ紹介 •Okayama ITEngineers Community –OITEC •.NET系・MS系のテクノロジが多い？ –特にしばりはないので、色々welcome •http://oitec.vbstation.net/
- 4. 本日のお品書き •knockout.jsのぼんやりした説明 •はじめてのばいんでぃんぐ •バインディングの基本 •その他、色々 •もうちょっとだけ 実用的かもしれない例 •まとめ
- 5.
- 6. Declarative Bindings AutomaticUI Refresh Dependency Tracking Templating SimplifydynamicJavaScriptUIs withthe Model-View-ViewModelpattern
- 7.
- 8. knockout.jsとは •JavaScriptのライブラリ –フレームワークとも言われるが… •AngularJSなどと違いフルスタックではない •コンセプト –宣言型バインディング –自動的なUIの更新 –依存性の追跡 –テンプレート
- 9. knockout.jsとは •http://knockoutjs.com/ •OSS –MITライセンス –https://github.com/knockout
- 10. こんなことができる（ようになる） •動的なUIをシンプルに構築 –JSとHTMLの依存関係を整理しやすく –MVVMパターンの導入も視野に
- 11. 非機能的な特徴 •他のライブラリに依存しない –取り回しが良い •機能がシンプル –学習コストが低い •導入のハードルが全体的に低い –「一部だけに使用」にも抵抗が少ない –サーバサイドの言語・フレームワークを選ばない –古いブラウザでも動作
- 12. 導入方法 •取り込み –webからDL •公式サイトorgithub –bower •bower install knockout –NuGet •Install-Package knockoutjs •CDN –https://cdnjs.com/ –http://www.asp.net/ajax/cdn
- 13.
- 14.
- 15.
- 16. バインディングとは •バインディング（binding） –縛りつける・結びつける •UIとJSのオブジェクトを結びつける –「代入とは違うのだよ、代入とは！」 •バインド＝宣言的 •代入＝手続的
- 17. 例 varuser ={ name: "きよくら", age: 20 }; このオブジェクトの値を… こんなHTMLに設定したい…とする
- 18. data-bind属性 •data-*属性を利用 •「なにをどこにバインドするか」”宣言” –なにを：JSのオブジェクト –どこに：どの属性 data-bind="value:name"
- 19. ko.applyBindings() •HTMLと紐づけるオブジェクトを用意 •ko.applyBindings()で紐づけを実行 ko.applyBindings(user);
- 20. knockoutによるバインディング <scripttype="text/javascript"> $(function(){ varuser = { name: "kiyokura", age: 20 }; ko.applyBindings(user); }); </script> <p> name:<inputtype="text"data-bind="value:name" /><br/> age:<inputtype="text"data-bind="value:age" /><br/> </p>
- 21. onemore thing, •これは「単方向」バインディング –Not “One time” , but “One way” •UI側の更新が自動的にオブジェクトへ
- 22. JS側のオブジェクトの値を確認してみる $("#btnCkeck").click( function(){ alert(user.age); }); <inputtype="button" value="check"id="btnCkeck"/>
- 23.
- 24. 単方向バインディング •オブジェクトをHTMLに結びつける –“代入”ではなく”宣言” –UIの変更が自動的にオブジェクトへ •依存関係がシンプルに –JSからHTML(DOM)参照が消滅 •実際は0にならないケースあるが 間違いなく減る
- 25. ごくシンプルな機能だが •これだけでも有効な場合がある –サーバサイドの比重が大きい場合など、JSのコード量を減らせる（可能性） –HTMLとJSの依存関係を減らせる •生産性UP＆保守性UP につながる可能性
- 26. jQueryでやると… <inputtype="text"id="name"/> <inputtype="text"id="age"/> varuser = { name: "kiyokura", age: 20 }; $("#name").val(user.name); $("#age").val(user.age);
- 27.
- 28.
- 29. Observable による状態の監視 varuser= { name:ko.observable("kiyokura"), age: ko.observable(20) };
- 30. Observable による状態の監視 varuser= { name:ko.observable("kiyokura"), age: ko.observable(20) };
- 31. オブジェクトを操作してみる $("#btnYounger").click(function() { varage = user.age(); user.age(age -1); }); <inputtype="button" id="btnYounger"value="若返り" />
- 32.
- 33. 双方向バインディング •「監視」という機能 –observableオブジェクトでラップ •オブジェクトを監視し、UIに通知 –UIを自動更新 ko.observable() ko.observableArray()
- 34.
- 35. “計算結果”をバインド varUser =function () { varself = this; self.name = ko.observable("kiyokura"); self.age= ko.observable(20); self.message= ko.computed( function() { returnself.name() + ", "+ self.age() + "さい"; }); }; varuser = new User(); <spandata-bind="text:message"></span>
- 36. イベントにメソッドをバインド self.toYounger= function(){ varage = user.age(); user.age(age -1); }; <inputtype="button"value="若返り" data-bind="click:toYounger" />
- 38. 双方向バインド •“監視”と”バインド”のko2大機能で •オブジェクトとUI双方向で監視・更新 •“状態”と”コマンド”可能な機構 –これを生かしてPDSの観点で設計・実装 •それ、MVVMいけるんじゃね
- 39.
- 40. いろんなバインディング •テキストとか表現的な –visible –text –html –css –style –attr
- 41. いろんなバインディング •制御構文的な –foreach –if –ifnot –with –component
- 42. いろんなバインディング •フォーム部品関係 –click –event –submit –enable –disable –value
- 43. いろんなバインディング •フォーム部品関係 –textInput –hasFocus –checked –options –selectedOptions –uniqueName
- 44.
- 45. カスタマイズや拡張 •カスタム・バインディング –バインディングをカスタマイズ可能 •extend –拡張メソッド（みたいな感じ）
- 46.
- 47.
- 48. 例：json形式のデータを出し入れ •先ほどまでの例だと… 「実際つかえるの？」と思うかもしれません •ko.observableでイチイチラップしたオ ブジェクトを毎回定義するの？ •大丈夫、無問題。
- 49. ko.mappingプラグイン •オブジェクトやJSONを ko.observableでラップされたオブジェクトを生成する varjsData= {name: "foo",age:20}; varvm= ko.mapping.fromJS(jsData);
- 50. ko.mappingプラグイン •逆にプレーンなオブジェクトにマッピン グしなおすことも可能 varjson= ko.mapping.toJSON(vm);
- 51.
- 52. 例：WebStorageへの保存機能を後付 •koは「ちょっとココだけ使う」ことも 比較的楽 •その一例 –https://github.com/kiyokura/komappingdemo
- 53. 何の変哲もないwebフォーム •「localStorageに一時保存させて」 と言われたたら？ <form action="register.php" method="post"> <p> 姓: <input type="text" name="lastName" /> 名: <input type="text" name="firstName" /><br/> tel: <input type="text" name="tel" /><br/> e-mail: <input type="text" name="email" /><br/> <hr/> <input type="submit" value="登録" /> </p> </form>
- 54. それ、knockoutで JSからDOMを見てるが、こんな パターンなら別にいいんじゃないかと思う（個人的には）
- 55.
- 56. knockoutとは •UIとオブジェクトの 双方向バインディングを実現するJSライブラリ •主要機能は監視とバインディング •"部分利用"から"フレームワーク"まで 場面に応じて利用可能
- 57. knockout とは •OSS –gihub –MITライセンス •依存関係もシンプル –ほかのJSライブラリに依存しない –サーバサイドのテクノロジにも依存しない •（RubyでもPHPでも.NETでも）
- 58. 個人的な感想 •つまみ食いしやすい –アプリのアーキテクチャに食い込まない（ような使い方が可能） •サーバサイドのフレームワークとも 相性がいいと思う –学習コストが低い
- 59.
- 60. 公式サイト •http://knockoutjs.com/ •ドキュメントとチュートリアルが充実 –ここの情報だけだいたいどうにかなる –チュートリアルもとっつきが良い
- 61. おすすめ資料 •『Knockout.jsの概要』 –byMayukiSawatari –https://speakerdeck.com/mayuki/knockout-dot-jsfalsegai-yao •knockoutの二大機能の仕組みを丁寧にわか りやすく解説。おすすめ。 •動画もあります。 –https://www.youtube.com/watch?v=U- TRaV3IU6A
- 62. 気軽に試すならjsfiddleで •http://jsfiddle.net/ •ブラウザでJavaScriptを試せる –保存やシェアもできるよ •メジャーなライブラリを標準サポート –knockoutも対応
- 63. 番外編-JSFiddleのポイント（？） •jQueryとknockoutを使うなら –［Frameworks& Extensions］ •jQueryを選択 –［External Resources］ •knockoutのCDNを指定 –http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout- min.js
- 64.