TypeScriptでKnockoutを書いてみた

http://connpass.com/event/6237/ の資料

Transcript

1. TypeScriptͰ KnockoutΛ࢖ͬͯΈͨ
2. 自己紹介 ଜ্
   ढ़հ ࣾ಺Ͱ͸։ൃ؀ڥͷߏஙΛ ΍ͬͯ͘ΕΔਓͬͯݴΘΕͯ·͢
   TL@NSLN
   TINVSBLBNJ
3. 宣伝タイム
4. モニプラ for Facebook
5. ギフト
6. Allied Architects Engineer Blog
7. Allied Architects Engineer Blog Knockout.jsೖ໳ http://tech.aainc.co.jp/archives/5346 Knockout.jsೖ໳ ͦͷ2 http://tech.aainc.co.jp/archives/6743
8. 宣伝タイムおわり
9. TypeScript + Knockoutで 作っています
10. ギフト ཁٻ࢓༷ 'BDFCPPLͷ༑ୡҰཡΛද ࣔ͢Δ ༑ୡΛબ୒ͯ͠ϝοηʔδ Λೖྗ͢Δ ೖྗͨ͠ϝοηʔδΛ༑ୡ ʹૹΔ શͯΛϖʔδ಺Ͱߦ͏
11. ギフト ཁٻ࢓༷ 'BDFCPPLͷ༑ୡҰཡΛද ࣔ͢Δ ༑ୡΛબ୒ͯ͠ϝοηʔδ Λೖྗ͢Δ ೖྗͨ͠ϝοηʔδΛ༑ୡ ʹૹΔ શͯΛϖʔδ಺Ͱߦ͏
12. ギフト ཁٻ࢓༷ 'BDFCPPLͷ༑ୡҰཡΛද ࣔ͢Δ ༑ୡΛબ୒ͯ͠ϝοηʔδ Λೖྗ͢Δ ೖྗͨ͠ϝοηʔδΛ༑ୡ ʹૹΔ શͯΛϖʔδ಺Ͱߦ͏
13. ギフト ཁٻ࢓༷ 'BDFCPPLͷ༑ୡҰཡΛද ࣔ͢Δ ༑ୡΛબ୒ͯ͠ϝοηʔδ Λೖྗ͢Δ ೖྗͨ͠ϝοηʔδΛ༑ୡ ʹૹΔ શͯΛϖʔδ಺Ͱߦ͏
14. ギフト ཁٻ࢓༷ 'BDFCPPLͷ༑ୡҰཡΛද ࣔ͢Δ ༑ୡΛબ୒ͯ͠ϝοηʔδ Λೖྗ͢Δ ೖྗͨ͠ϝοηʔδΛ༑ୡ ʹૹΔ શͯΛϖʔδ಺Ͱߦ͏
15. ギフト +BWB4DSJQUͰෳࡶͳ͜ͱΛ͢ΔͨΊͷ؀ڥ͕ ͋·Γ੔උ͞Ε͍ͯͳ͍
16. ギフト ޷͖উख΍ͬͯ΋จ۟ΛݴΘΕͳ͍
17. ギフト ҎԼͷߏ੒ʹ͠·ͨ͠ 5ZQF4DSJQU ,OPDLPVU +BTNJOF HSVOU
    DPODBUͱNJOJGZ͘Β͍
18. TypeScript
19. TypeScript .JDSP4PGU͕։ൃ͍ͯ͠ΔBMU+4 +BWB4DSJQUͷεʔύʔηοτ ʹ͕ϦϦʔε͞Ε·ͨ͠ ࠷৽7FSTJPO͸ ಋೖ࣌͸Ͱͨ͠
20. TypeScript ಛ௃ ίϯύΠϧͯ͠+4Λੜ੒͢Δ ੜ੒͞ΕΔ+4͕៉ྷͰՄಡੑ͕ߴ͍ ੩తܕ෇͚Ͱهड़ DMBTTϕʔεͰॻ͚Δ &4ͷ࢓༷Λଟ͘औΓೖΕ͍ͯΔ 4PVSDF.BQରԠ
21. TypeScript ಛ௃ ίϯύΠϧͯ͠+4Λੜ੒͢Δ ੜ੒͞ΕΔ+4͕៉ྷͰՄಡੑ͕ߴ͍ ੩తܕ෇͚Ͱهड़ DMBTTϕʔεͰॻ͚Δ &4ͷ࢓༷Λଟ͘औΓೖΕ͍ͯΔ 4PVSDF.BQରԠ
22. TypeScript class Greeter { name: string; constructor(name: string) { this.name = name; } greet(): string { return "Hello, " + this.name; } }
23. JavaScriptだとこうなる var Greeter = (function(){ function Greeter(name) { this.name = name; }; Greeter.prototype.greet = function() { return “Hello, ” + this.name }; return Greeter; })();
24. TypeScript DMBTTϕʔε DMBTT͸&DNB4DSJQUͰಋೖ༧ఆ ܕਪ࿦͕͋Γ੩తܕݴޠ ಈతܕݴޠ͕ۤखͳਓ΄Ͳخ͍͠ͷͰ͸ +BWBɺ$Ϣʔβͷํ͕ೃછΈ΍ͦ͢͏
25. TypeScript ੩తܕݴޠ ܕʹΑΔόάʹؾ͖ͮ΍͍͢ ϦϑΝΫλ͕͠΍͍͢
26. TypeScript 4PVSDF.BQରԠͳͷͰ5ZQF4DSJQUͷ·· ϒϥ΢βͰσόοάͰ͖Δ 4PVSDF.BQ 5ZQF4DSJQU΍4BTTͷΑ͏ʹ+4΍$44Λੜ ੒͢Δݴޠͱม׵લͷίʔυͱͷରԠؔ܎ Λද͢ϑΝΠϧ
27. TypeScript {"version": 3,"file":"ts_ko.js","sourceRoot":"","sources": ["ts_ko.ts"],"names": ["Sample","Sample.ViewModel","Sample.ViewModel.c onstructor","Sample.ViewModel.arraySortByValue"] ,"mappings":"AAAA,uDAAuD;;AAOvD,IAAO,MAAM;AAoEZ, CApED,UAAO,MAAM;IArD,EAAE,CAAC,aAAa,CAAC,MAAM,CA AC;AAC5B,CAAC,CAAC,CAAC,CAAC"} 4PVSDF.BQͷத਎͸͜Μͳײ͡
30. TypeScriptの採用理由 ίϯύΠϥ͕͋Δ ౰࣌͸+BWB4DSJQUʹ͍ͭͯશ͘ৄ͘͠ͳ ͔ͬͨͷ΋࣮͋ͬͯߦલʹΤϥʔΛࣔͯ͠ ͘ΕΔͱخ͔ͬͨ͠ Ͱ΋ͪΐͬͱίϯύΠϧ͕஗͍
31. TypeScriptの採用理由 class Hoge { num: number; constructor() { this.num = “string!!!”; } }
32. TypeScriptの採用理由 ៉ྷͳ+4͕ੜ੒͞ΕΔ ԿΒ͔ͷཧ༝Ͱ5ZQF4DSJQU͕࢖͑ͳ͘ͳ ͬͯ΋ܧଓͯ͠ϝϯς͕͠΍͍͢
33. TypeScriptの採用理由 var Greeter = (function(){ function Greeter(name) { this.name = name; }; Greeter.prototype.greet = function() { return “Hello, ” + this.name }; return Greeter; })();
34. TypeScript ಋೖϝϦοτ ૉͷ+BWB4DSJQUΑΓ΋ॻ͖΍͘͢։ൃޮ ཰͕޲্ ίϯύΠϥʹΤϥʔݕ஌ͯ͠΋Β࣮ͬͯߦ ͯ֬͠ೝ͢Δख͕ؒݮͬͨ
35. TypeScript ಋೖϝϦοτ ៉ྷͳ+BWB4DSJQU͕ੜ੒͞Εͯ 5ZQF4DSJQU͕࢖͑ͳ͘ͳͬͯ΋ϝϯς͠ ΍͍͢ͷͰউखʹಋೖͰ͖Δ +4ͷهड़ํ๏ʹ׳Ε͍ͯͳͯ͘΋औͬ෇ ͖қ͍ +4Λ֮͑ͳ͍͍ͯ͘Θ͚͡Όͳ͍
36. TypeScript ಋೖϝϦοτ 5ZQF4DSJQU͔Βੜ੒͞ΕΔ+BWB4DSJQUΛ ࢀߟʹͯ͠ྑ͍+BWB4DSJQUͷॻ͖ํͷํ ਑͕෼͔ͬͨ
37. TypeScript ಋೖσϝϦοτ 5ZQF4DSJQUࣗମͷมߋͷӨڹ͕େ͖͍ ్தͰܥʹΞοϓσʔτ͞Εͯվम ͕େมͰͨ͠ ܥʹͳͬͨͷͰ͜ͷ৺഑͸͋·Γແ͍ ։ൃ؀ڥͷҧ͍ͰࠔΔ ίϯύΠϧ؀ڥͷҧ͍ͰΤϥʔʹͳͬͨ Γɺͦ΋ͦ΋։ൃ؀ڥ͕ແ͍ਓ͕͍Δ
38. TypeScript ࢀߟϦϯΫ ຊՈ IUUQXXXUZQFTDSJQUMBOHPSH ΫΠοΫΨΠυ
    ߋ৽ࢭ·ͬͯΔʁ IUUQQIZ[LJUOFUUZQFTDSJQU 5ZQF4DSJQUϦϑΝϨϯε
39. TypeScriptリファレンス TypeScript 1.0ରԠ TypeScript͚ͩͰͳ͘ JavaScriptʹ͍ͭͯ΋ղઆ ͞Ε͍ͯΔ͔ͳΓΦεε ϝͳ1࡭ ஶऀ: Θ͔Ί·͞ͻΖ ͞Μ
40. Knockout
41. フレームワークの選定 ओͳϑϨʔϜϫʔΫ "OHVMBS+4 #BDLCPOFKT ,OPDLPVU
42. フレームワークの選定 #BDLCPOFKT େن໛޲͚ͳΠϝʔδ σʔλόΠϯυ͕ͮ͠Β͍ ݸਓతʹॻ͖ํ͕ۤख
43. "OHVMBS+4 ,OPDLPVUͷॲཧ͕͍ܰ
    ͱࢥ͍ͬͯͨ ಋೖ౰࣌ʹ"OHVMBSͷॲཧ͸εϚϗͰ͸ ॏ͍ͱ͍͏ӟ͕͋ͬͨ ϑΝΠϧαΠζ͕େ͖͍ ଟػೳͰࠓճͷཁ݅ʹ͸ΦʔόʔεϖοΫ フレームワークの選定
44. Knockout ϑϩϯτΤϯυ+BWB4DSJQUϑϨʔϜϫʔΫ .77.ϞσϧΛ࠾༻ͯ͠૒ํ޲όΠϯυΛ ࣮ݱ͢Δ .PEFM 7JFX 7JFX.PEFM Α͘"OHVMBS+4΍#BDLCPOFKTͱൺֱ͞Ε Δ͕ਓؾ͸௿͍ҹ৅
45. MVVM .PEFM +4ͷσʔλߏ଄ 7JFX )5.- 7JFX.PEFM 7JFXͱ.PEFMΛ૬ޓʹόΠϯυͯ͠஋ͷ มߋ΍ૢ࡞Λ؂ࢹɾ൓ө͢Δ
46. MVVM View View Model Model )5.- +BWB4DSJQU 0CKFDUT ૢ࡞ ஋Λߋ৽ ॲཧ )5.-Λ ߋ৽
47. Knockout ಛ௃ "OHVMBS
    #BDLCPOFʹൺ΂ͯଞͷϥΠϒ ϥϦ΁ͷґଘ͕ແܰ͘ྔ ϧʔςΟϯά΍WBMJEBUFͳͲͷػೳ͸ແ͍ ͋Δఔ౓೔ຊޠʹ຋༁͞ΕͨυΩϡϝϯτ ΋͋Δ ެࣜαΠτ͚ͩͰ΋େମͷ࢖͍ํ͕೺ѲͰ ͖Δ
48. Knockoutの採用理由 ૒ํ޲όΠϯυ͕ศར ෆཁͳػೳ͕গͳ͍ ϖʔδʹͷΈಋೖ͢ΔͷͰɺϧʔςΟϯ άػೳ͸ෆཁ
    ͳͲ ֶशίετ͕ൺֱత௿͍
49. Knockoutの採用理由 ϑΝΠϧαΠζ͕খ͍͞ αΠτͷߏ੒্ɺK2VFSZ͕ඞਢͩͬͨͷ ͰϑϨʔϜϫʔΫ͸͍ܰ΋ͷ͕ྑ͔ͬͨ
50. Knockout ,OPDLPVUͷαϯϓϧ ಈ͘΋ͷ͕ϒϩάʹ্͕͍ͬͯ·͢ IUUQUFDIBBJODDPKQBSDIJWFT ͕ɺόά͕͋Γ·ͨ͠PS[
51. var ViewModel = function() { this.taroPoint = ko.observable(60); this.jiroPoint = ko.observable(50); this.hanakoPoint = ko.observable(40); var data = [ {name: 'ଠ࿠', value: this.taroPoint}, {name: 'ೋ࿠', value: this.jiroPoint}, {name: 'Ֆࢠ', value: this.hanakoPoint} ]; var self = this; this.sortList = ko.computed(function() { return arraySortByValue(data); }, self, {name: true}); };
52. <table> <thead> <tr> <th>໊લ</th> <th>ಘ఺</th> </tr> </thead> <tbody data-bind="foreach: sortList"> <tr> <td data-bind="text: name"></td> <td data-bind="text: value"></td> </tr> </tbody> </table>
53. Knockout ಋೖϝϦοτ ૒ํ޲όΠϯυͰ௒շద هड़͕؆୯Ͱཧղͯ͠΋Β͍΍͍͢ αϙʔτϒϥ΢β͕޿͍ *&͔Βαϙʔτ͍ͯ͠Δͦ͏Ͱ͢
54. Knockout ಋೖσϝϦοτ ଟগ͸ֶशίετ͕͔͔Δ 0CTFSWFSͷ࢓૊ΈΛ͔ͭΉ·Ͱ͕࣌ؒ ͔͔ͬͨ )5.-ʹEBUBCJOE͕ҲΕΔ K2VFSZͷJE
    DMBTTΑΓ͸ϚγͰ͢Ͷ
55. Knockout ࢀߟϦϯΫ ,OPDLPVUKT
    DPOUFYU
    EFCVHHFS $ISPNFͷ&YUFOTJPO
    ͘͢͝ศརͦ͏ʂ ,OPDLPVUΦϑΟγϟϧ IUUQLOPDLPVUKTDPN ,OPDLPVU೔ຊޠυΩϡϝϯτ IUUQLPKTTVLPCVUPDPN
56. ,OPDLPVUKT
    DPOUFYU
    EFCVHHFS
57. TypeScript + Knockout ͜ͷϒϩάͷαϯϓϧιʔεΛ5ZQF4DSJQU Ͱॻ͍ͯΈͨ
58. interface dataType { name: string; value: KnockoutObservable<number>;} class ViewModel { taroPoint: KnockoutObservable<string>; jiroPoint: KnockoutObservable<string>; hanakoPoint: KnockoutObservable<string>; sortList: KnockoutComputed<dataType>; constructor() { this.taroPoint = ko.observable(“60“); this.jiroPoint = ko.observable(“50“); this.hanakoPoint = ko.observable(“40“); var data: Array<dataType> = [/*লུ*/]; var self = this; this.sortList = ko.computed((): dataType => { return self.arraySortByValue(data); }, self, {deferEvaluation: true}); } }
59. TypeScript + Knockout ,OPDLPVU0CTFSWBCMF5΍ ,OPDLPVU$PNQVUFE5
    Ͱ͸؂ࢹ͢Δ஋ ͷܕ͕ೖΓ·͢ ͦͷลΓ͕ཧղͰ͖Ε͹݁ߏॻ͖΍͍͢ͷ Ͱ͸ͳ͍͔ͳʁͱࢥ͍·͢
60. grunt 5ZQF4DSJQUͷϑΝΠϧΛDMBTT͝ͱʹ෼͚ͨ ͍ɻ +BWB4DSJQUͷϑΝΠϧ͕ෳ਺Ͱ͖Δ API ViewModel Util
61. grunt ϑΝΠϧͷ࿈݁ ࿈݁ͨ͠ϑΝΠϧͷNJOJGZ
62. grunt UTD
    I
63. grunt HSVOUͰ࿈݁͢Δඞཁ͕ແ͔ͬͨʋ ʔʆ ϊ
64. grunt Ϗϧυ͸*%&ʹ೚ͤͬͺͳ͠Ͱ͕ͨ͠ HSVOUUZQFTDSJQUͳͲΛ࢖͏ͱϏϧυΦϓγϣϯ ͕ڞ༗Ͱ͖ͨΓͱศརͦ͏Ͱ͢Ͷ IUUQTXXXOQNKTPSHQBDLBHFHSVOUUZQFTDSJQU
65. altJS ૉͷ+BWB4DSJQUΛॻࣗ͘৴͕ແ͍ਓ͸BMU+4 ʹཔΔͱྑ͍ 5ZQF4DSJQU͸៉ྷͳ+BWB4DSJQUΛੜ੒ͯ͠ ͘Ε·͢ɻDMBTTϕʔεͷॻ͖ํ͕෼͔Δਓ ͳΒ+BWB4DSJQUͷॻ͖ํΛֶͼ͍ͨऔֻͬ ͔Γʹ΋Φεεϝ
66. フレームワーク +4͸͔ͳΓࣗ༝ͳهड़͕ՄೳͰϧʔϧΛઃ ͚ͳ͍ͱഁ୼͠΍͍͢ ͋Δఔ౓ͷن໛ʹͳΔ৔߹͸ϑϨʔϜϫʔ ΫͷಋೖΛݕ౼ͨ͠ํ͕ྑ͍ "OHVMBS+4΍#BDLCPOF
    7VFKT
    ͳͲͳͲ ϓϩδΣΫτʹ߹ͬͨ΋ͷΛ࢖͍·͠ΐ͏