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

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

Transcript

1. େن໛ϑϩϯτΤϯυͷ ٕज़తෛ࠴ͱ޲͖߹͏ɻ αΠϘ΢ζ
   גࣜձࣾ
   5PTIJIJTB
   5PNBUTV
   #BUUMF
   $POGFSFODF
   6
    1
2. ֎দ
   ढ़ঘ 5PTIJIJTB
   5PNBUTV
   αΠϘ΢ζגࣜձࣾ
   ৽ଔ೥໨
   LJOUPOF։ൃνʔϜ
   ࠷ۙ͸ϑϩϯτΤϯυΤΩεύʔτ νʔϜͱ݉຿ 2 !UPTIJUPNB !UPTIJ@@UPNB
3. ٕज़తෛ࠴ 3
4. ͍·ݱ৔Ͱ๊͍͑ͯΔ໰୊
   ͜Ε·Ͱͷ׆ಈʹ͍ͭͯ
   ͳٕͥज़తෛ࠴ͱ޲͖߹͏ͷ͔
   ٕज़తෛ࠴ͱ޲͖߹͏͜ͱͷϝϦοτ ! ੌ࿹ΤϯδχΞʹΑΔվम࿩
   ಛఆٕज़΍ϥΠϒϥϦʹ͍ͭͯ
   ۜͷ஄ؙతͳ࿩ " ࠓ೔࿩͢͜ͱ ͍·ٕज़తෛ࠴Ͱۤ͠ΜͰ͍Δਓ͕
   ࠓޙલ޲͖ʹऔΓ૊ΜͰ͍͖͔͚ͬ͘ʹͳΕ͹خ͍͠ 4
5. 5
6. w 8FC͕ओઓ৔ͷϓϩμΫτ
   w ೥ϦϦʔε
   w ϓϩμΫτͷϥΠϑαΠΫϧ͕ͱͯ΋௕͍ ܧଓతͳ։ൃ͕ඞཁ
   w େن໛͔ͭෳࡶͳΞϓϦέʔγϣϯ +BWB4DSJQU͕໿ສߦ
   w ΤϯδχΞ͸ϑϩϯτΤϯυ͔ΒαʔόʔαΠυ·Ͱ୲౰ 6 LJOUPOF
7. 7 େن໛ϑϩϯτΤϯυ
8. มԽͷܹ͍͠ϑϩϯτΤϯυ 8 Ծ૝%0.
   ίϯϙʔωϯτࢤ޲ ੩తܕ෇͚ ΤίγεςϜ &$."4DSJQUYY ϒϥ΢βͷਐԽ ਓ͕ؒϑΥʔϚοτΛҙࣝ͠ͳ͍ ৽͍ٕ͠ज़΍ϥΠϒϥϦɺπʔϧ͕ੜ·Εଓ͚͍ͯΔ ϏϧυτϥϯεύΠϧ
9. ੈؒ͸ਐԽ͍ͯ͠ΔɻLJOUPOF͸ʁ 9
10. ։ൃελʔτ࣌ͷϑϩϯτΤϯυͱ͸
 ΋ͪΖΜঢ়گ͸ҧ͍ͬͯΔ
    ੲ͸׆༂͍ٕͯͨ͠ज़΋͍·΍ෛ࠴ͱͯ͠࢒͍ͬͯΔ 10
11. wಛఆͷϥΠϒϥϦ΍ίϯύΠϥʹڧ͘ґଘ
    wOQNͷΤίγεςϜͷԸܙΛड͚ਏ͍
    w։ൃελʔτ࣌ͷݹ͍ϥΠϒϥϦ΍πʔϧΛ๊͍͑ͯΔ
    wશͯͷίϯϙʔωϯτΛ৽͍͠ϥΠϒϥϦʹஔ͖׵͑ΕΔن໛Ͱ͸ͳ͍
    w7JFXͱ.PEFMͷີ݁߹
    wFUDʜ LJOUPOF๊͕͑Δ໰୊ 11
12. ٕज़తෛ࠴ 12
13. ͲΜͳ;͏ʹ޲͖߹͖ͬͯͨʁ 13
14. wझຯͰ΍ͬͯΔϑϩϯτΤϯυ։ൃͷମݧͱͳΜ͔ҧ͏
    w3FBDU5ZQF4DSJQU1SFUUJFS&4-JOU&4
    .PEVMFTʜ
    wීஈͷ։ൃͰ΋͍͍ମݧ͍ͨ͠ʂ
    w͍·͋Δ໰୊Λվળ͍ͯ͜͠͏ʂͱߟ͑ΔΑ͏ʹͳͬͨ ͖͔͚ͬ 14
15. ։ൃܥͷվળΛςʔϚʹϫʔΫγϣοϓΛ։࠵ͯ͠Έͨ
    
    άϧʔϓʹ෼͔Εͯվળ͍ͨ͠ΞΠσΞΛϒϨετ
    
    ग़ͨΞΠσΞΛ༏ઌ౓ͭͰάϧʔϐϯά νʔϜͰߟ͑Δ 15
16. w౰ͨΓલ͚ͩͲɺΈΜͳ͕ࣗ෼ͱಉ͡ײ֮΍ߟ͑ͳΘ͚Ͱ͸ͳ͍
    w͜Ε͕͍·ͷσϑΝΫτ͔ͩΒͱ͍͏આ໌͸ͩΊˠ࣮ߦʹܨ͕Βͳ͍
    wࣗ෼͸ಋೖ͍ٕͨ͠ज़΍ϥΠϒϥϦͷՁ஋ʹ͍͔ͭͯͬ͠Γઆ໌Ͱ͖ͳ͍
    wπʔϧ΍ϥΠϒϥϦΛઌߦͯ͠ߟ͑Δͱ఻ΘΒͳ͍
    wͰ΋ීஈͷπϥϛͳΒΈΜͳڞײͯ͘͠ΕΔ ΈΜͳͱ࿩ͯ͠Θ͔ͬͨ͜ͱ 16
17. w৽͍ٕ͠ज़΍πʔϧɺϥΠϒϥϦ
    wͳΜͱͳ͘ྑͦ͞͏ͳͷ͸Θ͔Δ
    wͰ΋ຊ౰ʹಋೖ͢΂͖ͳͷ͔͸෼͔Βͳ͍
    wͦ΋ͦ΋ɺମݧͯ͠ͳ͍͔ΒΠϝʔδͰ͖ͳ͍ ࣗ෼Ҏ֎ͷਓ͔Βͷݟ͑ํ 17
18. w৽͍ٕ͠ज़΍πʔϧɺϥΠϒϥϦ
    wͳΜͱͳ͘ྑͦ͞͏ͳͷ͸Θ͔Δ
    wͰ΋ຊ౰ʹಋೖ͢΂͖ͳͷ͔͸෼͔Βͳ͍
    wͦ΋ͦ΋ɺ͍·ͷϞμϯͳϞϊΛ஌Βͳ͍͔ΒΠϝʔδͰ͖ͳ͍ ࣗ෼Ҏ֎ͷਓ͔Βͷݟ͑ํ 18 ৽͍͠πʔϧ΍ϥΠϒϥϦɺٕज़ʹ͍ͭͯ
    νʔϜͷΈΜͳͰֶ΂ΔϑϩϯτΤϯυษڧձ΍Δͱ͍͍͔΋
19. wΈΜͳͰϫΠϫΠ৮Δͷ͸ͱͯ΋ָ͍͠
    wීஈͷ։ൃ͚ͩͩͱֶ΂ͳ͍ٕज़Λ஌ΕΔ
    w৽͍͠πʔϧͷྑ͞ΛΈΜͳ͕ମݧͰ͖Δˠ࣮ߦʹͭͳ͕Δ
    wࢀՃऀ͸ಉ͡νʔϜͷਓ͔ͩΒɺΑΓ۩ମతͳ࿩͕Ͱ͖Δ
    w͜Εಋೖ͍ͨ͠ʂͱ͍͏੠΋ ษڧձΛ։࠵ͯ͠Έͨ 19
20. ͱ͜ΖͰɺٕज़తෛ࠴͸ʁ 20
21. wۭ͍͍ͯΔ࣌ؒʹ୳ٻͯ͠Έ͚ͨͲɺยखؒͰ͸શવਐ·ͳ͔ͬͨ
    wܧଓతͳվળΛ͢ΔͨΊʹ͸ɺͪΌΜͱ޲͖߹Θͳ͍ͱ ٕज़తෛ࠴͸ʁ 21 ઐ໳ੑΛߴΊͯɺ࣌ؒΛ͔͚ͯ޲͖߹͏ඞཁ͕͋Δ
22. ϑϩϯτΤϯυΤΩεύʔτνʔϜͱ
    ݉຿͢Δ͜ͱʹͨ͠ 22
23. wϑϩϯτΤϯυ͕ಘҙͳϝϯόʔͱݱঢ়ͷ໰୊ʹ͍ͭͯߟ͑ΔΑ͏ͳͬͨ
    w୳ٻͷ࣌ؒΛܧଓతʹͱΓ΍͘͢ͳͬͨ
    w૊৫ԣஅతͳઐ໳νʔϜʹॴଐ͢Δ͜ͱͰɺଞͷϓϩμΫτͰಋೖ͍ͯ͠ ΔπʔϧͳͲɺLJOUPOFʹ࣋ͪؼΕͦ͏ͳ஌ݟ͕૿͑ͨ ݉຿Λ͸͡Ίͯ 23
24. w͍·͸ɺ௒ڊେͳ໰୊͔Βখ͞ͳ໰୊·ͰͪΌΜͱ޲͖߹͍ͬͯΔ
    wڧ͘ґଘ͍ͯ͠ΔϥΠϒϥϦ΍πʔϧΛݮΒ͢
    w%9͕޲্͢ΔΑ͏ͳπʔϧͷಋೖ
    wLJOUPOFͷྑ͍ઃܭʹ͍ͭͯߟ͑Δձ
    wϞϒϓϩάϥϛϯάͷ׆༻
    wෆ࣮֬ੑ͕େ͖͍໰୊͸ఆظతͳϞϒϓϩΛεέδϡʔϦϯά͢Δ

    ࣍ͷεέδϡʔϧ·Ͱʹϝϯόʔ͕ղܾͯ͘͠ΕΔ͜ͱ΋͋Δ
    w΍Δ͜ͱ͕໌֬ͳΒ୹ظతʹɺҰؾʹਐΊͯ13Λ࡞Δ ٕज़తෛ࠴ͷղফ͕ਐΜͰ͖ͨ 24
25. ͓ɺͪΌΜͱ޲͖߹͑ͯΔʂ 25
26. w1SFUUJFSͷಋೖΛ΍ͬͯΈͨ
    wٕज़తෛ࠴ͱಛఆͷ໰୊ʹͿ͔ͭͬͯɺಋೖ͕Ͱ͖ͳ͔ͬͨ
    wٕज़తෛ࠴Λղফ͠ͳ͍ͱੈؒͷਐԽʹ௥ैͰ͖ͳ͍
 ˠԸܙΛड͚Εͳ͘ͳΔͱ࠶ೝࣝͨ͠ ࠷ۙͷ࿩ 26
27. ΍ͬͺΓٕज़తෛ࠴ͱ޲͖߹Θͳ͍ͱ 27
28. w࠷ॳ͔Β΍Δͷͱɺେن໛ͳϓϩδΣΫτʹೖΕΔͷͰ͸೉қ౓͕ҧ͏
    w৽͍ٕ͠ज़΍πʔϧɺϥΠϒϥϦʹ͍ͭͯͪΌΜͱཧղͯ͠ͳ͍ͱͰ͖ͳ͍
    wݸਓ։ൃͰ͋ͨΓ·͑ʹ࢖͍ͬͯΔϞϊͷϝϦοτΛߟ͑Δ͖͔͚ͬʹ ͳͬͨ
    wͳΜͰ3FBDUೖΕΔͷʁͦΕͰͲΕ͘Β͍վળ͢Δʁ5ZQF4DSJQUೖΕΔͷʁ &4-JOU1SFUUJFSʜͳΜͰʁ
    w͔֬ʹ͋·Γਂ͘ҙࣝͰ͖ͯͳ͔ͬͨ ٕज़తෛ࠴ͱ޲͖߹͏ͱ 28
29. wੌ࿹ΤϯδχΞ͡Όͳ͍ɺ৽ଔ̏೥໨ͷΤϯδχΞͰ΋ҰาҰาਐΊͯΔ
    wษڧձ΍ϞϒϓϩΛ׆༻ͯ͠νʔϜͰٕज़తෛ࠴ͱ޲͖߹͑͹ා͘ͳ͍
    wٕज़తෛ࠴ͱ޲͖߹͏͜ͱ͸ɺࣗ෼ͷ੒௕ʹ΋ܨ͕Δ ͍͞͝ʹ 29
30. 5)"/,
    :06 νʔϜͱࣗ෼ͷͨΊʹٕज़తෛ࠴ͱ޲͖߹͓͏ʂ 30