自分だけが頑張るのをやめて、フルスタックなチームを作る

Transcript

1. ࣗ෼͚͕ͩؤுΔͷΛ΍ΊͯɺϑϧελοΫͳνʔϜΛ࡞Δ Զͨͪͷຊ౰ʹ΍Γ͔ͨͬͨDevDay 2023.06.21
2. ૣ੉࿨ًʢ@KazukiHayaseʣ • 2021೥BuySell Technologies৽ଔೖࣾ • ग़඼؅ཧSaaSνʔϜ ϓϩδΣΫτϦʔμʔ • Go / TypeScript / ։ൃੜ࢈ੑվળ • ௚ۙͷొஃྺ ◦ ʲZOZO x ϕʔεϚΩφ x όΠηϧʳGoษڧձ #1 ◦ ʲ։ൃੜ࢈ੑ Meetup #1ʳ։ൃੜ࢈ੑՄࢹԽʹΑΔ มԽ~ࣄྫLT͔ΒֶͿϕετϓϥΫςΟε~ ◦ ϦΫϧʔτ × BASE × όΠηϧ 
 ʲୈ1ճϑϩϯτΤϯυษڧձʳReact & GraphQL
5. ࣗ෼͚͕ͩؤுΔͷΛ΍Ίͯ ϑϩϯτΤϯυ։ൃΛ࢓૊ΈԽ͢Δ͜ͱͰ ϑϧελοΫͳνʔϜΛ࡞ͬͨ࿩ ࠓ೔࿩͢͜ͱ
6. ΞδΣϯμ എܠ 01 2ͭͷଆ໘͔ΒͷΞϓϩʔν 02 ΞϓϩʔνͷޮՌ 03 ·ͱΊ 04
7. 01 എܠ
8. ౰࣌ͷ։ൃମ੍ ΤϯδχΞϦϯάϚωʔδϟʔ ʢ1໊ʣ ϑϩϯτΤϯυΤϯδχΞ ʢ1໊ɺࣗ෼ʣ όοΫΤϯυΤϯδχΞ ʢ3໊ʣ EMͱࣗ෼͕PdM΋݉೚
9. • ϑϩϯτΤϯυΤϯδχΞ͸ࣗ෼ҰਓͰPdM΋݉೚ • ୯ಠͰਐΊΒΕΔͷͰ։ൃεϐʔυ͸ૣ͍ • ϑϩϯτΤϯυ։ൃͷશݖΛҕͶΒΕ͍Δ ౰࣌ͷ։ൃମ੍
10. • ϑϩϯτΤϯυͷ։ൃ͸ॱௐ • ࣗ෼ͷΞ΢τϓοτ͕ϓϩμΫτਐḿʹ௚݁͢Δ • ৽ଔ1೥໨ͳͷͰ΍ΔؾʹຬͪᷓΕ͍ͯΔ ։ൃॳظ ࣗ෼͕ؤுΕ͹։ൃ্͕खͩ͘Ζ͏ͱ͍͏ࠜڌͷͳ͍ࣗ৴
11. ։ൃॳظ ࣗ৴ νʔϜ։ൃ΁ͷཧղ νʔϜ։ൃ΁ͷཧղ͕ઙ͍͕ނͷࣗ৴
12. • ։ൃҎ֎ͷۀ຿͕૿Ճ͠ɺ࡞ۀ͕࣌ؒ֬อͰ͖ͳ͍ • ଞͷϝϯόʔʹϑϩϯτΤϯυͷλεΫΛ͓ئ͍Ͱ͖ͳ͍ ։ൃͷ஗Ԇ ࣗ෼͕࡞ۀͰ͖ͳ͍ͱϑϩϯτΤϯυͷ։ൃ͕ਐ·ͳ͍
13. ϑϩϯτΤϯυ։ൃͷ஗Ԇ͚͕ͩݪҼͰ͸ͳ͍͕ 
 ϦϦʔεΛԆظ͢Δ͜ͱʹ ϦϦʔεԆظ
14. • ݸਓͷΞ΢τϓοτྔʹ͸ݶք͕͋Δ • ҰਓͰؤுͬͯ΋εέʔϧ͠ͳ͍ • ༏ઌ͢Δ΂͖͸νʔϜͱͯ͠ͷΞ΢τϓοτ ϚΠϯυͷมԽ
15. νʔϜΛมԽͤ͞Δํ޲΁ϚΠϯυΛγϑτ
16. 02 2ͭͷଆ໘͔ΒͷΞϓϩʔν
17. 2ͭͷଆ໘͔ΒͷΞϓϩʔν ૊৫໘ 01 ٕज़໘ 02
18. ૊৫໘͔ΒͷΞϓϩʔν ߹ҙܗ੒ 01 ֶशͷଅਐ 02 ։ൃମ੍ͷվળ 03
19. ૊৫໘͔ΒͷΞϓϩʔν ߹ҙܗ੒ 01 ֶशͷଅਐ 02 ։ൃମ੍ͷվળ 03
20. [૊৫໘] ߹ҙܗ੒ • όΠηϧͷϑϧελοΫʹ։ൃ͢ΔจԽ • ଐਓԽͱ͍͏νʔϜ๊͕͑Δ՝୊ શһ͕ϑϩϯτΤϯυͷ։ൃ΋Ͱ͖ΔΑ͏ʹͳΔͱ͍͏߹ҙܗ੒
21. [૊৫໘] ߹ҙܗ੒ ͸͡Ίʹ߹ҙΛऔΔ͜ͱͰɺͦͷޙͷҙࢥܾఆ͕εϜʔζʹͳΔ e.g. • ۀ຿࣌ؒ಺Ͱͷษڧձͷ։࠵ • Ұ࣌తͳੜ࢈ੑ௿Լͷڐ༰
22. ߹ҙܗ੒͸νʔϜΛมԽͤ͞ΔͨΊͷϑΝʔετεςοϓ
23. • ݱঢ়ͷ՝୊ͱཧ૝ͷঢ়ଶΛڞ༗͢Δ • ݱঢ়ͱཧ૝ͷΪϟοϓΛຒΊΔͨΊͷHowΛٞ࿦͢Δ • ϕʔε͕Ͱ͖ΔͷͰٞ࿦͕ͿΕʹ͍͘ [૊৫໘] ߹ҙܗ੒ͷίπ
24. ૊৫໘͔ΒͷΞϓϩʔν ߹ҙܗ੒ 01 ֶशͷଅਐ 02 ։ൃମ੍ͷվળ 03
25. [૊৫໘] ֶशͷଅਐ ษڧձ Ϟϒϓϩ ϑϩϯτΤϯυ ڞ༗ձ
26. [૊৫໘] [ֶशͷଅਐ] ษڧձ • TypeScript΍Reactͷجૅ͔ΒΩϟονΞοϓ • ۀ຿Ͱ࢖͍ͬͯΔٕज़ελοΫͰTodoΞϓϦΛ࡞੒ • ຖ೔1࣌ؒɺۀ຿࣌ؒ಺ʹ࣮ࢪ
27. [૊৫໘] [ֶशͷଅਐ] Ϟϒϓϩ • ࣮ࢪ͢Δ೔࣌ΛܾΊͯɺग़ࣾͯ͠ର໘Ͱ࣮ࢪ • ͋Β͔͡ΊϞϒϓϩ༻ͷλεΫΛ༻ҙ Ϟϒϓϩ༻ͷλεΫͷϦϯΫ
28. [૊৫໘] [ֶशͷଅਐ] Ϟϒϓϩ ç φϏήʔλʔ υϥΠόʔ ը໘ڞ༗
29. 1. υϥΠόʔͱφϏήʔλʔʹ෼͔ΕΔ a. υϥΠόʔ͸1໊ɺͦͷଞ͸φϏήʔλʔ b. ࣗ෼͸φϏήʔλʔͷΈΛ୲౰ 2. υϥΠόʔ͕ը໘Λڞ༗ 3. υϥΠόʔ͕φϏήʔλʔͷࢦࣔʹै࣮ͬͯ૷ a. ࣭໰͕͋Ε͹ͦͷ౎౓ճ౴͠ͳ͕ΒਐΊΔ 4. 30෼ܦաͨ͠ΒυϥΠόʔΛަ୅ [૊৫໘] [ֶशͷଅਐ] Ϟϒϓϩ
30. [૊৫໘] [ֶशͷଅਐ] ϑϩϯτΤϯυڞ༗ձ ࣮૷ͨ͠PR΍ֶΜͩ͜ͱΛڞ༗͢ΔձΛि̍Ͱ։࠵
31. [૊৫໘] [ֶशͷଅਐ] ϑϩϯτΤϯυڞ༗ձ ςϯϓϨʔτʹै֤͕ͬͯࣗࣄલʹهࡌͯ͠ɺڞ༗ձͰॱ൪ʹൃද
32. [૊৫໘] [ֶशͷଅਐ] ϑϩϯτΤϯυڞ༗ձ ൃද಺༰ͷྫ
33. ૊৫໘͔ΒͷΞϓϩʔν ߹ҙܗ੒ 01 ֶशͷଅਐ 02 ։ൃମ੍ͷվળ 03
34. [૊৫໘] ։ൃମ੍ͷվળ Before • ϓϥϯχϯάͰࣗ෼͕λεΫΛ༻ҙ+෼ղ • PRͷϨϏϡʔ͸ࣗ෼ͷApprove͕ඞਢ After • ϓϥϯχϯάͰશһͰλεΫΛ༻ҙ+෼ղ • PRͷϨϏϡʔ͸શһͷApprove͕ඞਢ
35. [૊৫໘] ։ൃମ੍ͷվળ • λεΫͷղ૾౓্͕͕Γɺख໭Γ͕ݮগ • શͯͷPRʹ໨Λ௨͢ͷͰɺ஌Βͳ͍࣮૷͕ͳ͘ͳΔ Ұݟ͕͔͔࣌ؒΓͦ͏͕ͩɺ࠷ऴతͳϦʔυλΠϜ͸୹͘ͳͬͨ
36. Before [૊৫໘] ։ൃମ੍ͷվળ After ίϛοτ~Ϛʔδ·Ͱ͕1/4ҎԼʹ୹ॖ
37. ٕज़໘͔ΒͷΞϓϩʔν ։ൃϧʔϧͷ੔උ 01 σβΠϯγεςϜͱͷ࿈ܞ 02
38. ಛʹ࢓૊ΈΛ࡞Δ͜ͱΛॏཁࢹ
39. ٕज़໘͔ΒͷΞϓϩʔν ։ൃϧʔϧͷ੔උ 01 σβΠϯγεςϜͱͷ࿈ܞ 02
40. ࣗ෼ͷதͰ׬͍݁ͯͨ͠΋ͷΛɺυΩϡϝϯτͱͯ͠੔උ [ٕज़໘] ։ൃϧʔϧͷ੔උ
41. [ٕज़໘] ։ൃϧʔϧͷ੔උ υΩϡϝϯτΛ੔උ্ͨ͠Ͱ • ESLintΛίϛοτ࣌ʹνΣοΫͯ͠ɺ։ൃϧʔϧΛڧ੍ • HygenΛར༻ͯ͠ɺϧʔϧʹԊͬͨϑΝΠϧΛੜ੒
42. [ٕज़໘] [։ൃϧʔϧͷ੔උ] ESLintͷྫ import/no-restricted-pathsΛར༻ͯ͠ɺ 
 σΟϨΫτϦߏ੒ͷϧʔϧʹԊΘͳ͍importΛېࢭ
43. [ٕज़໘] [։ൃϧʔϧͷ੔උ] Hygenͷྫ σΟϨΫτϦߏ੒ʹैͬͯίϯϙʔωϯτΛੜ੒
44. ٕज़໘͔ΒͷΞϓϩʔν ։ൃϧʔϧͷ੔උ 01 σβΠϯγεςϜͱͷ࿈ܞ 02
45. [ٕज़໘] σβΠϯγεςϜͱͷ࿈ܞ • σβΠϯؔ࿈͸͕͔͔࣌ؒΔ͠ɺ࣮૷ͷ͕ࠩग़΍͍͢ • ແடংʹ࣮૷͢ΔͱσβΠϯ͕൙ཞ͢Δ
46. [ٕज़໘] σβΠϯγεςϜͱͷ࿈ܞ ൚༻తʹ࢖͏ίϯϙʔωϯτ͸Figmaͱ࣮૷Λಉظͤ͞Δ ͦͷίϯϙʔωϯτͷ࢖༻ΛESLintͰڧ੍ͯ͠σβΠϯΛ౷Ұ͢Δ Typographyͷྫ
47. 03 ΞϓϩʔνͷޮՌ
48. PR࡞੒਺ͷભҠ ΄ͱΜͲࣗ෼ͷΞ΢τϓοτ͔͠ͳ͍ શһ͕Ξ΢τϓοτ͍ͯ͠Δ ࣗ෼Ұਓͩͬͨ࣌ΑΓ΋Ξ΢τϓοτͷ૯ྔ͕૿͍͑ͯΔ
49. ΞϓϩʔνͷϕΫτϧΛνʔϜʹ޲͚ͨ͜ͱͰ νʔϜͷ։ൃੜ࢈ੑͷ޲্ʹܨ͕ͬͨ
50. 04 ·ͱΊ
51. ·ͱΊ • ૊৫໘ͰͷΞϓϩʔν ◦ ߹ҙܗ੒ɺֶशͷଅਐɺ։ൃମ੍ͷվળ • ٕज़໘ͰͷΞϓϩʔν ◦ ։ൃϧʔϧͷ੔උɺσβΠϯγεςϜͱͷ࿈ܞ • ϚΠϯυͱΞϓϩʔνͷมԽ͕ɺνʔϜͷੜ࢈ੑΛ޲্ͤͨ͞ ϫϯϚϯϓϨΠΑΓ΋νʔϜͷউརʂ