Tweet
Tweet

Slide 1

Slide 1 text

ΧϛφγͷϑϩϯτΤϯυ ։ൃͷޮ཰ԽͷऔΓ૊Έ @Startup Issue Gym #2 גࣜձࣾΧϛφγ ಹਢཧ໵ 2021/08/25

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

αʔϏε ݱ৔վળϓϥοτϑΥʔϜ Χϛφγ ʰΧϛφγʱ͸ɺݱ৔ͷϧʔςΟϯϫʔΫ΍ࣄ຿࡞ۀΛࣗಈԽ ͢Δݱ৔؅ཧΞϓϦͰ͢ɻ खॻ͖৘ใͷσʔλ͔ΒूܭɺใࠂͳͲɺ͜Ε·Ͱࢴ΍ΤΫη ϧͰߦ͍ͬͯͨ࡞ۀΛσδλϧԽ͠ɺ৯඼ɺখചɺ੡଄ͳͲͷ ͋ΒΏΔݱ৔ͷϊϯσεΫϫʔΧʔͷಇ͖ํΛεϚʔτʹͯ͠ ͍·͢ɻ

Slide 4

Slide 4 text

Χϛφγ͸·ͩ։ൃͯ͠1೥ͷΞϓϦέʔγϣϯ • ٸ଎ͳ্ཱͪ͛ʹΑΓେਓʹͳΒ͟Δ͓͑ͳ͔ͬͨ Πϝʔδը૾

Slide 5

Slide 5 text

ݟͯݟ͵ৼΓΛ͖ͯͨ͠՝୊͕૿͖͑ͯͨ • ͍ͬͨΜແࢹ͢Δ͜ͱʹͨ͠eslintͷܯࠂ • ςετ͸खಈͰ୲อ • Etc…etc… ͍ΘΏΔׂΕ૭

Slide 6

Slide 6 text

͋Δఔ౓མͪண͍͖ͯͨͷͰ଍ԼΛݟ௚͢΂͖ • ϑϩϯτΤϯυ։ൃ΍όοΫΤϯυͷ։ൃͰඇޮ཰ͳͱ͜ΖΛਖ਼͢ • ςετ͕ͳ͍ͱ͜ΖʹςετΛॻ͘ • ؁ͨ͘͠LintΛҾ͖కΊΔ • Etc..etc

Slide 7

Slide 7 text

ࠓճ͸ϑϩϯτΤϯυ։ൃͰͷվળΛ঺հ • eslintͷϧʔϧͷஈ֊తҾ͖కΊ • React Native DebuggerͰޮ཰తͳ։ൃ࣌ͷdebug • LogrocketΛ࢖࣮ͬͨࡍʹϢʔβʹى͖͍ͯΔ໰୊ͷ೺Ѳ

Slide 8

Slide 8 text

eslintͷϧʔϧͷஈ֊తҾ͖కΊ

Slide 9

Slide 9 text

؁͘ͳ͍ͬͯͬͨeslintͷϧʔϧ • Χϛφγͷ։ൃ։࢝࣌ʹ͸eslint͸ೖͬͯͳ͔ͬͨ • ։ൃ్தͰ͍Εͨ͜ͱʹΑΓॳΊ͔Βएׯ؁͍ઃఆ͕ೖΓࠐΉ • ͦͷޙগͣͭ͠ϧʔϧ͕؁͘ͳ͍ͬͯͬͨ

Slide 10

Slide 10 text

༨༟͕ग़͖ͯͨͷͰϧʔϧݟ௚͠Λ։࢝ • ͔͠͠طଘͷϧʔϧͰ͍ͩͿ։ൃ͕ਐΜͰ͍ͨͨΊमਖ਼͸ࠔ೉ • ୯७ʹϧʔϧΛݟ௚ͨ͠ͱ͜Ζ4000݅Ҏ্ͷΤϥʔ • ஈ֊తʹߦ͏ඞཁ͕͋ͬͨ

Slide 11

Slide 11 text

ஈ֊తʹҾ͖కΊΛߦ͏ͨΊʹߦͬͨ͜ͱ • ৽͍͠ϧʔϧ͸ݫ͍͠Ϟϊͱ͢Δ • ϩʔΧϧͰͷ։ൃͰ͸৽͍͠ϧʔϧΛ࢖͏ • EslintͷϧʔϧΛ্ॻ͖͢ΔػೳΛ࢖༻ • طଘͷCI/CD౳Ͱ࢖͍ͬͯΔlint͸چϧʔϧΛ࢖͏ • ͦ΋ͦ΋CI/CDͰͷlintͬͯඞཁͳΜ͚ͩͬʁΈ͍ͨͳ࿩୊΋͋Γ • ͔͠͠Өڹൣғ΋େ͖͍ͷͰ͍ͬͨΜچϧʔϧΛ࢖༻

Slide 12

Slide 12 text

ϩʔΧϧͰ৽͍͠ϧʔϧΛ࢖༻͢Δ • Eslintͷ-cΦϓγϣϯΛ࢖ͬͯ৽͍͠ϧʔϧͰطଘϧʔϧΛ্ॻ͖͢Δ چϧʔϧͷྫɿ.eslintrc.json ৽ϧʔϧͷྫɿ.eslintrc-override.json

Slide 13

Slide 13 text

ΦʔόʔϥΠυͯ͠৽ϧʔϧΛద༻Ͱ͖ͨ no-unused-vars͕errorʹ্ॻ͖͞ΕΔ

Slide 14

Slide 14 text

huskyΛ࢖ͬͯpre-commit࣌ʹlintΛ࣮ߦ͢Δ • CI/CDͰ͸چϧʔϧͰlintΛ࣮ߦ͢Δඞཁ͕͋ͬͨ • ৽ϧʔϧ͸։ൃ࣌ͷϩʔΧϧ؀ڥͰߦͬͯཉ͍͠ • HuskyΛ࢖ͬͯίϛοτલʹlintΛ࣮ߦͯ͠ղܾ͢Δ

Slide 15

Slide 15 text

package.jsonʹhuskyͷઃఆΛ͍ΕΔ ͜ΕͰίϛοτ࣌ʹlint͞ΕܯࠂͰ͖ΔΑ͏ʹͳͬͨ

Slide 16

Slide 16 text

ஈ֊తͰ͸͋Δ͕վળग़དྷΔΑ͏ʹͳͬͨ

Slide 17

Slide 17 text

React Native DebuggerͰޮ཰తͳ։ ൃ࣌ͷdebug

Slide 18

Slide 18 text

։ൃ౰࣌͸ReactotronΛ࢖͍ͬͯͨ • ౰࣌͸ͦΕͰ΋େৎ෉Ͱͨ͠ • ز͔ͭͷཧ༝Ͱ࣍ͷιϦϡʔγϣϯΛ୳͢ඞཁ͕͋Γ·ͨ͠ • redux-sagaΛ࢖͏࣌middlewareʹίʔυΛ௥Ճ͢Δͷ͕໘౗ • Reactotronͷϝϯς͕͞Εͳ͘ͳ͖ͬͯͨ • etc…etc

Slide 19

Slide 19 text

react native debuggerΛ࢖͏͜ͱʹ • ࣍ͷػೳ͕࢖͑Δ • Chrome Devtool • React Developer Tool • Redux Devtool • React։ൃͰ࢖༻͍ͯͨ͠devtool͕ಉ͡ײ֮Ͱreact nativeͰ΋࢖͑Δ

Slide 20

Slide 20 text

React native debugger ChromeDevtool ReduxDevtool ReactDevtool

Slide 21

Slide 21 text

ChromeDevtool • ݹ͖ྑ͖print debug͕Մೳ • NetworkλϒͳͲChromeDevtoolͰ 
 Ͱ͖Δ͜ͱ͸Ͱ͖Δ • ྫ͑͹ϒϨʔΫϙΠϯτΛ͏ͬͯ 
 debug΋Մೳ

Slide 22

Slide 22 text

ReactDevtool • props΍state౳ͷ֬ೝ͕Մೳ • ελΠϧͷඍௐ੔͕Մೳ • Webͷ΍ͭͱ͕ͪͬͯ 
 ElementΛ௚઀બ୒͸ग़དྷͳ͍ ͜Ε͸ͳ͍

Slide 23

Slide 23 text

Redux Devtool • Actionͷ࣮ߦॱ͕֬ೝՄೳ • Stateͷࠩ෼΋ݟΕΔ

Slide 24

Slide 24 text

ReactNativeͷΑ͍σόοάπʔϧΛಘͨ

Slide 25

Slide 25 text

LogrocketΛ࢖࣮ͬͨࢪʹϢʔβʹى ͖͍ͯΔ໰୊ͷ೺Ѳ

Slide 26

Slide 26 text

ϩʔΧϧͷ։ൃޮ཰͸্͕ͬͨ • ͔͓͠͠٬༷ͷ؀ڥͰى͖͍ͯΔ͜ͱͷ࠶ݱ͸೉͔ͬͨ͠ • Ͳ͏΍ͬͯΤϥʔ͕ى͖ͨʁͲ͜Ͱૢ࡞Λ໎͏ʁ • productionͷDBΛdumpͯ͠ϩʔΧϧͰ֬ೝ͢Δʁ • ͋·Γ΍Γ͍ͨͱ͸ࢥΘͳ͍ • ͱ͸͍͑࠷ऴखஈͱͯ͠͸΍Δ͜ͱ΋͋Δ • ໰͍߹Θͤͷ౓ʹdump͢Δʁ • ͋·Γݱ࣮త͡Όͳ͍

Slide 27

Slide 27 text

΍ΕΔͱ͏Ε͍͜͠ͱ • Ϣʔβ͕Ͳ͏ಈ͔ͯ͠Τϥʔʹࢸ͔ͬͨΛ஌Γ͍ͨ • SentryͰ΋ҰԠ෼͔Δ • ͕ɺactionͷ࣮ߦॱ͕෼͔Δ͚ͩͰͺͬͱ෼͔Βͳ͍ • Ϣʔβ͕໎ͬͯΔ৔ॴ͕Ͳ͔͜Λ஌Γ͍ͨ • ࠓ͸CSͷώΞϦϯάͰରԠ͍ͯ͠Δ

Slide 28

Slide 28 text

Logrocketͷಋೖ • ϢʔβߦಈΛϦΞϧλΠϜʹಈըͰه࿥Ͱ͖ΔSaaS • ಈ࡞࣌ͷಈըͱωοτϫʔΫͳͲ͕ه࿥͞ΕΔ • Τϥʔൃੜ࣌ʹsentryͱ࿈ܞͰ͖ΔͳͲintegration͕ॆ࣮͍ͯ͠Δ

Slide 29

Slide 29 text

Logrocketͷը໘ ϦΫΤετΛݟΕΔ ಈըͰߦಈΛ௥͑Δ ը໘ભҠͷURL͕ݟΕΔ

Slide 30

Slide 30 text

sentryͱ࿈ܞՄೳ Sentryͷ௥Ճ৘ใʹLogrocketͷURLΛؚΉ͜ͱ͕Մೳ

Slide 31

Slide 31 text

ϢʔβͷߦಈΛৄࡉʹ೺ѲͰ͖ΔΑ͏ʹͳͬͨ • Sentryͱͷ࿈ܞͰΑΓόάͷৄࡉ͕෼͔ΔΑ͏ʹͳͬͨ • CS͔ΒͷώΞϦϯάʹΑΒͣɺUX͕ѱ͍ͱ͜ΖΛ೺ѲͰ͖ΔΑ͏ʹ ͳͬͨ

Slide 32

Slide 32 text

·ͩ·ͩޮ཰Խͷ༨஍ͷ͋ΔΧϛφγ • CDͰLint͢Δͷͬͯແବ͡Όͳ͍ʁ • σϓϩΠՄೳͳmainϒϥϯν͸طʹlint͞ΕͯΔ͸ͣ • Logrocket·ͩWebʹ͔͠ద༻ͯ͠ͳ͍ • ΞϓϦͷํʹ΋͍Ε͍ͨ • ϦϦʔεͷࣗಈԽ͸·ͩվળͷ༨஍͕͋Δ • ͋ͱςετɾɾɾ

Slide 33

Slide 33 text

৳ͼ୅͔͠ͳ͍ʂ

Slide 34

Slide 34 text

We are hiring • ΧϛφγͷϑϩϯτΤϯυ։ൃʹ͸·ͩ伱͕ଟ͍Ͱ͢ • ͦΜͳ伱Λղܾ͢Δͷ͕޷͖ͳΤϯδχΞΛٻΊ͍ͯ·͢ • https://herp.careers/v1/kaminashi/DzB95TKgll3h