ReactとTypescript製Webアプリ作成で得た知見を共有したい

391ed5f8562a797f010ec510b65075d7?s=47 Nokogiri
October 25, 2018

 ReactとTypescript製Webアプリ作成で得た知見を共有したい

作ったアプリケーションの紹介
データ構造とAPI設計
モジュールのディレクトリ構成
ネストの深い State の更新
CSSはなるべく書きたくない
Typescript導入
パフォーマンスチューニング
その他よくある選択肢はどうしたか?
(おまけ)VSCodeとChromeによるデバッグ

391ed5f8562a797f010ec510b65075d7?s=128

Nokogiri

October 25, 2018
Tweet

Transcript

  1. React / Typescirpt੡ WebΞϓϦ࡞੒Ͱಘͨ ஌ݟΛڞ༗͍ͨ͠

  2. Java / JavaScript / AWS / Vim / Ϛωδϝϯτ ͸͡Ί·ͯ͠!

    Taiki Nishi @nkgrnkgr Nokogiri Blog Home WebΞϓϦέʔγϣϯΤϯδχΞ ๏ਓ޲͚άϧʔϓ΢ΣΞαʔϏεͷ։ൃ Nokogiri(@nkgrnkgr) Speaker Deck
  3. React࢖ͬͨ͜ͱ͋Γ·͔͢ʁ

  4. Typescript࢖ͬͨ͜ͱ͋Γ·͔͢ʁ

  5. ϓϥΠϕʔτͰReact/TypescriptΞϓϦΛ࡞੒ͨ͠ͷͰ ϋϚͬͨ͜ͱ΍Կʹ೰ΜͰͲ͏ղܾ͍͔ͯͬͨ͠Λ ൃද͍ͨ͠ͱࢥ͍·͢ ຊ೔࿩͢͜ͱ

  6. ຊ೔ͷ໨ඪ React ݰਓͷํ͔ΒϚαΧϦ(ॿݴ)Λ௖͖஌ݟΛಘΔ͜ͱ React ϏΪφʔͷํͷͨΊͷਓபʹͳΔ͜ͱ

  7. ΞδΣϯμ ࡞ͬͨΞϓϦέʔγϣϯͷ঺հ σʔλߏ଄ͱAPIઃܭ ϞδϡʔϧͷσΟϨΫτϦߏ੒ ωετͷਂ͍ State ͷߋ৽ CSS͸ͳΔ΂͘ॻ͖ͨ͘ͳ͍ Typescriptಋೖ ύϑΥʔϚϯενϡʔχϯά

    ͦͷଞΑ͋͘Δબ୒ࢶ͸Ͳ͏͔ͨ͠ʁ (͓·͚)VSCodeͱChromeʹΑΔσόοά
  8. ExpensesAutomation ࡞ͬͨΞϓϦέʔγϣϯͷ঺հ 1

  9. Google Caledar ʹొ࿥ͨ͠༧ఆ͔Βަ௨අΛܭࢉ͠ܦඅਫ਼ࢉ༻ʹϑ ΥʔϚοτͨ͠CSVΛग़ྗ͢ΔΞϓϦέʔγϣϯ expenses-automation Github

  10. ࣮ԋ

  11. σʔλߏ଄ͱAPIઃܭ 2

  12. σʔλߏ଄ͱAPIઃܭ ݄ຖͷσʔλͷߏ଄ records ͷ1ߦ • ݄ຖͷσʔλΛαʔόʔ͔ΒFetch͠·͢ • React ͷ MainͷStateʹͦͷ··ಥͬࠐΜͰ͍·͢

  13. ϞδϡʔϧͷσΟϨΫτϦߏ੒ 3

  14. ϞδϡʔϧͷσΟϨΫτϦߏ੒ • components … React ίϯϙʔωϯτ • logic … ۀ຿ϩδοΫ

    • api…αʔόʔ௨৴༻ ྫ) fetchOauthUrl, fetchRecordsͳͲ • domain…σʔλΫϥε(PropsͷIF) RecordsForMonth, PathͳͲ ɹɹɹClassͰ͸ͳ͘ओʹTypescriptͷInterface͕ೖ͍ͬͯ·͢ɻ • service…State಺ͷRecordͷ௥Ճɾߋ৽ɾ࡟আؔ਺Λ΋ͭΫϥε • util…ڞ௨ܥ ೔෇ͷॲཧͱ͔ • ίϯϙʔωϯτͱϏδωεϩδοΫ͸෼཭͍ͨ͠ • ϏδωεϩδοΫ෦෼͸SpringBoot Λࢀߟʹ͍ͯ͠Δ
  15. ωετͷਂ͍ State ͷߋ৽ 4

  16. ωετͷਂ͍ State ͷߋ৽ • State ͷ͏ͪߋ৽͍ͨ͠ͷ͸ ݄ʼ೔ʼϨίʔυʼҠಈ৘ใ(from,to)ʼӺ໊ • ReactͷsetState͸State͕࣋ͭୈҰ֊૚ͷΦϒδΣΫτͷߋ৽͔͠Ͱ͖ͳ͍ •

    ”n”೔ͷ”m”൪໨ͷϨίʔυͷ “to” ͷ ”Ӻ໊” Λมߋ͢Δ৔߹ʹɺ݄ຖͷStateͷ ߋ৽͕ඞཁ Stateͷ݄৘ใΛίϐʔͯ͠Ұ෦Λߋ৽͠ ݄৘ใຖ্ॻ͖͢Δͱ͍͏Ξϓϩʔν͕ඞཁ
  17. ωετͷਂ͍ State ͷߋ৽ https://facebook.github.io/immutable-js/ Ҿ਺ʹ഑ྻͰkey or index Λ౉͢͜ͱͰਂ͍ωετͷߋ৽͕Մೳ • Imuutable.js͸ෆมσʔλߏ଄Λѻ͏Facebook੡ͷϥΠϒϥϦ

    • Immutable.js ͷ updateIn ؔ਺Λར༻ͯ͠ωετͷਂ͍ΦϒδΣΫτͷ৘ใߋ ৽Λߦ͏
  18. CSS͸ͳΔ΂͘ॻ͖ͨ͘ͳ͍ 5

  19. CSS͸ͳΔ΂͘ॻ͖ͨ͘ͳ͍ • ࣾ಺޲͚ͳͷͰσβΠϯʹڽΔඞཁ͸ͳ͍ • 0͔Βࣗ෼Ͱॻ͘ͷ͸͕͢͞ʹͭΒ͍ • બ୒͠ͱͯ͠͸ҎԼ̎ͭΛݕ౼ 1. MaterialUI ͳͲͷ

    ReactComponentϥΠϒϥϦ 2. BootStrap ͳͲͷ CSSϑϨʔϜϫʔΫ ReactComponent … ݸਓతʹ͸CSSϑϨʔϜϫʔΫΑΓ͸ֶश ίετ͕ߴ͍ɻܕఆ͕ٛͳ͍ϥΠϒϥϦ͸࢖͑ͳ͍ CSSϑϨʔϜϫʔΫ … αΠυόʔͷ։ดͱ͔JS͕ඞཁͳΠϯλ ϥΫγϣϯ͸ͳ͍ͷͰࣗ࡞͢Δඞཁ͋Γ ࠓճ͸CSSϑϨʔϜϫʔΫͰʂ
  20. CSS͸ͳΔ΂͘ॻ͖ͨ͘ͳ͍ https://bulma.io/ • Flexbox ϕʔεͷCSSϑϨʔϜϫʔΫ • JSͳ͠Ͱಈ͖ɺ࢖͍ํ͕؆୯Ͱֶशίετ͕௿͍ • ͦΕͳΓͷݟͨ໨Λ࠷୹Ͱ࡞Δͱ͍͏໨తʹ߹க •

    ΞΠίϯ͸FontAwesomeʢbulmaͰ΋ਪ঑ʣ ՄೳͳݶΓBulma ͷඪ४ΫϥεΛ࢖͍ɺ marginͱ͔paddingͱ͔Ξχϝʔγϣϯ͚ͩࣗ࡞͢ΔΑ͏ʹͨ͠
  21. Typescriptಋೖ 6

  22. ɾҰൠతʹ͸ܕఆٛͰ҆શ҆৺͕ͩɺ։ൃεϐʔυ͕མͪΔͱฉ͕͘ɺ ɹࠓճ͘Β͍ͷ։ൃن໛ʢෳࡶ͞΍ਓ਺ʣͩͱܕ҆શͷԸܙ͸ײ͡ͳ͍ ɹͨͩ͠ɺInterfaceఆٛʹΑΔVSCodeͷೖྗิ׬ͷԸܙ͸͍͢͝ɻ ɹͲ͏ͤPropsTypeͰܕνΣοΫΛ͢ΔͷͰखؒ͸มΘΒͳ͍͸ͣɻ ɹ࢖͑ΔͳΒTypescript ࢖ͬͨํ͕͍͍☺ ɾܕఆ͕ٛͳ͍ϥΠϒϥϦΛ࢖͏ͱ͖͸ࣗ෼Ͱ༻ҙ͢Δඞཁ͕͋Δ ɹͦ͏͍͏ҙຯͰ͸طଘͷϓϩδΣΫτʹ͸ೖΕʹ͍͔͘΋͠Εͳ͍͠ ɹࣗવͱܕఆٛͷ͋ΔϥΠϒϥϦΛબͼ͕ͪ ಋೖͯ͠Έͯ

    Typescriptಋೖ
  23. ύϑΥʔϚϯενϡʔχϯά 7

  24. ɾ৘ใྔʹൺྫͯ͠ೖྗ͕ΧΫͭ͘Α͏ʹͳΔ ɹ࠷ऴతʹ1จࣈຖʹ4ඵ͔͔ΔΑ͏ʹͳΔ… ɾStateͰߋ৽͢Δσʔλྔ͕ଟ͗͢Δͷ͔ʁ ɹͱࢥ͍Twitterʹ์ྲྀͯ͠ΈͨΒ… ೖྗ࣌ͷඳը஗Ԇ ύϑΥʔϚϯενϡʔχϯά

  25. ͙͢ʹϑΥϩΞʔ͞Μ͔Βίϯϙʔω ϯτͷ࠶ϨϯμϦϯά͕ݪҼͰ͸ͳ͍ ͔ʁͱͷࢦఠ͕ʂ Twitter͍ͬͯ͢͝ʂ·͡ײँ ύϑΥʔϚϯενϡʔχϯά Ͱ͸Ͳͷίϯϙʔωϯτͷ࠶ϨϯμϦϯάʹ͕͔͔͍࣌ؒͬͯΔͷ͔Λ୳͢ɻ Ͳ͏΍ͬͯʁ

  26. ReactDevToolsͷProfiler … Chrome ֦ு ύϑΥʔϚϯενϡʔχϯά ίϯϙʔωϯτͷඳըʹ͔͔͕ͬͨ࣌ؒදࣔ͞ΕΔ

  27. ύϑΥʔϚϯενϡʔχϯά Stateͷߋ৽࣌ʹલޙͷ஋ʹҧ͍͕ͳ͍৔߹Ͱ΋ɺStateͱPropsΛ΋ͭ΄΅શͯ ͷίϯϙʔωϯτ͕࠶ඳը͞Ε͍ͯΔɻ →React.shouldComponentUpdate(): boolean Λ͔ͭͬͯ࠶ඳըΛ੍ޚ͢Δ ɹࠓճ͸Props, StateΛ΋ͭશͯͷίϯϙʔωϯτ͕BaseComponentΛ ɹܧঝ͢ΔΑ͏ʹͨ͠

  28. ͦͷଞΑ͋͘Δબ୒ࢶ͸Ͳ͏͔ͨ͠ʁ 8

  29. ౰ॳʣΞϓϦࣗମ͕খ͘͞PropsόέπϦϨʔ͸ۤʹͳΒͳ͍ͱ൑அ ݱࡏʣখͯ͘͞΋όέπϦϨʔ͸͋ΔͷͰ΍ͬͺΓೖΕ͓͚ͯ͹ྑ͔ͬͨ Redux … ࠓճ͸ಋೖͳ͠ ͦͷଞΑ͋͘Δબ୒ࢶ͸Ͳ͏͔ͨ͠ʁ ࠷ॳ͸State͸ϝΠϯ͚ͩʹ΋ͨͤΔઃܭ͕ͩͬͨɺϝΠϯͰ؅ཧ͢΂͖Ͱͳ͍ StateΛ֤ίϯϙʔωϯτ΍ͦͷ਌ʹ࣋ͨͤΔ͜ͱʹͳͬͨͷͰɺ௨ৗͷClass ΋ར༻͍ͯ͠Δɻ ·ͨFunctionalComponentΛ࢖͏͚ͩͰ͸ɺෆཁͳ࠶ϨϯμϦϯάͷ໰୊΋ղ

    ܾ͠ͳ͍ɻshouldComponentUpdate͕࣮૷͞Ε͍ͯͳ͍ͷͰ recompose ͱ͍ ͬͨผϥΠϒϥϦ͕ඞཁʹͳΔɻͱ͍͏ͷͰΊΜͲ͘͘͞ͳͬͨɻ FunctionalComponent … 4UBUF͕ͳ͍΋ͷ͚͔ͩͭͬͨ
  30. (͓·͚) VSCodeͱChromeʹΑΔ σόοά 9

  31. VSCode֦ுΛ࢖ͬͯReactΞϓϦΛσόοά͢Δ ͓·͚ launch.json Debugger for Chrome ReactΞϓϦىಈ

  32. ࣮ԋ

  33. Thanks! https://github.com/nkgrnkgr/expenses-automation