Tweet
Tweet

Slide 1

Slide 1 text

WebΫϥΠΞϯτΞϓϦέʔγϣϯʹ ͓͚ΔεςʔτϚγϯͱಁաతΠϯ λʔϑΣʔε @axross

Slide 2

Slide 2 text

whoami » @axross / Kohei Asai » Web Application Developer

Slide 3

Slide 3 text

ΑΖ͓͘͠ئ͍͠·͢

Slide 4

Slide 4 text

WebΫϥΠΞϯτʹ͓͚Δ…Կʁ » ཁ͸Fluxͱ͔Reactͱ͔ͷ࿩ » ࠜຊతͳߟ͑ํͱ͔ » ͜ͷ࿩ʹڵຯΛ࣋ͬͯͦ͏ͳਓ͕͍ͨ

Slide 5

Slide 5 text

WebΫϥΠΞϯτΞϓϦέʔγϣϯʁ » ࠓͷWebϑϩϯτΤϯυʹ͸2छྨ͋Δ » WebυΩϡϝϯτ » ओʹ੩తͳ৘ใΛఏڙ͢Δ » WebΫϥΠΞϯτΞϓϦέʔγϣϯ » ओʹιϑτ΢ΣΞΛఏڙ͢Δ

Slide 6

Slide 6 text

WebΫϥΠΞϯτΞϓϦέʔγϣϯͷ୆಄ » ͋͑ͯʮมભͨ͠ʯͱ͸ݴΘͳ͍ » ࠓ΋WebυΩϡϝϯτ΋ଘࡏ͢Δ (ͱ͍͏͔Web͸ຊདྷͦ͏͍͏༻్ ͷ͸ͣ) » React͕৽͍͔͠ΒjQuery΍ΊΑ͏ʂͱ͔Ͱ͸ͳ͍ͱࢥ͏ » ͱ͸͍͑ɺॻ͔ΕΔJavaScript͕ΞϓϦέʔγϣϯͱͯ͠ͷମࡋΛอ ͭͦΕʹͳͬͨ

Slide 7

Slide 7 text

FluxͱReactʹ͍͓ͭͯ͞Β͍ ඞཁͷͳ͍ਓ͸৸͍ͯͯͩ͘͞

Slide 8

Slide 8 text

Flux » Facebook͕σβΠϯύλʔϯͱͯ͠ఏএͨ֓͠೦ » ΦϒβʔόʔύλʔϯΛϕʔεͱͨ͠ঢ়ଶભҠ؅ཧͷ΍Γํ » ViewͳͲ͕Action CreatorΛίʔϧ » αϒεΫϥΠϒ͍ͯ͠ΔStore͕൓Ԡ͠ɺϝοηʔδ(Action)ͷ಺༰ Λ΋ͱʹࣗ਎ͷ؅ཧ͢Δঢ়ଶΛߋ৽͢Δ

Slide 9

Slide 9 text

Fluxʹ͓͚ΔView » View͸StoreΛαϒεΫϥΠϒ͢Δ » Store͕؅ཧ͍ͯ͠Δঢ়ଶ͕ߋ৽͞ΕΔࡍʹɺͦͷมߋ͕σΟεύο ν͞ΕΔ » ߋ৽ޙͷঢ়ଶ஋͕ྲྀΕͯ͘ΔͷͰɺView͸ͦΕΛ΋ͱʹը໘Λ࠶ඳը ͢Δ

Slide 10

Slide 10 text

Virtual DOM » ViewʹྲྀΕͯ͘Δ஋͸ɺৗʹߋ৽ޙঢ়ଶͷ׬શ஋ʹͳΔ (ࠩ෼Ͱ͸ͳ ͍) » ͕ɺDOM͸ࠩ෼ͷखଓ͖తͳߋ৽Λ޷Ή » Virtual DOMͱ͍͏ঢ়ଶ஋ͱDOMͱͷதؒදݱ͕͋Ε͹ɺதؒදݱ ಉ࢜Ͱࠩ෼Λܭࢉͯ͠ɺDOMΛͲ͏มߋ͢Ε͹͍͍͔ͱ͍͏खଓ͖ ॲཧΛܾఆͰ͖Δ » ͍ͬͯ͏ͷΛ୲͏ͷ͕React

Slide 11

Slide 11 text

Flux ♥ React » ͭ·ΓFlux͸Virtual DOMͷΑ͏ͳ࢓૊Έ͕ͳ͍ͱ੒ཱͰ͖ͳ͍ » React͕͋Δ͜ͱͰɺFlux͕࣮༻Ͱ͖Δ

Slide 12

Slide 12 text

Α͘ݴΘΕΔ͜ͱ » ʮRedux (Flux)ͬͯεςʔτϚγϯ (༗ݶΦʔτϚτϯ)ͬΆ͍ΑͶʯ » ʮRedux (Flux)͸CQRSΛڧ੍Ͱ͖ΔΑͶʯ » (ͨͿΜFluxͷ͜ͱͳΜ͚ͩͲɺRedux͕༗໊ͳͷͰ୅໊ࢺͱͯ͠༻ ͍ΒΕΔ)

Slide 13

Slide 13 text

༗ݶΦʔτϚτϯ σδλϧճ࿏΍ϓϩάϥϜͷઃܭͰ࢖ΘΕΔ͜ͱ͕͋Γɺ͋ΔҰ࿈ͷঢ় ଶΛͱͬͨͱ͖ͲͷΑ͏ʹ࿦ཧ͕ྲྀΕΔ͔Λௐ΂Δ͜ͱ͕Ͱ͖Δɻ ༗ݶ ݸͷʮঢ়ଶʯͷ͏ͪ1ͭͷঢ়ଶΛͱΔɻ͋Δ࣌఺Ͱ͸1ͭͷঢ়ଶ͔͠ͱΒ ͣɺͦΕΛͦͷ࣌఺ͷʮݱࡏঢ়ଶʯͱݺͿɻԿΒ͔ͷΠϕϯτ΍৚݅ʹ Αͬͯ͋Δঢ়ଶ͔Βผͷঢ়ଶ΁ͱҠߦ͠ɺͦΕΛʮભҠʯͱݺͿɻ ͦΕ ͧΕͷݱࡏঢ়ଶ͔ΒભҠ͠͏Δঢ়ଶͱɺભҠͷ͖͔͚ͬͱͳΔ৚݅Λྻ ڍ͢Δ͜ͱͰఆٛ͞ΕΔɻ via. ༗ݶΦʔτϚτϯ - Wikipedia

Slide 14

Slide 14 text

FluxͷStore ͔ͨ͠ʹ // TodoStore#reduce() ... switch (action.type) { // ... // ೖྗͷఆٛ case TodoActionTypes.TOGGLE_TODO: // ঢ়ଶભҠઌͷఆٛ (state.update()ͷฦ஋͕ભҠޙͷঢ়ଶ) return state.update( action.id, todo => todo.set('complete', !todo.complete), ); // ... } // ... via. flux/TodoStore.js at master · facebook/flux · GitHub

Slide 15

Slide 15 text

CQRS » ίϚϯυΫΤϦ੹຿෼཭ (Command and Query Responsibility Segregation) » ಡΈࠐΈͱॻ͖ࠐΈΛΠϯλʔϑΣʔεͱͯ͠໌֬ʹ෼͚Δݪଇ » Command (ॻ͖ࠐΈ) ͸ඞͣ෭࡞༻Λ࣋ͪɺQuery (ಡΈࠐΈ) ͸෭ ࡞༻Λ࣋ͨͳ͍ » ͜ΕΒΛ໌֬ʹ෼͚Δ͜ͱͰɺϓϩάϥϜͷৼΔ෣͍ͷཧղͷ೉͠͞ ͕ܰݮ͞ΕΔ via. ϝΠϠʔઌੜͷҒେ͞ͱCommand-Query෼཭

Slide 16

Slide 16 text

Fluxʹ͓͚ΔCQRS » ঢ়ଶͷมߋ͸ඞͣAction CreatorΛ௨Δ → Command » ݱࡏͷঢ়ଶ͸Store͔͠஌Γಘͳ͍ → Query » ͦΕͧΕͷཁૉʹରͯ͠ٯͷૢ࡞Λ͢Δ͜ͱ͸Ͱ͖ͳ͍ » ͔ͨ͠ʹ…ʁ

Slide 17

Slide 17 text

ͭ·ΓͲ͏͍͏͜ͱͩͬͯ͹Αʁ » Flux͸༗ݶΦʔτϚτϯͷΑ͏ʹৼΔ෣ΘͤΔ͜ͱ͕Ͱ͖Δ » FluxʹΑͬͯCQRS͕ڧ੍͞ΕΔ » React͕͋Δ͜ͱʹΑͬͯFlux͕࣮༻Ͱ͖Δ » ͭ·ΓɺFluxͱ͍͏εςʔτϚγϯͱɺReactͱ͍͏ಁաతϢʔβʔ ΠϯλʔϑΣʔεʹΑͬͯΞϓϦέʔγϣϯΛߏங͢Δ » (༗ݶΦʔτϚτϯͱ͔CQRSͱ͔ʹ໌Δ͘ͳ͍ͷͰؒҧͬͯͨΒϚα ΧϦ͍ͩ͘͞)

Slide 18

Slide 18 text

ͦΜͳ͜ͱͰ͖Μͷ(ຊ౰ʹͰ͖ͯΜͷ)ʁ » ʮFluxͱReact͚ͩʯͰ͸ແཧ… » ֤ʑ͕࣌ؒ࣠Λ࣋ͭ֓೦Λѻ͏ͷ͕೉͍͠ » ඇಉظతॲཧΛͲ͏͢Δ͔ » ΞχϝʔγϣϯΛͲ͏͢Δ͔ » ࣄ࣮ɺ౰࣌ʮFluxͷͲ͜ͰAjaxΛ͢Δ͔ʯͱ͍͏໰͍Ͱք۾͕ ৭ʑΞϨͨ͠

Slide 19

Slide 19 text

ͨͱ͑͹ʁ » ϢʔβʔϑΟʔυόοΫΛ͖ͪΜͱ͢Δ਌੾ͳ෺Λ࡞Δલఏ » Ϧετͷ߲໨Λϩʔυ(ߋ৽)͍ͨ͠ → ϩʔσΟϯάதʹͦͷࢫΛදࣔ ͍ͨ͠ » ϝοηʔδ(Action)͕2ͭಉ࣌ʹσΟεύον͞ΕΔඞཁ͕͋Δ » StoreͷதͰྫ֎΍Τϥʔ͕ൃੜͨ͠ΒͲ͏͢Δ͔ʁ » ఘΊ͍ͨ » ௨ৗൃੜ͠ͳ͍Α͏ͳྫ֎͸ఘΊͯΫϥογϡ͍ͤͨ͞

Slide 20

Slide 20 text

͡Ό͋Ͳ͏͢Δ͔ʁ » Store͔ΒActionΛݺ΂͹ɺҰԠͰ͖Δ » ͱ͸͍͑ɺ͜Ε͸FluxͰ͸ېࢭ͞Ε͍ͯΔ » σʔλϑϩʔ͕୯ํ޲Ͱ͋Δͱ͍͏ϝϦοτΛࣦͬͯ͠·͏ » Fluxͷ্ʹ΋͏ҰͭɺԿ͔Λෑ͘ඞཁ͕͋Δ

Slide 21

Slide 21 text

Fluxͷ্ʹԿ͔Λෑ͘ʁ » ʮϢʔεέʔε૚ʯ : Ϣʔβʔೖྗ͔ΒɺAction CreatorΛฒྻɾ௚ ྻʹ૊Έ߹Θͤͯίʔϧ͢Δखଓ͖తͳ૚͕ඞཁ » redux-sagaɺredux-thunkɺredux-observable » Reduxͷϛυϧ΢ΣΞͱͯ͠ɺಠࣗDSLͳͲͰϢʔεέʔε૚Λ࡞ Δ » ΫϦʔϯΞʔΩςΫνϟͳͲ » தن໛Ҏ্Ͱ͋Ε͹ɺ͖ͪΜͱͨ͠ΞʔΩςΫνϟʹ৐ͤΔͷ΋ ख

Slide 22

Slide 22 text

ྫ Viewͱ༗ݶΦʔτϚτϯͱͯ͠ͷFlux͕ଘࡏɺͦͷؒʹUsecase

Slide 23

Slide 23 text

ͦͷଞ » iOS΍AndroidͰ΋Fluxͷ׆༻ྫ͕૿͖͑ͯͨ » ͱ͸͍͑ɺiOS΍AndroidʹVirtual DOM͸ͳ͍ͷͰɺԿΒ͔ͷ ࢓૊Έ͸ඞཁ » facebook/componentkit » zserge/anvil » ͱ͍͏͔ήʔϜͱ͔ͩͱɺ͜͏͍͏΍ΓํΛ͍ͯ͠Δ΋ͷ͕ଟ͍ » WebϑϩϯτΤϯυ΋ੜ࢈ੑΛམͱ͞ͳ͍ઃܭͰ։ൃ͍͖ͯ͠·͠ΐ ͏