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

BuriKaigi2023の発表資料です！

Transcript

1. ೥Ҏ্ଓ͘ϓϩμΫτͷ
   ϑϩϯτΤϯυ࡮৽ϓϩδΣΫτͷ ;Γ͔͑Γ ʙ
   ͦͯ͠ɺͦͷૉ௚ͳݱࡏ஍
   ʙ
2. ໊લΛOVTʹ౷Ұͨ͠ͷ͸αΠϘ΢ζʹೖ͔ͬͯΒɻେֶσϏϡʔͳΒ͵ձࣾσϏϡʔϑϩͶ OVT ͳ͢͞Μ ࡀஉੑ
   ಢ໦ݝࡏॅ
3. ຊ೔ɺ࿩͢͜ͱ Ͳ͏΋ɺ͝঺հ͕஗Ε·ͨ͠ɺϑϩϯτΤϯυ࡮৽ϓϩδΣΫτͷϚείοτΩϟϥΫλʔɺϑϩϦΞͪΌΜͱݴ͏ϑϩΑ
4. ຊ೔ɺ࿩͢͜ͱ ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔ ೥Ҏ্ଓ͘ϓϩμΫτͷϑϩϯτΤϯυ࡮৽ϓϩδΣΫτͷ֓ཁ ೥ܦͬͯΈͯͷৼΓฦΓ ೥ͷOVTͷ๊ෛ
5. Ҏ্ΛϓϩδΣΫτͷதͷਓ͕
   ૉ௚ʹ࿩͠·͢ ຊ೔ɺ࿩͢͜ͱ ҰԠɺมͳ͜ͱݴΘͳ͍Α͏ʹνΣοΫ͸ͯ͠΋ΒͬͨϑϩΑ
6. ೥Ҏ্ଓ͘ϓϩμΫτͷ࿩
7. ೥Ҏ্ଓ͘ϓϩμΫτͷ࿩ αΠϘ΢ζΤϯδχΞ࠾༻ϐον
   IUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU TMJEF
8. ೥Ҏ্ଓ͘ϓϩμΫτͷ࿩ αΠϘ΢ζΤϯδχΞ࠾༻ϐον
   IUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU TMJEF ೥Ҏ্։ൃɾӡ༻͍ͯ͠Δ
9. ೥Ҏ্ଓ͘ϓϩμΫτͷ࿩ αΠϘ΢ζΤϯδχΞ࠾༻ϐον
   IUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU TMJEF ੈքதͷνʔϜΛࢧ͑Δ
   ϓϩμΫτΛ໨ࢦ͍ͯ͠Δ
10. ೥Ҏ্ଓ͘ϓϩμΫτͷ࿩ αΠϘ΢ζΤϯδχΞ࠾༻ϐον
    IUUQTTQFBLFSEFDLDPNDZCP[VJOTJEFPVUDZCP[VFOHJOFFSSFDSVJU TMJEF ϑϩϯτΤϯυ։ൃΛՃ଎͍ͨ͠
11. ͦ͜Ͱ ೥Ҏ্ଓ͘ϓϩμΫτͷ࿩
12. ೥Ҏ্ଓ͘ϓϩμΫτͷ࿩
13. ೥Ҏ্ଓ͘ϓϩμΫτͷ࿩ ೥ͷ೥຤͔Β
    LJOUPOFϑϩϯτΤϯυ࡮৽͕
    ϓϩδΣΫτԽ
    ௨শ ϑϩϦΞ
14. ϑϩϦΞ͕΍Γ͍ͨ͜ͱ
15. ࣋ଓՄೳͳঢ়ଶͰ
    ϑϩϯτΤϯυͷ։ൃΛՃ଎ͤ͞Δ ϑϩϦΞ͕΍Γ͍ͨ͜ͱ ͱɺOVT͸ࢥ͍ͬͯΔϑϩ
16. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔
17. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔ ϑϩϦΞͪΌΜ΋਺͑ͯΈͨϑϩΑɻେମɺը໘͙Β͍ɺ+BWB4DSJQU͚ͩͰສߦ͙Β͍͋ͬͨϑϩͶ
18. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔ ίʔυϕʔεΛػೳɾνʔϜମ੍ʹ
    ߹Θͤͯ෼ׂ
19. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔ ӨڹൣғΛখ۠͘͞੾Δ ػೳ͝ͱʹϑϩϯτΤϯυΛ෼ׂ ೝ஌ෛՙΛԼ͛Δ Өڹൣғ΍είʔϓ͕෼͔Γ΍͍͢ͱɺϑϩϦΞͪΌΜ΋։ൃʹೖΓ΍͍͢ϑϩͶ
20. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔ νʔϜ͝ͱͷσ ΟϨΫτϦɾ.POPSFQPΛ࠾༻ ΞʔΩςΫνϟͱνʔϜମ੍Λଗ͑Δ νʔϜ͕ಠཱٕͯ͠ज़બఆ͕Ͱ͖ΔΑ͏ʹͳ͍ͬͯΔ νʔϜͷ.POPSFQPͷதͰ͸ɺQBDLBHFT͸ϩʔΧϧύοέʔδ OQNܦ༝ Ͱར༻͍ͯ͠ΔϑϩΑ
21. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔ ࠓޙɺେن໛ͳ
    ϑϩϯτΤϯυ࡮৽ΛߦΘͳ͍
    ߏ੒Λ໨ࢦͯ͠ 8FCͷਐԽɾมԽʹదԠͰ͖ΔΑ͏ͳΞʔΩςΫνϟΛ໨ࢦͯ͠ΔϑϩͶ
22. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔ ݱࡏͷνʔϜମ੍
23. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔
24. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔ ࠓճ͸͜ͷνʔϜͷৼΓฦΓ OVT͕ීஈɺ׆ಈ͍ͯ͠ΔνʔϜͳΜϑϩΑ
25. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔ ػೳ#ͷϑϩϯτΤϯυ࡮৽Λ͢ΔνʔϜ σβΠϯ͸ͦͷ··ɺૢ࡞ײΛม͑ͳ͍ ػೳ# ը໘͙Β͍ Λ$MPTVSF
    5PPMT
    ˠ
    3FBDU΁ஔ͖׵͑Δ αΠϨϯτϦϦʔε͢Δ͜ͱͰɺϦϦʔε·Ͱͷ଎౓Λग़͢ ࠷଎ͰϑϩϯτΤϯυ࡮৽͢ΔͨΊͷΞϓϩʔνΛࢼ͍ͯ͠Δϑϩ
26. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔ ͜Ε·Ͱ
27. ͲͷΑ͏ʹऔΓ૊ΜͰ͍Δ͔ ͜Ε͔Β ͖ͬ͞ͷεϥΠυͱॴʑζϨͯΔͷ͸׮༰ͳ৺Ͱݟͯ΄͍͠ϑϩΑ
28. "%3ͷ;Γ͔͑Ζ͏
29. "%3 "SDIJUFDUVSF
    %FDJTJPO
    3FDPSE
    ͱ͸ "%3ͷ;Γ͔͑Γ ʮ"%3
    ͱ͸ʯͰݕࡧ͢Δͱɺ࠷ॳʹώοτ͢Δͷ͸ʮࡋ൑֎ฆ૪ղܾखଓ "%3 ʹ͍ͭͯ
    
    ๏຿লʯͩͬͨϑϩΑ
30. "%3ͷ;Γ͔͑Γ νʔϜ͕ܾఆͨ͜͠ͱ
    ·ͨɺͦͷܾఆʹࢸΔ·ͰΛهͨ͠
    υΩϡϝϯτ
31. ࠓ·Ͱʹݸ΄Ͳͷ"%3͕͋ͬͨ "%3ͷ;Γ͔͑Γ ͍ΖΜͳ͜ͱܾΊ͖ͯͨϑϩͶʙ
32. "%3ͷ;Γ͔͑Γ ࡮৽લޙͰݟͨ໨͕มΘΒͳ͍͜ͱΛ735Ͱ୲อ͢Δ αΠϨϯτϦϦʔεΛ͢ΔͨΊʹݟͨ໨ɾૢ࡞ײ͸ม͑ͳ͍ ϦϦʔε·Ͱͷ଎౓Λग़ͨ͢ΊʹɺαΠϨϯτϦϦʔε͍ͨ͠ ݟͨ໨ɾૢ࡞ײ͕มΘ͍ͬͯͳ͍͜ͱΛςετΛ͍ͨ͠ 7JTVBM
    3FHSFTTJPO
    5FTU͢Δ͔
33. "%3ͷ;Γ͔͑Γ 1MBZXSJHIU
    
    7JUFͰ͸͡ΊΔ୤ϨΨγʔ޲͚ܰྔ
    7JTVBM
    3FHSFTTJPO
    5FTU
    IUUQTCMPHDZCP[VJPFOUSZ ࡮৽લޙͰݟͨ໨͕มΘΒͳ͍͜ͱΛ735Ͱ୲อ͢Δ ࠷ॳ͸ɺ࡮৽લޙͰ΋ಉ͡ૢ࡞ײͰ͋Δ͜ͱͷςετͷҰͭͱͯ͠ɺϐΫηϧύʔϑΣΫτΛ໨ࢦͯͨ͠ϑϩͶʙ 1MBZXSJHIU
    
    7JUFͰ͸͡ΊΔ୤ϨΨγʔ޲͚ܰྔ
    7JTVBM
    3FHSFTTJPO
    5FTU
    IUUQTCMPHDZCP[VJPFOUSZ
34. "%3ͷ;Γ͔͑Γ 1MBZXSJHIU
    
    7JUFͰ͸͡ΊΔ୤ϨΨγʔ޲͚ܰྔ
    7JTVBM
    3FHSFTTJPO
    5FTU
    IUUQTCMPHDZCP[VJPFOUSZ ࡮৽લޙͰݟͨ໨͕มΘΒͳ͍͜ͱΛ735Ͱ୲อ͠Α͏ ࠷ॳ͸ɺ࡮৽લޙͰ΋ಉ͡ૢ࡞ײͰ͋Δ͜ͱͷςετͷҰͭͱͯ͠ɺϐΫηϧύʔϑΣΫτΛ໨ࢦͯͨ͠ϑϩͶʙ 1MBZXSJHIU
    
    7JUFͰ͸͡ΊΔ୤ϨΨγʔ޲͚ܰྔ
    7JTVBM
    3FHSFTTJPO
    5FTU
    IUUQTCMPHDZCP[VJPFOUSZ 735͕༏ल ݫ͠ ͗ͨ͢ͷͰɺ
    ݱࡏ͸ɺଟগͷը໘ࠩҟ͸ڐ༰͢Δํ਑ʹ
35. "%3ͷ;Γ͔͑Γ ΞΫηγϏϦςΟͷվળΛɺ΍͍͖ͬͯʂ IUUQTOPUFDPNDZCP[V@EFTJHOOOBFEEB
36. "%3ͷ;Γ͔͑Γ ΞΫηγϏϦςΟͷվળΛɺ΍͍͖ͬͯʂ ద੾ʹϑΥʔΧε͕Ҡಈ͢Δ ϘλϯɺϦϯΫ͸ΩʔϘʔυͷΈͰૢ࡞Ͱ͖Δ ΩʔϘʔυτϥοϓ͕ͳ͍ ϚʔΫΞοϓɾ8"*"3*"ʹ͍ͭͯϨϏϡʔ͞Ε͍ͯΔ ΞΫηγϏϦςΟʹ͍ͭͯ૬ஊͰ͖ΔʮϢʔβʔମݧΛ࠷ߴʹ͢ΔνʔϜʯ͕ͱͯ΋པΓʹͳΔϑϩ
37. "%3ͷ;Γ͔͑Γ ࡮৽ͨ͠ޙʹ࢖ΘΕͳ͘ͳͬͨݹ͍ίʔυ͸ফͦ͏ ͱ͍͏͜ͱͰ࡟আϙϦγʔΛ࡞ͬͨ ݹ͍ίʔυΛফ͢·Ͱ͕࡮৽Ͱ͢Α Ͳ͜·ͰϑΝΠϧΛফ͢ͷ͔ΛܾΊ͍ͯΔ ݹ͍ίʔυΛফ͢·Ͱ͕࡮৽Ͱ͢Α $7
    ҆˓ઌੜ
38. "%3ͷ;Γ͔͑Γ %0.ߏ଄͸Ͳ͜·Ͱ࠶ݱ͠Α͏ʁ ࠷ॳ͸%0.ߏ଄΋࠶ݱ͢Δํ਑ͩͬͨ %0.ߏ଄΍࢖͏$44͸ͦͷ··సه͢Δํ͕଎͍ʁ ΞΫηγϏϦςΟΛվળ͍ͨ͠ ૢ࡞ײ͕มΘΒͳ͚Ε͹%0.ߏ଄͸ม͑ͯϤγʂ
39. ೥Λ;Γ͔͑ͬͯɺ
    (PPEͱ5IJOLJOHΛͭͣͭ OVT͕ࢥ͏΄ΜͱʹΑ͔ͬͨͳͬͯ͜ͱͱɺ͜Ε͔Βߟ͔͑ͯͳ͔͋Μͳͬͯ͜ͱϑϩ
40. ೥ͷৼΓฦΓ (PPE ը໘͝ͱʹϦϦʔε͢Δํ਑Ͱ
    ΄Μ·ɺΑ͔ͬͨͳ͊ɾɾɾ
41. ೥ͷৼΓฦΓ 5IJOLJOH ·ͩ·ͨಓ൒͹ɾɾɾ ΋ͬͱ΋ͬͱεέʔϧͤ͞ΔϑϩΑʂ
42. ೥ͷOVTͷ๊ෛ ๊ෛ͸੠ʹग़ͨ͠ํ͕͍͍ͬͯɺͬͪ͡ΌΜ΋ݴͬͯͨϑϩΑ
43. ೥ͷOVTͷ๊ෛ ࣗ෼ͷνʔϜͷ࡮৽Λ
    ര଎Ͱ׬͍ྃͤͨ͞ ڈ೥ͷऔ૊ͰͶɻര଎ʹͰ͖Δج൫͸Ͱ͖ͨͱࢥ͏ΜͰ͢Αɻ͡Όͳ͔ͬͨɺࢥ͏Μͩϑϩ
44. ೥ͷOVTͷ๊ෛ ͦͯ͠৽͍͠ػೳͷ࡮৽΁ʜ ϑϩϦΞ෦࡞׬݁ฤͰ͋ΔϑϩϦΞΫΤετᶙͷαϒλΠτϧͩϑϩ
45. ͍͞͝ʹ
46. ͍͞͝ʹ ࠓճͷൃදͰɺ͜ͷऔ૊ʹڵຯΛ
    ࣋ͬͯ΋Β͑ͨΒ͏Ε͍͠Ͱ͢
47. ʙ
    GJO
    ʙ