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ΤϯδχΞษڧձ
   :PJDIJSP4IJNJ[V!CVEPVHVNJ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. Flow
    

    View Slide

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

    View Slide

12. ESLint
    

    View Slide

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

    View Slide

14. Prettier
    

    View Slide

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

    View Slide

16. テストを書きたい
    

    View Slide

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

    View Slide

18. Jest
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. Storybook
    

    View Slide

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

    View Slide

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

    View Slide

26. デプロイしてみたい
    

    View Slide

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

    View Slide

28. Netlify
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide