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

by Toshihisa Tomatsu

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

ٕज़తෛ࠴ 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

7 େن໛ϑϩϯτΤϯυ

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

։ൃελʔτ࣌ͷϑϩϯτΤϯυͱ͸  ΋ͪΖΜঢ়گ͸ҧ͍ͬͯΔ ੲ͸׆༂͍ٕͯͨ͠ज़΋͍·΍ෛ࠴ͱͯ͠࢒͍ͬͯΔ 10

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ٕज़తෛ࠴ 12

Slide 13

Slide 13 text

ͲΜͳ;͏ʹ޲͖߹͖ͬͯͨʁ 13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

ͱ͜ΖͰɺٕज़తෛ࠴͸ʁ 20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

w͍·͸ɺ௒ڊେͳ໰୊͔Βখ͞ͳ໰୊·ͰͪΌΜͱ޲͖߹͍ͬͯΔ wڧ͘ґଘ͍ͯ͠ΔϥΠϒϥϦ΍πʔϧΛݮΒ͢ w%9͕޲্͢ΔΑ͏ͳπʔϧͷಋೖ wLJOUPOFͷྑ͍ઃܭʹ͍ͭͯߟ͑Δձ wϞϒϓϩάϥϛϯάͷ׆༻ wෆ࣮֬ੑ͕େ͖͍໰୊͸ఆظతͳϞϒϓϩΛεέδϡʔϦϯά͢Δ  ࣍ͷεέδϡʔϧ·Ͱʹϝϯόʔ͕ղܾͯ͘͠ΕΔ͜ͱ΋͋Δ w΍Δ͜ͱ͕໌֬ͳΒ୹ظతʹɺҰؾʹਐΊͯ13Λ࡞Δ ٕज़తෛ࠴ͷղফ͕ਐΜͰ͖ͨ 24

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

w1SFUUJFSͷಋೖΛ΍ͬͯΈͨ wٕज़తෛ࠴ͱಛఆͷ໰୊ʹͿ͔ͭͬͯɺಋೖ͕Ͱ͖ͳ͔ͬͨ wٕज़తෛ࠴Λղফ͠ͳ͍ͱੈؒͷਐԽʹ௥ैͰ͖ͳ͍  ˠԸܙΛड͚Εͳ͘ͳΔͱ࠶ೝࣝͨ͠ ࠷ۙͷ࿩ 26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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