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

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

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

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

Toshihisa Tomatsu

July 06, 2019
Tweet

More Decks by Toshihisa Tomatsu

Other Decks in Technology

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. 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