Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

͸͡Ίʹ 2

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

ར༻͢Διʔείʔυ 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&"%.&ʹॻ͍ͯ͋Γ·͢ɻ

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

19 ͖ͼ͠ʔ

Slide 20

Slide 20 text

ͦ͜Ͱ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*ͱͳΔੈքͰɺύʔπΛ૊Έ߹Θͤͯ։ൃʂ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

TUBUF΍ϋϯυϥͷόέπϦϨʔ 29 Root ίϯϙʔωϯτ AB2 ABB3 A1 D1 E1 DA2 DB2 TUBUF &ͷTUBUFΛड͚औΔͨΊͷؔ਺'Λఆٛ

Slide 30

Slide 30 text

TUBUF΍ϋϯυϥͷόέπϦϨʔ 30 Root ίϯϙʔωϯτ AB2 ABB3 A1 D1 E1 DA2 DB2 TUBUF &ͷTUBUFΛड͚औΔͨΊͷؔ਺'Λఆٛ 'Λ࣮ߦ͠ɺ&ͷ TUBUFΛϧʔτʹ఻͑Δ E1

Slide 31

Slide 31 text

TUBUF΍ϋϯυϥͷόέπϦϨʔ 31 Root ίϯϙʔωϯτ AB2 ABB3 A1 D1 E1 DA2 DB2 TUBUF &ͷTUBUFΛड͚औΔͨΊͷؔ਺'Λఆٛ 'Λ࣮ߦ͠ɺ&ͷ TUBUFΛϧʔτʹ఻͑Δ E1 E1 E1 E1

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

TUBUF΍ϋϯυϥͷόέπϦϨʔ 33 Root ίϯϙʔωϯτ AB2 ABB3 A1 D1 E1 DA2 DB2 TUBUF &ͷTUBUFΛड͚औΔͨΊͷؔ਺'Λఆٛ 'Λ࣮ߦ͠ɺ&ͷ TUBUFΛϧʔτʹ఻͑Δ E1 E1 E1 E1 なかなかめんどくさい

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

36 QSPQTόέπϦϨʔ

Slide 37

Slide 37 text

37 ղܾࡦ͸ʁ

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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" });

Slide 45

Slide 45 text

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数を状態として扱うことを宣言する

Slide 46

Slide 46 text

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" }); どういうときに、どういう風に状態を更新 するかを定義する。

Slide 47

Slide 47 text

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 という命令が来たら、カウント をアップすることを定義する

Slide 48

Slide 48 text

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" }); 上で作った状態と状態更新ルールを持っ た状態管理オブジェクトを作る

Slide 49

Slide 49 text

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" }); 状態を保つオブジェクトに対して、状態更 新の命令を送る

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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: ‘パンケーキを返す’}

Slide 54

Slide 54 text

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: ‘シフォンケーキ’}を返す

Slide 55

Slide 55 text

BDUJPOߋ৽಺༰ʹ͍ͭͯͷϝοηʔδ u TUPSFʹରͯ͠ɺͲͷΑ͏ͳมߋΛͯ͠΄͍͔͠ॻ͔Εͨϝοηʔδ u \UZQFTUSJOH QBZMPBE NJYFE^ܗࣜͷͨͩͷΦϒδΣΫτ u UZQF͸༷ʑͳΞΫγϣϯͷࣝผࢠɺQBZMPBE͸ߋ৽ͯ͠΄͍͠σʔ λɻUZQF͸ඞਢ͕ͩɺQBZMPBE͸ͳͯ͘΋ྑ͍ɻ UZQF΍QBZMPBEͱ ͍͏Ωʔ໊͸׳श u store.dispatch(action) ΛݺͿͱɺSFEVDFS͕࣮ߦ͞ΕΔ ʮBDUJPOΛEJTQBUDI͢Δʯͱදݱ͞ΕΔ ɻͦͷ݁ՌɺBDUJPOΛݩʹ TUPSFΛߋ৽͢Δ͜ͱ͕Ͱ͖Δɻ 55

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

ϋϯζΦϯ 57

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

ϋϯζΦϯதɾɾɾ 60

Slide 61

Slide 61 text

౴͑ • 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

Slide 62

Slide 62 text

ղ౴ 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&"%.&ʹॻ͍ͯ͋Γ·͢ɻ

Slide 63

Slide 63 text

ϥϯνλΠϜʂ ʂ ʂ 63

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

SFBDUSFEVY͕ʂਓʑΛ࠳ંͤ͞Δʂʂʂ 70 人 畜 無 害 そ う な 顔 を し て い る が 数 え 切 れ な い ほ ど の 人 間 を 挫 折 さ せ て い る

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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は必要というわけではない あまり使うことはないです。 すくなくとも今は考えなくても良いですー。

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

DPOOFDUΛਂ۷Δ TUPSFͱͷ઀ଓΛઃఆ͢Δؔ਺ʢલ൒ʣͱɺ࣮ࡍʹTUPSFͱ઀ଓ ͯ͘͠ΕΔؔ਺ʢޙ൒ʣʹ෼͚ͯߟ͑Δͱཧղ͠΍͍͢Αʂ DPOOFDU NBQ4UBUF5P1SPQT NBQ%JTQBUDI5P1SPQT $PNQPOFOU 4UPSFͷͲͷ෦෼Λ࢖͏͔ɺͲΜͳΞΫγϣϯΛ ࢖͍͍͔ͨઃఆ͢Δ 3FEVYͱͷ઀ଓͷઃఆΛɺίϯϙʔωϯτ ʹ൓өͤ͞Δॲཧ f()() という書き方は、なにかの設定をしてあげ、 その設定を反映させるみたいなことをしたいとき に、よくあるテクニックです。なんか変な呼び出し 方だよね。

Slide 87

Slide 87 text

ΫΠζ 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が入っているでしょう!

Slide 88

Slide 88 text

ΫΠζ 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が入っているでしょう!

Slide 89

Slide 89 text

ΫΠζ 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が入っているでしょう!

Slide 90

Slide 90 text

೉͍͠ΫΠζ̐ 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が入っているでしょう!

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

SFBDUSFEVY͕ʂਓʑΛ࠳ંͤ͞Δʂʂʂ 92 人 畜 無 害 そ う な 顔 を し て い る が 数 え 切 れ な い ほ ど の 人 間 を 挫 折 さ せ て い る

Slide 93

Slide 93 text

SFBDUSFEVY͕ʂਓʑΛ࠳ંͤ͞Δʂʂʂ 93 人 畜 無 害 そ う な 顔 を し て い る が 数 え 切 れ な い ほ ど の 人 間 を 挫 折 さ せ て い る

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

ϋϯζΦϯதɾɾɾ 98

Slide 99

Slide 99 text

౴͑ • 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; } };

Slide 100

Slide 100 text

౴͑ • 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);

Slide 101

Slide 101 text

ղ౴ 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&"%.&ʹॻ͍ͯ͋Γ·͢ɻ

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

ϋϯζΦϯதɾɾɾ 107

Slide 108

Slide 108 text

ղ౴ 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&"%.&ʹॻ͍ͯ͋Γ·͢ɻ

Slide 109

Slide 109 text

͓ർΕ༷Ͱͨ͠ʂʂ 109

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

8SBQVQ 111

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

͓ർΕ༷Ͱͨ͠ʂʂ 118