ReactとTypescript製Webアプリ作成で得た知見を共有したい

by Nokogiri

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Java / JavaScript / AWS / Vim / Ϛωδϝϯτ ͸͡Ί·ͯ͠! Taiki Nishi @nkgrnkgr Nokogiri Blog Home WebΞϓϦέʔγϣϯΤϯδχΞ ๏ਓ޲͚άϧʔϓ΢ΣΞαʔϏεͷ։ൃ Nokogiri(@nkgrnkgr) Speaker Deck

Slide 3

Slide 3 text

React࢖ͬͨ͜ͱ͋Γ·͔͢ʁ

Slide 4

Slide 4 text

Typescript࢖ͬͨ͜ͱ͋Γ·͔͢ʁ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

ΞδΣϯμ ࡞ͬͨΞϓϦέʔγϣϯͷ঺հ σʔλߏ଄ͱAPIઃܭ ϞδϡʔϧͷσΟϨΫτϦߏ੒ ωετͷਂ͍ State ͷߋ৽ CSS͸ͳΔ΂͘ॻ͖ͨ͘ͳ͍ Typescriptಋೖ ύϑΥʔϚϯενϡʔχϯά ͦͷଞΑ͋͘Δબ୒ࢶ͸Ͳ͏͔ͨ͠ʁ (͓·͚)VSCodeͱChromeʹΑΔσόοά

Slide 8

Slide 8 text

ExpensesAutomation ࡞ͬͨΞϓϦέʔγϣϯͷ঺հ 1

Slide 9

Slide 9 text

Google Caledar ʹొ࿥ͨ͠༧ఆ͔Βަ௨අΛܭࢉ͠ܦඅਫ਼ࢉ༻ʹϑ ΥʔϚοτͨ͠CSVΛग़ྗ͢ΔΞϓϦέʔγϣϯ expenses-automation Github

Slide 10

Slide 10 text

࣮ԋ

Slide 11

Slide 11 text

σʔλߏ଄ͱAPIઃܭ 2

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ωετͷਂ͍ State ͷߋ৽ 4

Slide 16

Slide 16 text

ωετͷਂ͍ State ͷߋ৽ • State ͷ͏ͪߋ৽͍ͨ͠ͷ͸ ݄ʼ೔ʼϨίʔυʼҠಈ৘ใ(from,to)ʼӺ໊ • ReactͷsetState͸State͕࣋ͭୈҰ֊૚ͷΦϒδΣΫτͷߋ৽͔͠Ͱ͖ͳ͍ • ”n”೔ͷ”m”൪໨ͷϨίʔυͷ “to” ͷ ”Ӻ໊” Λมߋ͢Δ৔߹ʹɺ݄ຖͷStateͷ ߋ৽͕ඞཁ Stateͷ݄৘ใΛίϐʔͯ͠Ұ෦Λߋ৽͠ ݄৘ใຖ্ॻ͖͢Δͱ͍͏Ξϓϩʔν͕ඞཁ

Slide 17

Slide 17 text

ωετͷਂ͍ State ͷߋ৽ https://facebook.github.io/immutable-js/ Ҿ਺ʹ഑ྻͰkey or index Λ౉͢͜ͱͰਂ͍ωετͷߋ৽͕Մೳ • Imuutable.js͸ෆมσʔλߏ଄Λѻ͏Facebook੡ͷϥΠϒϥϦ • Immutable.js ͷ updateIn ؔ਺Λར༻ͯ͠ωετͷਂ͍ΦϒδΣΫτͷ৘ใߋ ৽Λߦ͏

Slide 18

Slide 18 text

CSS͸ͳΔ΂͘ॻ͖ͨ͘ͳ͍ 5

Slide 19

Slide 19 text

CSS͸ͳΔ΂͘ॻ͖ͨ͘ͳ͍ • ࣾ಺޲͚ͳͷͰσβΠϯʹڽΔඞཁ͸ͳ͍ • 0͔Βࣗ෼Ͱॻ͘ͷ͸͕͢͞ʹͭΒ͍ • બ୒͠ͱͯ͠͸ҎԼ̎ͭΛݕ౼ 1. MaterialUI ͳͲͷ ReactComponentϥΠϒϥϦ 2. BootStrap ͳͲͷ CSSϑϨʔϜϫʔΫ ReactComponent … ݸਓతʹ͸CSSϑϨʔϜϫʔΫΑΓ͸ֶश ίετ͕ߴ͍ɻܕఆ͕ٛͳ͍ϥΠϒϥϦ͸࢖͑ͳ͍ CSSϑϨʔϜϫʔΫ … αΠυόʔͷ։ดͱ͔JS͕ඞཁͳΠϯλ ϥΫγϣϯ͸ͳ͍ͷͰࣗ࡞͢Δඞཁ͋Γ ࠓճ͸CSSϑϨʔϜϫʔΫͰʂ

Slide 20

Slide 20 text

CSS͸ͳΔ΂͘ॻ͖ͨ͘ͳ͍ https://bulma.io/ • Flexbox ϕʔεͷCSSϑϨʔϜϫʔΫ • JSͳ͠Ͱಈ͖ɺ࢖͍ํ͕؆୯Ͱֶशίετ͕௿͍ • ͦΕͳΓͷݟͨ໨Λ࠷୹Ͱ࡞Δͱ͍͏໨తʹ߹க • ΞΠίϯ͸FontAwesomeʢbulmaͰ΋ਪ঑ʣ ՄೳͳݶΓBulma ͷඪ४ΫϥεΛ࢖͍ɺ marginͱ͔paddingͱ͔Ξχϝʔγϣϯ͚ͩࣗ࡞͢ΔΑ͏ʹͨ͠

Slide 21

Slide 21 text

Typescriptಋೖ 6

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

ύϑΥʔϚϯενϡʔχϯά 7

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

(͓·͚) VSCodeͱChromeʹΑΔ σόοά 9

Slide 31

Slide 31 text

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