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

Transcript

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

   View Slide

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

   ʲୈ1ճϑϩϯτΤϯυษڧձʳReact & GraphQL
   

   View Slide

3. View Slide

4. View Slide

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

   View Slide

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

   View Slide

7. 01
   എܠ
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. ϑϩϯτΤϯυ։ൃͷ஗Ԇ͚͕ͩݪҼͰ͸ͳ͍͕
    

    ϦϦʔεΛԆظ͢Δ͜ͱʹ
    ϦϦʔεԆظ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. 2ͭͷଆ໘͔ΒͷΞϓϩʔν
    ૊৫໘
    01
    ٕज़໘
    02
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

38. ಛʹ࢓૊ΈΛ࡞Δ͜ͱΛॏཁࢹ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. [ٕज़໘] [։ൃϧʔϧͷ੔උ] ESLintͷྫ
    import/no-restricted-pathsΛར༻ͯ͠ɺ
    

    σΟϨΫτϦߏ੒ͷϧʔϧʹԊΘͳ͍importΛېࢭ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. 03
    ΞϓϩʔνͷޮՌ
    

    View Slide

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

    View Slide

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

    View Slide

50. 04
    ·ͱΊ
    

    View Slide

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

    View Slide