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

カミナシでフロントエンド開発を効率化するためにやったことを発表しました。

Transcript

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