Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The State Transparented Web Application

Kohei Asai
January 13, 2017

The State Transparented Web Application

2017/01に社内勉強会で話した何かです

Kohei Asai

January 13, 2017
Tweet

More Decks by Kohei Asai

Other Decks in Programming

Transcript

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

    View Slide

  2. whoami
    » @axross / Kohei Asai
    » Web Application Developer

    View Slide

  3. ΑΖ͓͘͠ئ͍͠·͢

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  14. 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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide


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

    View Slide

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

    View Slide