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

WEBエンジニア勉強会 #10 (東京都, 渋谷)の発表資料です。
https://web-engineer-meetup.connpass.com/event/104523/

React/Reduxと一緒に使いたい周辺ツール（ライブラリ）をまとめました。

サンプルリポジトリは以下です。
https://github.com/budougumi0617/wem10-react-sample

文中のリンクや実際の導入手順は以下にまとめてあります。
https://budougumi0617.github.io/2018/11/09/presentation-web-engineer-meetup-10

Transcript

1. React+Redux 次の一歩 
   8FCΤϯδχΞษڧձ
   
   :PJDIJSP
   4IJNJ[V
   !CVEPVHVNJ
2. 自己紹介 ‣ ਗ਼ਫ
   ཅҰ࿠
   !CVEPVHVNJ
   ‣
   
   ‣ #BDLFOE
   
   %FTLUPQ"QQ
   FOHJOFFS
   ‣ (P
   
   3VCZ
   PO
   3BJMT
   
   /&5
   ‣ ϒϩά
   IUUQCVEPVHVNJHJUIVCJP
   
   ‣ ίϛϡχςΟ׆ಈ
   HPMBOHUPLZPӡӦ
   
3. 今日のゴール ‣ 3FBDU3FEVYͱ߹Θͤͯ࢖͑ΔπʔϧΛ஌Δ
   ‣ 7VF"OHVMBSͰ΋࢖͑Δʢ͸ͣʣ
   ‣ ͳͥͦͷπʔϧΛ࢖͏ͷ͔஌Δ
4. 注意 ‣ 3FBDUɾ3FEVYຊମʹ͍ͭͯ͸ׂѪ͠·͢
   ‣ 'MPXΛ࢖ͬͨͷͰ5ZQF4DSJQUʹ͍ͭͯ͸৮Ε·ͤΜɻ
   ‣ +4ॳ৺ऀͳͷͰ͝ࢦఠΑΖ͓͘͠Ͷ͕͍͠·͢
5. アジェンダ ‣ ͖Ε͍ͳίʔυΛॻͨ͘Ίͷπʔϧ
   ‣ ςετ͢ΔͨΊͷπʔϧ
   ‣ σϓϩΠ͢ΔͨΊͷπʔϧ
6. 最初に ‣ Ұϲ݄͘Β͍લ͔Β3FBDU࢝Ίͨ QBDLBHFKTPOΑ͘Θ͔ΒΜ
   ‣ DSFBUFSFBDUBQQ
   ‣ 3FBDU
   
   3FEVY
   
   3FEVY5IVOL ඇಉظॲཧ ͘Β͍·Ͱ͸݁ߏ͋Δ
   ‣ 6EFNZͰຊ͘Β͍΍ͬͯΈͨ
   ‣ ͜Ε͚ͩͰ͸ۀ຿Ͱ࢖͏ͱ͖ͱͷ͕ܹ͍ࠩ͠
   ‣ +4Ͱ΋ΫϦʔϯͳίʔυΛॻ͖͍ͨʢॻ͘࿅श͕͍ͨ͠ʣ
7. きれいなコードを書きたい
8. 独習の問題 ‣ ͖Ε͍ͳίʔυ
   
   ಡΈ΍͍͢ɾҰҙͳίʔυ
   ‣ ϨϏϡʔΞ͕͍ͳ͍
   ‣ ʢͱ͘ʹະܦݧݴޠͷ৔߹ʣ͖Ε͍ͳͷ͔Ԛ͍ͷ͔Θ͔Βͳ͍
9. Flow(TypeScript)+ESLint+Prettier ͜Ε͚ͩͰ͍ͩͿϦʔμϒϧͳίʔυ͕ॻ͚Δɻ
   ಠֶͷͱ͖ʹʮࢦఠʯ͕΋Β͑Δͷ͸େࣄ
10. Flow
11. Flow ‣ IUUQTqPXPSH
    
    ‣ +BWB4DSJQUʹܕΛಋೖͰ͖Δ
    ‣ ֤छΤσΟλͰϦΞϧλΠϜʹΤϥʔͳͲΛ൓өՄೳ
    ‣ qPXUZQFEͰ༗໊ϥΠϒϥϦͷఆٛࡁΈͷܕΛར༻Մ
    ‣ طଘίʔυʹஈ֊తʹಋೖ͕Մೳ
    ‣ ʢ5ZQF4DSJQU΋ஈ֊ಋೖ͕ՄೳʹͳͷͰࠓ͸5ZQF4DSJQUͷ΄͏͕Α͍ʁʣ
12. ESLint
13. ESLint ‣ IUUQTFTMJOUPSH
    
    ‣ ੩తղੳ
    
    ίʔυϑΥʔϚολ
    ‣ ΤσΟλͰϦΞϧλΠϜνΣοΫ͠ͳ͕ΒίʔσΟϯάͰ͖Δ
    ‣ ϓϦηοτ͓͚͋ͯͯ͹Α͍
    ‣ IUUQTXXXOQNKTDPNQBDLBHFFTMJOUDPOpHHPPHMF
    ‣ IUUQTXXXOQNKTDPNQBDLBHFFTMJOUDPOpHBJSCOC
    
14. Prettier
15. Prettier ‣ IUUQTHJUIVCDPNQSFUUJFSQSFUUJFS
    
    ‣ ίʔυϑΥʔϚολ
    ‣ &4-JOUΑΓڧྗͳ੔ܗ͕Ͱ͖Δ
    ‣ ΤσΟλͷΦʔτηʔϒͱ߹ΘͤΕ͹͖Ε͍ͳίʔυ͕ॻ͚Δ
16. テストを書きたい
17. 品質を担保したい ‣ ಈ࡞Λ͔֬Ίͳ͕Β࡞Δ
    ‣ ϢχοτςετΛॻ͍ͯখ͘͞࡞Δ
    ‣ ษڧத͸ϏοΫόϯతʹ࡞ͬͯಈ͔ͳ͍ͱ͓ख্͛ʹͳΔ
    ‣ ۀ຿Ͱ࢖͏ͱ͖͸ςετίʔυΛॻ͘ೳྗ΋ඞਢ
    ‣ ςετ͕ແ͍ίʔυ͸ϨΨγʔίʔυ
18. Jest
19. Jest ‣ IUUQTKFTUKTJP
    
    ‣ ϢχοτςετϑϨʔϜϫʔΫɻDSFBUFSFBDUBQQʹ΋ඪ४Ͱؚ·Ε͍ͯΔ
    ‣ &O[ZNF͔ͭ͏ͱςετதͷ%0.૸ࠪ΋ϥΫ
    ‣ %4-͕STQFDʹࣅ͍ͯΔ
    ‣ σʔλۦಈςετ ςʔϒϧۦಈςετ ͕Մೳ
    ‣ ϗοτϦϩʔυ͢ΔͷͰςετۦಈ։ൃʹ΋޲͍͍ͯΔ
    ‣ εφοϓγϣοτͰϦάϨογϣϯςετ΋Ͱ͖Δ
20. 単体テスト &Y
    1SPQΛ༩͑ͯࢦఆͨ͠DMBTTͷϑΟʔϧυ͕มΘΔ͔
21. スナップショットテスト ֎؍ %0. ͷϦάϨογϣϯςετ
22. ホットリロード ࣮ߦͤͨ͞··ίʔσΟϯά͢Ε͹
    ͦͷ··ϗοͱϦϩʔυͯࣗ͠ಈςετͯ͘͠ΕΔ
23. Storybook
24. Storybook ‣ IUUQTTUPSZCPPLKTPSH
    
    ‣ ίϯϙʔωϯτͷΧλϩά
    ‣ Χλϩά্ͰQSPQTΛมԽͤͯ͞ಈ࡞֬ೝ
    ‣ σόΠε͝ͱͷ6*Λ֬ೝ
    ‣ (JU)VC
    1BHFTͳͲͰ഑৴ɾڞ༗Մೳ
    ‣ +FTUͱ࿈ܞͨ͠εφοϓγϣοτςετ
25. コンポーネントカタログ ύʔπ͝ͱʹ࣮ࡍʹಈ͔ͤΔ
    1SPQTΛಈతʹ༩͑Δ͜ͱ΋Ͱ͖Δ
26. デプロイしてみたい
27. できた！！けど… ‣ Ұ௨Γಈ͘΋ͷΛ࡞ͬͨʂ
    ‣ MPDBMIPTUͷ··͸ͪΐͬͱ൵͍͠
    ‣ αʔό༻ҙͯ͠σϓϩΠύΠϓϥΠϯ࡞Δ·Ͱͷݩؾ͸ͳ͍
28. Netlify
29. Netlify ‣ IUUQTXXXOFUMJGZDPN
    
    ‣ (JUϦϙδτϦΛొ࿥͢Δ͚ͩͰ੩తαΠτΛϗεςΟϯά͕Ͱ͖Δ
    ‣ QBDLBHFKTPOͳͲΛݟ͍͍ͯײ͡ͷϏϧυ΋ͯ͘͠ΕΔ
    ‣ "84
    -BNCEBϕʔεͷόοΫΤϯυॲཧ΋ར༻Մೳ
    ‣ ਖ਼௚ͳΜͰແྉͳͷ͔Θ͔Βͳ͍
30. 選択 ϦϙδτϦΛࢦఆ͢Δ
31. 設定 Ϗϧυ͢ΔϒϥϯνɺϏϧυίϚϯυΛࢦఆ͢Δ
    ʢมͳ͜ͱͯ͠ͳ͚Ε͹ͦͷ··ͰΑ͍ʣ
32. 公開 ϒϥϯνߋ৽࣌ʹࣗಈ࠶σϓϩΠͰ͖Δ
    4MBDLɾϝʔϧ௨஌ͳͲ΋
33. 今日のゴール ‣ 3FBDU3FEVYͱ߹Θͤͯ࢖͑ΔπʔϧΛ஌Δ
    ‣ 7VF"OHVMBSͰ΋࢖͑Δʢ͸ͣʣ
    ‣ ͳͥͦͷπʔϧΛ࢖͏ͷ͔஌Δ
34. まとめ ‣ ಠֶͰ΋ΫϦʔϯͳίʔυΛॻ͘
    ‣ 'MPX 5ZQF4DSJQU
    
    &4-JOU
    
    1SFUUJFS
    ‣ ಠֶͰ΋ςετΛॻ͘श׳Λ͚ͭΔ
    ‣ +FTU
    
    FO[ZNF
    
    4UPSZCPPL
    ‣ ͔ͤͬ͘࡞ͬͨ΋ͷ͸ެ։ͯ͠ΈΔ
    ‣ /FUMJGZ
35. まとめ ‣ खݩͰಈ͔ͯ͠Έ͍ͨํ
    ‣ IUUQTHJUIVCDPNCVEPVHVNJXFNSFBDUTBNQMF
    
    ‣ ࣗ෼ͷϦϙδτϦͰࢼͯ͠Έ͍ͨํ
    ‣ ্هϦϙδτϦͷ3&"%.&ʹಋೖखॱ΁ͷϦϯΫ͕͋Γ·͢