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

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

F7dd7b43a0cc6c063f7d98ba23a1d359?s=128

久保田光則

June 09, 2013
Tweet

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 SFNFNCFSUIFNJMLͷొ࿥ϑΥʔϜ

  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. ͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠