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

次はたぶん挫折しないredux(react-redux社内勉強会資料)

sadnessOjisan
February 25, 2019

 次はたぶん挫折しないredux(react-redux社内勉強会資料)

react-reduxの社内勉強資料のうち、公開できる箇所を公開します。

スライド上では、課題の解説はあまりしていません。
課題の回答・解説は以下のレポジトリをご参照ください。

https://github.com/sadnessOjisan/todo_react
https://github.com/sadnessOjisan/react-brother-bothering-update-example
https://github.com/sadnessOjisan/redux-count-handson
https://github.com/sadnessOjisan/react-redux-count-handson
https://github.com/sadnessOjisan/react-redux-todo

sadnessOjisan

February 25, 2019
Tweet

More Decks by sadnessOjisan

Other Decks in Technology

Transcript

  1. ࣍͸ͨͿΜ࠳ં͠ͳ͍3FEVY
    3FBDU3FEVYࣾ಺ษڧձ
    Ҫख ༏ଠ ࢁޱ ༟࢘ தଜ๕߂ ؠԼଠ
    ೔໺ᖒ׻໵ Ԭాݰ࠸౉ลو໌ ాதݡथ

    View full-size slide

  2. ͜ͷߨ࠲ͷҐஔ෇͚
    • 3FBDUߨ࠲
    • ͳͥɺ3FBDU͕ඞཁʹͳͬͨͷ͔Λղઆ͢Δճ
    • ඇಉظॲཧߨ࠲
    • $BMMCBDL 1SPNJTF "TZOD "XBJUͰ"1*ͷ'FUDIΛؤுΔճ
    • ؀ڥߏஙߨ࠲
    • /1. #BCFM XFCQBDLͷઃఆΛղઆ͢Δճ
    • 3FEVYߨ࠲
    • 3FBDUΛར༻ͨ͠େن໛։ൃߨ࠲
    • 3FEVDFSͷ෼ׂ΍NJEEMFXBSFͷ࢖͍ํΛֶͿɻ
    3

    View full-size slide

  3. ձ৔ͷ஫ҙ
    • "TJB2VFTUࣾ͞ΜͷޚްҙʹΑΓɺձ৔Λఏڙͯ͠௖͖·ͨ͠ɻ
    • r ͸ϑϦʔεϖʔεͱͳΔͨΊɺ͜ͷ࣌ؒͰҰ౓ɺன৯ͷٳܜͱ͠·͢ɻ
    • τΠϨ͸ɺձ৔ग़ͨ൶ͷ޲͜͏ͷ֊ஈΛొͬͯ̒֊ଆ͕ঁࢠτΠϨɺ̐֊ଆ͕உࢠτΠϨ
    Ͱ͢ɻ
    4
    EV
    廊下
    階段
    会場
    受付

    View full-size slide

  4. 5BCMFPG$POUFOUT
    ͸͡Ίʹ
    ࠲ֶ3FEVYΛֶͿϞνϕʔγϣϯʹ͍ͭͯ
    B ͳͥ"JS͸3FBDUΛ࠾༻ͨ͠ͷ͔ͳͥࢲͨͪ͸3FBDU3FEVYΛֶͿͷ͔
    C ͳͥ3FEVYΛֶͿͷ͔3FBDU୯ମͰར༻͢ΔͱԿ͕ਏ͘ͳΔͷ͔
    D 3FEVYͰঢ়ଶΛ؅ཧ͢ΔͨΊʹ஌Δ΂͖֓೦
    ϋϯζΦϯ3FEVYͰΧ΢ϯτػೳΛ࡞Δ
    ϥϯν
    ࠲ֶ3FBDU͔Β3FEVYΛར༻͢Δʹ͸Ͳ͏͢Ε͹͍͍͔
    B SFBDUSFEVYͰొ৔͢Δ֓೦
    ϋϯζΦϯ3FBDU3FEVYͰΧ΢ϯτΞϓϦΛ࡞Δ
    ϋϯζΦϯ3FBDU3FEVYͰ5PEPΞϓϦΛ࡞Δ
    5

    View full-size slide

  5. ࣄલ४උ
    ࣄલʹ఻͍͑ͯ·͕ͨ͠ɺ΋͠४උ͕Ͱ͖͍ͯͳ͍ํ͸ɺͪ͜Βͷ४උ
    Λ͓ئ͍͠·͢ɻϋϯζΦϯ·Ͱʹ༻ҙ͍ͯͩ͘͠͞ɻ
    .VTU
    • (JU
    • (JU)VCͷΞΧ΢ϯτ(JUUFS΁ͷϩάΠϯ
    #FUUFS
    • 74$PEF 'MPX-BOHVBHF4VQQPSUͷFYUFOTJPO
    6

    View full-size slide

  6. 74$PEFͰͷ։ൃΛਪ঑͠·͢
    u ߴػೳͳΤσΟλ͸ɺܕ৘ใΛಡΈࠐΈɺࣗಈͰิ׬΍ఏҊΛͯ͠
    ͘Ε·͢ɻ
    u αϯϓϧίʔυ͸ɺิ׬͕ޮ͖΍͘͢ͳΔΑ͏ʹɺώϯτ΍ղ౴ʹ
    ͨ͘͞Μܕ஫ऍΛೖΕ͍ͯ·͢ɻ
    u ͦΕΒ͸ɺ'MPXαϙʔτͷ͋ΔΤσΟλΛ࢖͏͜ͱͰܕΛ௥͍͔͚
    ΒΕ·͢ɻ
    u $PEF4BOE#PYͰ΋͋Δఔ౓͸ܕΛಡΈऔͬͯ͘Ε·͢ɻ
    7

    View full-size slide

  7. ར༻͢Διʔείʔυ
    8
    "QQ໊ 63- આ໌
    UPEP@SFBDU
    IUUQTHJUIVCDPNTBEOFTT0KJTBOUPEP@
    SFBDU
    લճͷϋϯζΦϯͰ։ൃͨ͠UPEPΞϓϦͷճ
    ౴Ͱ͢ɻࠓ೔͸͜ΕΛSFEVYԽ͢Δ͜ͱ͕࠷
    ऴ໨ඪͰ͢ɻ
    SFBDUCSPUIFSCPUIFSJOHVQEBUFFYBNQMF
    IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU
    CSPUIFSCPUIFSJOHVQEBUFFYBNQMF
    ܑఋίϯϙʔωϯτΛSFEVYͳ͠Ͱߋ৽͢Δ
    ͱΊΜͲ͍͘͞ྫ
    SFEVYDPVOUIBOETPO
    IUUQTHJUIVCDPNTBEOFTT0KJTBOSFEVY
    DPVOUIBOETPO
    SFEVYͰ؆୯ͳঢ়ଶ؅ཧΛ͠·͢ʢΧ΢ϯ
    τʣ
    SFBDUSFEVYDPVOUIBOETPO
    IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU
    SFEVYDPVOUIBOETPO
    SFEVYͰ؅ཧ͍ͯ͠ΔΧ΢ϯτTUBUFΛSFBDU
    ͔ΒΞΫηεɾߋ৽Ͱ͖ΔΑ͏ʹ͠·͢ɻ
    SFBDUSFEVYUPEP
    IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU
    SFEVYUPEP
    UPEPϦετΛSFEVYԽͨ͠΋ͷ
    ͦΕͧΕɺ׬੒ܗ΍಺෦࢓༷ &4%PD
    Λ/FUMJGZʹσϓϩΠ͍ͯ͠·͢ɻ
    ϦϯΫ͸ɺ֤ϨϙδτϦͷ3&"%.&ʹॻ͍ͯ͋Γ·͢ɻ

    View full-size slide

  8. ࠓ೔ͷ໨ඪ
    ①SFBDUSFEVYͷ࢖͍ํΛ֮͑Δʂ
    ②SFBDUͱSFBDUSFEVYͷҧ͍Λ஌Δʂ
    ③SFBDUͰ࡞ΒΕͨ5PEPΞϓϦΛɺSFBDUSFEVYͰஔ͖׵͑Δʂ
    9

    View full-size slide

  9. ࠓ೔ͷࢀՃऀͷಛ௃
    u 3FBDUܦݧऀ
    u ʢͱ͍͏ΑΓɺઌ݄ܦݧͯ͠΋ΒͬͨͷͰɾɾɾʣ
    u SFBDUSFEVYΛฉ͍ͨ͜ͱ͕͋Δ
    u SFBDUSFEVYʹ࠳ંͨ͜͠ͱ͕͋Δ
    SFEVYʹ࠳ંͨ͜͠ͱ͕͋ΔํΛ
    ϝΠϯλʔήοτͱͨ͠ษڧձͰ͢ɻ
    10

    View full-size slide

  10. SFBDUSFEVYͷͭ·͖ͮϙΠϯτ
    u ొ৔ਓ෺͕ଟ͍
    u SFBDUSFEVY΍SFEVY͕ཁٻ͢Δؔ਺͕ɺͳͥඞཁʹͳΔ͔Θ͔Γʹ
    ͍͘
    Ø FY
    ఆٛࣗମ͸SFEVYͱؔ܎͕ͳ͍ͨͩͷؔ਺ͱͳΔ΋ͷ͕ଟ͍
    u 最小限を動かすフェイズに至れなく、検証しながら壊しながら学ぶというこ
    とが難しい
    Ø "Λ࡞ΔͨΊʹ͸#͕ඞཁ͕ͩɺ#Λಈ͔ͨ͢Ίʹ͸"ͷϝιου͕ඞཁͩ
    11

    View full-size slide

  11. SFBDUSFEVY͸Ͳ͏ֶ΂͹͍͍͔
    u SFEVYͱSFBDUSFEVY͸ઈରʹ෼ֶ͚ͯͿ
    Ø SFEVYͱSFBDUSFEVY͸ผͩΑʂ
    Ø SFEVY୯ମ͸SFBDU͕ແͯ͘΋ಈ͘Αʂ
    u ·ͣ͸֓೦ͱ࢖͍͔͚֮ͨͩ͑ͯ͠·͓͏ʂ
    u ಈ͘͜ͱ͕֬໿͞Ε͍ͯΔαϯϓϧʢެࣜͳͲʣʹܕΛॻ͍ͯΈΔ
    Ø Ͳͷؔ਺͕ɺͲΜͳҾ਺Λཁٻ͠ɺͲΜͳฦΓ஋Λฦ͢΂ֶ͖͔͕΂Δ
    12

    View full-size slide

  12. ࠓ೔ͷڭࡐ΍ਐΊํͷಛ௃
    u SFBDUSFEVY͕ɺSFBDUͷͲΜͳͭΒΈΛղফ͔ͨ͠Λղઆ͠·͢
    u ߨٛܗࣜͷ࠲ֶ͸গͳΊͰ͢ɻ్தͰΫΠζΛڬΈͳ͕ΒͷϥΠϒ
    ίʔσΟϯά͕ଟ͍Ͱ͢ɻΈͳ͞Μͱͷձ࿩ΛݩʹߨٛΛਐΊ͍ͯ
    ͖·͢ɻΘ͔Βͳ͍͜ͱ͕͋Ε͹దٓɺൃݴ͍ͯͩ͘͠͞ɻ
    u ਖ਼ղྫΛݩʹ֦ு͍ͯ͘͠ϋϯζΦϯΛ༻ҙ͍ͯ͠·͢ɻϝϯλʔ
    ͕८ճ͢ΔͷͰɺ͜͜Ͱ΋ࣗ༝ʹ࣭໰Λड͚෇͚ΒΕ·͢ɻ
    13
    Έͳ͞ΜͷཧղͷͨΊɺԁ׈ͳӡӦͷͨΊʹɺ
    ԕྀͳ࣭͘໰͍ͯͩ͘͠͞ @

    View full-size slide

  13. ΋͠ϋϯζΦϯͰ٧·ͬͨΒʁ
    u Բͤͣɺ࣭໰͍ͯͩ͘͠͞ɻࠓ೔ͷϝϯλʔ͸ɺൺֱతੑ͕֨ྑ͍
    ਓ͕ͨͪଟΊͰ͢ɻ
    u αϯϓϧίʔυͷܕఆٛΛ௥ͬͯΈ͍ͯͩ͘͞ɻͲ͜ʹԿΛೖΕͨ
    ΒͲ͏ಈ͔͘ΛɺίϝϯτͱܕͰఆ͍ٛͯ͠·͢ɻ
    u ܕ͸ͦΕͧΕɺ&4%PDͱ'MPXͰهड़ͨ͠ϒϥϯνΛͭ༻ҙ͍ͯ͠
    ·͢ɻ'MPXʹۤखҙ͕ࣝ͋Ε͹ɺίϝϯτ΍ɺ&4%PDͷΈΛ௥ͬͯ
    ͍ͩ͘͞ɻ
    14

    View full-size slide

  14. ܕͷಡΈํ
    15
    u ܕ͸ม਺΍Ҿ਺͕ॴଐ͢Δάϧʔϓͷ͜ͱ
    Ͱ͢ɻ
    u IPHF ͰIPHFܕΛม਺΍Ҿ਺ʹએݴ͢Δ
    ͜ͱ͕Ͱ͖·͢ɻ
    u DPOTU G BSHOVNCFS
    TUSJOH\^
    ͸ɺOVNCFSܕΛҾ਺ʹɺTUSJOHܕͷฦΓ
    ஋GΛఆ͍ٛͯ͠·͢ɻ
    u ܕ͕͋Ε͹ɺͲΜͳؔ਺ʹͲΜͳม਺Λ౉
    ͤ͹͍͍͔͕Θ͔ΔͷͰɺίʔυΛཧղ͠
    ΍͘͢ͳΓ·͢ɻ
    カーソルを合わせると、型
    の定義が表示されます。
    型の上で「コマンドキー + クリック」すると
    型の定義元にジャンプできます。

    View full-size slide

  15. 5BCMFPG$POUFOUT
    ͸͡Ίʹ
    ࠲ֶ3FEVYΛֶͿϞνϕʔγϣϯʹ͍ͭͯ
    B ͳͥ"JS͸3FBDUΛ࠾༻ͨ͠ͷ͔ͳͥࢲͨͪ͸3FBDU3FEVYΛֶͿͷ͔
    C ͳͥ3FEVYΛֶͿͷ͔3FBDU୯ମͰར༻͢ΔͱԿ͕ਏ͘ͳΔͷ͔
    D 3FEVYͰঢ়ଶΛ؅ཧ͢ΔͨΊʹ஌Δ΂͖֓೦
    ϋϯζΦϯ3FEVYͰΧ΢ϯτػೳΛ࡞Δ
    ϥϯν
    ࠲ֶ3FBDU͔Β3FEVYΛར༻͢Δʹ͸Ͳ͏͢Ε͹͍͍͔
    B SFBDUSFEVYͰొ৔͢Δ֓೦
    ϋϯζΦϯ3FBDU3FEVYͰΧ΢ϯτΞϓϦΛ࡞Δ
    ϋϯζΦϯ3FBDU3FEVYͰ5PEPΞϓϦΛ࡞Δ
    16

    View full-size slide

  16. 3FEVYΛֶͿϞνϕʔγϣϯ
    17

    View full-size slide

  17. ฐࣾΛऔΓר͘"QQ։ൃ؀ڥ
    18
    ػೳɾॊೈੑɾ։ൃ଎౓ʹର͢Δ
    ཁٻ΍೉қ౓͕ߴ͘ͳ͍ͬͯΔ
    ͜Ε·Ͱͷ։ൃ
    ϝσΟΞ։ൃ
    اը΍ಛू୯ҐͰͷػೳཁ݅
    ʹ஧࣮ͳ։ൃ
    ίϯςϯπΛૌٻ͢ΔͨΊͷ
    ੩తͳ8FCϖʔδ
    ࠷ۙ૿͑ͭͭ͋Δ։ൃ
    4BB4։ൃ
    ࢖͍΍͢͞Λߟྀ͠ɺܭଌ͠ͳ͕
    ΒΤϯϋϯεΛ܁Γฦ͢։ൃ
    ಈతͰߴػೳͰͨ͘͞Μͷঢ়ଶ΍
    ෼ذΛ࣋ͬͨෳࡶͳ"QQ

    View full-size slide

  18. ͦ͜Ͱ3FBDUΛ࢖ͬͨϑϩϯτΤϯυ։ൃ
    u 3FBDUͬͯͲΜͳϥΠϒϥϦʁ
    u 6*Λએݴతʹॻ͚Δʢ%FDMBUJWFʣ
    u UIを宣言すれば、状態やデータを勝手にレンダリングしてくれるよ!
    (React will efficiently update and render just the right components when your data changes.)
    u 6*Λύʔπ͝ͱʹ࡞͍ͬͯ͘ $PNQPOFOU#BTFE

    u UIのパーツを作って、それを組み合わせてページを作るよ!
    (Build encapsulated components that manage their own state, then compose them to make
    complex UIs.)
    20
    G TUBUF
    6*ͱͳΔੈքͰɺύʔπΛ૊Έ߹Θͤͯ։ൃʂ

    View full-size slide

  19. 3FBDU͸શͯΛղܾ͢Δۜͷ஄ؙ ͔΋͠Εͳ͍

    u 6*Λએݴ͢Δ͜ͱͰɺ൥ࡶͳঢ়ଶߋ৽ɺঢ়ଶ͔Βͷ6*ੜ੒ΛߦΘͳ
    ͯ͘͢ΈɺιʔείʔυͷෳࡶੑΛݮΒ͢
    u ίϯϙʔωϯτΛ࠶ར༻͢Δ͜ͱͰɺ։ൃ޻਺ΛݮΒͤΔ
    u ͞ΒʹίϯϙʔωϯτΛ෼ׂ͢Δ͜ͱͰ෼ۀ΋͠΍͘͢ɺೲظΛ୹
    ॖͰ͖Δ
    21
    3FBDUΛಋೖ͢Δ͜ͱͰɺ
    ෳࡶͳཁ݅Λγϯϓϧʹߴ଎ʹ։ൃͰ͖Δɾɾɾʁ

    View full-size slide

  20. 22
    খن໛։ൃʹ͓͍ͯͷΈͷ࿩

    View full-size slide

  21. େن໛ͳ։ൃʹ͓͚Δɺ
    6*ͷ໦ߏ଄ͷ؅ཧ͸؆୯Ͱ͸ͳ͍ɻ
    TUBUF΍ϋϯυϥʔͷ఻ൖ͸ɺ໘౗ʹͳΔ
    23

    View full-size slide

  22. TUBUF΍ϋϯυϥͷόέπϦϨʔ
    24
    Root
    ίϯϙʔωϯτ
    AB2
    ABB3
    A1 D1 E1
    DA2 DB2
    TUBUF

    View full-size slide

  23. TUBUF΍ϋϯυϥͷόέπϦϨʔ
    25
    Root
    ίϯϙʔωϯτ
    AB2
    ABB3
    A1 D1 E1
    DA2 DB2
    TUBUF
    A1のstateをABB3に伝えたい

    View full-size slide

  24. TUBUF΍ϋϯυϥͷόέπϦϨʔ
    26
    Root
    ίϯϙʔωϯτ
    AB2
    ABB3
    A1 D1 E1
    DA2 DB2
    TUBUF
    A1
    A1

    View full-size slide

  25. TUBUF΍ϋϯυϥͷόέπϦϨʔ
    27
    Root
    ίϯϙʔωϯτ
    AB2
    ABB3
    A1 D1 E1
    DA2 DB2
    TUBUF
    まあまだ許容範囲

    View full-size slide

  26. TUBUF΍ϋϯυϥͷόέπϦϨʔ
    28
    Root
    ίϯϙʔωϯτ
    AB2
    ABB3
    A1 D1 E1
    DA2 DB2
    TUBUF
    ABB3のstateを、ABB3がクリックされ
    た時に、 E1のstateに応じて更新した

    View full-size slide

  27. TUBUF΍ϋϯυϥͷόέπϦϨʔ
    29
    Root
    ίϯϙʔωϯτ
    AB2
    ABB3
    A1 D1 E1
    DA2 DB2
    TUBUF

    &ͷTUBUFΛड͚औΔͨΊͷؔ਺'Λఆٛ

    View full-size slide

  28. TUBUF΍ϋϯυϥͷόέπϦϨʔ
    30
    Root
    ίϯϙʔωϯτ
    AB2
    ABB3
    A1 D1 E1
    DA2 DB2
    TUBUF

    &ͷTUBUFΛड͚औΔͨΊͷؔ਺'Λఆٛ

    'Λ࣮ߦ͠ɺ&ͷ
    TUBUFΛϧʔτʹ఻͑Δ
    E1

    View full-size slide

  29. TUBUF΍ϋϯυϥͷόέπϦϨʔ
    31
    Root
    ίϯϙʔωϯτ
    AB2
    ABB3
    A1 D1 E1
    DA2 DB2
    TUBUF

    &ͷTUBUFΛड͚औΔͨΊͷؔ਺'Λఆٛ

    'Λ࣮ߦ͠ɺ&ͷ
    TUBUFΛϧʔτʹ఻͑Δ
    E1
    E1
    E1
    E1

    View full-size slide

  30. ܑఋͷঢ়ଶΛड͚౉͢͠Δྫ
    32
    url: https://github.com/sadnessOjisan/react-brother-bothering-update-example
    ヘッダはログイン状態を管理している。
    ボディは入力状態を管理している
    ボディを入力中は、ログアウト機能をロックしたい。
    => ボディの親(=ヘッダの親)を兄弟の状態を経由させて渡す必要あり。

    View full-size slide

  31. TUBUF΍ϋϯυϥͷόέπϦϨʔ
    33
    Root
    ίϯϙʔωϯτ
    AB2
    ABB3
    A1 D1 E1
    DA2 DB2
    TUBUF

    &ͷTUBUFΛड͚औΔͨΊͷؔ਺'Λఆٛ

    'Λ࣮ߦ͠ɺ&ͷ
    TUBUFΛϧʔτʹ఻͑Δ
    E1
    E1
    E1
    E1
    なかなかめんどくさい

    View full-size slide

  32. Ұൠతʹɺܑఋཁૉͷঢ়ଶͷಡΈࠐΈ΍ɺ
    ঢ়ଶͷߋ৽͸ΊΜͲ͍͘͞
    34

    View full-size slide

  33. ΫΠζ
    35
    ઌ΄Ͳͷݱ৅ΛͳΜͱݴ͏Ͱ͠ΐ͏ʁ

    View full-size slide

  34. 36
    QSPQTόέπϦϨʔ

    View full-size slide

  35. 37
    ղܾࡦ͸ʁ

    View full-size slide

  36. ղܾࡦ
    u TUBUFΛSPPUίϯϙʔωϯτ͚͕ͩ࣋ͪɺTUBUFͱͦΕΛߋ৽͢Δϋ
    ϯυϥΛࢠڙίϯϙʔωϯτʹ౉͢
    38
    ϝϦοτ
    • ࢠ͔Β਌ʹ஋΍ϋϯυϥΛ౉͢൥Θ͠͞
    Λ׬શʹͳͤ͘Δ
    σϝϦοτ
    • ਌ίϯϙʔωϯτ͕ΊͪΌͪ͘Όେ͖͘
    ͳͬͯ͠·͍ɺ؅ཧ͕େมͦ͏
    • όέπϦϨʔͷํ޲͸౷ҰͰ͖Δ͕ɺό
    έπϦϨʔࣗମ͸ͳ͘ͳ͍ͬͯͳ͍
    • ίϯϙʔωϯτͷπϦʔࣗମ͕มΘΔͱɺ
    मਖ਼͕ࠔ೉

    View full-size slide

  37. ղܾࡦͷྑ͍ͱ͜Ζ
    u TUBUFΛ؅ཧ͢Δ৔ॴ͕Օॴʹ౷ҰͰ͖ɺݟ௨͕͠ྑ͘ͳΔɻσʔ
    λอ؅৔ॴΛ୯Ұʹ͢Δߟ͑ํ͸SFEVYʹ΋௨͡Δ
    u σʔλͷྲྀΕ͕ํ޲ʹݶఆ͞ΕΔɻίϯϙʔωϯτ͕૿͑ͯ΋ɺ
    σʔλϑϩʔʹ͸Өڹ͕ͳ͍ʢόέπϦϨʔ͢Ε͹͍͍͚ͩͳͷ
    Ͱʣɻ୯Ұσʔλϑϩʔ ͷߟ͑ํ͸SFEVYʹ΋௨͡Δ
    39

    View full-size slide

  38. ղܾࡦ
    u Ͳ͔͜ΒͰ΋TUBUFͱɺߋ৽͢ΔϋϯυϥΛಡΈࠐΉ͜ͱ͕Ͱ͖Δ࢓
    ૊ΈΛ࡞Δ
    40
    SFEVY SFBDUSFEVY

    View full-size slide

  39. SFBDUSFEVY͕໨ࢦ͢ੈք
    41
    https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/

    View full-size slide

  40. SFEVY SFBDUSFEVY͕ͯ͘͠ΕΔ͜ͱ
    u ΞϓϦέʔγϣϯͷঢ়ଶΛอଘͯ͘͠ΕΔ৔ॴΛఏڙ
    u ΞϓϦέʔγϣϯͷঢ়ଶΛߋ৽͢Δ࢓૊ΈΛఏڙ
    u ΞϓϦέʔγϣϯͷঢ়ଶΛ6*ʹ൓ө͢Δ࢓૊ΈΛఏڙ
    42

    View full-size slide

  41. SFEVYͱ͸
    u ঢ়ଶ؅ཧΛͯ͘͠ΕΔϥΠϒϥϦ
    u ঢ়ଶΛTUPSFͱ͍͏৔ॴͰ؅ཧɺSFEVDFSͱ͍͏࢓૊ΈͰঢ়ଶΛߋ৽
    ͯ͘͠ΕΔ
    u ͲΜͳ෩ʹঢ়ଶΛߋ৽ͯ͠΄͍͔͠ɺSFEVDFSʹϝοηʔδΛ఻͑ͯ
    ͋͛Δ͜ͱͰɺSFEVDFS͕TUPSFΛߋ৽ͯ͘͠ΕΔ
    3FBDUͱซ༻͢Ε͹ɺ3FBDUͷTUBUFͱ
    TFU4UBUFͷ໾ׂΛ୲ͬͯ͘ΕΔ
    43

    View full-size slide

  42. SFEVYͰঢ়ଶΛߋ৽͢Δྫ
    44
    const redux = require("redux");
    const initialState = {
    count: 0
    };
    const reducer = (state = initialState, action) => {
    switch (action.type) {
    case "COUNT_UP":
    return { ...state, count: state.count + 1 };
    default:
    return;
    }
    };
    const store = redux.createStore(reducer);
    store.dispatch({ type: "COUNT_UP" });

    View full-size slide

  43. SFEVYͰঢ়ଶΛߋ৽͢Δྫ
    45
    const redux = require("redux");
    const initialState = {
    count: 0
    };
    const reducer = (state = initialState, action) => {
    switch (action.type) {
    case "COUNT_UP":
    return { ...state, count: state.count + 1 };
    default:
    return;
    }
    };
    const store = redux.createStore(reducer);
    store.dispatch({ type: "COUNT_UP" });
    Count数を状態として扱うことを宣言する

    View full-size slide

  44. SFEVYͰঢ়ଶΛߋ৽͢Δྫ
    46
    const redux = require("redux");
    const initialState = {
    count: 0
    };
    const reducer = (state = initialState, action) => {
    switch (action.type) {
    case "COUNT_UP":
    return { ...state, count: state.count + 1 };
    default:
    return;
    }
    };
    const store = redux.createStore(reducer);
    store.dispatch({ type: "COUNT_UP" });
    どういうときに、どういう風に状態を更新
    するかを定義する。

    View full-size slide

  45. SFEVYͰঢ়ଶΛߋ৽͢Δྫ
    47
    const redux = require("redux");
    const initialState = {
    count: 0
    };
    const reducer = (state = initialState, action) => {
    switch (action.type) {
    case "COUNT_UP":
    return { ...state, count: state.count + 1 };
    default:
    return;
    }
    };
    const store = redux.createStore(reducer);
    store.dispatch({ type: "COUNT_UP" });
    COUNT_UP という命令が来たら、カウント
    をアップすることを定義する

    View full-size slide

  46. SFEVYͰঢ়ଶΛߋ৽͢Δྫ
    48
    const redux = require("redux");
    const initialState = {
    count: 0
    };
    const reducer = (state = initialState, action) => {
    switch (action.type) {
    case "COUNT_UP":
    return { ...state, count: state.count + 1 };
    default:
    return;
    }
    };
    const store = redux.createStore(reducer);
    store.dispatch({ type: "COUNT_UP" });
    上で作った状態と状態更新ルールを持っ
    た状態管理オブジェクトを作る

    View full-size slide

  47. SFEVYͰঢ়ଶΛߋ৽͢Δྫ
    49
    const redux = require("redux");
    const initialState = {
    count: 0
    };
    const reducer = (state = initialState, action) => {
    switch (action.type) {
    case "COUNT_UP":
    return { ...state, count: state.count + 1 };
    default:
    return;
    }
    };
    const store = redux.createStore(reducer);
    store.dispatch({ type: "COUNT_UP" });
    状態を保つオブジェクトに対して、状態更
    新の命令を送る

    View full-size slide

  48. SFEVYͷొ৔ਓ෺
    u TUPSF
    u BDUJPO
    u SFEVDFS
    50

    View full-size slide

  49. TUPSF།Ұͷঢ়ଶͷอ؅৔ॴ
    u ΞϓϦέʔγϣϯͰ།Ұͷঢ়ଶ؅ཧ৔ॴ
    u 3FEVYʹ͸ શͯͷঢ়ଶΛTUPSFͷΈ͕؅ཧ͢Δ ͱ͍͏ݪଇ͕͋Δ
    u ޙड़͢ΔSFEVDFSΛҾ਺ʹɺDSFBUF4UPSF
    ͱ͍͏ϝιουΛ࣮ߦ͢
    Δ͜ͱͰ࡞Δ͜ͱ͕Ͱ͖Δ
    51
    const store = redux.createStore(reducer);

    View full-size slide

  50. SFEVDFSTUPSFΛߋ৽͢Δؔ਺
    u ΞϓϦέʔγϣϯͰ།ҰɺTUPSFΛߋ৽Ͱ͖Δ࢓૊Έ
    u 3FEVYʹ͸ มߋ͸७ਮͳؔ਺͔ΒߦΘΕΔ΂͖ ͱ͍͏ݪଇ͕͋Δ
    u 3FEVDFS͸ݱࡏͷTUPSFͱޙड़͢ΔBDUJPOΛड͚औΓɺBDUJPOʹԠ͡
    ͯ৽͍͠TUPSFΛฦؔ͢਺ɻͨͩͷؔ਺ɻ
    52

    View full-size slide

  51. SFEVDFSTUPSFΛߋ৽͢Δؔ਺
    53
    const reducer = (state = initialState, action) => {
    switch (action.type) {
    case ”HOGE":
    return { ...state, message: ‘パンケーキ’ };
    case ”FUGA":
    return { ...state, message: ‘シフォンケーキ’ };
    case "RESET":
    return initialState;
    default:
    return;
    }
    };
    {type: “HOGE”}を受け取ると、新しいstate
    として{message: ‘パンケーキを返す’}

    View full-size slide

  52. SFEVDFSTUPSFΛߋ৽͢Δؔ਺
    54
    const reducer = (state = initialState, action) => {
    switch (action.type) {
    case ”HOGE":
    return { ...state, message: ‘パンケーキ’ };
    case ”FUGA":
    return { ...state, message: ‘シフォンケーキ’ };
    case "RESET":
    return initialState;
    default:
    return;
    }
    };
    {type: “FUGA”}を受け取ると、新しいstate
    として{message: ‘シフォンケーキ’}を返す

    View full-size slide

  53. BDUJPOߋ৽಺༰ʹ͍ͭͯͷϝοηʔδ
    u TUPSFʹରͯ͠ɺͲͷΑ͏ͳมߋΛͯ͠΄͍͔͠ॻ͔Εͨϝοηʔδ
    u \UZQFTUSJOH QBZMPBE NJYFE^ܗࣜͷͨͩͷΦϒδΣΫτ
    u UZQF͸༷ʑͳΞΫγϣϯͷࣝผࢠɺQBZMPBE͸ߋ৽ͯ͠΄͍͠σʔ
    λɻUZQF͸ඞਢ͕ͩɺQBZMPBE͸ͳͯ͘΋ྑ͍ɻ UZQF΍QBZMPBEͱ
    ͍͏Ωʔ໊͸׳श

    u store.dispatch(action) ΛݺͿͱɺSFEVDFS͕࣮ߦ͞ΕΔ
    ʮBDUJPOΛEJTQBUDI͢Δʯͱදݱ͞ΕΔ
    ɻͦͷ݁ՌɺBDUJPOΛݩʹ
    TUPSFΛߋ৽͢Δ͜ͱ͕Ͱ͖Δɻ
    55

    View full-size slide

  54. 5BCMFPG$POUFOUT
    ͸͡Ίʹ
    ࠲ֶ3FEVYΛֶͿϞνϕʔγϣϯʹ͍ͭͯ
    B ͳͥ"JS͸3FBDUΛ࠾༻ͨ͠ͷ͔ͳͥࢲͨͪ͸3FBDU3FEVYΛֶͿͷ͔
    C ͳͥ3FEVYΛֶͿͷ͔3FBDU୯ମͰར༻͢ΔͱԿ͕ਏ͘ͳΔͷ͔
    D 3FEVYͰঢ়ଶΛ؅ཧ͢ΔͨΊʹ஌Δ΂͖֓೦
    ϋϯζΦϯ3FEVYͰΧ΢ϯτػೳΛ࡞Δ
    ϥϯν
    ࠲ֶ3FBDU͔Β3FEVYΛར༻͢Δʹ͸Ͳ͏͢Ε͹͍͍͔
    B SFBDUSFEVYͰొ৔͢Δ֓೦
    ϋϯζΦϯ3FBDU3FEVYͰΧ΢ϯτΞϓϦΛ࡞Δ
    ϋϯζΦϯ3FBDU3FEVYͰ5PEPΞϓϦΛ࡞Δ
    56

    View full-size slide

  55. ϋϯζΦϯ
    57

    View full-size slide

  56. Χ΢ϯτΞοϓΞϓϦΛϥΠϒίʔσΟϯά͠
    ·͢!$PEF4BOE#PY
    u దٓɺ࣭໰ɾΫΠζΛग़͠·͢ɻ
    u ਖ਼ղͯ͠΋ಛʹܠ඼͸ग़ͳ͍Ͱ͢ɻ
    u Έͳ͞Μʹ͸ɺ͜Ε͔Β࡞Δ෺ͷɺػೳ֦ுΛϋϯζΦϯͰߦ͍·
    ͢ɻ
    58

    View full-size slide

  57. ϋϯζΦϯλΠϜ
    u ʮΧ΢ϯτμ΢ϯػೳʯΛ࡞͍ͬͯͩ͘͞
    u ʮΧ΢ϯτϦηοτػೳʯΛ࡞͍ͬͯͩ͘͞
    59

    View full-size slide

  58. ϋϯζΦϯதɾɾɾ
    60

    View full-size slide

  59. ౴͑
    • SFEVDFSʹ$06/5@%08/ͱ
    3&4&5Λఆٛ
    • ͦΕͧΕɺͨ͋͠ͱͷTUBUF
    JOJUJBM4UBUFΛฦͯ͋͛͠Δ
    • $06/5@%08/ͱ3&4&5Λ
    TUPSFEJTQBUDIͯ͋͛͠Δ
    61
    const redux = require("redux");
    const initialState = {
    count: 0
    };
    const reducer = (state = initialState, action) => {
    switch (action.type) {
    case "COUNT_UP":
    return { ...state, count: state.count + 1 };
    case "COUNT_DOWN":
    return { ...state, count: state.count - 1 };
    case "RESET":
    return initialState;
    default:
    return;
    }
    };
    const store = redux.createStore(reducer);
    store.dispatch({ type: "COUNT_UP" });
    console.log("1回COUNT_UPしてみた結果: ", store.getState());
    store.dispatch({ type: "COUNT_DOWN" });
    store.dispatch({ type: "COUNT_DOWN" });
    console.log("2回COUNT_DOWNしてみた結果: ", store.getState());
    store.dispatch({ type: "RESET" });
    console.log("RESETしてみた結果: ", store.getState());
    回答URL) https://github.com/sadnessOjisan/redux-count-handson

    View full-size slide

  60. ղ౴
    62
    "QQ໊ 63- આ໌
    UPEP@SFBDU
    IUUQTHJUIVCDPNTBEOFTT0KJTBOUPEP@
    SFBDU
    લճͷϋϯζΦϯͰ։ൃͨ͠UPEPΞϓϦͷճ
    ౴Ͱ͢ɻࠓ೔͸͜ΕΛSFEVYԽ͢Δ͜ͱ͕࠷
    ऴ໨ඪͰ͢ɻ
    SFBDUCSPUIFSCPUIFSJOHVQEBUFFYBNQMF
    IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU
    CSPUIFSCPUIFSJOHVQEBUFFYBNQMF
    ܑఋίϯϙʔωϯτΛSFEVYͳ͠Ͱߋ৽͢Δ
    ͱΊΜͲ͍͘͞ྫ
    SFEVYDPVOUIBOETPO
    IUUQTHJUIVCDPNTBEOFTT0KJTBOSFEVY
    DPVOUIBOETPO
    SFEVYͰ؆୯ͳঢ়ଶ؅ཧΛ͠·͢ʢΧ΢ϯ
    τʣ
    SFBDUSFEVYDPVOUIBOETPO
    IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU
    SFEVYDPVOUIBOETPO
    SFEVYͰ؅ཧ͍ͯ͠ΔΧ΢ϯτTUBUFΛSFBDU
    ͔ΒΞΫηεɾߋ৽Ͱ͖ΔΑ͏ʹ͠·͢ɻ
    SFBDUSFEVYUPEP
    IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU
    SFEVYUPEP
    UPEPϦετΛSFEVYԽͨ͠΋ͷ
    ͦΕͧΕɺ׬੒ܗ΍಺෦࢓༷ &4%PD
    Λ/FUMJGZʹσϓϩΠ͍ͯ͠·͢ɻ
    ϦϯΫ͸ɺ֤ϨϙδτϦͷ3&"%.&ʹॻ͍ͯ͋Γ·͢ɻ

    View full-size slide

  61. ϥϯνλΠϜʂ ʂ ʂ
    63

    View full-size slide

  62. 5BCMFPG$POUFOUT
    ͸͡Ίʹ
    ࠲ֶ3FEVYΛֶͿϞνϕʔγϣϯʹ͍ͭͯ
    B ͳͥ"JS͸3FBDUΛ࠾༻ͨ͠ͷ͔ͳͥࢲͨͪ͸3FBDU3FEVYΛֶͿͷ͔
    C ͳͥ3FEVYΛֶͿͷ͔3FBDU୯ମͰར༻͢ΔͱԿ͕ਏ͘ͳΔͷ͔
    D 3FEVYͰঢ়ଶΛ؅ཧ͢ΔͨΊʹ஌Δ΂͖֓೦
    ϋϯζΦϯ3FEVYͰΧ΢ϯτػೳΛ࡞Δ
    ϥϯν
    ࠲ֶ3FBDU͔Β3FEVYΛར༻͢Δʹ͸Ͳ͏͢Ε͹͍͍͔
    B SFBDUSFEVYͰొ৔͢Δ֓೦
    ϋϯζΦϯ3FBDU3FEVYͰΧ΢ϯτΞϓϦΛ࡞Δ
    ϋϯζΦϯ3FBDU3FEVYͰ5PEPΞϓϦΛ࡞Δ
    64

    View full-size slide

  63. 3FBDU͔Β3FEVYΛ࢖͏ͨΊʹ͸
    Ͳ͏͢Ε͹͍͍͔
    65

    View full-size slide

  64. SFBDUSFEVY
    u Official React bindings for Redux.
    (https://react-redux.js.org/introduction/quick-start)
    u コンポーネントから redux の store を参照したり、action を dispatch するこ
    とを可能にするライブラリ
    u react + redux を実現するために必要なライブラリ
    66

    View full-size slide

  65. SFBDUSFEVY͕໨ࢦ͢ੈք
    67
    https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/

    View full-size slide

  66. ͦ͜ʹ͸ཧ૝ͷੈք͕ͬɾɾɾ
    68

    View full-size slide

  67. ͔͠͠ɺͨͲΓண͘ͷ͸೉͍͠ɾɾɾ
    69

    View full-size slide

  68. SFBDUSFEVY͕ʂਓʑΛ࠳ંͤ͞Δʂʂʂ
    70

































    View full-size slide

  69. SFBDUSFEVYͷ೉͠͞
    u Reactとreduxの接続方法が少なくとも4通りある。特にdispatcherのつなぎ
    こみが混乱しやすい。
    u そもそも、登場人物が多い!
    u provider, connect, mapStateToProps, mapDispatchToProps, dispatch, …
    u しかし、react-reduxが提供している関数は、providerとconnectのみである
    71
    えっ、残りの登場人物はどこから登場してきたの?

    View full-size slide

  70. SFBDUSFEVYͷ೉͠͞
    u 登場人物が多い!
    u provider, connect, mapStateToProps, mapDispatchToProps, dispatch,
    bindActionCreators, …
    u しかし、react-reduxが提供している関数は、providerとconnectのみである
    72
    えっ、残りの登場人物はどこから登場してきたの?
    ͋ͳ͕ͨ࡞ΔͷͰ͢

    View full-size slide

  71. SFBDUSFEVYͷొ৔ਓ෺Λ੔ཧ͢Δ
    SFBDUSFEVY
    • QSPWJEFSSFEVYͷTUPSFΛಡΈࠐΊΔΑ͏ʹͯ͘͠ΕΔ
    • DPOOFDUDPNQPOFOUͱTUPSFΛܨ͛ͯ͘ΕΔ
    ࣗ࡞
    • BDUJPO$SFBUPSݺͼग़͢͜ͱͰɺBDUJPOΛ࡞ͬͯฦͯ͘͠ΕΔؔ਺
    • NBQ4UBUF5P1SPQTTUPSFͷTUBUF͔ΒಡΈࠐΉ஋Λબ୒͢Δ
    • NBQ%JTQBUDI5P1SPQTTUPSFʹର͢ΔEJTQBUDIFSΛબ୒͢Δ
    73

    View full-size slide

  72. SFBDUSFEVY͕΍Δ͜ͱ
    74
    https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/

    View full-size slide

  73. SFBDUSFEVY͕΍Δ͜ͱ
    75
    https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/
    Reactが提供

    View full-size slide

  74. SFBDUSFEVY͕΍Δ͜ͱ
    76
    https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/
    Reduxが提供

    View full-size slide

  75. SFBDUSFEVY͕΍Δ͜ͱ
    77
    https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/
    react-reduxが提供

    View full-size slide

  76. SFBDUSFEVY͕΍Δ͜ͱ
    78
    https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/
    providerとconnectが提供

    View full-size slide

  77. QSPWJEFS
    u で囲ったコンポーネント以下では、reduxのstoreにアクセスで
    きるようになる
    u 通常、アプリケーションのトップレベルで利用される。
    79
    ReactDOM.render(


    ,
    document.getElementById("root")
    );

    View full-size slide

  78. DPOOFDU
    u 任意のReactコンポーネントをreduxのstoreと接続するために利用する関数
    80
    class Component extends React.Component {
    }
    // Component -> Reactコンポーネント
    const ConnectedComponent = connect()(Component)
    // ConnectedComponent -> redux storeと接続されたコンポーネント

    View full-size slide

  79. DPOOFDU
    u connect関数は4つの引数を取ることができる
    • mapStateToProps?: Function
    • mapDispatchToProps?: Function | Object
    • mergeProps?: Function
    • options?: Object
    u connect関数は、コンポーネントを引数に取る関数を返す
    u connect()が返した関数はコンポーネントを引数に取り、storeにアクセスできるコンポー
    ネントを作って返してくれるよ!
    81
    「?」はなくても良いという意味. Maybe Types.
    Ex) function f1(name:string, age? number) は、 関数f1はstring型
    のnameが必要で、number型のageは必要というわけではない
    あまり使うことはないです。
    すくなくとも今は考えなくても良いですー。

    View full-size slide

  80. DPOOFDUͷ࢖͍͔ͨ

    DPOOFDU
    ͷڍಈ͸ɺ NBQ4UBUF5P1SPQTͱNBQ%JTQBUDI5P1SPQTͷઆ໌ޙɺ
    ৄ͘͠ਂ۷Γ·͢ʂ
    connect(mapStateToProps, mapDispatchToProps)(Component)
    4UPSFͷͲͷ෦෼Λ࢖͏͔ɺ
    ͲΜͳΞΫγϣϯΛ࢖͍͍͔ͨઃఆ͢Δ
    3FEVYͱͷ઀ଓͷઃఆΛɺ
    ίϯϙʔωϯτʹ൓өͤ͞Δॲཧ

    View full-size slide

  81. BDUJPO$SFBUPS
    u BDUJPOΛ࡞Δؔ਺
    u ͜Ε·Ͱɺstore.dispatch({type: ”SAMPLE_ACTION”})ͳͲͱఆٛͯ͠
    ͍͕ͨɺຖճBDUJPOΦϒδΣΫτΛखͰ࡞Δͷେม͡Όͳ͍Ͱ͔͢ʁ
    u ίϯϙʔωϯτ͔Β؆୯ʹΞΫγϣϯ࡞੒ΛͰ͖ΔΑ͏ʹ͢ΔͨΊʹɺBDUJPOΛ
    ฦؔ͢਺͸ఆٛͨ͠ํ͕ྑ͍ɻ
    ݺͿ͚ͩͰBDUJPO͕࡞Δ͜ͱ͕Ͱ͖ΔΑ͏ʹͳΔ
    83
    const checkUser = (userId) => {
    return { type: CHECK_USER, payload: id };
    };

    View full-size slide

  82. NBQ4UBUF5P1SPQT
    u DPOOFDUͷୈҰҾ਺ NBQ4UBUF5P1SPQTͱݺ͹Ε͍ͯΔɻ
    u ͜Ε͸ɺҰൠతʹɺ
    const mapStateToProps = state => ({ hoge: state.fuga, … })
    ͱ͍͏ܗͷؔ਺
    u ίϯϙʔωϯτ಺ͰɺTUPSFͷͲͷ஋ΛಡΈऔΓ͍͔ͨΛબ୒͢Δػ
    ೳʢTFMFDUPSͱݺ͹ΕΔ͜ͱ΋ʣɻTUBUFΛTUPSFͱߟ͑Δͱཧղ͠
    ΍͍͢
    84

    View full-size slide

  83. NBQ%JTQBUDI5P1SPQT
    u connectの第二引数。mapDispatchToPropsと呼ばれている
    u 一般的には、
    const mapDispatchToProps = dispatch => {
    return {hoge: dispatch(hogeActionCreator())}
    }
    と定義される
    u action creatorを渡すことで、どのactionをdispatchさせるかを定義する
    85
    dispatchは、ただの引数の名前

    View full-size slide

  84. DPOOFDUΛਂ۷Δ

    TUPSFͱͷ઀ଓΛઃఆ͢Δؔ਺ʢલ൒ʣͱɺ࣮ࡍʹTUPSFͱ઀ଓ
    ͯ͘͠ΕΔؔ਺ʢޙ൒ʣʹ෼͚ͯߟ͑Δͱཧղ͠΍͍͢Αʂ
    DPOOFDU NBQ4UBUF5P1SPQT NBQ%JTQBUDI5P1SPQT
    $PNQPOFOU

    4UPSFͷͲͷ෦෼Λ࢖͏͔ɺͲΜͳΞΫγϣϯΛ
    ࢖͍͍͔ͨઃఆ͢Δ
    3FEVYͱͷ઀ଓͷઃఆΛɺίϯϙʔωϯτ
    ʹ൓өͤ͞Δॲཧ
    f()() という書き方は、なにかの設定をしてあげ、
    その設定を反映させるみたいなことをしたいとき
    に、よくあるテクニックです。なんか変な呼び出し
    方だよね。

    View full-size slide

  85. ΫΠζ
    87
    class Component extends React.Component{
    constructor(){
    console.log(this.props);
    }
    }
    const mapStateToProps = state => {
    return {
    hoge: state.hoge,
    fuga: state.fuga
    }
    }
    const mapDispatchToProps = dispatch => {
    return {
    foo: dispatch(foo())
    }
    }
    export default connect(mapStateToProps)(Component)
    このコンポーネントはどんな
    propsが入っているでしょう!

    View full-size slide

  86. ΫΠζ
    88
    class Component extends React.Component{
    constructor(){
    console.log(this.props);
    }
    }
    const mapStateToProps = state => {
    return {
    hoge: state.hoge,
    fuga: state.fuga
    }
    }
    const mapDispatchToProps = dispatch => {
    return {
    foo: dispatch(foo())
    }
    }
    export default connect(mapStateToProps,mapDispatchToProps)(Component)
    このコンポーネントはどんな
    propsが入っているでしょう!

    View full-size slide

  87. ΫΠζ
    89
    class Component extends React.Component{
    constructor(){
    console.log(this.props);
    }
    }
    const mapStateToProps = state => {
    return {
    hoge: state.hoge,
    fuga: state.fuga
    }
    }
    const mapDispatchToProps = dispatch => {
    return {
    foo: dispatch(foo())
    }
    }
    export default connect(null,mapDispatchToProps)(Component)
    このコンポーネントはどんな
    propsが入っているでしょう!

    View full-size slide

  88. ೉͍͠ΫΠζ̐
    90
    class Component extends React.Component{
    constructor(){
    console.log(this.props);
    }
    }
    const mapStateToProps = state => {
    return {
    hoge: state.hoge,
    fuga: state.fuga
    }
    }
    const mapDispatchToProps = dispatch => {
    return {
    foo: dispatch(foo())
    }
    }
    export default connect()(Component)
    このコンポーネントはどんな
    propsが入っているでしょう!

    View full-size slide

  89. ࣮͸ɾɾɾ
    this.props.dispatch({type: ‘Hoge’})
    っていうやり方もある・・・
    91

    View full-size slide

  90. SFBDUSFEVY͕ʂਓʑΛ࠳ંͤ͞Δʂʂʂ
    92

































    View full-size slide

  91. SFBDUSFEVY͕ʂਓʑΛ࠳ંͤ͞Δʂʂʂ
    93

































    View full-size slide

  92. 5BCMFPG$POUFOUT
    ͸͡Ίʹ
    ࠲ֶ3FEVYΛֶͿϞνϕʔγϣϯʹ͍ͭͯ
    B ͳͥ"JS͸3FBDUΛ࠾༻ͨ͠ͷ͔ͳͥࢲͨͪ͸3FBDU3FEVYΛֶͿͷ͔
    C ͳͥ3FEVYΛֶͿͷ͔3FBDU୯ମͰར༻͢ΔͱԿ͕ਏ͘ͳΔͷ͔
    D 3FEVYͰঢ়ଶΛ؅ཧ͢ΔͨΊʹ஌Δ΂͖֓೦
    ϋϯζΦϯ3FEVYͰΧ΢ϯτػೳΛ࡞Δ
    ϥϯν
    ࠲ֶ3FBDU͔Β3FEVYΛར༻͢Δʹ͸Ͳ͏͢Ε͹͍͍͔
    B SFBDUSFEVYͰొ৔͢Δ֓೦
    ϋϯζΦϯ3FBDU3FEVYͰΧ΢ϯτΞϓϦΛ࡞Δ
    ϋϯζΦϯ3FBDU3FEVYͰ5PEPΞϓϦΛ࡞Δ
    94

    View full-size slide

  93. ϋϯζΦϯ
    3FBDU3FEVYͰΧ΢ϯτΞϓϦΛ࡞Δ
    95

    View full-size slide

  94. Χ΢ϯτΞοϓΞϓϦΛϥΠϒίʔσΟϯά͠
    ·͢!DPEF4BOE#PY
    u Χ΢ϯτΞοϓϘλϯΛ࡞Γ·͢ɻ͜Ε͸3FBDU੡6*ίϯϙʔωϯ
    τ͔ΒɺTUPSFͰ؅ཧ͞Ε͍ͯΔΧ΢ϯτঢ়ଶΛࢀরɾૢ࡞͢ΔΞϓ
    ϦΛ࡞Δͱ͍͏ҙຯͰ͢ɻ
    u TUPSF΍SFEVDFS͸໦ߏ଄ʹͳΔͷͰɺͦΕΒΛNPEVMFͱ͍͏୯Ґ
    Ͱ؅ཧ͠·͢ɻࠓճ͸DPVOU.PEVMFΛ࣋ͭSFBDUSFEVYΞϓϦέʔ
    γϣϯΛ։ൃ͠·͢ɻ
    96

    View full-size slide

  95. ϋϯζΦϯλΠϜ
    u ʮΧ΢ϯτμ΢ϯϘλϯʯΛ࡞͍ͬͯͩ͘͞
    u ʮΧ΢ϯτϦηοτϘλϯʯΛ࡞͍ͬͯͩ͘͞
    97

    View full-size slide

  96. ϋϯζΦϯதɾɾɾ
    98

    View full-size slide

  97. ౴͑
    • DPVOUΛTUPSFʹఆٛ
    • SFEVDFSʹCOUNT_UPͱ
    COUNT_DOWNのcaseΛఆٛ
    • ͦΕͧΕʹରԠͨ͠
    BDUJPO$SFBUPSΛFYQPSU͢Δ
    99
    回答URL) https://github.com/sadnessOjisan/react-redux-count-handson
    const countUp = (): TCountUpAction => {
    return { type: COUNT_UP };
    };
    const countDown = (): TCountDownAction => {
    return { type: COUNT_DOWN};
    };
    export const actionCreators = {
    countUp,
    countDown
    };
    const initialState = {
    count: 0
    };
    // reducer
    const reducer = (state: TState = initialState, action: TAction) => {
    switch (action.type) {
    case COUNT_UP:
    return { ...state, count: state.count + 1 };
    case COUNT_DOWN:
    return { ...state, count: state.count - 1 };
    default:
    return initialState;
    }
    };

    View full-size slide

  98. ౴͑
    • TUPSFͷΧ΢ϯτΛಡΈࠐΉͨΊͷؔ਺
    NBQ4UBUF5P1SPQTΛఆٛ
    • DPVOUͷૢ࡞ΛQSPQT͔ΒͰ͖ΔΑ͏ʹ
    ͢Δؔ਺NBQ%JTQBUDI5P1SPQTΛఆٛ
    • DPOOFDUʹNBQ4UBUF5P1SPQTͱ
    NBQ%JTQBUDI5P1SPQTΛ౉ͯ͠ɺίϯ
    ϙʔωϯτͷத͔ΒTUBUFͱEJTQBUDIFS
    ʹΞΫηεͰ͖ΔΑ͏ʹͯ͋͛͠Δ
    100
    回答URL) https://github.com/sadnessOjisan/react-redux-count-handson
    const mapStateToProps = (state: TStore) => {
    return { count: state.count };
    };
    const mapDispatchToProps = (dispatch: Dispatch<*>) => {
    return {
    countUp: ()=>dispatch(countUp()),
    countDown: ()=>dispatch(countDown())
    };
    };
    export default connect(
    mapStateToProps,
    mapDispatchToProps
    )(Counter);

    View full-size slide

  99. ղ౴
    101
    "QQ໊ 63- આ໌
    UPEP@SFBDU
    IUUQTHJUIVCDPNTBEOFTT0KJTBOUPEP@
    SFBDU
    લճͷϋϯζΦϯͰ։ൃͨ͠UPEPΞϓϦͷճ
    ౴Ͱ͢ɻࠓ೔͸͜ΕΛSFEVYԽ͢Δ͜ͱ͕࠷
    ऴ໨ඪͰ͢ɻ
    SFBDUCSPUIFSCPUIFSJOHVQEBUFFYBNQMF
    IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU
    CSPUIFSCPUIFSJOHVQEBUFFYBNQMF
    ܑఋίϯϙʔωϯτΛSFEVYͳ͠Ͱߋ৽͢Δ
    ͱΊΜͲ͍͘͞ྫ
    SFEVYDPVOUIBOETPO
    IUUQTHJUIVCDPNTBEOFTT0KJTBOSFEVY
    DPVOUIBOETPO
    SFEVYͰ؆୯ͳঢ়ଶ؅ཧΛ͠·͢ʢΧ΢ϯ
    τʣ
    SFBDUSFEVYDPVOUIBOETPO
    IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU
    SFEVYDPVOUIBOETPO
    SFEVYͰ؅ཧ͍ͯ͠ΔΧ΢ϯτTUBUFΛSFBDU
    ͔ΒΞΫηεɾߋ৽Ͱ͖ΔΑ͏ʹ͠·͢ɻ
    SFBDUSFEVYUPEP
    IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU
    SFEVYUPEP
    UPEPϦετΛSFEVYԽͨ͠΋ͷ
    ͦΕͧΕɺ׬੒ܗ΍಺෦࢓༷ &4%PD
    Λ/FUMJGZʹσϓϩΠ͍ͯ͠·͢ɻ
    ϦϯΫ͸ɺ֤ϨϙδτϦͷ3&"%.&ʹॻ͍ͯ͋Γ·͢ɻ

    View full-size slide

  100. 5BCMFPGDPOUFOUT
    ͸͡Ίʹ
    ࠲ֶSFEVYΛֶͿϞνϕʔγϣϯʹ͍ͭͯ
    B ͳͥBJS͸SFBDUΛ࠾༻ͨ͠ͷ͔ͳͥࢲͨͪ͸SFBDUSFEVYΛֶͿͷ͔
    C ͳͥSFEVYΛֶͿͷ͔SFBDU୯ମͰར༻͢ΔͱԿ͕ਏ͘ͳΔͷ͔
    D SFEVYͰঢ়ଶΛ؅ཧ͢ΔͨΊʹ஌Δ΂͖֓೦
    ϋϯζΦϯSFEVYͰΧ΢ϯτػೳΛ࡞Δ
    ϥϯν
    ࠲ֶSFBDU͔ΒSFEVYΛར༻͢Δʹ͸Ͳ͏͢Ε͹͍͍͔
    B SFBDUSFEVYͰొ৔͢Δ֓೦
    ϋϯζΦϯSFBDUSFEVYͰΧ΢ϯτΞϓϦΛ࡞Δ
    ϋϯζΦϯSFBDUSFEVYͰUPEPΞϓϦΛ࡞Δ
    102

    View full-size slide

  101. ϋϯζΦϯ
    3FBDU3FEVYͰ5PEPΞϓϦΛ࡞Δ
    103

    View full-size slide

  102. Ͱ͸ɺࠓ೔ͷ໨ඪʹऔΓֻ͔Γ·͢
    104

    View full-size slide

  103. SFBDUSFEVYͰ
    50%0؅ཧΞϓϦΛ࡞Ζ͏ʂʂ
    105

    View full-size slide

  104. ਐΊํ
    u Ҏલ࡞੒ͨ͠ɺSFBDU੡UPEP؅ཧΞϓϦΛSFEVYԽͯ͠΋Β͍·͢ɻ
    u ϨϕϧΛͭ༻ҙ͓ͯ͠Γ·͢
    u -WSFBDUΞϓϦέʔγϣϯ͔Βͷελʔτ
    u -WOQN JOJU͔Β׬શਅͬനελʔτ
    106
    https://github.com/sadnessOjisan/react-redux-todo
    https://github.com/sadnessOjisan/todo_react

    View full-size slide

  105. ϋϯζΦϯதɾɾɾ
    107

    View full-size slide

  106. ղ౴
    108
    "QQ໊ 63- આ໌
    UPEP@SFBDU
    IUUQTHJUIVCDPNTBEOFTT0KJTBOUPEP@
    SFBDU
    લճͷϋϯζΦϯͰ։ൃͨ͠UPEPΞϓϦͷճ
    ౴Ͱ͢ɻࠓ೔͸͜ΕΛSFEVYԽ͢Δ͜ͱ͕࠷
    ऴ໨ඪͰ͢ɻ
    SFBDUCSPUIFSCPUIFSJOHVQEBUFFYBNQMF
    IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU
    CSPUIFSCPUIFSJOHVQEBUFFYBNQMF
    ܑఋίϯϙʔωϯτΛSFEVYͳ͠Ͱߋ৽͢Δ
    ͱΊΜͲ͍͘͞ྫ
    SFEVYDPVOUIBOETPO
    IUUQTHJUIVCDPNTBEOFTT0KJTBOSFEVY
    DPVOUIBOETPO
    SFEVYͰ؆୯ͳঢ়ଶ؅ཧΛ͠·͢ʢΧ΢ϯ
    τʣ
    SFBDUSFEVYDPVOUIBOETPO
    IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU
    SFEVYDPVOUIBOETPO
    SFEVYͰ؅ཧ͍ͯ͠ΔΧ΢ϯτTUBUFΛSFBDU
    ͔ΒΞΫηεɾߋ৽Ͱ͖ΔΑ͏ʹ͠·͢ɻ
    SFBDUSFEVYUPEP
    IUUQTHJUIVCDPNTBEOFTT0KJTBOSFBDU
    SFEVYUPEP
    UPEPϦετΛSFEVYԽͨ͠΋ͷ
    ͦΕͧΕɺ׬੒ܗ΍಺෦࢓༷ &4%PD
    Λ/FUMJGZʹσϓϩΠ͍ͯ͠·͢ɻ
    ϦϯΫ͸ɺ֤ϨϙδτϦͷ3&"%.&ʹॻ͍ͯ͋Γ·͢ɻ

    View full-size slide

  107. ͓ർΕ༷Ͱͨ͠ʂʂ
    109

    View full-size slide

  108. ͓ർΕ༷Ͱͨ͠
    u SFEVYʹঢ়ଶΛҕৡ͠ɺSFBDUੈքͰ6*ʹؔ͢Δϓϩάϥϛϯάʹઐ
    ೦Ͱ͖ΔΑ͏ʹͳΓ·ͨ͠ɻ
    u ࠓ೔΍ͬͯ΋Βͬͨ͜ͱ͸࣮຿Ͱ͓͜ͳ͏࡞ۀͱɺ࣮͸͋·ΓมΘ
    Γ͸͋Γ·ͤΜɻ
    u ࣮຿ͱͷࠩ෼ઃܭ ෭࡞༻؅ཧ SFEVDFSͷ෼ׂ $44ͷهड़͘Β͍
    u ࠷ޙʹ෮शͱ࣍ճ༧ࠂ͚ͩͯ͠ɺऴ͑·͠ΐ͏ʂ
    110

    View full-size slide

  109. SFEVYͱ͸ͲͷΑ͏ͳ΋ͷ͔
    u 状態管理ツール
    u 破壊的変更が禁止されている(新しいオブジェクトを渡す)
    112

    View full-size slide

  110. SFBDUSFEVYͱ͸ͲͷΑ͏ͳ΋ͷ͔
    u Reduxをreactから使えるようにするツール
    113

    View full-size slide

  111. SFEVYSFBDUSFEVYΛ࢖͏خ͠͞
    u TJOHMFTUPSFͰ͋ΔͨΊɺΞϓϦέʔγϣϯͷঢ়ଶΛҰՕॴͰ؅ཧ
    Ͱ͖Δ
    u ͭ·ΓɺG TUBUF
    6*͕ G TUPSF
    6*ͱͳΔ
    u SFEVYʹ઀ଓͨ͠ DPNQPOFOU͸ɺͲ͔͜ΒͰ΋ BDUJPO$SFBUPS Λ
    ݺͿ͜ͱͰ TUPSFΛߋ৽͢Δ͜ͱ͕Ͱ͖Δ
    114

    View full-size slide

  112. SFEVY͸ͲͷΑ͏ʹͯ͠࢖͏͔
    u TUBUFͱ BDUJPOΛड͚औͬͯ৽͍͠ TUBUFΛฦؔ͢਺ SFEVDFSΛ
    ఆٛ͢Δ
    u SFEVDFS͔Β TUPSFΛ࡞Δ
    u TUPSF͔Β BDUJPOΛ EJTQBUDIͯ͠ SFEVDFSΛಈ͔ͯ͠ TUPSFΛ
    ߋ৽͢Δ
    115

    View full-size slide

  113. ࣍ճ༧ࠂSFBDUΛ࢖ͬͨେن໛։ൃ
    u SPVUJOH
    u SFEVDFS෼ׂ
    u middleware
    116

    View full-size slide

  114. 開催方式
    • 講義はしません
    • 課題を解いて来てもらいます
    • 自習がメインになります
    • keyword: redux-logger, redux-saga, react-router, combineReducer
    117

    View full-size slide

  115. ͓ർΕ༷Ͱͨ͠ʂʂ
    118

    View full-size slide