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
300
カミナシのフロントエンド開発の効率化の取り組み
カミナシでフロントエンド開発を効率化するためにやったことを発表しました。
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
110
新参者だけどバーンアウトしかけているチームを立て直す
nasum
21
11k
DjangoではじめるGraphQLとフロントエンド開発の協業
nasum
1
3.5k
Flutterとfirebaseを使ってモバイルアプリに挑戦してみる
nasum
3
3k
grpc-gatewayで作るマイクロサービスの管理画面
nasum
1
7.6k
コストをかけずに機械学習の環境を整える&学習環境(人間の)
nasum
0
1.7k
Elixirの好きなところ
nasum
0
530
ElectronでFirebaseを使ってみた(仮)
nasum
2
3.5k
Vue.jsを導入する際失敗したこと
nasum
1
4.2k
Other Decks in Programming
See All in Programming
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
オンデバイスAIとXcode
ryodeveloper
0
190
Developer Joy - The New Paradigm
hollycummins
1
370
Devoxx BE - Local Development in the AI Era
kdubois
0
140
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
510
EMこそClaude Codeでコード調査しよう
shibayu36
0
450
CSC509 Lecture 07
javiergs
PRO
0
250
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
AI Agent 時代的開發者生存指南
eddie
4
2.2k
One Enishi After Another
snoozer05
PRO
0
160
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
1.6k
Featured
See All Featured
Facilitating Awesome Meetings
lara
57
6.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Building Applications with DynamoDB
mza
96
6.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Agile that works and the tools we love
rasmusluckow
331
21k
The Invisible Side of Design
smashingmag
302
51k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
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