カミナシのフロントエンド開発の効率化の取り組み

Transcript

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

2. None

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

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

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

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

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

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

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

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

11. ஈ֊తʹҾ͖కΊΛߦ͏ͨΊʹߦͬͨ͜ͱ • ৽͍͠ϧʔϧ͸ݫ͍͠Ϟϊͱ͢Δ • ϩʔΧϧͰͷ։ൃͰ͸৽͍͠ϧʔϧΛ࢖͏ • EslintͷϧʔϧΛ্ॻ͖͢ΔػೳΛ࢖༻ • طଘͷCI/CD౳Ͱ࢖͍ͬͯΔlint͸چϧʔϧΛ࢖͏ •

    ͦ΋ͦ΋CI/CDͰͷlintͬͯඞཁͳΜ͚ͩͬʁΈ͍ͨͳ࿩୊΋͋Γ • ͔͠͠Өڹൣғ΋େ͖͍ͷͰ͍ͬͨΜچϧʔϧΛ࢖༻

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

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

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

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

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

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

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

    etc…etc

19. react native debuggerΛ࢖͏͜ͱʹ • ࣍ͷػೳ͕࢖͑Δ • Chrome Devtool • React

    Developer Tool • Redux Devtool • React։ൃͰ࢖༻͍ͯͨ͠devtool͕ಉ͡ײ֮Ͱreact nativeͰ΋࢖͑Δ

20. React native debugger ChromeDevtool ReduxDevtool ReactDevtool

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

    
 debug΋Մೳ

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

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

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

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

26. ϩʔΧϧͷ։ൃޮ཰͸্͕ͬͨ • ͔͓͠͠٬༷ͷ؀ڥͰى͖͍ͯΔ͜ͱͷ࠶ݱ͸೉͔ͬͨ͠ • Ͳ͏΍ͬͯΤϥʔ͕ى͖ͨʁͲ͜Ͱૢ࡞Λ໎͏ʁ • productionͷDBΛdumpͯ͠ϩʔΧϧͰ֬ೝ͢Δʁ • ͋·Γ΍Γ͍ͨͱ͸ࢥΘͳ͍ •

    ͱ͸͍͑࠷ऴखஈͱͯ͠͸΍Δ͜ͱ΋͋Δ • ໰͍߹Θͤͷ౓ʹdump͢Δʁ • ͋·Γݱ࣮త͡Όͳ͍

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

    ࠓ͸CSͷώΞϦϯάͰରԠ͍ͯ͠Δ

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

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

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

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

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

    ϦϦʔεͷࣗಈԽ͸·ͩվળͷ༨஍͕͋Δ • ͋ͱςετɾɾɾ

33. ৳ͼ୅͔͠ͳ͍ʂ

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