10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり

BuriKaigi2023の発表資料です！

Transcript

1. ೥Ҏ্ଓ͘ϓϩμΫτͷ
   ϑϩϯτΤϯυ࡮৽ϓϩδΣΫτͷ
   ;Γ͔͑Γ
   ʙͦͯ͠ɺͦͷૉ௚ͳݱࡏ஍ʙ
   

   View Slide

2. ໊લΛOVTʹ౷Ұͨ͠ͷ͸αΠϘ΢ζʹೖ͔ͬͯΒɻେֶσϏϡʔͳΒ͵ձࣾσϏϡʔϑϩͶ
   OVT ͳ͢͞Μ
   
   ࡀஉੑಢ໦ݝࡏॅ
   

   View Slide

3. ຊ೔ɺ࿩͢͜ͱ
   Ͳ͏΋ɺ͝঺հ͕஗Ε·ͨ͠ɺϑϩϯτΤϯυ࡮৽ϓϩδΣΫτͷϚείοτΩϟϥΫλʔɺϑϩϦΞͪΌΜͱݴ͏ϑϩΑ
   

   View Slide

4. ຊ೔ɺ࿩͢͜ͱ
   ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔
   ೥Ҏ্ଓ͘ϓϩμΫτͷϑϩϯτΤϯυ࡮৽ϓϩδΣΫτͷ֓ཁ
   ೥ܦͬͯΈͯͷৼΓฦΓ
   ೥ͷOVTͷ๊ෛ
   

   View Slide

5. Ҏ্ΛϓϩδΣΫτͷதͷਓ͕
   ૉ௚ʹ࿩͠·͢
   ຊ೔ɺ࿩͢͜ͱ
   ҰԠɺมͳ͜ͱݴΘͳ͍Α͏ʹνΣοΫ͸ͯ͠΋ΒͬͨϑϩΑ
   

   View Slide

6. ೥Ҏ্ଓ͘ϓϩμΫτͷ࿩
   

   View Slide

7. ೥Ҏ্ଓ͘ϓϩμΫτͷ࿩
   αΠϘ΢ζΤϯδχΞ࠾༻ϐονIUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU TMJEF
   

   View Slide

8. ೥Ҏ্ଓ͘ϓϩμΫτͷ࿩
   αΠϘ΢ζΤϯδχΞ࠾༻ϐονIUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU TMJEF
   ೥Ҏ্։ൃɾӡ༻͍ͯ͠Δ
   

   View Slide

9. ೥Ҏ্ଓ͘ϓϩμΫτͷ࿩
   αΠϘ΢ζΤϯδχΞ࠾༻ϐονIUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU TMJEF
   ੈքதͷνʔϜΛࢧ͑Δ
   ϓϩμΫτΛ໨ࢦ͍ͯ͠Δ
   

   View Slide

10. ೥Ҏ্ଓ͘ϓϩμΫτͷ࿩
    αΠϘ΢ζΤϯδχΞ࠾༻ϐονIUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU TMJEF
    ϑϩϯτΤϯυ։ൃΛՃ଎͍ͨ͠
    

    View Slide

11. ͦ͜Ͱ
    ೥Ҏ্ଓ͘ϓϩμΫτͷ࿩
    

    View Slide

12. ೥Ҏ্ଓ͘ϓϩμΫτͷ࿩
    

    View Slide

13. ೥Ҏ্ଓ͘ϓϩμΫτͷ࿩
    ೥ͷ೥຤͔Β
    LJOUPOFϑϩϯτΤϯυ࡮৽͕
    ϓϩδΣΫτԽ
    ௨শ
    ϑϩϦΞ
    

    View Slide

14. ϑϩϦΞ͕΍Γ͍ͨ͜ͱ
    

    View Slide

15. ࣋ଓՄೳͳঢ়ଶͰ
    ϑϩϯτΤϯυͷ։ൃΛՃ଎ͤ͞Δ
    ϑϩϦΞ͕΍Γ͍ͨ͜ͱ
    ͱɺOVT͸ࢥ͍ͬͯΔϑϩ
    

    View Slide

16. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔
    

    View Slide

17. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔
    ϑϩϦΞͪΌΜ΋਺͑ͯΈͨϑϩΑɻେମɺը໘͙Β͍ɺ+BWB4DSJQU͚ͩͰສߦ͙Β͍͋ͬͨϑϩͶ
    

    View Slide

18. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔
    ίʔυϕʔεΛػೳɾνʔϜମ੍ʹ
    ߹Θͤͯ෼ׂ
    

    View Slide

19. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔
    ӨڹൣғΛখ۠͘͞੾Δ
    ػೳ͝ͱʹϑϩϯτΤϯυΛ෼ׂ
    ೝ஌ෛՙΛԼ͛Δ
    Өڹൣғ΍είʔϓ͕෼͔Γ΍͍͢ͱɺϑϩϦΞͪΌΜ΋։ൃʹೖΓ΍͍͢ϑϩͶ
    

    View Slide

20. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔
    νʔϜ͝ͱͷσ
    ΟϨΫτϦɾ.POPSFQPΛ࠾༻
    ΞʔΩςΫνϟͱνʔϜମ੍Λଗ͑Δ
    νʔϜ͕ಠཱٕͯ͠ज़બఆ͕Ͱ͖ΔΑ͏ʹͳ͍ͬͯΔ
    νʔϜͷ.POPSFQPͷதͰ͸ɺQBDLBHFT͸ϩʔΧϧύοέʔδ OQNܦ༝
    Ͱར༻͍ͯ͠ΔϑϩΑ
    

    View Slide

21. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔
    ࠓޙɺେن໛ͳ
    ϑϩϯτΤϯυ࡮৽ΛߦΘͳ͍
    ߏ੒Λ໨ࢦͯ͠
    8FCͷਐԽɾมԽʹదԠͰ͖ΔΑ͏ͳΞʔΩςΫνϟΛ໨ࢦͯ͠ΔϑϩͶ
    

    View Slide

22. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔
    ݱࡏͷνʔϜମ੍
    

    View Slide

23. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔
    

    View Slide

24. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔
    ࠓճ͸͜ͷνʔϜͷৼΓฦΓ
    OVT͕ීஈɺ׆ಈ͍ͯ͠ΔνʔϜͳΜϑϩΑ
    

    View Slide

25. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔
    ػೳ#ͷϑϩϯτΤϯυ࡮৽Λ͢ΔνʔϜ
    σβΠϯ͸ͦͷ··ɺૢ࡞ײΛม͑ͳ͍
    ػೳ# ը໘͙Β͍
    Λ$MPTVSF5PPMTˠ3FBDU΁ஔ͖׵͑Δ
    αΠϨϯτϦϦʔε͢Δ͜ͱͰɺϦϦʔε·Ͱͷ଎౓Λग़͢
    ࠷଎ͰϑϩϯτΤϯυ࡮৽͢ΔͨΊͷΞϓϩʔνΛࢼ͍ͯ͠Δϑϩ
    

    View Slide

26. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔
    ͜Ε·Ͱ
    

    View Slide

27. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔
    ͜Ε͔Β
    ͖ͬ͞ͷεϥΠυͱॴʑζϨͯΔͷ͸׮༰ͳ৺Ͱݟͯ΄͍͠ϑϩΑ
    

    View Slide

28. "%3ͷ;Γ͔͑Ζ͏
    

    View Slide

29. "%3 "SDIJUFDUVSF%FDJTJPO3FDPSE
    
    ͱ͸
    "%3ͷ;Γ͔͑Γ
    ʮ"%3ͱ͸ʯͰݕࡧ͢Δͱɺ࠷ॳʹώοτ͢Δͷ͸ʮࡋ൑֎ฆ૪ղܾखଓ "%3
    ʹ͍ͭͯ๏຿লʯͩͬͨϑϩΑ
    

    View Slide

30. "%3ͷ;Γ͔͑Γ
    νʔϜ͕ܾఆͨ͜͠ͱ
    ·ͨɺͦͷܾఆʹࢸΔ·ͰΛهͨ͠
    υΩϡϝϯτ
    

    View Slide

31. ࠓ·Ͱʹݸ΄Ͳͷ"%3͕͋ͬͨ
    "%3ͷ;Γ͔͑Γ
    ͍ΖΜͳ͜ͱܾΊ͖ͯͨϑϩͶʙ
    

    View Slide

32. "%3ͷ;Γ͔͑Γ
    ࡮৽લޙͰݟͨ໨͕มΘΒͳ͍͜ͱΛ735Ͱ୲อ͢Δ
    αΠϨϯτϦϦʔεΛ͢ΔͨΊʹݟͨ໨ɾૢ࡞ײ͸ม͑ͳ͍
    ϦϦʔε·Ͱͷ଎౓Λग़ͨ͢ΊʹɺαΠϨϯτϦϦʔε͍ͨ͠
    ݟͨ໨ɾૢ࡞ײ͕มΘ͍ͬͯͳ͍͜ͱΛςετΛ͍ͨ͠
    7JTVBM3FHSFTTJPO5FTU͢Δ͔
    

    View Slide

33. "%3ͷ;Γ͔͑Γ
    1MBZXSJHIU7JUFͰ͸͡ΊΔ୤ϨΨγʔ޲͚ܰྔ7JTVBM3FHSFTTJPO5FTUIUUQTCMPHDZCP[VJPFOUSZ
    ࡮৽લޙͰݟͨ໨͕มΘΒͳ͍͜ͱΛ735Ͱ୲อ͢Δ
    ࠷ॳ͸ɺ࡮৽લޙͰ΋ಉ͡ૢ࡞ײͰ͋Δ͜ͱͷςετͷҰͭͱͯ͠ɺϐΫηϧύʔϑΣΫτΛ໨ࢦͯͨ͠ϑϩͶʙ
    1MBZXSJHIU7JUFͰ͸͡ΊΔ୤ϨΨγʔ޲͚ܰྔ7JTVBM3FHSFTTJPO5FTUIUUQTCMPHDZCP[VJPFOUSZ
    

    View Slide

34. "%3ͷ;Γ͔͑Γ
    1MBZXSJHIU7JUFͰ͸͡ΊΔ୤ϨΨγʔ޲͚ܰྔ7JTVBM3FHSFTTJPO5FTUIUUQTCMPHDZCP[VJPFOUSZ
    ࡮৽લޙͰݟͨ໨͕มΘΒͳ͍͜ͱΛ735Ͱ୲อ͠Α͏
    ࠷ॳ͸ɺ࡮৽લޙͰ΋ಉ͡ૢ࡞ײͰ͋Δ͜ͱͷςετͷҰͭͱͯ͠ɺϐΫηϧύʔϑΣΫτΛ໨ࢦͯͨ͠ϑϩͶʙ
    1MBZXSJHIU7JUFͰ͸͡ΊΔ୤ϨΨγʔ޲͚ܰྔ7JTVBM3FHSFTTJPO5FTUIUUQTCMPHDZCP[VJPFOUSZ
    735͕༏ल ݫ͠
    ͗ͨ͢ͷͰɺ
    ݱࡏ͸ɺଟগͷը໘ࠩҟ͸ڐ༰͢Δํ਑ʹ
    

    View Slide

35. "%3ͷ;Γ͔͑Γ
    ΞΫηγϏϦςΟͷվળΛɺ΍͍͖ͬͯʂ
    IUUQTOPUFDPNDZCP[V@EFTJHOOOBFEEB
    

    View Slide

36. "%3ͷ;Γ͔͑Γ
    ΞΫηγϏϦςΟͷվળΛɺ΍͍͖ͬͯʂ
    ద੾ʹϑΥʔΧε͕Ҡಈ͢Δ
    ϘλϯɺϦϯΫ͸ΩʔϘʔυͷΈͰૢ࡞Ͱ͖Δ
    ΩʔϘʔυτϥοϓ͕ͳ͍
    ϚʔΫΞοϓɾ8"*"3*"ʹ͍ͭͯϨϏϡʔ͞Ε͍ͯΔ
    ΞΫηγϏϦςΟʹ͍ͭͯ૬ஊͰ͖ΔʮϢʔβʔମݧΛ࠷ߴʹ͢ΔνʔϜʯ͕ͱͯ΋པΓʹͳΔϑϩ
    

    View Slide

37. "%3ͷ;Γ͔͑Γ
    ࡮৽ͨ͠ޙʹ࢖ΘΕͳ͘ͳͬͨݹ͍ίʔυ͸ফͦ͏
    ͱ͍͏͜ͱͰ࡟আϙϦγʔΛ࡞ͬͨ
    ݹ͍ίʔυΛফ͢·Ͱ͕࡮৽Ͱ͢Α
    Ͳ͜·ͰϑΝΠϧΛফ͢ͷ͔ΛܾΊ͍ͯΔ
    ݹ͍ίʔυΛফ͢·Ͱ͕࡮৽Ͱ͢Α $7҆˓ઌੜ
    
    

    View Slide

38. "%3ͷ;Γ͔͑Γ
    %0.ߏ଄͸Ͳ͜·Ͱ࠶ݱ͠Α͏ʁ
    ࠷ॳ͸%0.ߏ଄΋࠶ݱ͢Δํ਑ͩͬͨ
    %0.ߏ଄΍࢖͏$44͸ͦͷ··సه͢Δํ͕଎͍ʁ
    ΞΫηγϏϦςΟΛվળ͍ͨ͠
    ૢ࡞ײ͕มΘΒͳ͚Ε͹%0.ߏ଄͸ม͑ͯϤγʂ
    

    View Slide

39. ೥Λ;Γ͔͑ͬͯɺ
    (PPEͱ5IJOLJOHΛͭͣͭ
    OVT͕ࢥ͏΄ΜͱʹΑ͔ͬͨͳͬͯ͜ͱͱɺ͜Ε͔Βߟ͔͑ͯͳ͔͋Μͳͬͯ͜ͱϑϩ
    

    View Slide

40. ೥ͷৼΓฦΓ
    (PPE
    ը໘͝ͱʹϦϦʔε͢Δํ਑Ͱ
    ΄Μ·ɺΑ͔ͬͨͳ͊ɾɾɾ
    

    View Slide

41. ೥ͷৼΓฦΓ
    5IJOLJOH
    ·ͩ·ͨಓ൒͹ɾɾɾ
    ΋ͬͱ΋ͬͱεέʔϧͤ͞ΔϑϩΑʂ
    

    View Slide

42. ೥ͷOVTͷ๊ෛ
    ๊ෛ͸੠ʹग़ͨ͠ํ͕͍͍ͬͯɺͬͪ͡ΌΜ΋ݴͬͯͨϑϩΑ
    

    View Slide

43. ೥ͷOVTͷ๊ෛ
    ࣗ෼ͷνʔϜͷ࡮৽Λ
    ര଎Ͱ׬͍ྃͤͨ͞
    ڈ೥ͷऔ૊ͰͶɻര଎ʹͰ͖Δج൫͸Ͱ͖ͨͱࢥ͏ΜͰ͢Αɻ͡Όͳ͔ͬͨɺࢥ͏Μͩϑϩ
    

    View Slide

44. ೥ͷOVTͷ๊ෛ
    ͦͯ͠৽͍͠ػೳͷ࡮৽΁ʜ
    ϑϩϦΞ෦࡞׬݁ฤͰ͋ΔϑϩϦΞΫΤετᶙͷαϒλΠτϧͩϑϩ
    

    View Slide

45. ͍͞͝ʹ
    

    View Slide

46. ͍͞͝ʹ
    ࠓճͷൃදͰɺ͜ͷऔ૊ʹڵຯΛ
    ࣋ͬͯ΋Β͑ͨΒ͏Ε͍͠Ͱ͢
    

    View Slide

47. ʙGJOʙ
    

    View Slide