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

Transcript

1. 1.

   σʔλόΠϯσΟϯάʹΑΔ ΠϯλϥΫςΟϒͳ6*ͷޮ཰తͳදݱ ΞγΞϧגࣜձࣾ
   ٱอాޫଇ

2. 2.

   ΞδΣϯμ w ࣗݾ঺հ w σʔλόΠϯσΟϯάΛ࣮ࡍʹࢼͯ͠ΈΔ w ࠓ·Ͱͷ6*ͷ࡞Γํ w ϦΞΫςΟϒϓϩάϥϛϯά w

   ·ͱΊ
3. 3.

   ࣗݾ঺հ w ٱอాޫଇ
   !BOBUPP w ΞγΞϧגࣜձࣾ w 6*69σβΠφʔ݉ιϑτ΢ΣΞΤϯδχΞ

4. 4.

   6*69σβΠφʔͬͯԿ w ϢʔβʔετʔϦʔ࡞ͬͨΓ w ϫΠϠϑϨʔϜॻ͍ͨΓ w ϏδϡΞϧσβΠϯͨ͠Γ

5. 5.

   ී௨ͷ։ൃ΋ w 1)1
   +BWB4DSJQU
   +BWB BOESPJE
   0CKFDUJWF$ $PDPB
   J04

   
   'BDUPS
   $
   $
   4DBMB w ΘΓͱͳΜͰ΋΍Δ
6. 6.

   ϗϜϖ w IUUQBOBUPPKQ w IUUQEIBUFOBOFKQBOBUPP

7. 7.

   ࣗݾ঺հऴΘΓ

8. 8.

   ࿩ΛਐΊΔલͷഎܠ

9. 9.

   ࠷ۙͷ΢ΣϒΞϓϦͷ6* w ΊͬͪΌϦονʹͳ͖ͬͯͨ

10. 10.

    w ྫ
    IUUQJ$MPVEDPNͷΧϨϯμʔ

11. 11.

    w ྫ
    IUUQTUSJQFDPNͷ؅ཧը໘

12. 12.

    w ྫ
    IUUQNPOBDBNPCJ
    ͷ*%&

13. 13.

    มΘ͖ͬͯͨ͜ͱ w 4JOHMF1BHF"QQMJDBUJPOͷීٴ w σεΫτοϓͷ(6*ʹ͍͖ۙͮͯͨ

14. 14.

    ͦΜͳத͜͜਺೥Ͱొ৔ͨ͠΋ͷ wσʔλόΠϯσΟϯά

15. 15.

    ޮ཰తʹ ϢʔβʔΠϯλʔϑΣΠε Λදݱ͢ΔͨΊͷύλʔϯ

16. 16.

    ݩʑ͸(6*Ͱར༻͞Ε͍ͯͨ

17. 17.

    ΢ΣϒϑϩϯτΤϯυ͕Ϧονʹ w ͦΕʹ൐͍ɺσʔλόΠϯσΟϯά΋(6*ͷੈք͔Β΢Σ ϒ΁ͱ߱Γ͖ͯͨ

18. 18.

    +4ϑϨʔϜϫʔΫͰͷ࠾༻૿Ճ w "OHVMBSKT w ,OPDLPVUKT w &NCFSKT w ,OPDLCBDLKT w

    #BUNBOKT w FUD
19. 19.

    ͬͦ͘͞ σʔλόΠϯσΟϯά ͷ঺հ

20. 20.

    +4ͰͷσʔλόΠϯσΟϯά w +4ͱ%0.ͷؔ܎Λએݴ͢Δ࢓૊Έ w ͲͪΒ͔͕ߋ৽͞ΕΔͱ΋͏Ұํʹࣗಈ൓ө͞ΕΔ %0.ཁૉ +4ͷ ΦϒδΣΫτ

21. 21.

    ૣ଎ࢼͯ͠ΈΔ w ,OPDLPVUKT w Θ͔Γ΍͍͢σʔλόΠϯσΟϯάΛ αϙʔτ͍ͯ͠Δ'8

22. 22.

    
    )5.-ʹόΠϯσΟϯάΛॻ͘ w %0.ཁૉͱ+BWB4DSJQUͷม਺ͱͷ ؔ܎Λએݴ <p>First name: <input data-bind="value: name" />

    </p> Hello <span data-bind=”text: name” />!
23. 23.

    
    +4ଆͷΦϒδΣΫτΛએݴ͢Δ w +BWB4DSJQUଆͰఏڙ͢Δ஋Λ એݴͯ݁͠ͼ͚ͭΔ w ޙ͸஋͕มΘΕ͹উखʹ൓ө var MyViewModel = function()

    { this.name = ko.observable(‘’); }; ko.applyBindings(new MyViewModel());
24. 24.

    σϞ w ૣ଎ࢼͯ͠ΈΔ

25. 25.

    σϞ w ؆୯ͳ50%0ΞϓϦΛ࡞ͬͯΈΔ
    ໿෼ IUUQBOBUPPKQCJGUPEPBQQIUNM

26. 26.

    ར఺ w %0.ߏ଄ʹؾΛ࢖Θͳͯ͘΋ྑ͍ w ࣗಈͰ6*ߋ৽ɻ%0.ૢ࡞͔Β։์͞ΕΔ w ݁Ռɺίʔυ͕ݮΔ

27. 27.

    ܽ఺ w ֶशίετ͕ඞཁ w ߟ͑ํͷస׵͕ඞཁ

28. 28.

    w ͳͥࠓ·Ͱͷ΍ΓํͰ͸ବ໨ͳͷ͔ w σʔλόΠϯσΟϯάͷഎܠʹ͋Δߟ͑ํ͸

29. 29.

    ࠓ·Ͱ w զʑ͸+4ͰͲ͏΍ͬͯ6*Λ࡞͖͔ͬͯͨ w ΢ΣϒͰͷΠϯλϥΫςΟϒͳ6*Λߏ੒͢Δ΋ͷ͸

30. 30.

    ΢ΣϒϖʔδͷϨϯμϦϯά

31. 31.

    ϨϯμϦϯάͷྲྀΕ )5.- ύʔε ϨϯμϦϯά ຊ౰͸΋ͬͱෳࡶ $44 %0. πϦʔ

32. 32.

    %0.πϦʔ )5.-υΩϡϝϯτΛදݱ͢ΔπϦʔߏ଄ͷσʔλ ֤ϊʔυ͸ϚʔΫΞοϓͱҰରҰͰରԠ

33. 33.

    ΠϯλϥΫςΟϒͳ6*Ͱ͸ w Ϣʔβͷೖྗʹରͯ͠ಈతʹ6*ΛมԽͤ͞Δඞཁ w ೖྗͷྫ
    Ϛ΢εͷΫϦοΫɺϑΥʔϜͷೖྗͳͲ

34. 34.

    +BWB4DSJQU͔Β%0.Λૢ࡞ +BWB4DSJQU +4͔Βૢ࡞ ࠶ϨϯμϦϯά ҧ͏ϨϯμϦϯά݁Ռ

35. 35.

    ࣌ܥྻͰද͢ͱ +BWB4DSJQU %0.πϦʔ զʑ͸܁Γฦ͠%0.ૢ࡞Λ͍ͯ͠Δ %0.ૢ࡞ %0.ૢ࡞ %0.ૢ࡞ %0.ૢ࡞

36. 36.

    %0.πϦʔʹϑΥʔΧε w %0.πϦʔͷมԽ͕ಈతͳ6*Λߏ੒

37. 37.

    ͜Ε·Ͱͷ࣮૷Ξϓϩʔν w %0.πϦʔͷมԽΛશͯίʔσΟϯά w %0.ૢ࡞ओମͷ΍Γํ

38. 38.

    ͜ΕͰ6*ͷߏஙʹؔ͢Δ ໰୊͸ղܾ͔ͨ͠ w ͦ͏͸ߦ͔ͳ͍

39. 39.

    ΍ͬͯΈΔͱ௒େม w ͳΜ͔ޮ཰͕ѱ͍ w ίʔυͷྔ͕ݮΒͳ͍ w ϝϯςφϯε͕େม

40. 40.

    ͱ͍͏ͷ΋ w ৗʹ%0.πϦʔͷߏ଄Λ಄ʹೖΕ͍ͯͳ͍ͱߦ͚ͳ͍ w %0.πϦʔͷߏ଄ʹґଘͨ͠ίʔυʹͳ͍ͬͯΔ w )5.-Λฤू͢ΔͱϏϡʔͷίʔυ͕յΕΔ͜ͱ΋

41. 41.

    ߟ͑ํͷస׵͕ඞཁ

42. 42.

    ϦΞΫςΟϒϓϩάϥϛϯά

43. 43.

    ϦΞΫςΟϒϓϩάϥϛϯά w ϓϩάϥϛϯάύϥμΠϜ w ϦΞϧλΠϜʹมԽ͢Δ஋Λѻ͏ w σʔλόΠϯσΟϯάͱؔ࿈͢Δߟ͑ํ

44. 44.

    w ܭࢉΛهड़͢ΔͷͰ͸ͳ͘ɺ ܭࢉͷؔ܎Λએݴ͢Δ ϓϩάϥϛϯάύϥμΠϜ

45. 45.

    ؆୯ͳ਺ࣜͰߟ͑ͯΈΑ͏ a = b + 4;

46. 46.

    ΋͠ɺC͕ͩͬͨΒ w ౰વɺB
    
    ʹͳΔ a = b + 4;

47. 47.

    ΋͠ɺC͕ͩͬͨΒ w ౰વɺB
    
    ʹͳΔ a = b + 4;

48. 48.

    B͸Cʹґଘ͍ͯ͠Δ w Cͷ஋ʹΑͬͯB͕ܾఆ͢Δ a = b + 4;

49. 49.

    a = b + 4; มԽ͢Δ஋ͷؔ܎ w ͱͯ͠΋ݟͳͤΔ

50. 50.

    ϦΞΫςΟϒϓϩάϥϛϯάͰ͸ w Ұ୴มԽ͢Δ஋ͷؔ܎ੑΛએݴ͢Ε͹ উखʹ࠶ܭࢉͯ͘͠ΕΔ w ঢ়ଶ؅ཧ͔Β։์͞ΕΔ a = b +

    4;
51. 51.

    ͦΕͬͯ࢖ΘΕͯΔͷ

52. 52.

    ͢Ͱʹ͋ͳͨ͸ ϦΞΫςΟϒϓϩάϥϛϯά Λ஌͍ͬͯΔ

53. 53.

    ྫ
    &YDFM౳ͷදܭࢉιϑτ w ਺ࣜΛॻ͍͓ͯ͘ͱɺґଘ͢Δηϧͷத਎͕ߋ৽͞ΕΔͱ ࠶ܭࢉ͞ΕΔ

54. 54.

    ࣮͸ɺ6*ʹ΋ w ͜ͷߟ͑ํ͕៉ྷʹ౰ͯ͸·Δ

55. 55.

    ྫͰߟ͑Α͏ w SFNFNCFS
    UIF
    NJMLͷొ࿥ϑΥʔϜ

56. 56.

    ϑΥʔϜʹೖྗ͢Δͱ w Ϣʔβͷೖྗʹରͯ͠ΞϧλΠϜʹมԽ

57. 57.

    w ೖྗʹରͯ͠%0.πϦʔ͕ ϦΞϧλΠϜʹมԽ

58. 58.

    ͔͠͠ɺ Α͘؍࡯ͯ͠ΈΔͱ

59. 59.

    Α͘ݟΔͱ w όϦσʔγϣϯͷ6*͸ϑΥʔϜʹґଘ͍ͯ͠Δ w͜ͷґଘͷؔ܎͸ෆม

60. 60.

    ͜ͷྫʹݶΒͣ ͲΜͳ6*Ͱ΋஋ؒͷؔ܎͕ଘࡏ ͢Δ

61. 61.

    σʔλόΠϯσΟϯά͸ w ͜ͷϦΞΫςΟϒϓϩάϥϛϯάͷߟ͑ํΛ 6*ʹద༻͍ͯ͠Δ w %0.ૢ࡞ओମͷߟ͑ํͱ͸શ͘ผ෺

62. 62.

    ͜Ε͔Βͷ࿩

63. 63.

    ࿩Λੲ΁໭͢ w Πϯλʔωοτʹ઀ଓ͢Δͷʹ ϞσϜ͕ϐʔώϣϩ໐͍ͬͯͨ͋ͷࠒ w ωοτΛ͍ͯͨ͠ΒՈ଒ʹి࿩͕࢖͑ͳ͍ͱۤ৘ΛݴΘΕ Δ

64. 64.

    ͜ͷࠒͷ΢ΣϒΞϓϦ w αʔόαΠυͰͷॲཧ͕΄΅ϝΠϯ w +BWB4DSJQUͰԿ͔΍ͬͨΓ͸΄΅ແ͠ w BKBYͱ͔ແ͍͠ɺ$44΋ແ͍
    w ςʔϒϧϨΠΞ΢τ͸ਖ਼ٛ

65. 65.

    ࣌͸ਐΈ w HPPHMF
    .BQͳͲͷొ৔ w 8FCͱ͍͏ݴ༿͕όζϫʔυʹ w ΢ΣϒΞϓϦέʔγϣϯͱ͍͏ݴ༿͕౰વʹ

66. 66.

    ࠓʹࢸΔ w σεΫτοϓΞϓϦฒͷ6* w पลٕज़ͷߴ౓Խ

67. 67.

    աڈ͔ΒະདྷΛ༧ଌ͢Δ w )5.-ͷීٴ w ߴ౓ͳ6*Λ࣋ͬͨΞϓϦͷ૿Ճ w গͳ͘ͱ΋͋ͱ೥͙Β͍

68. 68.

    ͜Ε͔Β w ·ͩখ೉͍͠ཧ۶͸ඞཁͳ͍ w ࠓඞཁͳͯ͘΋͜Ε͔Βඞཁʹͳͬͯ͘Δ

69. 69.

    ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠