データバインディングによるインタラクティブなUIの効率的な表現

Transcript

1. σʔλόΠϯσΟϯάʹΑΔ ΠϯλϥΫςΟϒͳ6*ͷޮ཰తͳදݱ ΞγΞϧגࣜձࣾ
   ٱอాޫଇ
2. ΞδΣϯμ w ࣗݾ঺հ w σʔλόΠϯσΟϯάΛ࣮ࡍʹࢼͯ͠ΈΔ w ࠓ·Ͱͷ6*ͷ࡞Γํ w ϦΞΫςΟϒϓϩάϥϛϯά w ·ͱΊ
3. ࣗݾ঺հ w ٱอాޫଇ
   !BOBUPP w ΞγΞϧגࣜձࣾ w 6*69σβΠφʔ݉ιϑτ΢ΣΞΤϯδχΞ
4. 6*69σβΠφʔͬͯԿ w ϢʔβʔετʔϦʔ࡞ͬͨΓ w ϫΠϠϑϨʔϜॻ͍ͨΓ w ϏδϡΞϧσβΠϯͨ͠Γ
5. ී௨ͷ։ൃ΋ w 1)1
   +BWB4DSJQU
   +BWB BOESPJE
   0CKFDUJWF$ $PDPB
   J04
   'BDUPS
   $
   $
   4DBMB w ΘΓͱͳΜͰ΋΍Δ
6. ϗϜϖ w IUUQBOBUPPKQ w IUUQEIBUFOBOFKQBOBUPP
7. ࣗݾ঺հऴΘΓ
8. ࿩ΛਐΊΔલͷഎܠ
9. ࠷ۙͷ΢ΣϒΞϓϦͷ6* w ΊͬͪΌϦονʹͳ͖ͬͯͨ
10. w ྫ
    IUUQJ$MPVEDPNͷΧϨϯμʔ
11. w ྫ
    IUUQTUSJQFDPNͷ؅ཧը໘
12. w ྫ
    IUUQNPOBDBNPCJ
    ͷ*%&
13. มΘ͖ͬͯͨ͜ͱ w 4JOHMF1BHF"QQMJDBUJPOͷීٴ w σεΫτοϓͷ(6*ʹ͍͖ۙͮͯͨ
14. ͦΜͳத͜͜਺೥Ͱొ৔ͨ͠΋ͷ wσʔλόΠϯσΟϯά
15. ޮ཰తʹ ϢʔβʔΠϯλʔϑΣΠε Λදݱ͢ΔͨΊͷύλʔϯ
16. ݩʑ͸(6*Ͱར༻͞Ε͍ͯͨ
17. ΢ΣϒϑϩϯτΤϯυ͕Ϧονʹ w ͦΕʹ൐͍ɺσʔλόΠϯσΟϯά΋(6*ͷੈք͔Β΢Σ ϒ΁ͱ߱Γ͖ͯͨ
18. +4ϑϨʔϜϫʔΫͰͷ࠾༻૿Ճ w "OHVMBSKT w ,OPDLPVUKT w &NCFSKT w ,OPDLCBDLKT w #BUNBOKT w FUD
19. ͬͦ͘͞ σʔλόΠϯσΟϯά ͷ঺հ
20. +4ͰͷσʔλόΠϯσΟϯά w +4ͱ%0.ͷؔ܎Λએݴ͢Δ࢓૊Έ w ͲͪΒ͔͕ߋ৽͞ΕΔͱ΋͏Ұํʹࣗಈ൓ө͞ΕΔ %0.ཁૉ +4ͷ ΦϒδΣΫτ
21. ૣ଎ࢼͯ͠ΈΔ w ,OPDLPVUKT w Θ͔Γ΍͍͢σʔλόΠϯσΟϯάΛ αϙʔτ͍ͯ͠Δ'8
22. 
    )5.-ʹόΠϯσΟϯάΛॻ͘ w %0.ཁૉͱ+BWB4DSJQUͷม਺ͱͷ ؔ܎Λએݴ <p>First name: <input data-bind="value: name" /> </p> Hello <span data-bind=”text: name” />!
23. 
    +4ଆͷΦϒδΣΫτΛએݴ͢Δ w +BWB4DSJQUଆͰఏڙ͢Δ஋Λ એݴͯ݁͠ͼ͚ͭΔ w ޙ͸஋͕มΘΕ͹উखʹ൓ө var MyViewModel = function() { this.name = ko.observable(‘’); }; ko.applyBindings(new MyViewModel());
24. σϞ w ૣ଎ࢼͯ͠ΈΔ
25. σϞ w ؆୯ͳ50%0ΞϓϦΛ࡞ͬͯΈΔ
    ໿෼ IUUQBOBUPPKQCJGUPEPBQQIUNM
26. ར఺ w %0.ߏ଄ʹؾΛ࢖Θͳͯ͘΋ྑ͍ w ࣗಈͰ6*ߋ৽ɻ%0.ૢ࡞͔Β։์͞ΕΔ w ݁Ռɺίʔυ͕ݮΔ
27. ܽ఺ w ֶशίετ͕ඞཁ w ߟ͑ํͷస׵͕ඞཁ
28. w ͳͥࠓ·Ͱͷ΍ΓํͰ͸ବ໨ͳͷ͔ w σʔλόΠϯσΟϯάͷഎܠʹ͋Δߟ͑ํ͸
29. ࠓ·Ͱ w զʑ͸+4ͰͲ͏΍ͬͯ6*Λ࡞͖͔ͬͯͨ w ΢ΣϒͰͷΠϯλϥΫςΟϒͳ6*Λߏ੒͢Δ΋ͷ͸
30. ΢ΣϒϖʔδͷϨϯμϦϯά
31. ϨϯμϦϯάͷྲྀΕ )5.- ύʔε ϨϯμϦϯά ຊ౰͸΋ͬͱෳࡶ $44 %0. πϦʔ
32. %0.πϦʔ )5.-υΩϡϝϯτΛදݱ͢ΔπϦʔߏ଄ͷσʔλ ֤ϊʔυ͸ϚʔΫΞοϓͱҰରҰͰରԠ
33. ΠϯλϥΫςΟϒͳ6*Ͱ͸ w Ϣʔβͷೖྗʹରͯ͠ಈతʹ6*ΛมԽͤ͞Δඞཁ w ೖྗͷྫ
    Ϛ΢εͷΫϦοΫɺϑΥʔϜͷೖྗͳͲ
34. +BWB4DSJQU͔Β%0.Λૢ࡞ +BWB4DSJQU +4͔Βૢ࡞ ࠶ϨϯμϦϯά ҧ͏ϨϯμϦϯά݁Ռ
35. ࣌ܥྻͰද͢ͱ +BWB4DSJQU %0.πϦʔ զʑ͸܁Γฦ͠%0.ૢ࡞Λ͍ͯ͠Δ %0.ૢ࡞ %0.ૢ࡞ %0.ૢ࡞ %0.ૢ࡞
36. %0.πϦʔʹϑΥʔΧε w %0.πϦʔͷมԽ͕ಈతͳ6*Λߏ੒
37. ͜Ε·Ͱͷ࣮૷Ξϓϩʔν w %0.πϦʔͷมԽΛશͯίʔσΟϯά w %0.ૢ࡞ओମͷ΍Γํ
38. ͜ΕͰ6*ͷߏஙʹؔ͢Δ ໰୊͸ղܾ͔ͨ͠ w ͦ͏͸ߦ͔ͳ͍
39. ΍ͬͯΈΔͱ௒େม w ͳΜ͔ޮ཰͕ѱ͍ w ίʔυͷྔ͕ݮΒͳ͍ w ϝϯςφϯε͕େม
40. ͱ͍͏ͷ΋ w ৗʹ%0.πϦʔͷߏ଄Λ಄ʹೖΕ͍ͯͳ͍ͱߦ͚ͳ͍ w %0.πϦʔͷߏ଄ʹґଘͨ͠ίʔυʹͳ͍ͬͯΔ w )5.-Λฤू͢ΔͱϏϡʔͷίʔυ͕յΕΔ͜ͱ΋
41. ߟ͑ํͷస׵͕ඞཁ
42. ϦΞΫςΟϒϓϩάϥϛϯά
43. ϦΞΫςΟϒϓϩάϥϛϯά w ϓϩάϥϛϯάύϥμΠϜ w ϦΞϧλΠϜʹมԽ͢Δ஋Λѻ͏ w σʔλόΠϯσΟϯάͱؔ࿈͢Δߟ͑ํ
44. w ܭࢉΛهड़͢ΔͷͰ͸ͳ͘ɺ ܭࢉͷؔ܎Λએݴ͢Δ ϓϩάϥϛϯάύϥμΠϜ
45. ؆୯ͳ਺ࣜͰߟ͑ͯΈΑ͏ a = b + 4;
46. ΋͠ɺC͕ͩͬͨΒ w ౰વɺB
    
    ʹͳΔ a = b + 4;
47. ΋͠ɺC͕ͩͬͨΒ w ౰વɺB
    
    ʹͳΔ a = b + 4;
48. B͸Cʹґଘ͍ͯ͠Δ w Cͷ஋ʹΑͬͯB͕ܾఆ͢Δ a = b + 4;
49. a = b + 4; มԽ͢Δ஋ͷؔ܎ w ͱͯ͠΋ݟͳͤΔ
50. ϦΞΫςΟϒϓϩάϥϛϯάͰ͸ w Ұ୴มԽ͢Δ஋ͷؔ܎ੑΛએݴ͢Ε͹ উखʹ࠶ܭࢉͯ͘͠ΕΔ w ঢ়ଶ؅ཧ͔Β։์͞ΕΔ a = b + 4;
51. ͦΕͬͯ࢖ΘΕͯΔͷ
52. ͢Ͱʹ͋ͳͨ͸ ϦΞΫςΟϒϓϩάϥϛϯά Λ஌͍ͬͯΔ
53. ྫ
    &YDFM౳ͷදܭࢉιϑτ w ਺ࣜΛॻ͍͓ͯ͘ͱɺґଘ͢Δηϧͷத਎͕ߋ৽͞ΕΔͱ ࠶ܭࢉ͞ΕΔ
54. ࣮͸ɺ6*ʹ΋ w ͜ͷߟ͑ํ͕៉ྷʹ౰ͯ͸·Δ
55. ྫͰߟ͑Α͏ w SFNFNCFS
    UIF
    NJMLͷొ࿥ϑΥʔϜ
56. ϑΥʔϜʹೖྗ͢Δͱ w Ϣʔβͷೖྗʹରͯ͠ΞϧλΠϜʹมԽ
57. w ೖྗʹରͯ͠%0.πϦʔ͕ ϦΞϧλΠϜʹมԽ
58. ͔͠͠ɺ Α͘؍࡯ͯ͠ΈΔͱ
59. Α͘ݟΔͱ w όϦσʔγϣϯͷ6*͸ϑΥʔϜʹґଘ͍ͯ͠Δ w͜ͷґଘͷؔ܎͸ෆม
60. ͜ͷྫʹݶΒͣ ͲΜͳ6*Ͱ΋஋ؒͷؔ܎͕ଘࡏ ͢Δ
61. σʔλόΠϯσΟϯά͸ w ͜ͷϦΞΫςΟϒϓϩάϥϛϯάͷߟ͑ํΛ 6*ʹద༻͍ͯ͠Δ w %0.ૢ࡞ओମͷߟ͑ํͱ͸શ͘ผ෺
62. ͜Ε͔Βͷ࿩
63. ࿩Λੲ΁໭͢ w Πϯλʔωοτʹ઀ଓ͢Δͷʹ ϞσϜ͕ϐʔώϣϩ໐͍ͬͯͨ͋ͷࠒ w ωοτΛ͍ͯͨ͠ΒՈ଒ʹి࿩͕࢖͑ͳ͍ͱۤ৘ΛݴΘΕ Δ
64. ͜ͷࠒͷ΢ΣϒΞϓϦ w αʔόαΠυͰͷॲཧ͕΄΅ϝΠϯ w +BWB4DSJQUͰԿ͔΍ͬͨΓ͸΄΅ແ͠ w BKBYͱ͔ແ͍͠ɺ$44΋ແ͍
    w ςʔϒϧϨΠΞ΢τ͸ਖ਼ٛ
65. ࣌͸ਐΈ w HPPHMF
    .BQͳͲͷొ৔ w 8FCͱ͍͏ݴ༿͕όζϫʔυʹ w ΢ΣϒΞϓϦέʔγϣϯͱ͍͏ݴ༿͕౰વʹ
66. ࠓʹࢸΔ w σεΫτοϓΞϓϦฒͷ6* w पลٕज़ͷߴ౓Խ
67. աڈ͔ΒະདྷΛ༧ଌ͢Δ w )5.-ͷීٴ w ߴ౓ͳ6*Λ࣋ͬͨΞϓϦͷ૿Ճ w গͳ͘ͱ΋͋ͱ೥͙Β͍
68. ͜Ε͔Β w ·ͩখ೉͍͠ཧ۶͸ඞཁͳ͍ w ࠓඞཁͳͯ͘΋͜Ε͔Βඞཁʹͳͬͯ͘Δ
69. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠