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