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

by 久保田光則

Embed

Start on current slide

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

ී௨ͷ։ൃ΋ w 1)1 +BWB4DSJQU +BWB BOESPJE 0CKFDUJWF$ $PDPB J04 'BDUPS $ $ 4DBMB w ΘΓͱͳΜͰ΋΍Δ

Slide 6

Slide 6 text

ϗϜϖ w IUUQBOBUPPKQ w IUUQEIBUFOBOFKQBOBUPP

Slide 7

Slide 7 text

ࣗݾ঺հऴΘΓ

Slide 8

Slide 8 text

࿩ΛਐΊΔલͷഎܠ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

w ྫIUUQJ$MPVEDPNͷΧϨϯμʔ

Slide 11

Slide 11 text

w ྫIUUQTUSJQFDPNͷ؅ཧը໘

Slide 12

Slide 12 text

w ྫIUUQNPOBDBNPCJͷ*%&

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

)5.-ʹόΠϯσΟϯάΛॻ͘ w %0.ཁૉͱ+BWB4DSJQUͷม਺ͱͷ ؔ܎Λએݴ

First name:

Hello !

Slide 23

Slide 23 text

+4ଆͷΦϒδΣΫτΛએݴ͢Δ w +BWB4DSJQUଆͰఏڙ͢Δ஋Λ એݴͯ݁͠ͼ͚ͭΔ w ޙ͸஋͕มΘΕ͹উखʹ൓ө var MyViewModel = function() { this.name = ko.observable(‘’); }; ko.applyBindings(new MyViewModel());

Slide 24

Slide 24 text

σϞ w ૣ଎ࢼͯ͠ΈΔ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

ߟ͑ํͷస׵͕ඞཁ

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

ͦΕͬͯ࢖ΘΕͯΔͷ

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

ྫͰߟ͑Α͏ w SFNFNCFSUIFNJMLͷొ࿥ϑΥʔϜ

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

͜Ε͔Βͷ࿩

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

͝ਗ਼ௌ͋Γ͕ͱ͏ ͍͟͝·ͨ͠