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
KazukiHayase
June 21, 2023
Technology
2
2.2k
自分だけが頑張るのをやめて、フルスタックなチームを作る
KazukiHayase
June 21, 2023
Tweet
Share
More Decks by KazukiHayase
See All by KazukiHayase
Goでテストをしやすくするためにやったこと
kazukihayase
1
670
GraphQLクライアントの技術選定 2023冬
kazukihayase
8
5.9k
Introduction and Insights of the Hasura-based Architecture
kazukihayase
0
780
Goでテンプレートからファイルを自動生成するCLIを作る
kazukihayase
0
920
生産性が上がり続けるチームを作るための第一歩
kazukihayase
4
3.6k
GraphQLにおけるクライアントキャッシュ戦略
kazukihayase
0
2.5k
MUIをベースにしたデザインシステムの構築
kazukihayase
0
410
Hasuraを活用するためのTips集
kazukihayase
0
32k
ReactとGraphQLで実現する宣言的データフェッチ
kazukihayase
2
3k
Other Decks in Technology
See All in Technology
CData Virtuality 日本ローンチイベントのKeynote
cdataj
0
430
俺とVSCode Python Debugger Extension
sat
PRO
1
140
WSUSが非推奨に!? Windowsの更新管理を改めて勉強する!
ebibibi
0
550
Azure AI servicesと歯のおはなし/AzureTravelers_Fukuoka2024_baba
nina01
1
110
RAG: from dumb implementation to serious results
glaforge
0
610
エンジニアのドメイン知識獲得コストを低減するアプリケーションデザイン
ryo_nagata_
3
140
外部カンファレンスで登壇しよう! 〜「強い」エンジニアへの一歩を踏み出す〜
logica0419
4
130
サーバレスで挑む IoT プロジェクトの現実解 / Real solutions for the IoT project using serverless service
genkiogasawara
1
120
Vue.js、Nuxtの機能を使い、 大量のコピペコードをリファクタリングする
igayamaguchi
3
840
AIとともに歩んだライブラリアップデートの道のり/ vue-fes-japan-2024-link-and-motivation
lmi
2
730
寒冷地稲作の歴史にみるコミュニティ
miu_crescent
2
130
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
48k
Featured
See All Featured
For a Future-Friendly Web
brad_frost
174
9.4k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Optimising Largest Contentful Paint
csswizardry
31
2.9k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Adopting Sorbet at Scale
ufuk
73
9k
Building an army of robots
kneath
302
42k
A Philosophy of Restraint
colly
203
16k
Code Review Best Practice
trishagee
63
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
9
630
Building Flexible Design Systems
yeseniaperezcruz
327
38k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Transcript
͚͕ࣗͩؤுΔͷΛΊͯɺϑϧελοΫͳνʔϜΛ࡞Δ ԶͨͪͷຊʹΓ͔ͨͬͨDevDay 2023.06.21
ૣًʢ@KazukiHayaseʣ • 2021BuySell Technologies৽ଔೖࣾ • ग़ཧSaaSνʔϜ ϓϩδΣΫτϦʔμʔ • Go /
TypeScript / ։ൃੜ࢈ੑվળ • ۙͷొஃྺ ◦ ʲZOZO x ϕʔεϚΩφ x όΠηϧʳGoษڧձ #1 ◦ ʲ։ൃੜ࢈ੑ Meetup #1ʳ։ൃੜ࢈ੑՄࢹԽʹΑΔ มԽ~ࣄྫLT͔ΒֶͿϕετϓϥΫςΟε~ ◦ ϦΫϧʔτ × BASE × όΠηϧ ʲୈ1ճϑϩϯτΤϯυษڧձʳReact & GraphQL
None
None
͚͕ࣗͩؤுΔͷΛΊͯ ϑϩϯτΤϯυ։ൃΛΈԽ͢Δ͜ͱͰ ϑϧελοΫͳνʔϜΛ࡞ͬͨ ࠓ͢͜ͱ
ΞδΣϯμ എܠ 01 2ͭͷଆ໘͔ΒͷΞϓϩʔν 02 ΞϓϩʔνͷޮՌ 03 ·ͱΊ 04
01 എܠ
࣌ͷ։ൃମ੍ ΤϯδχΞϦϯάϚωʔδϟʔ ʢ1໊ʣ ϑϩϯτΤϯυΤϯδχΞ ʢ1໊ɺࣗʣ όοΫΤϯυΤϯδχΞ ʢ3໊ʣ EMͱ͕ࣗPdM݉
• ϑϩϯτΤϯυΤϯδχΞࣗҰਓͰPdM݉ • ୯ಠͰਐΊΒΕΔͷͰ։ൃεϐʔυૣ͍ • ϑϩϯτΤϯυ։ൃͷશݖΛҕͶΒΕ͍Δ ࣌ͷ։ൃମ੍
• ϑϩϯτΤϯυͷ։ൃॱௐ • ࣗͷΞτϓοτ͕ϓϩμΫτਐḿʹ݁͢Δ • ৽ଔ1ͳͷͰΔؾʹຬͪᷓΕ͍ͯΔ ։ൃॳظ ͕ࣗؤுΕ։ൃ্͕खͩ͘Ζ͏ͱ͍͏ࠜڌͷͳ͍ࣗ৴
։ൃॳظ ࣗ৴ νʔϜ։ൃͷཧղ νʔϜ։ൃͷཧղ͕ઙ͍͕ނͷࣗ৴
• ։ൃҎ֎ͷۀ͕૿Ճ͠ɺ࡞ۀ͕࣌ؒ֬อͰ͖ͳ͍ • ଞͷϝϯόʔʹϑϩϯτΤϯυͷλεΫΛ͓ئ͍Ͱ͖ͳ͍ ։ൃͷԆ ͕ࣗ࡞ۀͰ͖ͳ͍ͱϑϩϯτΤϯυͷ։ൃ͕ਐ·ͳ͍
ϑϩϯτΤϯυ։ൃͷԆ͚͕ͩݪҼͰͳ͍͕ ϦϦʔεΛԆظ͢Δ͜ͱʹ ϦϦʔεԆظ
• ݸਓͷΞτϓοτྔʹݶք͕͋Δ • ҰਓͰؤுͬͯεέʔϧ͠ͳ͍ • ༏ઌ͢Δ͖νʔϜͱͯ͠ͷΞτϓοτ ϚΠϯυͷมԽ
νʔϜΛมԽͤ͞ΔํϚΠϯυΛγϑτ
02 2ͭͷଆ໘͔ΒͷΞϓϩʔν
2ͭͷଆ໘͔ΒͷΞϓϩʔν ৫໘ 01 ٕज़໘ 02
৫໘͔ΒͷΞϓϩʔν ߹ҙܗ 01 ֶशͷଅਐ 02 ։ൃମ੍ͷվળ 03
৫໘͔ΒͷΞϓϩʔν ߹ҙܗ 01 ֶशͷଅਐ 02 ։ൃମ੍ͷվળ 03
[৫໘] ߹ҙܗ • όΠηϧͷϑϧελοΫʹ։ൃ͢ΔจԽ • ଐਓԽͱ͍͏νʔϜ๊͕͑Δ՝ શһ͕ϑϩϯτΤϯυͷ։ൃͰ͖ΔΑ͏ʹͳΔͱ͍͏߹ҙܗ
[৫໘] ߹ҙܗ ͡Ίʹ߹ҙΛऔΔ͜ͱͰɺͦͷޙͷҙࢥܾఆ͕εϜʔζʹͳΔ e.g. • ۀ࣌ؒͰͷษڧձͷ։࠵ • Ұ࣌తͳੜ࢈ੑԼͷڐ༰
߹ҙܗνʔϜΛมԽͤ͞ΔͨΊͷϑΝʔετεςοϓ
• ݱঢ়ͷ՝ͱཧͷঢ়ଶΛڞ༗͢Δ • ݱঢ়ͱཧͷΪϟοϓΛຒΊΔͨΊͷHowΛٞ͢Δ • ϕʔε͕Ͱ͖ΔͷͰ͕ٞͿΕʹ͍͘ [৫໘] ߹ҙܗͷίπ
৫໘͔ΒͷΞϓϩʔν ߹ҙܗ 01 ֶशͷଅਐ 02 ։ൃମ੍ͷվળ 03
[৫໘] ֶशͷଅਐ ษڧձ Ϟϒϓϩ ϑϩϯτΤϯυ ڞ༗ձ
[৫໘] [ֶशͷଅਐ] ษڧձ • TypeScriptReactͷجૅ͔ΒΩϟονΞοϓ • ۀͰ͍ͬͯΔٕज़ελοΫͰTodoΞϓϦΛ࡞ • ຖ1࣌ؒɺۀ࣌ؒʹ࣮ࢪ
[৫໘] [ֶशͷଅਐ] Ϟϒϓϩ • ࣮ࢪ͢Δ࣌ΛܾΊͯɺग़ࣾͯ͠ର໘Ͱ࣮ࢪ • ͋Β͔͡ΊϞϒϓϩ༻ͷλεΫΛ༻ҙ Ϟϒϓϩ༻ͷλεΫͷϦϯΫ
[৫໘] [ֶशͷଅਐ] Ϟϒϓϩ ç φϏήʔλʔ υϥΠόʔ ը໘ڞ༗
1. υϥΠόʔͱφϏήʔλʔʹ͔ΕΔ a. υϥΠόʔ1໊ɺͦͷଞφϏήʔλʔ b. ࣗφϏήʔλʔͷΈΛ୲ 2. υϥΠόʔ͕ը໘Λڞ༗ 3. υϥΠόʔ͕φϏήʔλʔͷࢦࣔʹै࣮ͬͯ
a. ࣭͕͋Εͦͷճ͠ͳ͕ΒਐΊΔ 4. 30ܦաͨ͠ΒυϥΠόʔΛަ [৫໘] [ֶशͷଅਐ] Ϟϒϓϩ
[৫໘] [ֶशͷଅਐ] ϑϩϯτΤϯυڞ༗ձ ࣮ͨ͠PRֶΜͩ͜ͱΛڞ༗͢ΔձΛि̍Ͱ։࠵
[৫໘] [ֶशͷଅਐ] ϑϩϯτΤϯυڞ༗ձ ςϯϓϨʔτʹै֤͕ͬͯࣗࣄલʹهࡌͯ͠ɺڞ༗ձͰॱ൪ʹൃද
[৫໘] [ֶशͷଅਐ] ϑϩϯτΤϯυڞ༗ձ ൃද༰ͷྫ
৫໘͔ΒͷΞϓϩʔν ߹ҙܗ 01 ֶशͷଅਐ 02 ։ൃମ੍ͷվળ 03
[৫໘] ։ൃମ੍ͷվળ Before • ϓϥϯχϯάͰ͕ࣗλεΫΛ༻ҙ+ղ • PRͷϨϏϡʔࣗͷApprove͕ඞਢ After • ϓϥϯχϯάͰશһͰλεΫΛ༻ҙ+ղ
• PRͷϨϏϡʔશһͷApprove͕ඞਢ
[৫໘] ։ൃମ੍ͷվળ • λεΫͷղ૾্͕͕ΓɺखΓ͕ݮগ • શͯͷPRʹΛ௨͢ͷͰɺΒͳ͍࣮͕ͳ͘ͳΔ Ұݟ͕͔͔࣌ؒΓͦ͏͕ͩɺ࠷ऴతͳϦʔυλΠϜ͘ͳͬͨ
Before [৫໘] ։ൃମ੍ͷվળ After ίϛοτ~Ϛʔδ·Ͱ͕1/4ҎԼʹॖ
ٕज़໘͔ΒͷΞϓϩʔν ։ൃϧʔϧͷඋ 01 σβΠϯγεςϜͱͷ࿈ܞ 02
ಛʹΈΛ࡞Δ͜ͱΛॏཁࢹ
ٕज़໘͔ΒͷΞϓϩʔν ։ൃϧʔϧͷඋ 01 σβΠϯγεςϜͱͷ࿈ܞ 02
ࣗͷதͰ͍݁ͯͨ͠ͷΛɺυΩϡϝϯτͱͯ͠උ [ٕज़໘] ։ൃϧʔϧͷඋ
[ٕज़໘] ։ൃϧʔϧͷඋ υΩϡϝϯτΛඋ্ͨ͠Ͱ • ESLintΛίϛοτ࣌ʹνΣοΫͯ͠ɺ։ൃϧʔϧΛڧ੍ • HygenΛར༻ͯ͠ɺϧʔϧʹԊͬͨϑΝΠϧΛੜ
[ٕज़໘] [։ൃϧʔϧͷඋ] ESLintͷྫ import/no-restricted-pathsΛར༻ͯ͠ɺ σΟϨΫτϦߏͷϧʔϧʹԊΘͳ͍importΛېࢭ
[ٕज़໘] [։ൃϧʔϧͷඋ] Hygenͷྫ σΟϨΫτϦߏʹैͬͯίϯϙʔωϯτΛੜ
ٕज़໘͔ΒͷΞϓϩʔν ։ൃϧʔϧͷඋ 01 σβΠϯγεςϜͱͷ࿈ܞ 02
[ٕज़໘] σβΠϯγεςϜͱͷ࿈ܞ • σβΠϯؔ࿈͕͔͔࣌ؒΔ͠ɺ࣮ͷ͕ࠩग़͍͢ • ແடংʹ࣮͢ΔͱσβΠϯ͕൙ཞ͢Δ
[ٕज़໘] σβΠϯγεςϜͱͷ࿈ܞ ൚༻తʹ͏ίϯϙʔωϯτFigmaͱ࣮Λಉظͤ͞Δ ͦͷίϯϙʔωϯτͷ༻ΛESLintͰڧ੍ͯ͠σβΠϯΛ౷Ұ͢Δ Typographyͷྫ
03 ΞϓϩʔνͷޮՌ
PR࡞ͷભҠ ΄ͱΜͲࣗͷΞτϓοτ͔͠ͳ͍ શһ͕Ξτϓοτ͍ͯ͠Δ ࣗҰਓͩͬͨ࣌ΑΓΞτϓοτͷ૯ྔ͕૿͍͑ͯΔ
ΞϓϩʔνͷϕΫτϧΛνʔϜʹ͚ͨ͜ͱͰ νʔϜͷ։ൃੜ࢈ੑͷ্ʹܨ͕ͬͨ
04 ·ͱΊ
·ͱΊ • ৫໘ͰͷΞϓϩʔν ◦ ߹ҙܗɺֶशͷଅਐɺ։ൃମ੍ͷվળ • ٕज़໘ͰͷΞϓϩʔν ◦ ։ൃϧʔϧͷඋɺσβΠϯγεςϜͱͷ࿈ܞ •
ϚΠϯυͱΞϓϩʔνͷมԽ͕ɺνʔϜͷੜ࢈ੑΛ্ͤͨ͞ ϫϯϚϯϓϨΠΑΓνʔϜͷউརʂ