ToDoアプリで学ぶReact/Redux入門/vtecx2_lt2

初心者歓迎！React勉強会＋LT大会 https://vtecx.connpass.com/event/70544/
の発表資料です

参考リンク
・ソースコード
https://github.com/nishina555/todo-react
https://redux.js.org/docs/basics/ExampleTodoList.html

Transcript

1. ਔՊढ़੖ 2017/11/29 ToDoΞϓϦͰֶͿ React/Reduxೖ໳ 
2. ࣗݾ঺հ Reactͷ෮श ReactͰToDoΞϓϦΛ࡞Ζ͏ ReduxΛಋೖ͢ΔϝϦοτʹ͍ͭͯ Reduxͷ֓ཁʹ͍ͭͯ ReduxͰToDoΞϓϦΛ࡞Ζ͏ ·ͱΊ ໨࣍ 
3. ࣗݾ঺հ Reactͷ෮श ReactͰToDoΞϓϦΛ࡞Ζ͏ ReduxΛಋೖ͢ΔϝϦοτʹ͍ͭͯ Reduxͷ֓ཁʹ͍ͭͯ ReduxͰToDoΞϓϦΛ࡞Ζ͏ ·ͱΊ ໨࣍ 
4. ਔՊ ढ़੖(@nishina555) ΩϟϦΞ: 
 ָఱ (2014 - 2017)
 εϖʔεϚʔέοτ (2017.6 - )
 ٕज़ελοΫ:
 Rails, React ࣗݾ঺հ 
5. εϖʔεΛି͍ͨ͠ਓͱआΓ͍ͨਓΛܨ͛ΔϓϥοτϑΥʔϜΛఏڙ εϖʔεϚʔέοτͷαʔϏε঺հ  ฐٕࣾज़ελοΫʹ͍ͭͯ͸ΤϯδχΞϒϩάΛࢀর͍ͩ͘͞
 http://blog.spacemarket.com/code/tech_stack_2017/
6. Ract, Reduxʹ͓͚ΔσʔλͷྲྀΕʹ͍ͭͯ ReduxΛಋೖ͢Δ͜ͱʹΑΔϝϦοτ Reduxͷ֓ཁʹ͍ͭͯ ࿩͢͜ͱ ES6ͷจ๏ղઆ ReactͷϥΠϑαΠΫϧ(ComponentDidMountͳͲ) ࿩͞ͳ͍͜ͱ ࠓճͷൃද಺༰ʹ͍ͭͯ σʔλͷྲྀΕɺReduxͷ໾ׂͷઆ໌ʹয఺ 
7. ࣗݾ঺հ Reactͷ෮श ReactͰToDoΞϓϦΛ࡞Ζ͏ ReduxΛಋೖ͢ΔϝϦοτʹ͍ͭͯ Reduxͷ֓ཁʹ͍ͭͯ ReduxͰToDoΞϓϦΛ࡞Ζ͏ ·ͱΊ ໨࣍ 
8. ֶशίετ͕௿͍ͱ͍͏ϝϦοτ MVCͷViewͷ໾ׂΛ୲͏JavaScript ϥΠϒϥϦ σʔλΛड͚औΓɺߋ৽͕ඞཁͳ෦෼ͷDOMΛ ಈతʹมߋ͢Δ Ծ૝DOMΛ࣋ͭ Reactͷಛ௃ʹ͍ͭͯ ਌͔Βࢠ΁propsΛܦ༝ͨ͠୯Ұํ޲ͷσʔλϑϩʔ ֤Component͸stateͰঢ়ଶΛ؅ཧ  Componentͷ૊Έ߹ΘͤʹΑͬͯΞϓϦΛߏ੒͢Δ ΞϓϦΛύʔπԽ͢Δ͜ͱͰ؅ཧ͕͠΍͘͢ͳΔ Componentͷ૊Έ߹ΘͤʹΑͬͯΞϓϦΛߏ੒͢Δ ΞϓϦΛύʔπԽ͢Δ͜ͱͰ؅ཧ͕͠΍͘͢ͳΔ
9. Ծ૝DOMʹ͍ͭͯ(1/2) " $ QSPQT # & ' QSPQT QSPQT QSPQT % QSPQT ) QSPQT ਌͔Βࢠ΁propsΛܦ༝ͨ͠୯Ұํ޲ͷσʔλϑϩʔ ( DPNQPOFOU TUBUF TUBUF QSPQT 
10. Ծ૝DOMʹ͍ͭͯ(2/2) " $ FWFOU # & ' FWFOU FWFOU FWFOU % FWFOU ) FWFOU ࢠ͔Β਌΁σʔλΛ౉͢ࡍ͸Πϕϯτ(click, mouse over, ͳͲ)ʹ ίʔϧόοΫΛ࣮૷ ( FWFOU 
11. ࣗݾ঺հ Reactͷ෮श ReactͰToDoΞϓϦΛ࡞Ζ͏ ReduxΛಋೖ͢ΔϝϦοτʹ͍ͭͯ Reduxͷ֓ཁʹ͍ͭͯ ReduxͰToDoΞϓϦΛ࡞Ζ͏ ·ͱΊ ໨࣍ 
12. ToDoΞϓϦΛߏ੒͢ΔComponent App Form TodoList Todo ࠓճઆ໌Ͱ࢖͏ToDoΞϓϦͷ֓ཁ ϑΥʔϜ͔ΒToDoΛ௥ՃͰ͖Δ ToDoΛΫϦοΫ͢Δͱ׬ྃʹͳΔ ToDoͷεςʔλεͰϑΟϧλϦϯά
 Ͱ͖Δ 
13. ToDoΞϓϦΛߏ੒͢ΔComponent App Form TodoList Todo ࠓճઆ໌Ͱ࢖͏ToDoΞϓϦͷ֓ཁ ϑΥʔϜ͔ΒToDoΛ௥ՃͰ͖Δ ToDoΛΫϦοΫ͢Δͱ׬ྃʹͳΔ ToDoͷεςʔλεͰϑΟϧλϦϯά
 Ͱ͖Δ ࠓճ͸Componentؒͷσʔλͷड͚౉͠ͷ෦෼Λઆ໌ 
14. ToDoΞϓϦΛԾ૝DOMͰදݱ͢Δ "QQ 5P%P-JTU QSPQT 'PSN 5P%P QSPQT PO4VCNJU App͕todosͱ͍͏todoͷ·ͱ·ΓΛ؅ཧ͍ͯ͠Δ UPEPT\UPEP
    UPEP
    UPEPʜ^
    pMUFS
    "MM UPEPJE
    
    UPEPUJUMF
    
    ཛΛങ͏
    UPEPTUBUVT
    
    "DUJWF App͔Βࢠʹରͯ͠propsͰσʔλΛ౉͢ Form͔ΒonSubmitͷΠϕϯτΛհͯ͠todo͕௥Ճ͞ΕΔ 
15. ToDoΞϓϦΛԾ૝DOMͰදݱ͢Δ "QQ 5P%P-JTU QSPQT 'PSN 5P%P QSPQT PO4VCNJU App͕todosͱ͍͏todoͷ·ͱ·ΓΛ؅ཧ͍ͯ͠Δ UPEPT\UPEP
    UPEP
    UPEPʜ^
    pMUFS
    "MM UPEPJE
    
    UPEPUJUMF
    
    ཛΛങ͏
    UPEPTUBUVT
    
    "DUJWF App͔Βࢠʹରͯ͠propsͰσʔλΛ౉͢ Form͔ΒonSubmitͷΠϕϯτΛհͯ͠todo͕௥Ճ͞ΕΔ 
16. ਌͔Βࢠ΁ͷσʔλͷ఻ൖ App.js(਌) ToDoList.js(ࢠ) ਌ͷTUBUFͰ؅ཧ͞Ε͍ͯΔUPEPT Λࢠʹ౉͢ɻ 
17. ਌͔Βࢠ΁ͷσʔλͷ఻ൖ App.js(਌) ToDoList.js(ࢠ) ࢠ͸QSPQTͱͯ͠UPEPTΛѻ͏͜ ͱ͕Ͱ͖Δ 
18. (࠶ܝ)ToDoΞϓϦΛԾ૝DOMͰදݱ͢Δ "QQ 5P%P-JTU QSPQT 'PSN 5P%P QSPQT PO4VCNJU App͕todosͱ͍͏todoͷ·ͱ·ΓΛ؅ཧ͍ͯ͠Δ UPEPT\UPEP
    UPEP
    UPEPʜ^
    pMUFS
    "MM UPEPJE
    
    UPEPUJUMF
    
    ཛΛങ͏
    UPEPTUBUVT
    
    "DUJWF App͔Βࢠʹରͯ͠propsͰσʔλΛ౉͢ Form͔ΒonSubmitͷΠϕϯτΛհͯ͠todo͕௥Ճ͞ΕΔ 
19. ࢠ͔Β਌΁ͷσʔλͷ఻ൖ App.js(਌) ࢠͷPO4VCNJUͷΠϕϯτͱ IBOEMFTVCNJUΛඥ෇͚Δ Form.js(ࢠ) 
20. ࢠ͔Β਌΁ͷσʔλͷ఻ൖ App.js(਌) 
    IBOEMFTVCNJU͕࣮ߦ͞ΕΔ Form.js(ࢠ)  
21. ࢠ͔Β਌΁ͷσʔλͷ఻ൖ App.js(਌) 
    IBOEMFTVCNJUͰ਌ͷPO5PEP4VCNJU Λύϥϝʔλ෇͖Ͱ࣮ߦ Form.js(ࢠ)  
22. ࢠ͔Β਌΁ͷσʔλͷ఻ൖ App.js(਌) 
    ਌ͷPO5PEP4VCNJU͔Β IBOEMF5PEP4VCNJU͕࣮ߦ͞Εɺ
 ౉͞Εͨύϥϝʔλʹै͍ঢ়ଶΛߋ৽ Form.js(ࢠ) 
23. ࣗݾ঺հ Reactͷ෮श ReactͰToDoΞϓϦΛ࡞Ζ͏ ReduxΛಋೖ͢ΔϝϦοτʹ͍ͭͯ Reduxͷ֓ཁʹ͍ͭͯ ReduxͰToDoΞϓϦΛ࡞Ζ͏ ·ͱΊ ໨࣍ 
24. ReactͰͷঢ়ଶ؅ཧɾߋ৽ͷ໰୊఺ "QQ 5P%P-JTU 'PSN 5P%P PO$MJDL PO4VCNJU ToDoΛ׬ྃͤͨ࣌͞ͷσʔλͷมߋ͸ͲͷΑ͏ʹม͑Δʁ PO$MJDL ɾComponentؒͰσʔλͷड͚౉͠ɺঢ়ଶ؅ཧ͕ෳࡶԽ
 ɾReact͸Viewͷ໾ׂʹಛԽ͍ͯ͠ΔͨΊঢ়ଶ؅ཧ͸ۤख ྫ͑͹todoΛ׬ྃͤͨ͞৔߹ɺtodoΛ؅ཧ͢ ΔtodosΛߋ৽͢ΔͨΊʹίʔϧόοΫ͕Կ౓ ΋࣮ߦ͞ΕΔ 
25. Reduxͷঢ়ଶ؅ཧɾߋ৽ͷࢥ૝ "QQ 5P%P-JTU 'PSN 5P%P ঢ়ଶ؅ཧΛ1ͭͷ৔ॴʹ·ͱΊΔ QSPQT ɾStoreͱ͍͏֓೦ΛऔΓೖΕɺStore্Ͱঢ়ଶΛҰݩ؅ཧ
 ɾComponent͸ඞཁʹԠͯ͡Store͔Βσʔλऔಘɾߋ৽ QSPQT QSPQT TUPSF 
26. ࣗݾ঺հ Reactͷ෮श ReactͰToDoΞϓϦΛ࡞Ζ͏ ReduxΛಋೖ͢ΔϝϦοτʹ͍ͭͯ Reduxͷ֓ཁʹ͍ͭͯ ReduxͰToDoΞϓϦΛ࡞Ζ͏ ·ͱΊ ໨࣍ 
27. ঢ়ଶͱ͸ReactͰ͍͏Stateͷ͜ͱɻReduxͰ͸Storeͱ͍͏ܗͰҰׅ ؅ཧ͢Δɹ ToDoΞϓϦͰ͸ϑΟϧλϦϯάͷঢ়ଶ΍֤ToDoͷ಺༰͕֘౰͢Δ Fluxϕʔεͷঢ়ଶ؅ཧϑϨʔϜϫʔΫͷ1ͭ React.js͚ͩͰͳ͘ɺ༷ʑͳjsϑϨʔϜϫʔΫ ͱ૊Έ ߹ΘͤΔ͜ͱ͕Մೳ Reduxʹ͍ͭͯ 
28. Fluxͷঢ়ଶ؅ཧϞσϧʹ͍ͭͯ: ֓ཁ Action -> Dispatcher -> Store -> ViewͷҰํ޲Ͱ σʔλͷঢ়ଶ͕఻ൖ(Լͷ໼ҹ) ϢʔβʔͷߦಈʹΑͬͯView͔ΒActionΛൃߦ͠ɺ
 σʔλͷঢ়ଶΛ఻ൖͤ͞Δ͜ͱ΋Ͱ͖Δ(্ͷ໼ҹ) 
29. Fluxͷঢ়ଶ؅ཧϞσϧʹ͍ͭͯ: Action ʮTodoΛ௥Ճ͢ΔʯʮTodoͷεςʔλεΛมߋ͢Δʯͱߦͬͨ෦෼ σʔλͷঢ়ଶΛมߋ͢ΔϦΫΤετΛૹΔͱ͜Ζ 
30. Fluxͷঢ়ଶ؅ཧϞσϧʹ͍ͭͯ: Dispatcher ϦΫΤετΛड͚औΓσʔλΛૹΔαʔόʔͷΑ͏ͳ
 ໾ׂΛ͍ͯ͠Δͱ͜Ζ  Action͸DispatcherΛܦ༝ͯ͠StoreΛߋ৽
31. Fluxͷঢ়ଶ؅ཧϞσϧʹ͍ͭͯ: Store ʮTodoͷҰཡʯʮ֤TodoͷεςʔλεʯʮϑΟϧλϦϯάͷ಺༰ʯ ͱߦͬͨ෦෼ σʔλͷঢ়ଶΛอ͓࣋ͯ͘͠ͱ͜Ζ Dispatcher͕αʔόʔͩͱͨ͠ΒɺStore͸σʔλϕʔε ͷ໾ׂΛ୲͍ɺStoreͷঢ়ଶ͕Viewʹ൓ө͞ΕΔ 
32. ActionͷϩδοΫΛ୲͏ ToDoΞϓϦͷεςʔλεΛมߋ͢ΔɺToDoͷϑΟϧλϦϯάΛมߋ ͢ΔɺToDoΛ௥Ճ͢ΔͳͲͷ࣮૷෦෼ Reducer ReduxͰ৽ͨʹग़ͯ͘Δ֓೦ ReduxͰ؅ཧ͞Εͨσʔλͱ௚઀ܨ͕͍ͬͯΔComponentͷ͜ͱ ContainerʹΑΓReduxͷঢ়ଶ؅ཧͱReactͷComponent͕݁ͼͭ͘ ActionͱComponentΛ࿈݁͢Δ໾ׂΛ࣋ͭ Container 
33. ࣗݾ঺հ Reactͷ෮श ReactͰToDoΞϓϦΛ࡞Ζ͏ ReduxΛಋೖ͢ΔϝϦοτʹ͍ͭͯ Reduxͷ֓ཁʹ͍ͭͯ ReduxͰToDoΞϓϦΛ࡞Ζ͏ ·ͱΊ ໨࣍ 
34. ToDoΞϓϦΛߏ੒͢ΔComponent App Form TodoList Todo (࠶ܝ)ࠓճઆ໌Ͱ࢖͏ToDoΞϓϦͷ֓ཁ ϑΥʔϜ͔ΒToDoΛ௥ՃͰ͖Δ ToDoΛΫϦοΫ͢Δͱ׬ྃʹͳΔ ToDoͷεςʔλεͰϑΟϧλϦϯάͰ ͖Δ 
35. ToDoΞϓϦΛߏ੒͢ΔContainer AddTodo VisibleTodoList FilterLink ࠓճઆ໌Ͱ࢖͏ToDoΞϓϦͷ֓ཁ ઌ΄Ͳઆ໌ͨ͠ComponentͱReduxΛ ͭͳ͙໾ׂΛ୲͏ 
36. ToDoΞϓϦΛߏ੒͢ΔContainer AddTodo VisibleTodoList FilterLink ࠓճઆ໌Ͱ࢖͏ToDoΞϓϦͷ֓ཁ ઌ΄Ͳઆ໌ͨ͠ComponentͱReduxΛ ͭͳ͙໾ׂΛ୲͏ Ҏ߱Ͱ͸ToDoΛΫϦοΫͯ͠׬ྃͤͨ࣌͞ͷৼΔ෣͍ (VisibleTodoList)Λྫʹઆ໌ 
37. ActionΛൃߦ͞ΕΔͨΊͷؔ਺ͷ͜ͱ Action Creatorͷ࡞੒ ʮJEΛड͚औΓɺ50((-&@50%0 ͱ͍͏λΠϓͱJEΛฦ͢ʯ
 ͱ͍͏ΞΫγϣϯΛఆٛ actions/index.js 
38. Reducerͷ࣮૷ stateͱactionΛύϥϝʔλʔͰड͚औΓ৽͍͠stateΛฦ͢ ActionͷϩδοΫ෦෼ reducers/todo.js 
39. Reducerͷ࣮૷ reducers/todo.js 50((-&@50%0ͱ͍͏ΞΫγϣϯΛ ΋ΒͬͨΒɺBDUJPOJEͱҰக͢Δ UPEPͷεςʔλεΛมߋ͢Δ 
40. Containerͷ࣮૷ Action(Redux)ͱComponent(React)ͷ֓೦Λඥ͚ͮΔɻ containers/VisibleTodoList.js 
41. Containerͷ࣮૷ containers/VisibleTodoList.js 3FEVYͷEJTQBUDIΛ3FBDUͷ QSPQTͰѻ͑ΔΑ͏ʹϚοϐϯά ͢Δ 
42. ActionͱComponentͷඥ෇͚ containers/VisibleTodoList.js 3FBDUͷQSPQTPO5PEP$MJDLͰ UPHHMF5PEPΛύϥϝʔλʹͨ͠ EJTQBUDI͕࣮ߦ͞ΕΔ 
43. ActionͱComponentͷඥ෇͚ containers/VisibleTodoList.js DPOOFDUؔ਺Λར༻͢Δ͜ͱͰ 3FBDUͱ3FEVYͷ࿈ܞΛ͢Δ͜ͱ ͕ՄೳʹͳΔɻ
 ͭ໨ͷύϥϝʔλʹ͸NBQ
 ͭ໨ͷύϥϝʔλʹ͸3FBDUͷ $PNQPOFOUΛηοτ͢Δ 
44. Componentͷ࣮૷ components/TodoList.js ActionͱComponentͷ࿈͕݁ContainerʹΑͬͯߦΘΕͨͷͰɺ
 Component͔ΒActionΛ࣮ࡍʹݺͿΑ͏ʹ͢Δ 
45. Storeͷߋ৽ɺView΁ͷड͚౉͠ index.js 3FEVDFSΛύϥϝʔλͱͯ͠౉͠ɺ
 ৽͍͠4UPSF ঢ়ଶ Λ࡞੒͢Δ 
46. Storeͷߋ৽ɺView΁ͷड͚౉͠ index.js ৽͍͠TUPSFΛ1SPWJEFSʹ౉͢͜ͱͰ
 WJFXߋ৽͞ΕΔ 
47. ࣗݾ঺հ Reactͷ෮श ReactͰToDoΞϓϦΛ࡞Ζ͏ ReduxΛಋೖ͢ΔϝϦοτʹ͍ͭͯ Reduxͷ֓ཁʹ͍ͭͯ ReduxͰToDoΞϓϦΛ࡞Ζ͏ ·ͱΊ ໨࣍ 
48. React, Reduxʹ͍ͭͯσʔλͷྲྀΕΛத৺ʹઆ໌ React͸props, eventʹΑͬͯComponentؒͰσʔ λΛߋ৽ Redux͸storeʹঢ়ଶΛҰݩ؅ཧ ReactʹReduxΛಋೖ͢Δ͜ͱͰঢ়ଶ؅ཧ͕؆қԽ ·ͱΊ ιʔείʔυ͸ҎԼࢀর
 React൛(ࣗ࡞) https://github.com/nishina555/todo-react
 Redux൛(ެࣜ) https://redux.js.org/docs/basics/ExampleTodoList.html 
49. (࠷ޙʹ)σβΠφʔɾWebΤϯδχΞืूதͰ͢ Wantedlyʹͯืूதʂʂ ڵຯ͕͋Δํ͸Wantedly΋͘͠͸ @nishina555·Ͱ