Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

E9ce07196f470caff07053e98a88fa9e?s=128

Toshihisa Tomatsu

July 06, 2019
Tweet

Transcript

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

  2. ֎দढ़ঘ 5PTIJIJTB5PNBUTV  αΠϘ΢ζגࣜձࣾ ৽ଔ೥໨ 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