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
3.2k
自分だけが頑張るのをやめて、フルスタックなチームを作る
KazukiHayase
June 21, 2023
Tweet
Share
More Decks by KazukiHayase
See All by KazukiHayase
CIでのgolangci-lintの実行を約90%削減した話
kazukihayase
0
420
もし今からGraphQLを採用するなら
kazukihayase
12
5.3k
Goでテストをしやすくするためにやったこと
kazukihayase
1
820
GraphQLクライアントの技術選定 2023冬
kazukihayase
9
7.1k
Introduction and Insights of the Hasura-based Architecture
kazukihayase
0
980
Goでテンプレートからファイルを自動生成するCLIを作る
kazukihayase
0
1.4k
生産性が上がり続けるチームを作るための第一歩
kazukihayase
4
3.8k
GraphQLにおけるクライアントキャッシュ戦略
kazukihayase
0
3.2k
MUIをベースにしたデザインシステムの構築
kazukihayase
0
590
Other Decks in Technology
See All in Technology
Data Engineering Study#30 LT資料
tetsuroito
1
520
PdM業務における使い分け
shinshiro
0
450
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
210
Maintainer Meetupで「生の声」を聞く ~講演だけじゃないKubeCon
logica0419
1
140
Expertise as a Service via MCP
yodakeisuke
0
110
20250719_JAWS_kobe
takuyay0ne
1
140
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
1
670
Digitization部 紹介資料
sansan33
PRO
1
4.6k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
MCPに潜むセキュリティリスクを考えてみる
milix_m
0
430
Step Functions First - サーバーレスアーキテクチャの新しいパラダイム
taikis
1
250
RapidPen: AIエージェントによる高度なペネトレーションテスト自動化の研究開発
laysakura
1
360
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Designing for humans not robots
tammielis
253
25k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Code Review Best Practice
trishagee
69
19k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
We Have a Design System, Now What?
morganepeng
53
7.7k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
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 ·ͱΊ
·ͱΊ • ৫໘ͰͷΞϓϩʔν ◦ ߹ҙܗɺֶशͷଅਐɺ։ൃମ੍ͷվળ • ٕज़໘ͰͷΞϓϩʔν ◦ ։ൃϧʔϧͷඋɺσβΠϯγεςϜͱͷ࿈ܞ •
ϚΠϯυͱΞϓϩʔνͷมԽ͕ɺνʔϜͷੜ࢈ੑΛ্ͤͨ͞ ϫϯϚϯϓϨΠΑΓνʔϜͷউརʂ