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.

How do you like knockout?

2,234 views

Published on

『合同勉強会 in 大都会岡山 -2014 Winter-』の同名のセッションの資料

http://gbdaitokai.doorkeeper.jp/events/15289

Published in: Technology
  • Be the first to comment

How do you like knockout?

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

×