Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
カミナシのフロントエンド開発の効率化の取り組み
Search
Masaya Nasu
August 25, 2021
Programming
2
260
カミナシのフロントエンド開発の効率化の取り組み
カミナシでフロントエンド開発を効率化するためにやったことを発表しました。
Masaya Nasu
August 25, 2021
Tweet
Share
More Decks by Masaya Nasu
See All by Masaya Nasu
What's new in Go 1.23
nasum
0
70
新参者だけどバーンアウトしかけているチームを立て直す
nasum
21
11k
DjangoではじめるGraphQLとフロントエンド開発の協業
nasum
1
3.3k
Flutterとfirebaseを使ってモバイルアプリに挑戦してみる
nasum
3
2.9k
grpc-gatewayで作るマイクロサービスの管理画面
nasum
1
7.4k
コストをかけずに機械学習の環境を整える&学習環境(人間の)
nasum
0
1.6k
Elixirの好きなところ
nasum
0
480
ElectronでFirebaseを使ってみた(仮)
nasum
2
3.3k
Vue.jsを導入する際失敗したこと
nasum
1
4.1k
Other Decks in Programming
See All in Programming
今年一番支援させていただいたのは認証系サービスでした
satoshi256kbyte
1
260
DevFest - Serverless 101 with Google Cloud Functions
tunmise
0
130
rails statsで大解剖 🔍 “B/43流” のRailsの育て方を歴史とともに振り返ります
shoheimitani
2
960
Fibonacci Function Gallery - Part 1
philipschwarz
PRO
0
230
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
650
フロントエンドのディレクトリ構成どうしてる? Feature-Sliced Design 導入体験談
osakatechlab
8
4.1k
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
280
17年周年のWebアプリケーションにTanStack Queryを導入する / Implementing TanStack Query in a 17th Anniversary Web Application
saitolume
0
250
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
830
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
130
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
980
CloudflareStack でRAGに入門
asahiiwm
0
100
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Building Adaptive Systems
keathley
38
2.3k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Designing for humans not robots
tammielis
250
25k
Why Our Code Smells
bkeepers
PRO
335
57k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Documentation Writing (for coders)
carmenintech
67
4.5k
Optimizing for Happiness
mojombo
376
70k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
530
Transcript
ΧϛφγͷϑϩϯτΤϯυ ։ൃͷޮԽͷऔΓΈ @Startup Issue Gym #2 גࣜձࣾΧϛφγ ಹਢཧ 2021/08/25
None
αʔϏε ݱվળϓϥοτϑΥʔϜ Χϛφγ ʰΧϛφγʱɺݱͷϧʔςΟϯϫʔΫࣄ࡞ۀΛࣗಈԽ ͢ΔݱཧΞϓϦͰ͢ɻ खॻ͖ใͷσʔλ͔ΒूܭɺใࠂͳͲɺ͜Ε·ͰࢴΤΫη ϧͰߦ͍ͬͯͨ࡞ۀΛσδλϧԽ͠ɺ৯ɺখചɺͳͲͷ ͋ΒΏΔݱͷϊϯσεΫϫʔΧʔͷಇ͖ํΛεϚʔτʹͯ͠ ͍·͢ɻ
Χϛφγ·ͩ։ൃͯ͠1ͷΞϓϦέʔγϣϯ • ٸͳ্ཱͪ͛ʹΑΓେਓʹͳΒ͟Δ͓͑ͳ͔ͬͨ Πϝʔδը૾
ݟͯݟ͵ৼΓΛ͖ͯͨ͠՝͕૿͖͑ͯͨ • ͍ͬͨΜແࢹ͢Δ͜ͱʹͨ͠eslintͷܯࠂ • ςετखಈͰ୲อ • Etc…etc… ͍ΘΏΔׂΕ૭
͋Δఔམͪண͍͖ͯͨͷͰԼΛݟ͖͢ • ϑϩϯτΤϯυ։ൃόοΫΤϯυͷ։ൃͰඇޮͳͱ͜ΖΛਖ਼͢ • ςετ͕ͳ͍ͱ͜ΖʹςετΛॻ͘ • ͨ͘͠LintΛҾ͖కΊΔ • Etc..etc
ࠓճϑϩϯτΤϯυ։ൃͰͷվળΛհ • eslintͷϧʔϧͷஈ֊తҾ͖కΊ • React Native DebuggerͰޮతͳ։ൃ࣌ͷdebug • LogrocketΛ࣮ͬͨࡍʹϢʔβʹى͖͍ͯΔͷѲ
eslintͷϧʔϧͷஈ֊తҾ͖కΊ
͘ͳ͍ͬͯͬͨeslintͷϧʔϧ • Χϛφγͷ։ൃ։࢝࣌ʹeslintೖͬͯͳ͔ͬͨ • ։ൃ్தͰ͍Εͨ͜ͱʹΑΓॳΊ͔Βएׯ͍ઃఆ͕ೖΓࠐΉ • ͦͷޙগͣͭ͠ϧʔϧ͕͘ͳ͍ͬͯͬͨ
༨༟͕ग़͖ͯͨͷͰϧʔϧݟ͠Λ։࢝ • ͔͠͠طଘͷϧʔϧͰ͍ͩͿ։ൃ͕ਐΜͰ͍ͨͨΊमਖ਼ࠔ • ୯७ʹϧʔϧΛݟͨ͠ͱ͜Ζ4000݅Ҏ্ͷΤϥʔ • ஈ֊తʹߦ͏ඞཁ͕͋ͬͨ
ஈ֊తʹҾ͖కΊΛߦ͏ͨΊʹߦͬͨ͜ͱ • ৽͍͠ϧʔϧݫ͍͠Ϟϊͱ͢Δ • ϩʔΧϧͰͷ։ൃͰ৽͍͠ϧʔϧΛ͏ • EslintͷϧʔϧΛ্ॻ͖͢ΔػೳΛ༻ • طଘͷCI/CDͰ͍ͬͯΔlintچϧʔϧΛ͏ •
ͦͦCI/CDͰͷlintͬͯඞཁͳΜ͚ͩͬʁΈ͍ͨͳ͋Γ • ͔͠͠Өڹൣғେ͖͍ͷͰ͍ͬͨΜچϧʔϧΛ༻
ϩʔΧϧͰ৽͍͠ϧʔϧΛ༻͢Δ • Eslintͷ-cΦϓγϣϯΛͬͯ৽͍͠ϧʔϧͰطଘϧʔϧΛ্ॻ͖͢Δ چϧʔϧͷྫɿ.eslintrc.json ৽ϧʔϧͷྫɿ.eslintrc-override.json
ΦʔόʔϥΠυͯ͠৽ϧʔϧΛద༻Ͱ͖ͨ no-unused-vars͕errorʹ্ॻ͖͞ΕΔ
huskyΛͬͯpre-commit࣌ʹlintΛ࣮ߦ͢Δ • CI/CDͰچϧʔϧͰlintΛ࣮ߦ͢Δඞཁ͕͋ͬͨ • ৽ϧʔϧ։ൃ࣌ͷϩʔΧϧڥͰߦͬͯཉ͍͠ • HuskyΛͬͯίϛοτલʹlintΛ࣮ߦͯ͠ղܾ͢Δ
package.jsonʹhuskyͷઃఆΛ͍ΕΔ ͜ΕͰίϛοτ࣌ʹlint͞ΕܯࠂͰ͖ΔΑ͏ʹͳͬͨ
ஈ֊తͰ͋Δ͕վળग़དྷΔΑ͏ʹͳͬͨ
React Native DebuggerͰޮతͳ։ ൃ࣌ͷdebug
։ൃ࣌ReactotronΛ͍ͬͯͨ • ࣌ͦΕͰେৎͰͨ͠ • ز͔ͭͷཧ༝Ͱ࣍ͷιϦϡʔγϣϯΛ୳͢ඞཁ͕͋Γ·ͨ͠ • redux-sagaΛ͏࣌middlewareʹίʔυΛՃ͢Δͷ͕໘ • Reactotronͷϝϯς͕͞Εͳ͘ͳ͖ͬͯͨ •
etc…etc
react native debuggerΛ͏͜ͱʹ • ࣍ͷػೳ͕͑Δ • Chrome Devtool • React
Developer Tool • Redux Devtool • React։ൃͰ༻͍ͯͨ͠devtool͕ಉ͡ײ֮Ͱreact nativeͰ͑Δ
React native debugger ChromeDevtool ReduxDevtool ReactDevtool
ChromeDevtool • ݹ͖ྑ͖print debug͕Մೳ • NetworkλϒͳͲChromeDevtoolͰ Ͱ͖Δ͜ͱͰ͖Δ • ྫ͑ϒϨʔΫϙΠϯτΛ͏ͬͯ
debugՄೳ
ReactDevtool • propsstateͷ֬ೝ͕Մೳ • ελΠϧͷඍௐ͕Մೳ • Webͷͭͱ͕ͪͬͯ ElementΛબग़དྷͳ͍ ͜Εͳ͍
Redux Devtool • Actionͷ࣮ߦॱ͕֬ೝՄೳ • StateͷࠩݟΕΔ
ReactNativeͷΑ͍σόοάπʔϧΛಘͨ
LogrocketΛ࣮ͬͨࢪʹϢʔβʹى ͖͍ͯΔͷѲ
ϩʔΧϧͷ։ൃޮ্͕ͬͨ • ͔͓͠͠٬༷ͷڥͰى͖͍ͯΔ͜ͱͷ࠶ݱ͔ͬͨ͠ • Ͳ͏ͬͯΤϥʔ͕ى͖ͨʁͲ͜Ͱૢ࡞Λ໎͏ʁ • productionͷDBΛdumpͯ͠ϩʔΧϧͰ֬ೝ͢Δʁ • ͋·ΓΓ͍ͨͱࢥΘͳ͍ •
ͱ͍͑࠷ऴखஈͱͯ͠Δ͜ͱ͋Δ • ͍߹Θͤͷʹdump͢Δʁ • ͋·Γݱ࣮త͡Όͳ͍
ΕΔͱ͏Ε͍͜͠ͱ • Ϣʔβ͕Ͳ͏ಈ͔ͯ͠Τϥʔʹࢸ͔ͬͨΛΓ͍ͨ • SentryͰҰԠ͔Δ • ͕ɺactionͷ࣮ߦॱ͕͔Δ͚ͩͰͺͬͱ͔Βͳ͍ • Ϣʔβ͕໎ͬͯΔॴ͕Ͳ͔͜ΛΓ͍ͨ •
ࠓCSͷώΞϦϯάͰରԠ͍ͯ͠Δ
Logrocketͷಋೖ • ϢʔβߦಈΛϦΞϧλΠϜʹಈըͰهͰ͖ΔSaaS • ಈ࡞࣌ͷಈըͱωοτϫʔΫͳͲ͕ه͞ΕΔ • Τϥʔൃੜ࣌ʹsentryͱ࿈ܞͰ͖ΔͳͲintegration͕ॆ࣮͍ͯ͠Δ
Logrocketͷը໘ ϦΫΤετΛݟΕΔ ಈըͰߦಈΛ͑Δ ը໘ભҠͷURL͕ݟΕΔ
sentryͱ࿈ܞՄೳ SentryͷՃใʹLogrocketͷURLΛؚΉ͜ͱ͕Մೳ
ϢʔβͷߦಈΛৄࡉʹѲͰ͖ΔΑ͏ʹͳͬͨ • Sentryͱͷ࿈ܞͰΑΓόάͷৄࡉ͕͔ΔΑ͏ʹͳͬͨ • CS͔ΒͷώΞϦϯάʹΑΒͣɺUX͕ѱ͍ͱ͜ΖΛѲͰ͖ΔΑ͏ʹ ͳͬͨ
·ͩ·ͩޮԽͷ༨ͷ͋ΔΧϛφγ • CDͰLint͢Δͷͬͯແବ͡Όͳ͍ʁ • σϓϩΠՄೳͳmainϒϥϯνطʹlint͞ΕͯΔͣ • Logrocket·ͩWebʹ͔͠ద༻ͯ͠ͳ͍ • ΞϓϦͷํʹ͍Ε͍ͨ •
ϦϦʔεͷࣗಈԽ·ͩվળͷ༨͕͋Δ • ͋ͱςετɾɾɾ
৳ͼ͔͠ͳ͍ʂ
We are hiring • ΧϛφγͷϑϩϯτΤϯυ։ൃʹ·ͩ伱͕ଟ͍Ͱ͢ • ͦΜͳ伱Λղܾ͢Δͷ͕͖ͳΤϯδχΞΛٻΊ͍ͯ·͢ • https://herp.careers/v1/kaminashi/DzB95TKgll3h