React/TypeScriptアプリの 作成で得た知見を共有ししつつ、 有識者にマサカリでズタズタにされたい

プライベートでReact/TypeScriptアプリを作成したのでハマったことや何に悩んでどう解決していったか

関連リンク

expenses-automation
https://expenses-automation-app.firebaseapp.com

https://github.com/nkgrnkgr
https://twitter.com/nkgrnkgr
https://nkgrnkgr.github.io

Transcript

1. ϓϥΠϕʔτͰ3FBDU5ZQF4DSJQUΞϓϦΛ ࡞ͬͯಘͨ஌ݟΛڞ༗ͭͭ͠͠ɺ
   ༗ࣝऀʹϚαΧϦͰɹɹɹɹʹ͞Ε͍ͨ ζλζλ
2. Java / JavaScript / AWS / Vim / Ϛωδϝϯτ ͸͡Ί·ͯ͠! Taiki Nishi @nkgrnkgr nkgrnkgr WebΞϓϦέʔγϣϯΤϯδχΞ ๏ਓ޲͚άϧʔϓ΢ΣΞαʔϏεͷ։ൃ Nokogiri(@nkgrnkgr)
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
10. ࣮ԋ
11. σʔλߏ଄ͱAPIઃܭ 2
12. σʔλߏ଄ͱAPIઃܭ ݄୯Ґ ೔୯Ґ Ҡಈ৘ใ & ܦඅ৘ใ Ϩίʔυ ࠓճͷ༻్Ͱ͸ίϯϙʔωϯτͱσʔλߏ଄͸΄΅ಉ͡ߏ੒ αʔόʔ͔Β͸݄୯ҐͷσʔλΛfetch͠ɺStateʹͦͷ··ಥͬࠐΉ
13. σʔλߏ଄ͱAPIઃܭ ݄୯Ґ ೔୯Ґ Ҡಈ৘ใ & ܦඅ৘ใ Ϩίʔυ ࠓճͷ༻్Ͱ͸ίϯϙʔωϯτͱσʔλߏ଄͸΄΅ಉ͡ߏ੒ αʔόʔ͔Β͸݄୯ҐͷσʔλΛfetch͠ɺStateʹͦͷ··ಥͬࠐΉ StateͰ؅ཧ͢Δ࠷খ୯Ґ
14. ϞδϡʔϧͷσΟϨΫτϦߏ੒ 3
15. ϞδϡʔϧͷσΟϨΫτϦߏ੒ • ίϯϙʔωϯτͱϏδωεϩδοΫ͸෼཭͍ͨ͠ • StateΛDBͱݟཱͯͯαʔόʔαΠυͷMVCͬΆ͍ߏ੒ʹ(SpringBoot෩) • components … ίϯϙʔωϯτ • logic … ۀ຿ϩδοΫ • api…APαʔόʔ௨৴ • domain…StateͰ؅ཧ͢ΔσʔλͷܕΛද͢Interface܈ • service…Stateͷ௥Ճɾߋ৽ɾ࡟আ༻ͷσʔλ࡞੒ • type… StateҎ֎ͷTypeScriptͷܕఆٛ • util…ڞ௨ܥ ೔෇ͷॲཧͱ͔
16. ϞδϡʔϧͷσΟϨΫτϦߏ੒ • αϯϓϧίʔυ1 domainͷ࢖͍Ͳ͜Ζ domain/transit.tsɹ component/TransitView.tsx
17. ϞδϡʔϧͷσΟϨΫτϦߏ੒ • αϯϓϧίʔυ2 serviceͷ࢖͍Ͳ͜Ζ component/Main.tsx service/RecordsForMonthService
18. ωετͷਂ͍ State ͷߋ৽ 4
19. ωετͷਂ͍ State ͷߋ৽ ݄୯Ґ ೔୯Ґ Ҡಈ৘ใ & ܦඅ৘ใ Ϩίʔυ ߋ৽ର৅
20. ωετͷਂ͍ State ͷߋ৽ • ReactͷsetState͸State͕࣋ͭୈҰ֊૚ͷΦϒδΣΫτͷߋ৽͔͠Ͱ͖ͳ͍ • ”Ӻ໊” Λมߋ͢Δ৔߹Ͱ΋݄ຖͷStateͷߋ৽͕ඞཁ Stateͷ݄৘ใΛίϐʔͯ͠Ұ෦Λߋ৽͠ ݄৘ใຖ্ॻ͖͢Δͱ͍͏Ξϓϩʔν͕ඞཁ ݄୯Ґ ೔୯Ґ Ҡಈ৘ใ & ܦඅ৘ใ Ϩίʔυ ߋ৽ର৅
21. ωετͷਂ͍ State ͷߋ৽ https://facebook.github.io/immutable-js/ Ҿ਺ʹ഑ྻͰkey or index Λ౉͢͜ͱͰਂ͍ωετͷߋ৽͕Մೳ • Imuutable.js͸ෆมσʔλߏ଄Λѻ͏Facebook੡ͷϥΠϒϥϦ • Immutable.js ͷ updateIn ؔ਺Λར༻ͯ͠ωετͷਂ͍ΦϒδΣΫτͷ৘ใߋ ৽Λߦ͏
22. CSS͸ͳΔ΂͘ॻ͖ͨ͘ͳ͍ 5
23. CSS͸ͳΔ΂͘ॻ͖ͨ͘ͳ͍ • ࣾ಺޲͚ͳͷͰσβΠϯʹڽΔඞཁ͸ͳ͍ • 0͔Βࣗ෼Ͱॻ͘ͷ͸͕͢͞ʹͭΒ͍ • બ୒͠ͱͯ͠͸ҎԼ̎ͭΛݕ౼ 1. MaterialUI ͳͲͷ ReactComponentϥΠϒϥϦ 2. BootStrap ͳͲͷ CSSϑϨʔϜϫʔΫ ReactComponent … ݸਓతʹ͸CSSϑϨʔϜϫʔΫΑΓ͸ֶश ίετ͕ߴ͍ɻܕఆ͕ٛͳ͍ϥΠϒϥϦ͸࢖͑ͳ͍ CSSϑϨʔϜϫʔΫ … αΠυόʔͷ։ดͱ͔JS͕ඞཁͳΠϯλ ϥΫγϣϯ͸ͳ͍ͷͰࣗ࡞͢Δඞཁ͋Γ ࠓճ͸CSSϑϨʔϜϫʔΫͰʂ
24. CSS͸ͳΔ΂͘ॻ͖ͨ͘ͳ͍ https://bulma.io/ • Flexbox ϕʔεͷCSSϑϨʔϜϫʔΫ • JSͳ͠Ͱಈ͖ɺ࢖͍ํ͕؆୯Ͱֶशίετ͕௿͍ • ͦΕͳΓͷݟͨ໨Λ࠷୹Ͱ࡞Δͱ͍͏໨తʹ߹க • ΞΠίϯ͸FontAwesomeʢਪ঑ʣ ՄೳͳݶΓBulma ͷඪ४ΫϥεΛ࢖͍ɺ marginͱ͔paddingͱ͔Ξχϝʔγϣϯ͚ͩࣗ࡞͢ΔΑ͏ʹͨ͠
25. TypeScriptಋೖ 6
26. ɾࠓճ͘Β͍ͷ։ൃن໛ʢෳࡶ͞΍ਓ਺ʣͩͱܕ҆શͷԸܙ͸ײ͡ͳ͍ ɹͨͩ͠ɺInterfaceఆٛʹΑΔVSCodeͷೖྗิ׬ͷԸܙ͸͍͢͝ɻ ɹͲ͏ͤPropsTypeͰܕνΣοΫΛ͢ΔͷͰखؒ͸มΘΒͳ͍͸ͣɻ ɹ࢖͑ΔͳΒTypescript ࢖ͬͨํ͕͍͍☺ ɾܕఆ͕ٛͳ͍ϥΠϒϥϦΛ࢖͏ͱ͖͸ࣗ෼Ͱ༻ҙ͢Δඞཁ͕͋Δ ɹͦ͏͍͏ҙຯͰ͸طଘͷϓϩδΣΫτʹ͸ೖΕʹ͍͔͘΋͠Εͳ͍͠ ɹࣗવͱܕఆٛͷ͋ΔϥΠϒϥϦΛબͼ͕ͪ ಋೖͯ͠Έͯ TypeScriptಋೖ
27. αϯϓϧ1 service/RecordsForMonthService.ts [֓ཁ] StateΛUpdate͢ΔͨΊͷRecordsͷੜ੒ TypeScriptಋೖ ɾҾ਺΍໭Γ஋͕ԿΛظ଴͍ͯ͠Δ͔Ұ໨ྎવ ɾม਺໊͸୹ͯ͘΋ Interface ΍ Type ͕ఆٛ͞Ε͍ͯΔͷͰΘ͔Γ΍͍͢
28. αϯϓϧ2 api/BizServer.ts [֓ཁ] APIαʔόʔͱͷ௨৴ axios ϕʔεͷPromiseΛฦ٫ TypeScriptಋೖ
29. ύϑΥʔϚϯενϡʔχϯά 7
30. ɾ৘ใྔʹൺྫͯ͠ೖྗ͕ΧΫͭ͘Α͏ʹͳΔ ɹ࠷ऴతʹ1จࣈຖʹ4ඵ͔͔ΔΑ͏ʹͳΔ… ɾStateͰߋ৽͢Δσʔλྔ͕ଟ͗͢Δͷ͔ʁ ɹͱࢥ͍Twitterʹ์ྲྀͯ͠ΈͨΒ… ೖྗ࣌ͷඳը஗Ԇ ύϑΥʔϚϯενϡʔχϯά
31. ͙͢ʹϑΥϩΞʔ͞Μ͔Βίϯϙʔω ϯτͷ࠶ϨϯμϦϯά͕ݪҼͰ͸ͳ͍ ͔ʁͱͷࢦఠ͕ʂ Twitter͍ͬͯ͢͝ʂ·͡ײँ ύϑΥʔϚϯενϡʔχϯά Ͱ͸Ͳͷίϯϙʔωϯτͷ࠶ϨϯμϦϯάʹ͕͔͔͍࣌ؒͬͯΔͷ͔Λ୳͢ɻ Ͳ͏΍ͬͯʁ
32. ReactDevToolsͷProfiler … Chrome ֦ு ύϑΥʔϚϯενϡʔχϯά ίϯϙʔωϯτͷඳըʹ͔͔͕ͬͨ࣌ؒදࣔ͞ΕΔ ຖճɺඳը͕஗͍ίϯϙʔωϯτ͕ҧ͏ʂ ΋͔ͯ͠͠ɺStateͱProps౉͍ͯ͠Δίϯϙʔωϯτશ෦࠶ඳը͞ΕͯΔʁ
33. ύϑΥʔϚϯενϡʔχϯά ݄୯Ґ ೔୯Ґ Ҡಈ৘ใ & ܦඅ৘ใ Ϩίʔυ ίϯϙʔωϯτͷ࠷্Ґ͔ΒPropsΛόέπϦϨʔ ࢠͲ΋ͷPropsͷݩʹͳΔState͸ৗʹߋ৽͞Ε͍ͯΔ
34. ύϑΥʔϚϯενϡʔχϯά ݄୯Ґ ೔୯Ґ Ҡಈ৘ใ & ܦඅ৘ใ Ϩίʔυ ίϯϙʔωϯτͷ࠷্Ґ͔ΒPropsΛόέπϦϨʔ ࢠͲ΋ͷPropsͷݩʹͳΔState͸ৗʹߋ৽͞Ε͍ͯΔ ίϯϙʔωϯτ֊૚ StateͰ؅ཧ͢Δ࠷খ୯Ґ
35. ύϑΥʔϚϯενϡʔχϯά StateͱPropsͷ஋͕ߋ৽͞Εͳ͍৔߹͸ίϯϙʔωϯτΛߋ৽͠ͳ͍ →React.shouldComponentUpdate(): boolean Λ͔ͭͬͯ࠶ඳըΛ੍ޚ͢Δ ɹࠓճ͸Props, StateΛ΋ͭશͯͷίϯϙʔωϯτ͕BaseComponentΛ ɹܧঝ͢ΔΑ͏ʹ͠ղܾͨ͠ Ͳ͏΍ΒReact.ComponentΛܧঝͨࣗ͠࡞ComponentΛܧঝͤ͞Δͷ͸ ΞϯνύλʔϯΒ͍͠Ͱ͢ɻڧ͍ਓڭ͍͑ͯͩ͘͞
36. ͦͷଞΑ͋͘Δબ୒ࢶ͸Ͳ͏͔ͨ͠ʁ 8
37. ౰ॳʣΞϓϦࣗମ͕খ͘͞PropsόέπϦϨʔ͸ۤʹͳΒͳ͍ͱ൑அ ݱࡏʣখͯ͘͞΋όέπϦϨʔ͸͋ΔͷͰ΍ͬͺΓೖΕ͓͚ͯ͹ྑ͔ͬͨ Redux … ࠓճ͸ಋೖͳ͠ ͦͷଞΑ͋͘Δબ୒ࢶ͸Ͳ͏͔ͨ͠ʁ ࠷ॳ͸State͸ϝΠϯ͚ͩʹ΋ͨͤΔઃܭ͕ͩͬͨɺϝΠϯͰ؅ཧ͢΂͖Ͱͳ͍ StateΛ֤ίϯϙʔωϯτ΍ͦͷ਌ʹ࣋ͨͤΔ͜ͱʹͳͬͨͷͰɺ௨ৗͷClass ΋ར༻͍ͯ͠Δɻ ·ͨFunctionalComponentΛ࢖͏͚ͩͰ͸ɺෆཁͳ࠶ϨϯμϦϯάͷ໰୊΋ղ ܾ͠ͳ͍ɻshouldComponentUpdate͕࣮૷͞Ε͍ͯͳ͍ͷͰ recompose ͱ͍ ͬͨผϥΠϒϥϦ͕ඞཁʹͳΔɻͱ͍͏ͷͰΊΜͲ͘͘͞ͳͬͨɻ FunctionalComponent … 4UBUF͕ͳ͍΋ͷ͚͔ͩͭͬͨ
38. (͓·͚) VSCodeͱChromeʹΑΔ σόοά 9
39. VSCode֦ுΛ࢖ͬͯReactΞϓϦΛσόοά͢Δ ͓·͚ launch.json Debugger for Chrome ReactΞϓϦىಈ
40. ࣮ԋ
41. Thanks! https://github.com/nkgrnkgr/expenses-automation