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

beginner_react_flux

 beginner_react_flux

dachi023

July 29, 2016
Tweet

More Decks by dachi023

Other Decks in Programming

Transcript

  1. ॳ৺ऀ޲͚ͷ
    Α͘Θ͔ΔReactͱFlux
    1

    View Slide

  2. ͜Μͳਓ޲͚ͷࢿྉͰ͢
    • ReactΛ͜Ε͔Β࢖͍࢝ΊΔ, ࢖͍࢝ΊΑ͏ͱࢥ͍ͬͯΔ
    • ReactͰίϯϙʔωϯτͷωετʹർฐͨ͠
    • FluxͷData flow͕Α͘෼͔Βͳ͍
    • FluxͰͦΕͧΕͷཁૉͷ੹຿͕੾Γ෼͚ΒΕͳ͍
    • jQueryͷDOMࢀর஍ࠈ͔Βղ์͞Ε͍ͨ
    2

    View Slide

  3. Reactʹ͍ͭͯ
    3

    View Slide

  4. Reactʹ͍ͭͯ
    • Facebookࣾ੡ͷJavaScriptϥΠϒϥϦ

    View (UI)Λ࡞ΔͨΊͷ΋ͷ
    • ෳ਺ͷίϯϙʔωϯτ (= UIύʔπ)Ͱը໘Λߏ੒

    ex. ϔομʔ, αΠυόʔ, ϑολʔ etc
    • state, propsʹΑͬͯίϯϙʔωϯτͷঢ়ଶΛ؅ཧ, ఻ൖ
    • JSXͱ͍͏ಠࣗه๏ʹΑΔJS্ͰͷϚʔΫΞοϓ
    • VirtualDOMΛ࠾༻
    4

    View Slide

  5. ReactͷϝϦοτ
    • ίϯϙʔωϯτ͕࠶ར༻Մೳ

    ˠ Material-UI, React-Bootstrap ͱ͍ͬͨUIϥΠϒϥϦ
    • ViewϥΠϒϥϦͳͷͰଞͷϑϨʔϜϫʔΫͱ࿈ܞՄೳ

    Backbone.ViewΛগͣͭ͠Reactʹ͢ΔͳͲ
    • ͦͦ͜͜଎͍ (jQueryͳͲʹൺ΂ͯ)
    • αʔόαΠυϨϯμϦϯά΋Մೳ
    • ਌ͷঢ়ଶ͕ߋ৽͞ΕΔ

    ˠ ࢠʹ౉͖͍ͬͯͯΔ஋ʹ΋ࣗಈͰ൓ө͞ΕΔ
    5

    View Slide

  6. ReactͰ͋Γ͕ͪͳࣦഊ
    • jQueryΛೖΕͯΞχϝʔγϣϯͪ͠Ό͏

    ˠ Reactࣗମ͸ϦονUIΛఏڙ͢ΔϥΠϒϥϦͰ͸ͳ͍

    ˠˠ CSSͰؤுΖ͏
    • ViewʹશͯΛ࣮૷͢Δ໰୊

    APIݺͼग़͠, Viewͱͯ͠ͷ੹຿Ҏ্ͷϩδοΫ etc
    • ίϯϙʔωϯτͷ਌ࢠؔ܎ʹΑΔίʔϧόοΫ஍ࠈ

    ࢠ͕਌ʹ௨஌ͯ͠͞Βʹͦͷ਌ʹ௨஌ͯ͠…
    6

    View Slide

  7. ͍
    ͭ
    ΋
    ͷ
    ɾ
    ɾ
    ɾ
    ε
    ύ
    ή
    ο
    ς
    Ο


    ͡
    Ό
    ͳ
    ͍
    Ͱ
    ͢
    ͔
    ɾ
    ɾ
    ɾ
    7

    View Slide

  8. ͱɺͳΒͳ͍ͨΊʹ
    8

    View Slide

  9. Flux
    9

    View Slide

  10. Fluxʹ͍ͭͯ
    • Facebook͕ࣾఏএ͢ΔΞʔΩςΫνϟ
    • ओʹ4ͭͷཁૉʹΑͬͯߏ੒͞ΕΔ
    • Action (Action Creator)
    • Dispatcher
    • Store
    • View (React Component)
    • σʔλͷྲྀΕ͸ৗʹҰํ޲
    10

    View Slide

  11. Action (Action Creator)
    • σʔλΛऔಘ͢Δॲཧ, ඞཁ͕͋Ε͹Ճ޻·Ͱߦ͏

    API௨৴ͳͲ΋͜͜Ͱߦ͏ (Action Creator)
    • σʔλΛઃఆͯ͠DispatcherʹҾ͖౉͢

    ActionΛ൑ผ͢ΔͨΊͷλΠϓ΋Ұॹʹઃఆ͢Δ
    11

    View Slide

  12. Dispatcher
    • Dispatcherʹొ࿥͞ΕͨίʔϧόοΫΛ࣮ߦ͢Δ

    (ίʔϧόοΫ͸Store͔Βొ࿥͞ΕΔ)
    • ίʔϧόοΫ͕ෳ਺͋Δ৔߹ʹͦͷॱ൪Λ੍ޚ͢Δ
    12

    View Slide

  13. Store
    • σʔλͱϏδωεϩδοΫΛѻ͏
    • DispatcherʹίʔϧόοΫΛొ࿥͓ͯ͘͠

    ActionͷλΠϓʹԠͯ͡ԿΛͲ͏ॲཧ͢Δ͔ܾΊΔ
    • σʔλͷมߋ͸Dispatcher͔Βͷݺͼग़͔͠ΒͷΈԠ͡Δ
    13

    View Slide

  14. View (React Component)
    • ը໘্ͷUIΛ؅ཧ, ඳը͢Δ
    • Store͔ΒσʔλΛड͚औΓදࣔ͢Δ
    • ը໘্ͷૢ࡞ͳͲͷΠϕϯτͱActionΛඥ͚ͮΔ

    ΠϕϯτʹରԠͨ͠ActionΛݺͼग़͢
    14

    View Slide

  15. σʔλͷྲྀΕ͸ৗʹҰํ޲
    • Action: σʔλΛऔಘͯ͠λΠϓͱڞʹDispatcherʹ౉͢
    • Dispatcher: Store͔Βઃఆ͞ΕͨίʔϧόοΫΛ࣮ߦ
    • Store: σʔλͷ؅ཧ, ৽͍͠σʔλΛViewʹฦ͢
    • View: σʔλͷදࣔ, ActionΛݺͼग़͢
    15

    View Slide

  16. ͜ΕΒΛ࣮૷͢ΔͨΊͷ
    ࠷௿ݶͷϥΠϒϥϦ
    16

    View Slide

  17. Flux Utils
    17

    View Slide

  18. Flux Utilsʹ͍ͭͯ
    • Facebookࣾ੡ͷFluxϥΠϒϥϦ
    • ࠷௿ݶͷ࣮૷ͷΈ༻ҙ͞Ε͍ͯΔ
    • StoreͱViewͷϕʔεͱͳΔΫϥε͕༻ҙ͞Ε͍ͯΔ
    • ͜Μͳ࣌ʹΦεεϝ
    • ॳΊͯFluxͰ࣮૷ͯ͠ΈΔ
    • ଞͷFluxϑϨʔϜϫʔΫ͕৑௕͗͢Δ

    • https://github.com/facebook/flux
    18

    View Slide

  19. Flux Utilsͷఏڙ͢Δ4ͭͷΫϥε
    • Store

    ଞStoreͷϕʔεʹͳ͍ͬͯΔΫϥε
    • ReduceStore

    reduce()͢ΔͱStoreͷঢ়ଶ͕ߋ৽͞ΕΔ
    • MapStore

    ReduceStoreΛܧঝͨ͠Immutable.jsʹґଘ͢ΔΫϥε
    • Container

    React ComponentͷϥούʔͰStoreΛొ࿥Ͱ͖Δ

    Container഑ԼͷComponentʹStoreͷมߋΛ௨஌
    19

    View Slide

  20. ReduceStore
    • Storeͷ֦ுΫϥε
    • Immutable.jsΛ࢖Θͳ͍৔߹͸ReduceStoreΛ࢖͏
    • StateΛอ͍࣋ͯ͠Δ
    • Dispatcher͔Β౉͞ΕͨStateͱAction͔Β

    ৽͍͠StateΛੜ੒ͯ͠Container΁౉͢
    20

    View Slide

  21. Container
    • Store͔ΒStateΛड͚औΔReact Componentͷ֦ு
    • ࣗ਎ͷࢠڙͱͳΔComponentʹStateͷมߋΛ௨஌͢Δ
    • ContainerΛ࢖͏ࡍʹؾΛ͚ͭΔ͜ͱ
    • State͸ͳΔ΂͘Container͕ҰׅͰ؅ཧ͢Δ

    ࢠڙ͕StateΛ࣋ͨͳ͍͜ͱͰ؅ཧָ͕ʹͳΔ
    • UI΍props (= Componentͱͯ͠ͷػೳ)Λ࣋ͨͳ͍

    Containerͱͯ͠ప͠ɺUI͸Componentͨͪʹ೚ͤΔ
    21

    View Slide

  22. dispatcher.js
    22

    View Slide

  23. dispatcher.js
    • Facebookࣾ੡ͷDispatcherϥΠϒϥϦ
    • register() ͰίʔϧόοΫΛొ࿥

    ReduceStoreͳΒStoreͷconstructorʹDispatcherΛ౉͢

    ˠ reduce() ΛίʔϧόοΫͱͯ͠ొ࿥ͯ͘͠ΕΔ
    • ղআ͢Δ࣌͸unregister() ͰղআͰ͖Δ
    • Action͕dispatch() Λίʔϧ͢Δͱregister() Ͱొ࿥͞Εͨ

    ίʔϧόοΫͰActionͷλΠϓ͕Ұக͢Δॲཧ͕࣮ߦ

    • https://github.com/facebook/flux/blob/master/src/Dispatcher.js
    23

    View Slide

  24. ࣮૷αϯϓϧ
    • https://github.com/dachi023/react-flux-example

    • ࠷௿ݶͷ෦෼Λαϯϓϧ࣮૷
    • Action
    • Dispatcher (dispatcher.js)
    • Store (ReduceStore)
    • View (Container, React Component)
    • APIίʔϧ (axios.js)
    • webpackͰͷJS, CSSͷϏϧυ΋࣮૷
    • Babel, PostCSS
    24

    View Slide

  25. ·ͱΊ
    • React୯ମͩͱσʔλ؅ཧ, ఻ൖ่͕յ͢Δ
    • FluxΛ༻͍Δ͜ͱͰҰํ޲ʹσʔλ͕ྲྀΕΔ
    • Facebookࣾ੡ͷϥΠϒϥϦͰ࠷௿ݶͷߏ੒͕࡞ΕΔ
    • ͖ͪΜͱ੹຿Λҙ࣮ࣝͯ͠૷͢Δ͜ͱ͕ॏཁ
    • Action: σʔλऔಘ(APIίʔϧؚΉ), dispatch()࣮ߦ
    • Dispatcher: ొ࿥ίʔϧόοΫͷ࣮ߦ
    • Store: σʔλͷ؅ཧ, ৽نStateͷൃߦ, ίʔϧόοΫͷొ࿥
    • View:
    • Container: StateͷҰׅ؅ཧ
    • Component: σʔλͷදࣔ, UIͷඳը
    25

    View Slide

  26. ͓͠·͍
    26

    View Slide