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

by nishina

Slide 1

Slide 1 text

ਔՊढ़੖ 2017/11/29 ToDoΞϓϦͰֶͿ React/Reduxೖ໳

Slide 2

Slide 2 text

ࣗݾ঺հ Reactͷ෮श ReactͰToDoΞϓϦΛ࡞Ζ͏ ReduxΛಋೖ͢ΔϝϦοτʹ͍ͭͯ Reduxͷ֓ཁʹ͍ͭͯ ReduxͰToDoΞϓϦΛ࡞Ζ͏ ·ͱΊ ໨࣍

Slide 3

Slide 3 text

ࣗݾ঺հ Reactͷ෮श ReactͰToDoΞϓϦΛ࡞Ζ͏ ReduxΛಋೖ͢ΔϝϦοτʹ͍ͭͯ Reduxͷ֓ཁʹ͍ͭͯ ReduxͰToDoΞϓϦΛ࡞Ζ͏ ·ͱΊ ໨࣍

Slide 4

Slide 4 text

ਔՊ ढ़੖(@nishina555) ΩϟϦΞ:   ָఱ (2014 - 2017)  εϖʔεϚʔέοτ (2017.6 - )  ٕज़ελοΫ:  Rails, React ࣗݾ঺հ

Slide 5

Slide 5 text

εϖʔεΛି͍ͨ͠ਓͱआΓ͍ͨਓΛܨ͛ΔϓϥοτϑΥʔϜΛఏڙ εϖʔεϚʔέοτͷαʔϏε঺հ ฐٕࣾज़ελοΫʹ͍ͭͯ͸ΤϯδχΞϒϩάΛࢀর͍ͩ͘͞  http://blog.spacemarket.com/code/tech_stack_2017/

Slide 6

Slide 6 text

Ract, Reduxʹ͓͚ΔσʔλͷྲྀΕʹ͍ͭͯ ReduxΛಋೖ͢Δ͜ͱʹΑΔϝϦοτ Reduxͷ֓ཁʹ͍ͭͯ ࿩͢͜ͱ ES6ͷจ๏ղઆ ReactͷϥΠϑαΠΫϧ(ComponentDidMountͳͲ) ࿩͞ͳ͍͜ͱ ࠓճͷൃද಺༰ʹ͍ͭͯ σʔλͷྲྀΕɺReduxͷ໾ׂͷઆ໌ʹয఺

Slide 7

Slide 7 text

ࣗݾ঺հ Reactͷ෮श ReactͰToDoΞϓϦΛ࡞Ζ͏ ReduxΛಋೖ͢ΔϝϦοτʹ͍ͭͯ Reduxͷ֓ཁʹ͍ͭͯ ReduxͰToDoΞϓϦΛ࡞Ζ͏ ·ͱΊ ໨࣍

Slide 8

Slide 8 text

ֶशίετ͕௿͍ͱ͍͏ϝϦοτ MVCͷViewͷ໾ׂΛ୲͏JavaScript ϥΠϒϥϦ σʔλΛड͚औΓɺߋ৽͕ඞཁͳ෦෼ͷDOMΛ ಈతʹมߋ͢Δ Ծ૝DOMΛ࣋ͭ Reactͷಛ௃ʹ͍ͭͯ ਌͔Βࢠ΁propsΛܦ༝ͨ͠୯Ұํ޲ͷσʔλϑϩʔ ֤Component͸stateͰঢ়ଶΛ؅ཧ Componentͷ૊Έ߹ΘͤʹΑͬͯΞϓϦΛߏ੒͢Δ ΞϓϦΛύʔπԽ͢Δ͜ͱͰ؅ཧ͕͠΍͘͢ͳΔ Componentͷ૊Έ߹ΘͤʹΑͬͯΞϓϦΛߏ੒͢Δ ΞϓϦΛύʔπԽ͢Δ͜ͱͰ؅ཧ͕͠΍͘͢ͳΔ

Slide 9

Slide 9 text

Ծ૝DOMʹ͍ͭͯ(1/2) " $ QSPQT # & ' QSPQT QSPQT QSPQT % QSPQT ) QSPQT ਌͔Βࢠ΁propsΛܦ༝ͨ͠୯Ұํ޲ͷσʔλϑϩʔ ( DPNQPOFOU TUBUF TUBUF QSPQT

Slide 10

Slide 10 text

Ծ૝DOMʹ͍ͭͯ(2/2) " $ FWFOU # & ' FWFOU FWFOU FWFOU % FWFOU ) FWFOU ࢠ͔Β਌΁σʔλΛ౉͢ࡍ͸Πϕϯτ(click, mouse over, ͳͲ)ʹ ίʔϧόοΫΛ࣮૷ ( FWFOU

Slide 11

Slide 11 text

ࣗݾ঺հ Reactͷ෮श ReactͰToDoΞϓϦΛ࡞Ζ͏ ReduxΛಋೖ͢ΔϝϦοτʹ͍ͭͯ Reduxͷ֓ཁʹ͍ͭͯ ReduxͰToDoΞϓϦΛ࡞Ζ͏ ·ͱΊ ໨࣍

Slide 12

Slide 12 text

ToDoΞϓϦΛߏ੒͢ΔComponent App Form TodoList Todo ࠓճઆ໌Ͱ࢖͏ToDoΞϓϦͷ֓ཁ ϑΥʔϜ͔ΒToDoΛ௥ՃͰ͖Δ ToDoΛΫϦοΫ͢Δͱ׬ྃʹͳΔ ToDoͷεςʔλεͰϑΟϧλϦϯά  Ͱ͖Δ

Slide 13

Slide 13 text

ToDoΞϓϦΛߏ੒͢ΔComponent App Form TodoList Todo ࠓճઆ໌Ͱ࢖͏ToDoΞϓϦͷ֓ཁ ϑΥʔϜ͔ΒToDoΛ௥ՃͰ͖Δ ToDoΛΫϦοΫ͢Δͱ׬ྃʹͳΔ ToDoͷεςʔλεͰϑΟϧλϦϯά  Ͱ͖Δ ࠓճ͸Componentؒͷσʔλͷड͚౉͠ͷ෦෼Λઆ໌

Slide 14

Slide 14 text

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͕௥Ճ͞ΕΔ

Slide 15

Slide 15 text

Slide 16

Slide 16 text

਌͔Βࢠ΁ͷσʔλͷ఻ൖ App.js(਌) ToDoList.js(ࢠ) ਌ͷTUBUFͰ؅ཧ͞Ε͍ͯΔUPEPT Λࢠʹ౉͢ɻ

Slide 17

Slide 17 text

਌͔Βࢠ΁ͷσʔλͷ఻ൖ App.js(਌) ToDoList.js(ࢠ) ࢠ͸QSPQTͱͯ͠UPEPTΛѻ͏͜ ͱ͕Ͱ͖Δ

Slide 18

Slide 18 text

(࠶ܝ)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͕௥Ճ͞ΕΔ

Slide 19

Slide 19 text

ࢠ͔Β਌΁ͷσʔλͷ఻ൖ App.js(਌) ࢠͷPO4VCNJUͷΠϕϯτͱ IBOEMFTVCNJUΛඥ෇͚Δ Form.js(ࢠ)

Slide 20

Slide 20 text

ࢠ͔Β਌΁ͷσʔλͷ఻ൖ App.js(਌) IBOEMFTVCNJU͕࣮ߦ͞ΕΔ Form.js(ࢠ)

Slide 21

Slide 21 text

ࢠ͔Β਌΁ͷσʔλͷ఻ൖ App.js(਌) IBOEMFTVCNJUͰ਌ͷPO5PEP4VCNJU Λύϥϝʔλ෇͖Ͱ࣮ߦ Form.js(ࢠ)

Slide 22

Slide 22 text

ࢠ͔Β਌΁ͷσʔλͷ఻ൖ App.js(਌) ਌ͷPO5PEP4VCNJU͔Β IBOEMF5PEP4VCNJU͕࣮ߦ͞Εɺ  ౉͞Εͨύϥϝʔλʹै͍ঢ়ଶΛߋ৽ Form.js(ࢠ)

Slide 23

Slide 23 text

ࣗݾ঺հ Reactͷ෮श ReactͰToDoΞϓϦΛ࡞Ζ͏ ReduxΛಋೖ͢ΔϝϦοτʹ͍ͭͯ Reduxͷ֓ཁʹ͍ͭͯ ReduxͰToDoΞϓϦΛ࡞Ζ͏ ·ͱΊ ໨࣍

Slide 24

Slide 24 text

ReactͰͷঢ়ଶ؅ཧɾߋ৽ͷ໰୊఺ "QQ 5P%P-JTU 'PSN 5P%P PO$MJDL PO4VCNJU ToDoΛ׬ྃͤͨ࣌͞ͷσʔλͷมߋ͸ͲͷΑ͏ʹม͑Δʁ PO$MJDL ɾComponentؒͰσʔλͷड͚౉͠ɺঢ়ଶ؅ཧ͕ෳࡶԽ  ɾReact͸Viewͷ໾ׂʹಛԽ͍ͯ͠ΔͨΊঢ়ଶ؅ཧ͸ۤख ྫ͑͹todoΛ׬ྃͤͨ͞৔߹ɺtodoΛ؅ཧ͢ ΔtodosΛߋ৽͢ΔͨΊʹίʔϧόοΫ͕Կ౓ ΋࣮ߦ͞ΕΔ

Slide 25

Slide 25 text

Reduxͷঢ়ଶ؅ཧɾߋ৽ͷࢥ૝ "QQ 5P%P-JTU 'PSN 5P%P ঢ়ଶ؅ཧΛ1ͭͷ৔ॴʹ·ͱΊΔ QSPQT ɾStoreͱ͍͏֓೦ΛऔΓೖΕɺStore্Ͱঢ়ଶΛҰݩ؅ཧ  ɾComponent͸ඞཁʹԠͯ͡Store͔Βσʔλऔಘɾߋ৽ QSPQT QSPQT TUPSF

Slide 26

Slide 26 text

ࣗݾ঺հ Reactͷ෮श ReactͰToDoΞϓϦΛ࡞Ζ͏ ReduxΛಋೖ͢ΔϝϦοτʹ͍ͭͯ Reduxͷ֓ཁʹ͍ͭͯ ReduxͰToDoΞϓϦΛ࡞Ζ͏ ·ͱΊ ໨࣍

Slide 27

Slide 27 text

ঢ়ଶͱ͸ReactͰ͍͏Stateͷ͜ͱɻReduxͰ͸Storeͱ͍͏ܗͰҰׅ ؅ཧ͢Δɹ ToDoΞϓϦͰ͸ϑΟϧλϦϯάͷঢ়ଶ΍֤ToDoͷ಺༰͕֘౰͢Δ Fluxϕʔεͷঢ়ଶ؅ཧϑϨʔϜϫʔΫͷ1ͭ React.js͚ͩͰͳ͘ɺ༷ʑͳjsϑϨʔϜϫʔΫ ͱ૊Έ ߹ΘͤΔ͜ͱ͕Մೳ Reduxʹ͍ͭͯ

Slide 28

Slide 28 text

Fluxͷঢ়ଶ؅ཧϞσϧʹ͍ͭͯ: ֓ཁ Action -> Dispatcher -> Store -> ViewͷҰํ޲Ͱ σʔλͷঢ়ଶ͕఻ൖ(Լͷ໼ҹ) ϢʔβʔͷߦಈʹΑͬͯView͔ΒActionΛൃߦ͠ɺ  σʔλͷঢ়ଶΛ఻ൖͤ͞Δ͜ͱ΋Ͱ͖Δ(্ͷ໼ҹ)

Slide 29

Slide 29 text

Fluxͷঢ়ଶ؅ཧϞσϧʹ͍ͭͯ: Action ʮTodoΛ௥Ճ͢ΔʯʮTodoͷεςʔλεΛมߋ͢Δʯͱߦͬͨ෦෼ σʔλͷঢ়ଶΛมߋ͢ΔϦΫΤετΛૹΔͱ͜Ζ

Slide 30

Slide 30 text

Fluxͷঢ়ଶ؅ཧϞσϧʹ͍ͭͯ: Dispatcher ϦΫΤετΛड͚औΓσʔλΛૹΔαʔόʔͷΑ͏ͳ  ໾ׂΛ͍ͯ͠Δͱ͜Ζ Action͸DispatcherΛܦ༝ͯ͠StoreΛߋ৽

Slide 31

Slide 31 text

Fluxͷঢ়ଶ؅ཧϞσϧʹ͍ͭͯ: Store ʮTodoͷҰཡʯʮ֤TodoͷεςʔλεʯʮϑΟϧλϦϯάͷ಺༰ʯ ͱߦͬͨ෦෼ σʔλͷঢ়ଶΛอ͓࣋ͯ͘͠ͱ͜Ζ Dispatcher͕αʔόʔͩͱͨ͠ΒɺStore͸σʔλϕʔε ͷ໾ׂΛ୲͍ɺStoreͷঢ়ଶ͕Viewʹ൓ө͞ΕΔ

Slide 32

Slide 32 text

ActionͷϩδοΫΛ୲͏ ToDoΞϓϦͷεςʔλεΛมߋ͢ΔɺToDoͷϑΟϧλϦϯάΛมߋ ͢ΔɺToDoΛ௥Ճ͢ΔͳͲͷ࣮૷෦෼ Reducer ReduxͰ৽ͨʹग़ͯ͘Δ֓೦ ReduxͰ؅ཧ͞Εͨσʔλͱ௚઀ܨ͕͍ͬͯΔComponentͷ͜ͱ ContainerʹΑΓReduxͷঢ়ଶ؅ཧͱReactͷComponent͕݁ͼͭ͘ ActionͱComponentΛ࿈݁͢Δ໾ׂΛ࣋ͭ Container

Slide 33

Slide 33 text

ࣗݾ঺հ Reactͷ෮श ReactͰToDoΞϓϦΛ࡞Ζ͏ ReduxΛಋೖ͢ΔϝϦοτʹ͍ͭͯ Reduxͷ֓ཁʹ͍ͭͯ ReduxͰToDoΞϓϦΛ࡞Ζ͏ ·ͱΊ ໨࣍

Slide 34

Slide 34 text

ToDoΞϓϦΛߏ੒͢ΔComponent App Form TodoList Todo (࠶ܝ)ࠓճઆ໌Ͱ࢖͏ToDoΞϓϦͷ֓ཁ ϑΥʔϜ͔ΒToDoΛ௥ՃͰ͖Δ ToDoΛΫϦοΫ͢Δͱ׬ྃʹͳΔ ToDoͷεςʔλεͰϑΟϧλϦϯάͰ ͖Δ

Slide 35

Slide 35 text

ToDoΞϓϦΛߏ੒͢ΔContainer AddTodo VisibleTodoList FilterLink ࠓճઆ໌Ͱ࢖͏ToDoΞϓϦͷ֓ཁ ઌ΄Ͳઆ໌ͨ͠ComponentͱReduxΛ ͭͳ͙໾ׂΛ୲͏

Slide 36

Slide 36 text

ToDoΞϓϦΛߏ੒͢ΔContainer AddTodo VisibleTodoList FilterLink ࠓճઆ໌Ͱ࢖͏ToDoΞϓϦͷ֓ཁ ઌ΄Ͳઆ໌ͨ͠ComponentͱReduxΛ ͭͳ͙໾ׂΛ୲͏ Ҏ߱Ͱ͸ToDoΛΫϦοΫͯ͠׬ྃͤͨ࣌͞ͷৼΔ෣͍ (VisibleTodoList)Λྫʹઆ໌

Slide 37

Slide 37 text

ActionΛൃߦ͞ΕΔͨΊͷؔ਺ͷ͜ͱ Action Creatorͷ࡞੒ ʮJEΛड͚औΓɺ50((-&@50%0 ͱ͍͏λΠϓͱJEΛฦ͢ʯ  ͱ͍͏ΞΫγϣϯΛఆٛ actions/index.js

Slide 38

Slide 38 text

Reducerͷ࣮૷ stateͱactionΛύϥϝʔλʔͰड͚औΓ৽͍͠stateΛฦ͢ ActionͷϩδοΫ෦෼ reducers/todo.js

Slide 39

Slide 39 text

Reducerͷ࣮૷ reducers/todo.js 50((-&@50%0ͱ͍͏ΞΫγϣϯΛ ΋ΒͬͨΒɺBDUJPOJEͱҰக͢Δ UPEPͷεςʔλεΛมߋ͢Δ

Slide 40

Slide 40 text

Containerͷ࣮૷ Action(Redux)ͱComponent(React)ͷ֓೦Λඥ͚ͮΔɻ containers/VisibleTodoList.js

Slide 41

Slide 41 text

Containerͷ࣮૷ containers/VisibleTodoList.js 3FEVYͷEJTQBUDIΛ3FBDUͷ QSPQTͰѻ͑ΔΑ͏ʹϚοϐϯά ͢Δ

Slide 42

Slide 42 text

ActionͱComponentͷඥ෇͚ containers/VisibleTodoList.js 3FBDUͷQSPQTPO5PEP$MJDLͰ UPHHMF5PEPΛύϥϝʔλʹͨ͠ EJTQBUDI͕࣮ߦ͞ΕΔ

Slide 43

Slide 43 text

ActionͱComponentͷඥ෇͚ containers/VisibleTodoList.js DPOOFDUؔ਺Λར༻͢Δ͜ͱͰ 3FBDUͱ3FEVYͷ࿈ܞΛ͢Δ͜ͱ ͕ՄೳʹͳΔɻ  ͭ໨ͷύϥϝʔλʹ͸NBQ  ͭ໨ͷύϥϝʔλʹ͸3FBDUͷ $PNQPOFOUΛηοτ͢Δ

Slide 44

Slide 44 text

Componentͷ࣮૷ components/TodoList.js ActionͱComponentͷ࿈͕݁ContainerʹΑͬͯߦΘΕͨͷͰɺ  Component͔ΒActionΛ࣮ࡍʹݺͿΑ͏ʹ͢Δ

Slide 45

Slide 45 text

Storeͷߋ৽ɺView΁ͷड͚౉͠ index.js 3FEVDFSΛύϥϝʔλͱͯ͠౉͠ɺ  ৽͍͠4UPSF ঢ়ଶ Λ࡞੒͢Δ

Slide 46

Slide 46 text

Storeͷߋ৽ɺView΁ͷड͚౉͠ index.js ৽͍͠TUPSFΛ1SPWJEFSʹ౉͢͜ͱͰ  WJFXߋ৽͞ΕΔ

Slide 47

Slide 47 text

ࣗݾ঺հ Reactͷ෮श ReactͰToDoΞϓϦΛ࡞Ζ͏ ReduxΛಋೖ͢ΔϝϦοτʹ͍ͭͯ Reduxͷ֓ཁʹ͍ͭͯ ReduxͰToDoΞϓϦΛ࡞Ζ͏ ·ͱΊ ໨࣍

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

(࠷ޙʹ)σβΠφʔɾWebΤϯδχΞืूதͰ͢ Wantedlyʹͯืूதʂʂ ڵຯ͕͋Δํ͸Wantedly΋͘͠͸ @nishina555·Ͱ