How do you like knockout?

1. How do you like knockout? 合同勉強会in 大都会岡山-2014 Winter- 2014/12/13 OITEC きよくらならみ

2. 自己紹介 •きよくらならみ –@kiyokura –kiyokura.hateblo.jp •NET系の開発やWebアプリ開発 –Microsoft MVP for ASP.NET/IIS •近況：#Ｒ社

3. コミュニティ紹介 •Okayama IT Engineers Community –OITEC •.NET系・MS系のテクノロジが多い？ –特にしばりはないので、色々welcome •http://oitec.vbstation.net/

4. 本日のお品書き •knockout.jsのぼんやりした説明 •はじめてのばいんでぃんぐ •バインディングの基本 •その他、色々 •もうちょっとだけ実用的かもしれない例 •まとめ

5. knockout.jsのぼんやりした説明

6. Declarative Bindings Automatic UI 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. 四の五の言ってもあれなので •knockoutの２大機能を中心に紹介

14. はじめてのばいんでぃんぐ

15. knockout 二大機能の一つ •「バインディング」をまずは軽く紹介

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. JS側のオブジェクトの値を確認してみる

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. オブジェクトの変更がUIへ

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" />

37. 双方向バインド •“監視”と”バインド”のko2大機能で •オブジェクトとUI双方向で監視・更新 •“状態”と”コマンド”可能な機構 –これを生かしてPDSの観点で設計・実装 •それ、MVVMいけるんじゃね

38. その他、色々

39. いろんなバインディング •テキストとか表現的な –visible –text –html –css –style –attr

40. いろんなバインディング •制御構文的な –foreach –if –ifnot –with –component

41. いろんなバインディング •フォーム部品関係 –click –event –submit –enable –disable –value

42. いろんなバインディング •フォーム部品関係 –textInput –hasFocus –checked –options –selectedOptions –uniqueName

43. いろんなバインディング •テンプレーティング –template

44. カスタマイズや拡張 •カスタム・バインディング –バインディングをカスタマイズ可能 •extend –拡張メソッド（みたいな感じ）

45. もうちょっとだけ実用的かもしれない例

46. もうちょっとだけ実用的かもしれない例 •例：json形式のデータを出し入れ •例：WebStorageへの保存機能を後付

47. 例：json形式のデータを出し入れ •先ほどまでの例だと… 「実際つかえるの？」と思うかもしれません •ko.observableでイチイチラップしたオブジェクトを毎回定義するの？ •大丈夫、無問題。

48. ko.mappingプラグイン •オブジェクトやJSONを ko.observableでラップされたオブジェクトを生成する varjsData= {name: "foo",age:20}; varvm= ko.mapping.fromJS(jsData);

49. ko.mappingプラグイン •逆にプレーンなオブジェクトにマッピングしなおすことも可能 varjson= ko.mapping.toJSON(vm);

50. なので…こんなことも割と楽に可能 •ajaxでデータを取得してモデル作成 •モデルをJSON化してajaxで送信

51. 例：WebStorageへの保存機能を後付 •koは「ちょっとココだけ使う」ことも比較的楽 •その一例 –https://github.com/kiyokura/komappingdemo

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. それ、knockoutで JSからDOMを見てるが、こんなパターンなら別にいいんじゃないかと思う（個人的には）

54. まとめ

55. knockoutとは •UIとオブジェクトの双方向バインディングを実現する JSライブラリ •主要機能は監視とバインディング •"部分利用"から"フレームワーク"まで場面に応じて利用可能

56. knockout とは •OSS –gihub –MITライセンス •依存関係もシンプル –ほかのJSライブラリに依存しない –サーバサイドのテクノロジにも依存しない •（RubyでもPHPでも.NETでも）

57. 個人的な感想 •つまみ食いしやすい –アプリのアーキテクチャに食い込まない（ような使い方が可能） •サーバサイドのフレームワークとも相性がいいと思う –学習コストが低い

58. 参考・リソース

59. 公式サイト •http://knockoutjs.com/ •ドキュメントとチュートリアルが充実 –ここの情報だけだいたいどうにかなる –チュートリアルもとっつきが良い

60. おすすめ資料 •『Knockout.jsの概要』 –by MayukiSawatari –https://speakerdeck.com/mayuki/knockout-dot-jsfalsegai-yao •knockoutの二大機能の仕組みを丁寧にわかりやすく解説。おすすめ。 •動画もあります。 –https://www.youtube.com/watch?v=U- TRaV3IU6A

61. 気軽に試すならjsfiddleで •http://jsfiddle.net/ •ブラウザでJavaScriptを試せる –保存やシェアもできるよ •メジャーなライブラリを標準サポート –knockoutも対応

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. ご清聴ありがとうございました

View stunning SlideShares in full-screen with the new iOS app!

SlideShare for iOS

How do you like knockout?

Narami Kiyokura (19 SlideShares) , Software Engineer

Views

Actions

Embeds 0

Report content

Transcript