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

by KazukiHayase

Slide 1

Slide 1 text

ࣗ෼͚͕ͩؤுΔͷΛ΍ΊͯɺϑϧελοΫͳνʔϜΛ࡞Δ Զͨͪͷຊ౰ʹ΍Γ͔ͨͬͨDevDay 2023.06.21

Slide 2

Slide 2 text

ૣ੉࿨ًʢ@KazukiHayaseʣ ● 2021೥BuySell Technologies৽ଔೖࣾ ● ग़඼؅ཧSaaSνʔϜ ϓϩδΣΫτϦʔμʔ ● Go / TypeScript / ։ൃੜ࢈ੑվળ ● ௚ۙͷొஃྺ ○ ʲZOZO x ϕʔεϚΩφ x όΠηϧʳGoษڧձ #1 ○ ʲ։ൃੜ࢈ੑ Meetup #1ʳ։ൃੜ࢈ੑՄࢹԽʹΑΔ มԽ~ࣄྫLT͔ΒֶͿϕετϓϥΫςΟε~ ○ ϦΫϧʔτ × BASE × όΠηϧ   ʲୈ1ճϑϩϯτΤϯυษڧձʳReact & GraphQL

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

ࣗ෼͚͕ͩؤுΔͷΛ΍Ίͯ ϑϩϯτΤϯυ։ൃΛ࢓૊ΈԽ͢Δ͜ͱͰ ϑϧελοΫͳνʔϜΛ࡞ͬͨ࿩ ࠓ೔࿩͢͜ͱ

Slide 6

Slide 6 text

ΞδΣϯμ എܠ 01 2ͭͷଆ໘͔ΒͷΞϓϩʔν 02 ΞϓϩʔνͷޮՌ 03 ·ͱΊ 04

Slide 7

Slide 7 text

01 എܠ

Slide 8

Slide 8 text

౰࣌ͷ։ൃମ੍ ΤϯδχΞϦϯάϚωʔδϟʔ ʢ1໊ʣ ϑϩϯτΤϯυΤϯδχΞ ʢ1໊ɺࣗ෼ʣ όοΫΤϯυΤϯδχΞ ʢ3໊ʣ EMͱࣗ෼͕PdM΋݉೚

Slide 9

Slide 9 text

● ϑϩϯτΤϯυΤϯδχΞ͸ࣗ෼ҰਓͰPdM΋݉೚ ● ୯ಠͰਐΊΒΕΔͷͰ։ൃεϐʔυ͸ૣ͍ ● ϑϩϯτΤϯυ։ൃͷશݖΛҕͶΒΕ͍Δ ౰࣌ͷ։ൃମ੍

Slide 10

Slide 10 text

● ϑϩϯτΤϯυͷ։ൃ͸ॱௐ ● ࣗ෼ͷΞ΢τϓοτ͕ϓϩμΫτਐḿʹ௚݁͢Δ ● ৽ଔ1೥໨ͳͷͰ΍ΔؾʹຬͪᷓΕ͍ͯΔ ։ൃॳظ ࣗ෼͕ؤுΕ͹։ൃ্͕खͩ͘Ζ͏ͱ͍͏ࠜڌͷͳ͍ࣗ৴

Slide 11

Slide 11 text

։ൃॳظ ࣗ৴ νʔϜ։ൃ΁ͷཧղ νʔϜ։ൃ΁ͷཧղ͕ઙ͍͕ނͷࣗ৴

Slide 12

Slide 12 text

● ։ൃҎ֎ͷۀ຿͕૿Ճ͠ɺ࡞ۀ͕࣌ؒ֬อͰ͖ͳ͍ ● ଞͷϝϯόʔʹϑϩϯτΤϯυͷλεΫΛ͓ئ͍Ͱ͖ͳ͍ ։ൃͷ஗Ԇ ࣗ෼͕࡞ۀͰ͖ͳ͍ͱϑϩϯτΤϯυͷ։ൃ͕ਐ·ͳ͍

Slide 13

Slide 13 text

ϑϩϯτΤϯυ։ൃͷ஗Ԇ͚͕ͩݪҼͰ͸ͳ͍͕   ϦϦʔεΛԆظ͢Δ͜ͱʹ ϦϦʔεԆظ

Slide 14

Slide 14 text

● ݸਓͷΞ΢τϓοτྔʹ͸ݶք͕͋Δ ● ҰਓͰؤுͬͯ΋εέʔϧ͠ͳ͍ ● ༏ઌ͢Δ΂͖͸νʔϜͱͯ͠ͷΞ΢τϓοτ ϚΠϯυͷมԽ

Slide 15

Slide 15 text

νʔϜΛมԽͤ͞Δํ޲΁ϚΠϯυΛγϑτ

Slide 16

Slide 16 text

02 2ͭͷଆ໘͔ΒͷΞϓϩʔν

Slide 17

Slide 17 text

2ͭͷଆ໘͔ΒͷΞϓϩʔν ૊৫໘ 01 ٕज़໘ 02

Slide 18

Slide 18 text

૊৫໘͔ΒͷΞϓϩʔν ߹ҙܗ੒ 01 ֶशͷଅਐ 02 ։ൃମ੍ͷվળ 03

Slide 19

Slide 19 text

૊৫໘͔ΒͷΞϓϩʔν ߹ҙܗ੒ 01 ֶशͷଅਐ 02 ։ൃମ੍ͷվળ 03

Slide 20

Slide 20 text

[૊৫໘] ߹ҙܗ੒ ● όΠηϧͷϑϧελοΫʹ։ൃ͢ΔจԽ ● ଐਓԽͱ͍͏νʔϜ๊͕͑Δ՝୊ શһ͕ϑϩϯτΤϯυͷ։ൃ΋Ͱ͖ΔΑ͏ʹͳΔͱ͍͏߹ҙܗ੒

Slide 21

Slide 21 text

[૊৫໘] ߹ҙܗ੒ ͸͡Ίʹ߹ҙΛऔΔ͜ͱͰɺͦͷޙͷҙࢥܾఆ͕εϜʔζʹͳΔ e.g. ● ۀ຿࣌ؒ಺Ͱͷษڧձͷ։࠵ ● Ұ࣌తͳੜ࢈ੑ௿Լͷڐ༰

Slide 22

Slide 22 text

߹ҙܗ੒͸νʔϜΛมԽͤ͞ΔͨΊͷϑΝʔετεςοϓ

Slide 23

Slide 23 text

● ݱঢ়ͷ՝୊ͱཧ૝ͷঢ়ଶΛڞ༗͢Δ ● ݱঢ়ͱཧ૝ͷΪϟοϓΛຒΊΔͨΊͷHowΛٞ࿦͢Δ ● ϕʔε͕Ͱ͖ΔͷͰٞ࿦͕ͿΕʹ͍͘ [૊৫໘] ߹ҙܗ੒ͷίπ

Slide 24

Slide 24 text

૊৫໘͔ΒͷΞϓϩʔν ߹ҙܗ੒ 01 ֶशͷଅਐ 02 ։ൃମ੍ͷվળ 03

Slide 25

Slide 25 text

[૊৫໘] ֶशͷଅਐ ษڧձ Ϟϒϓϩ ϑϩϯτΤϯυ ڞ༗ձ

Slide 26

Slide 26 text

[૊৫໘] [ֶशͷଅਐ] ษڧձ ● TypeScript΍Reactͷجૅ͔ΒΩϟονΞοϓ ● ۀ຿Ͱ࢖͍ͬͯΔٕज़ελοΫͰTodoΞϓϦΛ࡞੒ ● ຖ೔1࣌ؒɺۀ຿࣌ؒ಺ʹ࣮ࢪ

Slide 27

Slide 27 text

[૊৫໘] [ֶशͷଅਐ] Ϟϒϓϩ ● ࣮ࢪ͢Δ೔࣌ΛܾΊͯɺग़ࣾͯ͠ର໘Ͱ࣮ࢪ ● ͋Β͔͡ΊϞϒϓϩ༻ͷλεΫΛ༻ҙ Ϟϒϓϩ༻ͷλεΫͷϦϯΫ

Slide 28

Slide 28 text

[૊৫໘] [ֶशͷଅਐ] Ϟϒϓϩ ç φϏήʔλʔ υϥΠόʔ ը໘ڞ༗

Slide 29

Slide 29 text

1. υϥΠόʔͱφϏήʔλʔʹ෼͔ΕΔ a. υϥΠόʔ͸1໊ɺͦͷଞ͸φϏήʔλʔ b. ࣗ෼͸φϏήʔλʔͷΈΛ୲౰ 2. υϥΠόʔ͕ը໘Λڞ༗ 3. υϥΠόʔ͕φϏήʔλʔͷࢦࣔʹै࣮ͬͯ૷ a. ࣭໰͕͋Ε͹ͦͷ౎౓ճ౴͠ͳ͕ΒਐΊΔ 4. 30෼ܦաͨ͠ΒυϥΠόʔΛަ୅ [૊৫໘] [ֶशͷଅਐ] Ϟϒϓϩ

Slide 30

Slide 30 text

[૊৫໘] [ֶशͷଅਐ] ϑϩϯτΤϯυڞ༗ձ ࣮૷ͨ͠PR΍ֶΜͩ͜ͱΛڞ༗͢ΔձΛि̍Ͱ։࠵

Slide 31

Slide 31 text

[૊৫໘] [ֶशͷଅਐ] ϑϩϯτΤϯυڞ༗ձ ςϯϓϨʔτʹै֤͕ͬͯࣗࣄલʹهࡌͯ͠ɺڞ༗ձͰॱ൪ʹൃද

Slide 32

Slide 32 text

[૊৫໘] [ֶशͷଅਐ] ϑϩϯτΤϯυڞ༗ձ ൃද಺༰ͷྫ

Slide 33

Slide 33 text

૊৫໘͔ΒͷΞϓϩʔν ߹ҙܗ੒ 01 ֶशͷଅਐ 02 ։ൃମ੍ͷվળ 03

Slide 34

Slide 34 text

[૊৫໘] ։ൃମ੍ͷվળ Before ● ϓϥϯχϯάͰࣗ෼͕λεΫΛ༻ҙ+෼ղ ● PRͷϨϏϡʔ͸ࣗ෼ͷApprove͕ඞਢ After ● ϓϥϯχϯάͰશһͰλεΫΛ༻ҙ+෼ղ ● PRͷϨϏϡʔ͸શһͷApprove͕ඞਢ

Slide 35

Slide 35 text

[૊৫໘] ։ൃମ੍ͷվળ ● λεΫͷղ૾౓্͕͕Γɺख໭Γ͕ݮগ ● શͯͷPRʹ໨Λ௨͢ͷͰɺ஌Βͳ͍࣮૷͕ͳ͘ͳΔ Ұݟ͕͔͔࣌ؒΓͦ͏͕ͩɺ࠷ऴతͳϦʔυλΠϜ͸୹͘ͳͬͨ

Slide 36

Slide 36 text

Before [૊৫໘] ։ൃମ੍ͷվળ After ίϛοτ~Ϛʔδ·Ͱ͕1/4ҎԼʹ୹ॖ

Slide 37

Slide 37 text

ٕज़໘͔ΒͷΞϓϩʔν ։ൃϧʔϧͷ੔උ 01 σβΠϯγεςϜͱͷ࿈ܞ 02

Slide 38

Slide 38 text

ಛʹ࢓૊ΈΛ࡞Δ͜ͱΛॏཁࢹ

Slide 39

Slide 39 text

ٕज़໘͔ΒͷΞϓϩʔν ։ൃϧʔϧͷ੔උ 01 σβΠϯγεςϜͱͷ࿈ܞ 02

Slide 40

Slide 40 text

ࣗ෼ͷதͰ׬͍݁ͯͨ͠΋ͷΛɺυΩϡϝϯτͱͯ͠੔උ [ٕज़໘] ։ൃϧʔϧͷ੔උ

Slide 41

Slide 41 text

[ٕज़໘] ։ൃϧʔϧͷ੔උ υΩϡϝϯτΛ੔උ্ͨ͠Ͱ ● ESLintΛίϛοτ࣌ʹνΣοΫͯ͠ɺ։ൃϧʔϧΛڧ੍ ● HygenΛར༻ͯ͠ɺϧʔϧʹԊͬͨϑΝΠϧΛੜ੒

Slide 42

Slide 42 text

[ٕज़໘] [։ൃϧʔϧͷ੔උ] ESLintͷྫ import/no-restricted-pathsΛར༻ͯ͠ɺ   σΟϨΫτϦߏ੒ͷϧʔϧʹԊΘͳ͍importΛېࢭ

Slide 43

Slide 43 text

[ٕज़໘] [։ൃϧʔϧͷ੔උ] Hygenͷྫ σΟϨΫτϦߏ੒ʹैͬͯίϯϙʔωϯτΛੜ੒

Slide 44

Slide 44 text

ٕज़໘͔ΒͷΞϓϩʔν ։ൃϧʔϧͷ੔උ 01 σβΠϯγεςϜͱͷ࿈ܞ 02

Slide 45

Slide 45 text

[ٕज़໘] σβΠϯγεςϜͱͷ࿈ܞ ● σβΠϯؔ࿈͸͕͔͔࣌ؒΔ͠ɺ࣮૷ͷ͕ࠩग़΍͍͢ ● ແடংʹ࣮૷͢ΔͱσβΠϯ͕൙ཞ͢Δ

Slide 46

Slide 46 text

[ٕज़໘] σβΠϯγεςϜͱͷ࿈ܞ ൚༻తʹ࢖͏ίϯϙʔωϯτ͸Figmaͱ࣮૷Λಉظͤ͞Δ ͦͷίϯϙʔωϯτͷ࢖༻ΛESLintͰڧ੍ͯ͠σβΠϯΛ౷Ұ͢Δ Typographyͷྫ

Slide 47

Slide 47 text

03 ΞϓϩʔνͷޮՌ

Slide 48

Slide 48 text

PR࡞੒਺ͷભҠ ΄ͱΜͲࣗ෼ͷΞ΢τϓοτ͔͠ͳ͍ શһ͕Ξ΢τϓοτ͍ͯ͠Δ ࣗ෼Ұਓͩͬͨ࣌ΑΓ΋Ξ΢τϓοτͷ૯ྔ͕૿͍͑ͯΔ

Slide 49

Slide 49 text

ΞϓϩʔνͷϕΫτϧΛνʔϜʹ޲͚ͨ͜ͱͰ νʔϜͷ։ൃੜ࢈ੑͷ޲্ʹܨ͕ͬͨ

Slide 50

Slide 50 text

04 ·ͱΊ

Slide 51

Slide 51 text

·ͱΊ ● ૊৫໘ͰͷΞϓϩʔν ○ ߹ҙܗ੒ɺֶशͷଅਐɺ։ൃମ੍ͷվળ ● ٕज़໘ͰͷΞϓϩʔν ○ ։ൃϧʔϧͷ੔උɺσβΠϯγεςϜͱͷ࿈ܞ ● ϚΠϯυͱΞϓϩʔνͷมԽ͕ɺνʔϜͷੜ࢈ੑΛ޲্ͤͨ͞ ϫϯϚϯϓϨΠΑΓ΋νʔϜͷউརʂ