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

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

Eb6be531bcfaa99714d8d3b48665a5a9?s=128

Yoichiro Shimizu

November 09, 2018
Tweet

Transcript

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

  2. 自己紹介 ‣ ਗ਼ਫཅҰ࿠!CVEPVHVNJ ‣  ‣ #BDLFOE%FTLUPQ"QQFOHJOFFS ‣ (P3VCZPO3BJMT/&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. 単体テスト &Y1SPQΛ༩͑ͯࢦఆͨ͠DMBTTͷϑΟʔϧυ͕มΘΔ͔

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

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

  23. Storybook

  24. Storybook ‣ IUUQTTUPSZCPPLKTPSH ‣ ίϯϙʔωϯτͷΧλϩά ‣ Χλϩά্ͰQSPQTΛมԽͤͯ͞ಈ࡞֬ೝ ‣ σόΠε͝ͱͷ6*Λ֬ೝ ‣

    (JU)VC1BHFTͳͲͰ഑৴ɾڞ༗Մೳ ‣ +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&"%.&ʹಋೖखॱ΁ͷϦϯΫ͕͋Γ·͢