大規模フロントエンドの技術的負債と向き合う。

Battle Conference Under30 の資料です。
https://bcu30.jp/2019/talk/tomatsu-toshihisa/

Transcript

1. େن໛ϑϩϯτΤϯυͷ
   ٕज़తෛ࠴ͱ޲͖߹͏ɻ
   αΠϘ΢ζגࣜձࣾ
   5PTIJIJTB5PNBUTV
   #BUUMF$POGFSFODF6
   1
   

   View Slide

2. ֎দढ़ঘ 5PTIJIJTB5PNBUTV
   
   αΠϘ΢ζגࣜձࣾ
   ৽ଔ೥໨
   LJOUPOF։ൃνʔϜ
   ࠷ۙ͸ϑϩϯτΤϯυΤΩεύʔτ
   νʔϜͱ݉຿
   2
   !UPTIJUPNB
   !UPTIJ@@UPNB
   

   View Slide

3. ٕज़తෛ࠴
   3
   

   View Slide

4. ͍·ݱ৔Ͱ๊͍͑ͯΔ໰୊
   ͜Ε·Ͱͷ׆ಈʹ͍ͭͯ
   ͳٕͥज़తෛ࠴ͱ޲͖߹͏ͷ͔
   ٕज़తෛ࠴ͱ޲͖߹͏͜ͱͷϝϦοτ
   !
   ੌ࿹ΤϯδχΞʹΑΔվम࿩
   ಛఆٕज़΍ϥΠϒϥϦʹ͍ͭͯ
   ۜͷ஄ؙతͳ࿩
   "
   ࠓ೔࿩͢͜ͱ
   ͍·ٕज़తෛ࠴Ͱۤ͠ΜͰ͍Δਓ͕
   ࠓޙલ޲͖ʹऔΓ૊ΜͰ͍͖͔͚ͬ͘ʹͳΕ͹خ͍͠
   4
   

   View Slide

5. View Slide

6. w 8FC͕ओઓ৔ͷϓϩμΫτ
   w ೥ϦϦʔε
   w ϓϩμΫτͷϥΠϑαΠΫϧ͕ͱͯ΋௕͍ ܧଓతͳ։ൃ͕ඞཁ
   
   w େن໛͔ͭෳࡶͳΞϓϦέʔγϣϯ +BWB4DSJQU͕໿ສߦ
   
   w ΤϯδχΞ͸ϑϩϯτΤϯυ͔ΒαʔόʔαΠυ·Ͱ୲౰
   6
   LJOUPOF
   

   View Slide

7. 7
   େن໛ϑϩϯτΤϯυ
   

   View Slide

8. มԽͷܹ͍͠ϑϩϯτΤϯυ
   8
   Ծ૝%0.
   ίϯϙʔωϯτࢤ޲
   ੩తܕ෇͚
   ΤίγεςϜ
   &$."4DSJQUYY
   ϒϥ΢βͷਐԽ
   ਓ͕ؒϑΥʔϚοτΛҙࣝ͠ͳ͍
   ৽͍ٕ͠ज़΍ϥΠϒϥϦɺπʔϧ͕ੜ·Εଓ͚͍ͯΔ
   ϏϧυτϥϯεύΠϧ
   

   View Slide

9. ੈؒ͸ਐԽ͍ͯ͠ΔɻLJOUPOF͸ʁ
   9
   

   View Slide

10. ։ൃελʔτ࣌ͷϑϩϯτΤϯυͱ͸

    ΋ͪΖΜঢ়گ͸ҧ͍ͬͯΔ
    ੲ͸׆༂͍ٕͯͨ͠ज़΋͍·΍ෛ࠴ͱͯ͠࢒͍ͬͯΔ
    10
    

    View Slide

11. wಛఆͷϥΠϒϥϦ΍ίϯύΠϥʹڧ͘ґଘ
    wOQNͷΤίγεςϜͷԸܙΛड͚ਏ͍
    w։ൃελʔτ࣌ͷݹ͍ϥΠϒϥϦ΍πʔϧΛ๊͍͑ͯΔ
    wશͯͷίϯϙʔωϯτΛ৽͍͠ϥΠϒϥϦʹஔ͖׵͑ΕΔن໛Ͱ͸ͳ͍
    w7JFXͱ.PEFMͷີ݁߹
    wFUDʜ
    LJOUPOF๊͕͑Δ໰୊
    11
    

    View Slide

12. ٕज़తෛ࠴
    12
    

    View Slide

13. ͲΜͳ;͏ʹ޲͖߹͖ͬͯͨʁ
    13
    

    View Slide

14. wझຯͰ΍ͬͯΔϑϩϯτΤϯυ։ൃͷମݧͱͳΜ͔ҧ͏
    w3FBDU5ZQF4DSJQU1SFUUJFS&4-JOU&4.PEVMFTʜ
    wීஈͷ։ൃͰ΋͍͍ମݧ͍ͨ͠ʂ
    w͍·͋Δ໰୊Λվળ͍ͯ͜͠͏ʂͱߟ͑ΔΑ͏ʹͳͬͨ
    ͖͔͚ͬ
    14
    

    View Slide

15. ։ൃܥͷվળΛςʔϚʹϫʔΫγϣοϓΛ։࠵ͯ͠Έͨ
    άϧʔϓʹ෼͔Εͯվળ͍ͨ͠ΞΠσΞΛϒϨετ
    ग़ͨΞΠσΞΛ༏ઌ౓ͭͰάϧʔϐϯά
    νʔϜͰߟ͑Δ
    15
    

    View Slide

16. w౰ͨΓલ͚ͩͲɺΈΜͳ͕ࣗ෼ͱಉ͡ײ֮΍ߟ͑ͳΘ͚Ͱ͸ͳ͍
    w͜Ε͕͍·ͷσϑΝΫτ͔ͩΒͱ͍͏આ໌͸ͩΊˠ࣮ߦʹܨ͕Βͳ͍
    wࣗ෼͸ಋೖ͍ٕͨ͠ज़΍ϥΠϒϥϦͷՁ஋ʹ͍͔ͭͯͬ͠Γઆ໌Ͱ͖ͳ͍
    wπʔϧ΍ϥΠϒϥϦΛઌߦͯ͠ߟ͑Δͱ఻ΘΒͳ͍
    wͰ΋ීஈͷπϥϛͳΒΈΜͳڞײͯ͘͠ΕΔ
    ΈΜͳͱ࿩ͯ͠Θ͔ͬͨ͜ͱ
    16
    

    View Slide

17. w৽͍ٕ͠ज़΍πʔϧɺϥΠϒϥϦ
    wͳΜͱͳ͘ྑͦ͞͏ͳͷ͸Θ͔Δ
    wͰ΋ຊ౰ʹಋೖ͢΂͖ͳͷ͔͸෼͔Βͳ͍
    wͦ΋ͦ΋ɺମݧͯ͠ͳ͍͔ΒΠϝʔδͰ͖ͳ͍
    ࣗ෼Ҏ֎ͷਓ͔Βͷݟ͑ํ
    17
    

    View Slide

18. w৽͍ٕ͠ज़΍πʔϧɺϥΠϒϥϦ
    wͳΜͱͳ͘ྑͦ͞͏ͳͷ͸Θ͔Δ
    wͰ΋ຊ౰ʹಋೖ͢΂͖ͳͷ͔͸෼͔Βͳ͍
    wͦ΋ͦ΋ɺ͍·ͷϞμϯͳϞϊΛ஌Βͳ͍͔ΒΠϝʔδͰ͖ͳ͍
    ࣗ෼Ҏ֎ͷਓ͔Βͷݟ͑ํ
    18
    ৽͍͠πʔϧ΍ϥΠϒϥϦɺٕज़ʹ͍ͭͯ
    νʔϜͷΈΜͳͰֶ΂ΔϑϩϯτΤϯυษڧձ΍Δͱ͍͍͔΋
    

    View Slide

19. wΈΜͳͰϫΠϫΠ৮Δͷ͸ͱͯ΋ָ͍͠
    wීஈͷ։ൃ͚ͩͩͱֶ΂ͳ͍ٕज़Λ஌ΕΔ
    w৽͍͠πʔϧͷྑ͞ΛΈΜͳ͕ମݧͰ͖Δˠ࣮ߦʹͭͳ͕Δ
    wࢀՃऀ͸ಉ͡νʔϜͷਓ͔ͩΒɺΑΓ۩ମతͳ࿩͕Ͱ͖Δ
    w͜Εಋೖ͍ͨ͠ʂͱ͍͏੠΋
    ษڧձΛ։࠵ͯ͠Έͨ
    19
    

    View Slide

20. ͱ͜ΖͰɺٕज़తෛ࠴͸ʁ
    20
    

    View Slide

21. wۭ͍͍ͯΔ࣌ؒʹ୳ٻͯ͠Έ͚ͨͲɺยखؒͰ͸શવਐ·ͳ͔ͬͨ
    wܧଓతͳվળΛ͢ΔͨΊʹ͸ɺͪΌΜͱ޲͖߹Θͳ͍ͱ
    ٕज़తෛ࠴͸ʁ
    21
    ઐ໳ੑΛߴΊͯɺ࣌ؒΛ͔͚ͯ޲͖߹͏ඞཁ͕͋Δ
    

    View Slide

22. ϑϩϯτΤϯυΤΩεύʔτνʔϜͱ
    ݉຿͢Δ͜ͱʹͨ͠
    22
    

    View Slide

23. wϑϩϯτΤϯυ͕ಘҙͳϝϯόʔͱݱঢ়ͷ໰୊ʹ͍ͭͯߟ͑ΔΑ͏ͳͬͨ
    w୳ٻͷ࣌ؒΛܧଓతʹͱΓ΍͘͢ͳͬͨ
    w૊৫ԣஅతͳઐ໳νʔϜʹॴଐ͢Δ͜ͱͰɺଞͷϓϩμΫτͰಋೖ͍ͯ͠
    ΔπʔϧͳͲɺLJOUPOFʹ࣋ͪؼΕͦ͏ͳ஌ݟ͕૿͑ͨ
    ݉຿Λ͸͡Ίͯ
    23
    

    View Slide

24. w͍·͸ɺ௒ڊେͳ໰୊͔Βখ͞ͳ໰୊·ͰͪΌΜͱ޲͖߹͍ͬͯΔ
    wڧ͘ґଘ͍ͯ͠ΔϥΠϒϥϦ΍πʔϧΛݮΒ͢
    w%9͕޲্͢ΔΑ͏ͳπʔϧͷಋೖ
    wLJOUPOFͷྑ͍ઃܭʹ͍ͭͯߟ͑Δձ
    wϞϒϓϩάϥϛϯάͷ׆༻
    wෆ࣮֬ੑ͕େ͖͍໰୊͸ఆظతͳϞϒϓϩΛεέδϡʔϦϯά͢Δ

    ࣍ͷεέδϡʔϧ·Ͱʹϝϯόʔ͕ղܾͯ͘͠ΕΔ͜ͱ΋͋Δ
    
    w΍Δ͜ͱ͕໌֬ͳΒ୹ظతʹɺҰؾʹਐΊͯ13Λ࡞Δ
    ٕज़తෛ࠴ͷղফ͕ਐΜͰ͖ͨ
    24
    

    View Slide

25. ͓ɺͪΌΜͱ޲͖߹͑ͯΔʂ
    25
    

    View Slide

26. w1SFUUJFSͷಋೖΛ΍ͬͯΈͨ
    wٕज़తෛ࠴ͱಛఆͷ໰୊ʹͿ͔ͭͬͯɺಋೖ͕Ͱ͖ͳ͔ͬͨ
    wٕज़తෛ࠴Λղফ͠ͳ͍ͱੈؒͷਐԽʹ௥ैͰ͖ͳ͍

    ˠԸܙΛड͚Εͳ͘ͳΔͱ࠶ೝࣝͨ͠
    ࠷ۙͷ࿩
    26
    

    View Slide

27. ΍ͬͺΓٕज़తෛ࠴ͱ޲͖߹Θͳ͍ͱ
    27
    

    View Slide

28. w࠷ॳ͔Β΍Δͷͱɺେن໛ͳϓϩδΣΫτʹೖΕΔͷͰ͸೉қ౓͕ҧ͏
    w৽͍ٕ͠ज़΍πʔϧɺϥΠϒϥϦʹ͍ͭͯͪΌΜͱཧղͯ͠ͳ͍ͱͰ͖ͳ͍
    wݸਓ։ൃͰ͋ͨΓ·͑ʹ࢖͍ͬͯΔϞϊͷϝϦοτΛߟ͑Δ͖͔͚ͬʹ
    ͳͬͨ
    wͳΜͰ3FBDUೖΕΔͷʁͦΕͰͲΕ͘Β͍վળ͢Δʁ5ZQF4DSJQUೖΕΔͷʁ
    &4-JOU1SFUUJFSʜͳΜͰʁ
    w͔֬ʹ͋·Γਂ͘ҙࣝͰ͖ͯͳ͔ͬͨ
    ٕज़తෛ࠴ͱ޲͖߹͏ͱ
    28
    

    View Slide

29. wੌ࿹ΤϯδχΞ͡Όͳ͍ɺ৽ଔ̏೥໨ͷΤϯδχΞͰ΋ҰาҰาਐΊͯΔ
    wษڧձ΍ϞϒϓϩΛ׆༻ͯ͠νʔϜͰٕज़తෛ࠴ͱ޲͖߹͑͹ා͘ͳ͍
    wٕज़తෛ࠴ͱ޲͖߹͏͜ͱ͸ɺࣗ෼ͷ੒௕ʹ΋ܨ͕Δ
    ͍͞͝ʹ
    29
    

    View Slide

30. 5)"/,:06
    νʔϜͱࣗ෼ͷͨΊʹٕज़తෛ࠴ͱ޲͖߹͓͏ʂ
    30
    

    View Slide