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
250
カミナシのフロントエンド開発の効率化の取り組み
カミナシでフロントエンド開発を効率化するためにやったことを発表しました。
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
60
新参者だけどバーンアウトしかけているチームを立て直す
nasum
21
11k
DjangoではじめるGraphQLとフロントエンド開発の協業
nasum
1
3.2k
Flutterとfirebaseを使ってモバイルアプリに挑戦してみる
nasum
3
2.8k
grpc-gatewayで作るマイクロサービスの管理画面
nasum
1
7.4k
コストをかけずに機械学習の環境を整える&学習環境(人間の)
nasum
0
1.5k
Elixirの好きなところ
nasum
0
460
ElectronでFirebaseを使ってみた(仮)
nasum
2
3.3k
Vue.jsを導入する際失敗したこと
nasum
1
4.1k
Other Decks in Programming
See All in Programming
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
0
160
NANIMACHI
naokiito
0
940
WEBアプリケーションにおけるAWS Lambdaを用いた大規模な非同期処理の実践
delhi09
PRO
7
4k
Removing Corepack
yosuke_furukawa
PRO
9
1.1k
Subclassing, Composition, Python, and You
hynek
3
120
[PHPカンファレンス沖縄2024]「無理なくできるだけ安全に」テストもないレガシーコードをリファクタリングするテクニック
ikezoemakoto
3
120
Memory API: Patterns, Use Cases, and Performance
josepaumard
1
130
CSC509 Lecture 02
javiergs
PRO
0
160
CSC509 Lecture 01
javiergs
PRO
1
210
[KR] Server Driven Compose With Firebase
skydoves
2
180
4年間変わらなかった YOUTRUSTのアーキテクチャ
daiki1003
1
480
M5Stack に色々な M5ユニットをつないで扱う為の新たなアプローチ
gob
0
210
Featured
See All Featured
Navigating Team Friction
lara
183
14k
What's in a price? How to price your products and services
michaelherold
243
11k
Happy Clients
brianwarren
97
6.7k
From Idea to $5000 a Month in 5 Months
shpigford
380
46k
Design by the Numbers
sachag
278
19k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Into the Great Unknown - MozCon
thekraken
30
1.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
How GitHub Uses GitHub to Build GitHub
holman
473
290k
Code Review Best Practice
trishagee
62
16k
YesSQL, Process and Tooling at Scale
rocio
167
14k
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