beginner_react_flux

Transcript

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

2. ͜Μͳਓ޲͚ͷࢿྉͰ͢ • ReactΛ͜Ε͔Β࢖͍࢝ΊΔ, ࢖͍࢝ΊΑ͏ͱࢥ͍ͬͯΔ • ReactͰίϯϙʔωϯτͷωετʹർฐͨ͠ • FluxͷData flow͕Α͘෼͔Βͳ͍ •

   FluxͰͦΕͧΕͷཁૉͷ੹຿͕੾Γ෼͚ΒΕͳ͍ • jQueryͷDOMࢀর஍ࠈ͔Βղ์͞Ε͍ͨ 2

3. Reactʹ͍ͭͯ 3

4. Reactʹ͍ͭͯ • Facebookࣾ੡ͷJavaScriptϥΠϒϥϦ
 View (UI)Λ࡞ΔͨΊͷ΋ͷ • ෳ਺ͷίϯϙʔωϯτ (= UIύʔπ)Ͱը໘Λߏ੒
 ex.

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

5. ReactͷϝϦοτ • ίϯϙʔωϯτ͕࠶ར༻Մೳ
 ˠ Material-UI, React-Bootstrap ͱ͍ͬͨUIϥΠϒϥϦ • ViewϥΠϒϥϦͳͷͰଞͷϑϨʔϜϫʔΫͱ࿈ܞՄೳ
 Backbone.ViewΛগͣͭ͠Reactʹ͢ΔͳͲ

   • ͦͦ͜͜଎͍ (jQueryͳͲʹൺ΂ͯ) • αʔόαΠυϨϯμϦϯά΋Մೳ • ਌ͷঢ়ଶ͕ߋ৽͞ΕΔ
 ˠ ࢠʹ౉͖͍ͬͯͯΔ஋ʹ΋ࣗಈͰ൓ө͞ΕΔ 5

6. ReactͰ͋Γ͕ͪͳࣦഊ • jQueryΛೖΕͯΞχϝʔγϣϯͪ͠Ό͏
 ˠ Reactࣗମ͸ϦονUIΛఏڙ͢ΔϥΠϒϥϦͰ͸ͳ͍
 ˠˠ CSSͰؤுΖ͏ • ViewʹશͯΛ࣮૷͢Δ໰୊
 APIݺͼग़͠,

   Viewͱͯ͠ͷ੹຿Ҏ্ͷϩδοΫ etc • ίϯϙʔωϯτͷ਌ࢠؔ܎ʹΑΔίʔϧόοΫ஍ࠈ
 ࢠ͕਌ʹ௨஌ͯ͠͞Βʹͦͷ਌ʹ௨஌ͯ͠… 6

7. ͍
   ͭ
   ΋
   ͷ
   ɾ
   ɾ
   ɾ ε
   ύ
   ή
   

   ο
   ς
   Ο
   ࣮
   ૷ ͡
   Ό
   ͳ
   ͍
   Ͱ
   ͢
   ͔
   ɾ
   ɾ
   ɾ 7

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

9. Flux 9

10. Fluxʹ͍ͭͯ • Facebook͕ࣾఏএ͢ΔΞʔΩςΫνϟ • ओʹ4ͭͷཁૉʹΑͬͯߏ੒͞ΕΔ • Action (Action Creator) •

    Dispatcher • Store • View (React Component) • σʔλͷྲྀΕ͸ৗʹҰํ޲ 10

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

    σʔλΛઃఆͯ͠DispatcherʹҾ͖౉͢
 ActionΛ൑ผ͢ΔͨΊͷλΠϓ΋Ұॹʹઃఆ͢Δ 11

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

13. Store • σʔλͱϏδωεϩδοΫΛѻ͏ • DispatcherʹίʔϧόοΫΛొ࿥͓ͯ͘͠
 ActionͷλΠϓʹԠͯ͡ԿΛͲ͏ॲཧ͢Δ͔ܾΊΔ • σʔλͷมߋ͸Dispatcher͔Βͷݺͼग़͔͠ΒͷΈԠ͡Δ 13

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


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

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

    ৽͍͠σʔλΛViewʹฦ͢ • View: σʔλͷදࣔ, ActionΛݺͼग़͢ 15

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

17. Flux Utils 17

18. Flux Utilsʹ͍ͭͯ • Facebookࣾ੡ͷFluxϥΠϒϥϦ • ࠷௿ݶͷ࣮૷ͷΈ༻ҙ͞Ε͍ͯΔ • StoreͱViewͷϕʔεͱͳΔΫϥε͕༻ҙ͞Ε͍ͯΔ • ͜Μͳ࣌ʹΦεεϝ

    • ॳΊͯFluxͰ࣮૷ͯ͠ΈΔ • ଞͷFluxϑϨʔϜϫʔΫ͕৑௕͗͢Δ
 • https://github.com/facebook/flux 18

19. Flux Utilsͷఏڙ͢Δ4ͭͷΫϥε • Store
 ଞStoreͷϕʔεʹͳ͍ͬͯΔΫϥε • ReduceStore
 reduce()͢ΔͱStoreͷঢ়ଶ͕ߋ৽͞ΕΔ • MapStore


    ReduceStoreΛܧঝͨ͠Immutable.jsʹґଘ͢ΔΫϥε • Container
 React ComponentͷϥούʔͰStoreΛొ࿥Ͱ͖Δ
 Container഑ԼͷComponentʹStoreͷมߋΛ௨஌ 19

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

    20

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


    ࢠڙ͕StateΛ࣋ͨͳ͍͜ͱͰ؅ཧָ͕ʹͳΔ • UI΍props (= Componentͱͯ͠ͷػೳ)Λ࣋ͨͳ͍
 Containerͱͯ͠ప͠ɺUI͸Componentͨͪʹ೚ͤΔ 21

22. dispatcher.js 22

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

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

25. ·ͱΊ • React୯ମͩͱσʔλ؅ཧ, ఻ൖ่͕յ͢Δ • FluxΛ༻͍Δ͜ͱͰҰํ޲ʹσʔλ͕ྲྀΕΔ • Facebookࣾ੡ͷϥΠϒϥϦͰ࠷௿ݶͷߏ੒͕࡞ΕΔ • ͖ͪΜͱ੹຿Λҙ࣮ࣝͯ͠૷͢Δ͜ͱ͕ॏཁ

    • Action: σʔλऔಘ(APIίʔϧؚΉ), dispatch()࣮ߦ • Dispatcher: ొ࿥ίʔϧόοΫͷ࣮ߦ • Store: σʔλͷ؅ཧ, ৽نStateͷൃߦ, ίʔϧόοΫͷొ࿥ • View: • Container: StateͷҰׅ؅ཧ • Component: σʔλͷදࣔ, UIͷඳը 25

26. ͓͠·͍ 26