データバインディングによるインタラクティブな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. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠