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

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

 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

A1a9f42c83fdfddcfed0da2b981d4fea?s=128

Toshiharu Nishina

November 29, 2017
Tweet

More Decks by Toshiharu Nishina

Other Decks in Programming

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·Ͱ