React/TypeScriptアプリの作成で得た知見を共有ししつつ、有識者にマサカリでズタズタにされたい

by Nokogiri

Slide 1

Slide 1 text

ϓϥΠϕʔτͰ3FBDU5ZQF4DSJQUΞϓϦΛ ࡞ͬͯಘͨ஌ݟΛڞ༗ͭͭ͠͠ɺ ༗ࣝऀʹϚαΧϦͰɹɹɹɹʹ͞Ε͍ͨ ζλζλ

Slide 2

Slide 2 text

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

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

Slide 10

Slide 10 text

࣮ԋ

Slide 11

Slide 11 text

σʔλߏ଄ͱAPIઃܭ 2

Slide 12

Slide 12 text

σʔλߏ଄ͱAPIઃܭ ݄୯Ґ ೔୯Ґ Ҡಈ৘ใ & ܦඅ৘ใ Ϩίʔυ ࠓճͷ༻్Ͱ͸ίϯϙʔωϯτͱσʔλߏ଄͸΄΅ಉ͡ߏ੒ αʔόʔ͔Β͸݄୯ҐͷσʔλΛfetch͠ɺStateʹͦͷ··ಥͬࠐΉ

Slide 13

Slide 13 text

σʔλߏ଄ͱAPIઃܭ ݄୯Ґ ೔୯Ґ Ҡಈ৘ใ & ܦඅ৘ใ Ϩίʔυ ࠓճͷ༻్Ͱ͸ίϯϙʔωϯτͱσʔλߏ଄͸΄΅ಉ͡ߏ੒ αʔόʔ͔Β͸݄୯ҐͷσʔλΛfetch͠ɺStateʹͦͷ··ಥͬࠐΉ StateͰ؅ཧ͢Δ࠷খ୯Ґ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ϞδϡʔϧͷσΟϨΫτϦߏ੒ • ίϯϙʔωϯτͱϏδωεϩδοΫ͸෼཭͍ͨ͠ • StateΛDBͱݟཱͯͯαʔόʔαΠυͷMVCͬΆ͍ߏ੒ʹ(SpringBoot෩) • components … ίϯϙʔωϯτ • logic … ۀ຿ϩδοΫ • api…APαʔόʔ௨৴ • domain…StateͰ؅ཧ͢ΔσʔλͷܕΛද͢Interface܈ • service…Stateͷ௥Ճɾߋ৽ɾ࡟আ༻ͷσʔλ࡞੒ • type… StateҎ֎ͷTypeScriptͷܕఆٛ • util…ڞ௨ܥ ೔෇ͷॲཧͱ͔

Slide 16

Slide 16 text

ϞδϡʔϧͷσΟϨΫτϦߏ੒ • αϯϓϧίʔυ1 domainͷ࢖͍Ͳ͜Ζ domain/transit.tsɹ component/TransitView.tsx

Slide 17

Slide 17 text

ϞδϡʔϧͷσΟϨΫτϦߏ੒ • αϯϓϧίʔυ2 serviceͷ࢖͍Ͳ͜Ζ component/Main.tsx service/RecordsForMonthService

Slide 18

Slide 18 text

ωετͷਂ͍ State ͷߋ৽ 4

Slide 19

Slide 19 text

ωετͷਂ͍ State ͷߋ৽ ݄୯Ґ ೔୯Ґ Ҡಈ৘ใ & ܦඅ৘ใ Ϩίʔυ ߋ৽ର৅

Slide 20

Slide 20 text

ωετͷਂ͍ State ͷߋ৽ • ReactͷsetState͸State͕࣋ͭୈҰ֊૚ͷΦϒδΣΫτͷߋ৽͔͠Ͱ͖ͳ͍ • ”Ӻ໊” Λมߋ͢Δ৔߹Ͱ΋݄ຖͷStateͷߋ৽͕ඞཁ Stateͷ݄৘ใΛίϐʔͯ͠Ұ෦Λߋ৽͠ ݄৘ใຖ্ॻ͖͢Δͱ͍͏Ξϓϩʔν͕ඞཁ ݄୯Ґ ೔୯Ґ Ҡಈ৘ใ & ܦඅ৘ใ Ϩίʔυ ߋ৽ର৅

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

TypeScriptಋೖ 6

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

αϯϓϧ1 service/RecordsForMonthService.ts [֓ཁ] StateΛUpdate͢ΔͨΊͷRecordsͷੜ੒ TypeScriptಋೖ ɾҾ਺΍໭Γ஋͕ԿΛظ଴͍ͯ͠Δ͔Ұ໨ྎવ ɾม਺໊͸୹ͯ͘΋ Interface ΍ Type ͕ఆٛ͞Ε͍ͯΔͷͰΘ͔Γ΍͍͢

Slide 28

Slide 28 text

αϯϓϧ2 api/BizServer.ts [֓ཁ] APIαʔόʔͱͷ௨৴ axios ϕʔεͷPromiseΛฦ٫ TypeScriptಋೖ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

ReactDevToolsͷProfiler … Chrome ֦ு ύϑΥʔϚϯενϡʔχϯά ίϯϙʔωϯτͷඳըʹ͔͔͕ͬͨ࣌ؒදࣔ͞ΕΔ ຖճɺඳը͕஗͍ίϯϙʔωϯτ͕ҧ͏ʂ ΋͔ͯ͠͠ɺStateͱProps౉͍ͯ͠Δίϯϙʔωϯτશ෦࠶ඳը͞ΕͯΔʁ

Slide 33

Slide 33 text

ύϑΥʔϚϯενϡʔχϯά ݄୯Ґ ೔୯Ґ Ҡಈ৘ใ & ܦඅ৘ใ Ϩίʔυ ίϯϙʔωϯτͷ࠷্Ґ͔ΒPropsΛόέπϦϨʔ ࢠͲ΋ͷPropsͷݩʹͳΔState͸ৗʹߋ৽͞Ε͍ͯΔ

Slide 34

Slide 34 text

ύϑΥʔϚϯενϡʔχϯά ݄୯Ґ ೔୯Ґ Ҡಈ৘ใ & ܦඅ৘ใ Ϩίʔυ ίϯϙʔωϯτͷ࠷্Ґ͔ΒPropsΛόέπϦϨʔ ࢠͲ΋ͷPropsͷݩʹͳΔState͸ৗʹߋ৽͞Ε͍ͯΔ ίϯϙʔωϯτ֊૚ StateͰ؅ཧ͢Δ࠷খ୯Ґ

Slide 35

Slide 35 text

ύϑΥʔϚϯενϡʔχϯά StateͱPropsͷ஋͕ߋ৽͞Εͳ͍৔߹͸ίϯϙʔωϯτΛߋ৽͠ͳ͍ →React.shouldComponentUpdate(): boolean Λ͔ͭͬͯ࠶ඳըΛ੍ޚ͢Δ ɹࠓճ͸Props, StateΛ΋ͭશͯͷίϯϙʔωϯτ͕BaseComponentΛ ɹܧঝ͢ΔΑ͏ʹ͠ղܾͨ͠ Ͳ͏΍ΒReact.ComponentΛܧঝͨࣗ͠࡞ComponentΛܧঝͤ͞Δͷ͸ ΞϯνύλʔϯΒ͍͠Ͱ͢ɻڧ͍ਓڭ͍͑ͯͩ͘͞

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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