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

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

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