React+Redux 次の一歩 / the next step from react and redux

by Yoichiro Shimizu

Slide 1

Slide 1 text

React+Redux 次の一歩 8FCΤϯδχΞษڧձ :PJDIJSP4IJNJ[V!CVEPVHVNJ

Slide 2

Slide 2 text

自己紹介 ‣ ਗ਼ਫཅҰ࿠!CVEPVHVNJ ‣ ‣ #BDLFOE%FTLUPQ"QQFOHJOFFS ‣ (P3VCZPO3BJMT/&5 ‣ ϒϩάIUUQCVEPVHVNJHJUIVCJP ‣ ίϛϡχςΟ׆ಈHPMBOHUPLZPӡӦ

Slide 3

Slide 3 text

今日のゴール ‣ 3FBDU3FEVYͱ߹Θͤͯ࢖͑ΔπʔϧΛ஌Δ ‣ 7VF"OHVMBSͰ΋࢖͑Δʢ͸ͣʣ ‣ ͳͥͦͷπʔϧΛ࢖͏ͷ͔஌Δ

Slide 4

Slide 4 text

注意 ‣ 3FBDUɾ3FEVYຊମʹ͍ͭͯ͸ׂѪ͠·͢ ‣ 'MPXΛ࢖ͬͨͷͰ5ZQF4DSJQUʹ͍ͭͯ͸৮Ε·ͤΜɻ ‣ +4ॳ৺ऀͳͷͰ͝ࢦఠΑΖ͓͘͠Ͷ͕͍͠·͢

Slide 5

Slide 5 text

アジェンダ ‣ ͖Ε͍ͳίʔυΛॻͨ͘Ίͷπʔϧ ‣ ςετ͢ΔͨΊͷπʔϧ ‣ σϓϩΠ͢ΔͨΊͷπʔϧ

Slide 6

Slide 6 text

最初に ‣ Ұϲ݄͘Β͍લ͔Β3FBDU࢝Ίͨ QBDLBHFKTPOΑ͘Θ͔ΒΜ ‣ DSFBUFSFBDUBQQ ‣ 3FBDU3FEVY3FEVY5IVOL ඇಉظॲཧ ͘Β͍·Ͱ͸݁ߏ͋Δ ‣ 6EFNZͰຊ͘Β͍΍ͬͯΈͨ ‣ ͜Ε͚ͩͰ͸ۀ຿Ͱ࢖͏ͱ͖ͱͷ͕ܹ͍ࠩ͠ ‣ +4Ͱ΋ΫϦʔϯͳίʔυΛॻ͖͍ͨʢॻ͘࿅श͕͍ͨ͠ʣ

Slide 7

Slide 7 text

きれいなコードを書きたい

Slide 8

Slide 8 text

独習の問題 ‣ ͖Ε͍ͳίʔυಡΈ΍͍͢ɾҰҙͳίʔυ ‣ ϨϏϡʔΞ͕͍ͳ͍ ‣ ʢͱ͘ʹະܦݧݴޠͷ৔߹ʣ͖Ε͍ͳͷ͔Ԛ͍ͷ͔Θ͔Βͳ͍

Slide 9

Slide 9 text

Flow(TypeScript)+ESLint+Prettier ͜Ε͚ͩͰ͍ͩͿϦʔμϒϧͳίʔυ͕ॻ͚Δɻ ಠֶͷͱ͖ʹʮࢦఠʯ͕΋Β͑Δͷ͸େࣄ

Slide 10

Slide 10 text

Flow

Slide 11

Slide 11 text

Flow ‣ IUUQTqPXPSH ‣ +BWB4DSJQUʹܕΛಋೖͰ͖Δ ‣ ֤छΤσΟλͰϦΞϧλΠϜʹΤϥʔͳͲΛ൓өՄೳ ‣ qPXUZQFEͰ༗໊ϥΠϒϥϦͷఆٛࡁΈͷܕΛར༻Մ ‣ طଘίʔυʹஈ֊తʹಋೖ͕Մೳ ‣ ʢ5ZQF4DSJQU΋ஈ֊ಋೖ͕ՄೳʹͳͷͰࠓ͸5ZQF4DSJQUͷ΄͏͕Α͍ʁʣ

Slide 12

Slide 12 text

ESLint

Slide 13

Slide 13 text

ESLint ‣ IUUQTFTMJOUPSH ‣ ੩తղੳίʔυϑΥʔϚολ ‣ ΤσΟλͰϦΞϧλΠϜνΣοΫ͠ͳ͕ΒίʔσΟϯάͰ͖Δ ‣ ϓϦηοτ͓͚͋ͯͯ͹Α͍ ‣ IUUQTXXXOQNKTDPNQBDLBHFFTMJOUDPOpHHPPHMF ‣ IUUQTXXXOQNKTDPNQBDLBHFFTMJOUDPOpHBJSCOC

Slide 14

Slide 14 text

Prettier

Slide 15

Slide 15 text

Prettier ‣ IUUQTHJUIVCDPNQSFUUJFSQSFUUJFS ‣ ίʔυϑΥʔϚολ ‣ &4-JOUΑΓڧྗͳ੔ܗ͕Ͱ͖Δ ‣ ΤσΟλͷΦʔτηʔϒͱ߹ΘͤΕ͹͖Ε͍ͳίʔυ͕ॻ͚Δ

Slide 16

Slide 16 text

テストを書きたい

Slide 17

Slide 17 text

品質を担保したい ‣ ಈ࡞Λ͔֬Ίͳ͕Β࡞Δ ‣ ϢχοτςετΛॻ͍ͯখ͘͞࡞Δ ‣ ษڧத͸ϏοΫόϯతʹ࡞ͬͯಈ͔ͳ͍ͱ͓ख্͛ʹͳΔ ‣ ۀ຿Ͱ࢖͏ͱ͖͸ςετίʔυΛॻ͘ೳྗ΋ඞਢ ‣ ςετ͕ແ͍ίʔυ͸ϨΨγʔίʔυ

Slide 18

Slide 18 text

Jest

Slide 19

Slide 19 text

Jest ‣ IUUQTKFTUKTJP ‣ ϢχοτςετϑϨʔϜϫʔΫɻDSFBUFSFBDUBQQʹ΋ඪ४Ͱؚ·Ε͍ͯΔ ‣ &O[ZNF͔ͭ͏ͱςετதͷ%0.૸ࠪ΋ϥΫ ‣ %4-͕STQFDʹࣅ͍ͯΔ ‣ σʔλۦಈςετ ςʔϒϧۦಈςετ ͕Մೳ ‣ ϗοτϦϩʔυ͢ΔͷͰςετۦಈ։ൃʹ΋޲͍͍ͯΔ ‣ εφοϓγϣοτͰϦάϨογϣϯςετ΋Ͱ͖Δ

Slide 20

Slide 20 text

単体テスト &Y1SPQΛ༩͑ͯࢦఆͨ͠DMBTTͷϑΟʔϧυ͕มΘΔ͔

Slide 21

Slide 21 text

スナップショットテスト ֎؍ %0. ͷϦάϨογϣϯςετ

Slide 22

Slide 22 text

ホットリロード ࣮ߦͤͨ͞··ίʔσΟϯά͢Ε͹ ͦͷ··ϗοͱϦϩʔυͯࣗ͠ಈςετͯ͘͠ΕΔ

Slide 23

Slide 23 text

Storybook

Slide 24

Slide 24 text

Storybook ‣ IUUQTTUPSZCPPLKTPSH ‣ ίϯϙʔωϯτͷΧλϩά ‣ Χλϩά্ͰQSPQTΛมԽͤͯ͞ಈ࡞֬ೝ ‣ σόΠε͝ͱͷ6*Λ֬ೝ ‣ (JU)VC1BHFTͳͲͰ഑৴ɾڞ༗Մೳ ‣ +FTUͱ࿈ܞͨ͠εφοϓγϣοτςετ

Slide 25

Slide 25 text

コンポーネントカタログ ύʔπ͝ͱʹ࣮ࡍʹಈ͔ͤΔ 1SPQTΛಈతʹ༩͑Δ͜ͱ΋Ͱ͖Δ

Slide 26

Slide 26 text

デプロイしてみたい

Slide 27

Slide 27 text

できた！！けど… ‣ Ұ௨Γಈ͘΋ͷΛ࡞ͬͨʂ ‣ MPDBMIPTUͷ··͸ͪΐͬͱ൵͍͠ ‣ αʔό༻ҙͯ͠σϓϩΠύΠϓϥΠϯ࡞Δ·Ͱͷݩؾ͸ͳ͍

Slide 28

Slide 28 text

Netlify

Slide 29

Slide 29 text

Netlify ‣ IUUQTXXXOFUMJGZDPN ‣ (JUϦϙδτϦΛొ࿥͢Δ͚ͩͰ੩తαΠτΛϗεςΟϯά͕Ͱ͖Δ ‣ QBDLBHFKTPOͳͲΛݟ͍͍ͯײ͡ͷϏϧυ΋ͯ͘͠ΕΔ ‣ "84-BNCEBϕʔεͷόοΫΤϯυॲཧ΋ར༻Մೳ ‣ ਖ਼௚ͳΜͰແྉͳͷ͔Θ͔Βͳ͍

Slide 30

Slide 30 text

選択 ϦϙδτϦΛࢦఆ͢Δ

Slide 31

Slide 31 text

設定 Ϗϧυ͢ΔϒϥϯνɺϏϧυίϚϯυΛࢦఆ͢Δ ʢมͳ͜ͱͯ͠ͳ͚Ε͹ͦͷ··ͰΑ͍ʣ

Slide 32

Slide 32 text

公開 ϒϥϯνߋ৽࣌ʹࣗಈ࠶σϓϩΠͰ͖Δ 4MBDLɾϝʔϧ௨஌ͳͲ΋

Slide 33

Slide 33 text

今日のゴール ‣ 3FBDU3FEVYͱ߹Θͤͯ࢖͑ΔπʔϧΛ஌Δ ‣ 7VF"OHVMBSͰ΋࢖͑Δʢ͸ͣʣ ‣ ͳͥͦͷπʔϧΛ࢖͏ͷ͔஌Δ

Slide 34

Slide 34 text

まとめ ‣ ಠֶͰ΋ΫϦʔϯͳίʔυΛॻ͘ ‣ 'MPX 5ZQF4DSJQU &4-JOU1SFUUJFS ‣ ಠֶͰ΋ςετΛॻ͘श׳Λ͚ͭΔ ‣ +FTUFO[ZNF 4UPSZCPPL ‣ ͔ͤͬ͘࡞ͬͨ΋ͷ͸ެ։ͯ͠ΈΔ ‣ /FUMJGZ

Slide 35

Slide 35 text

まとめ ‣ खݩͰಈ͔ͯ͠Έ͍ͨํ ‣ IUUQTHJUIVCDPNCVEPVHVNJXFNSFBDUTBNQMF ‣ ࣗ෼ͷϦϙδτϦͰࢼͯ͠Έ͍ͨํ ‣ ্هϦϙδτϦͷ3&"%.&ʹಋೖखॱ΁ͷϦϯΫ͕͋Γ·͢