beginner_react_flux

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