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
280
カミナシのフロントエンド開発の効率化の取り組み
カミナシでフロントエンド開発を効率化するためにやったことを発表しました。
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
86
新参者だけどバーンアウトしかけているチームを立て直す
nasum
21
11k
DjangoではじめるGraphQLとフロントエンド開発の協業
nasum
1
3.4k
Flutterとfirebaseを使ってモバイルアプリに挑戦してみる
nasum
3
2.9k
grpc-gatewayで作るマイクロサービスの管理画面
nasum
1
7.5k
コストをかけずに機械学習の環境を整える&学習環境(人間の)
nasum
0
1.6k
Elixirの好きなところ
nasum
0
500
ElectronでFirebaseを使ってみた(仮)
nasum
2
3.4k
Vue.jsを導入する際失敗したこと
nasum
1
4.1k
Other Decks in Programming
See All in Programming
カウシェで Four Keys の改善を試みた理由
ike002jp
1
110
KawaiiLT 登壇資料 キャリアとモチベーション
hiiragi
0
160
メモリウォールを超えて:キャッシュメモリ技術の進歩
kawayu
0
1.9k
REALITY コマンド作成チュートリアル
nishiuriraku
0
110
Flutterでllama.cppをつかってローカルLLMを試してみた
sakuraidayo
0
100
Instrumentsを使用した アプリのパフォーマンス向上方法
hinakko
0
130
実践Webフロントパフォーマンスチューニング
cp20
40
9k
The Nature of Complexity in John Ousterhout’s Philosophy of Software Design
philipschwarz
PRO
0
140
MCP調べてみました! / Exploring MCP
uhzz
2
2.3k
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
700
Ruby on Railroad: The Power of Visualizing CFG
ydah
0
260
Vibe Coding の話をしよう
schroneko
12
3.3k
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.6k
Optimising Largest Contentful Paint
csswizardry
37
3.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
119
51k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Docker and Python
trallard
44
3.4k
Rebuilding a faster, lazier Slack
samanthasiow
81
8.9k
Automating Front-end Workflow
addyosmani
1370
200k
Designing for humans not robots
tammielis
253
25k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
How STYLIGHT went responsive
nonsquared
100
5.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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