Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
大規模フロントエンドの技術的負債と向き合う。
Search
Toshihisa Tomatsu
July 06, 2019
Technology
5
5.5k
大規模フロントエンドの技術的負債と向き合う。
Battle Conference Under30 の資料です。
https://bcu30.jp/2019/talk/tomatsu-toshihisa/
Toshihisa Tomatsu
July 06, 2019
Tweet
Share
More Decks by Toshihisa Tomatsu
See All by Toshihisa Tomatsu
Service Workerとは、それを使ってできること / what-is-service-worker
10shi10ma
3
1.8k
フロントエンドのエコシステム / Frontend Ecosystem
10shi10ma
8
3k
Service Workerとブラウザでの通知について
10shi10ma
3
240
意外に知らないnpmと便利なCLI
10shi10ma
8
2.2k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
11k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
970
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
2.9k
React+Storybook ことはじめ
10shi10ma
8
2.4k
TypeScript入門 〜型のあるモダンなJavaScript〜
10shi10ma
2
570
Other Decks in Technology
See All in Technology
ペパボのオブザーバビリティ研修2024 説明資料
kesompochy
0
1.1k
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
470
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.7k
AWSサービスメニュー開発をしていてAWSを好きだ!と感じた瞬間
toru_kubota
0
130
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8k
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
910
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
Featured
See All Featured
Making Projects Easy
brettharned
111
5.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Designing for humans not robots
tammielis
247
25k
Building an army of robots
kneath
301
42k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
Being A Developer After 40
akosma
72
580k
The Invisible Customer
myddelton
117
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
149
45k
Music & Morning Musume
bryan
43
5.9k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Transcript
େنϑϩϯτΤϯυͷ ٕज़తෛ࠴ͱ͖߹͏ɻ αΠϘζגࣜձࣾ 5PTIJIJTB5PNBUTV #BUUMF$POGFSFODF6 1
֎দढ़ঘ 5PTIJIJTB5PNBUTV αΠϘζגࣜձࣾ ৽ଔ LJOUPOF։ൃνʔϜ ࠷ۙϑϩϯτΤϯυΤΩεύʔτ νʔϜͱ݉ 2 !UPTIJUPNB
!UPTIJ@@UPNB
ٕज़తෛ࠴ 3
͍·ݱͰ๊͍͑ͯΔ ͜Ε·Ͱͷ׆ಈʹ͍ͭͯ ͳٕͥज़తෛ࠴ͱ͖߹͏ͷ͔ ٕज़తෛ࠴ͱ͖߹͏͜ͱͷϝϦοτ ! ੌΤϯδχΞʹΑΔվम ಛఆٕज़ϥΠϒϥϦʹ͍ͭͯ ۜͷؙతͳ " ࠓ͢͜ͱ
͍·ٕज़తෛ࠴Ͱۤ͠ΜͰ͍Δਓ͕ ࠓޙલ͖ʹऔΓΜͰ͍͖͔͚ͬ͘ʹͳΕخ͍͠ 4
5
w 8FC͕ओઓͷϓϩμΫτ w ϦϦʔε w ϓϩμΫτͷϥΠϑαΠΫϧ͕ͱ͍ͯ ܧଓతͳ։ൃ͕ඞཁ w େن͔ͭෳࡶͳΞϓϦέʔγϣϯ
+BWB4DSJQU͕ສߦ w ΤϯδχΞϑϩϯτΤϯυ͔ΒαʔόʔαΠυ·Ͱ୲ 6 LJOUPOF
7 େنϑϩϯτΤϯυ
มԽͷܹ͍͠ϑϩϯτΤϯυ 8 Ծ%0. ίϯϙʔωϯτࢤ ੩తܕ͚ ΤίγεςϜ &$."4DSJQUYY ϒϥβͷਐԽ ਓ͕ؒϑΥʔϚοτΛҙࣝ͠ͳ͍ ৽͍ٕ͠ज़ϥΠϒϥϦɺπʔϧ͕ੜ·Εଓ͚͍ͯΔ
ϏϧυτϥϯεύΠϧ
ੈؒਐԽ͍ͯ͠ΔɻLJOUPOFʁ 9
։ൃελʔτ࣌ͷϑϩϯτΤϯυͱ ͪΖΜঢ়گҧ͍ͬͯΔ ੲ׆༂͍ٕͯͨ͠ज़͍·ෛ࠴ͱ͍ͯͬͯ͠Δ 10
wಛఆͷϥΠϒϥϦίϯύΠϥʹڧ͘ґଘ wOQNͷΤίγεςϜͷԸܙΛड͚ਏ͍ w։ൃελʔτ࣌ͷݹ͍ϥΠϒϥϦπʔϧΛ๊͍͑ͯΔ wશͯͷίϯϙʔωϯτΛ৽͍͠ϥΠϒϥϦʹஔ͖͑ΕΔنͰͳ͍ w7JFXͱ.PEFMͷີ݁߹ wFUDʜ LJOUPOF๊͕͑Δ 11
ٕज़తෛ࠴ 12
ͲΜͳ;͏ʹ͖߹͖ͬͯͨʁ 13
wझຯͰͬͯΔϑϩϯτΤϯυ։ൃͷମݧͱͳΜ͔ҧ͏ w3FBDU5ZQF4DSJQU1SFUUJFS&4-JOU&4.PEVMFTʜ wීஈͷ։ൃͰ͍͍ମݧ͍ͨ͠ʂ w͍·͋ΔΛվળ͍ͯ͜͠͏ʂͱߟ͑ΔΑ͏ʹͳͬͨ ͖͔͚ͬ 14
։ൃܥͷվળΛςʔϚʹϫʔΫγϣοϓΛ։࠵ͯ͠Έͨ άϧʔϓʹ͔Εͯվળ͍ͨ͠ΞΠσΞΛϒϨετ ग़ͨΞΠσΞΛ༏ઌͭͰάϧʔϐϯά νʔϜͰߟ͑Δ 15
wͨΓલ͚ͩͲɺΈΜͳ͕ࣗͱಉ͡ײ֮ߟ͑ͳΘ͚Ͱͳ͍ w͜Ε͕͍·ͷσϑΝΫτ͔ͩΒͱ͍͏આ໌ͩΊˠ࣮ߦʹܨ͕Βͳ͍ wࣗಋೖ͍ٕͨ͠ज़ϥΠϒϥϦͷՁʹ͍͔ͭͯͬ͠Γઆ໌Ͱ͖ͳ͍ wπʔϧϥΠϒϥϦΛઌߦͯ͠ߟ͑ΔͱΘΒͳ͍ wͰීஈͷπϥϛͳΒΈΜͳڞײͯ͘͠ΕΔ ΈΜͳͱͯ͠Θ͔ͬͨ͜ͱ 16
w৽͍ٕ͠ज़πʔϧɺϥΠϒϥϦ wͳΜͱͳ͘ྑͦ͞͏ͳͷΘ͔Δ wͰຊʹಋೖ͖͢ͳͷ͔͔Βͳ͍ wͦͦɺମݧͯ͠ͳ͍͔ΒΠϝʔδͰ͖ͳ͍ ࣗҎ֎ͷਓ͔Βͷݟ͑ํ 17
w৽͍ٕ͠ज़πʔϧɺϥΠϒϥϦ wͳΜͱͳ͘ྑͦ͞͏ͳͷΘ͔Δ wͰຊʹಋೖ͖͢ͳͷ͔͔Βͳ͍ wͦͦɺ͍·ͷϞμϯͳϞϊΛΒͳ͍͔ΒΠϝʔδͰ͖ͳ͍ ࣗҎ֎ͷਓ͔Βͷݟ͑ํ 18 ৽͍͠πʔϧϥΠϒϥϦɺٕज़ʹ͍ͭͯ νʔϜͷΈΜͳͰֶΔϑϩϯτΤϯυษڧձΔͱ͍͍͔
wΈΜͳͰϫΠϫΠ৮Δͷͱָ͍ͯ͠ wීஈͷ։ൃ͚ͩͩͱֶͳ͍ٕज़ΛΕΔ w৽͍͠πʔϧͷྑ͞ΛΈΜͳ͕ମݧͰ͖Δˠ࣮ߦʹͭͳ͕Δ wࢀՃऀಉ͡νʔϜͷਓ͔ͩΒɺΑΓ۩ମతͳ͕Ͱ͖Δ w͜Εಋೖ͍ͨ͠ʂͱ͍͏ ษڧձΛ։࠵ͯ͠Έͨ 19
ͱ͜ΖͰɺٕज़తෛ࠴ʁ 20
wۭ͍͍ͯΔ࣌ؒʹ୳ٻͯ͠Έ͚ͨͲɺยखؒͰશવਐ·ͳ͔ͬͨ wܧଓతͳվળΛ͢ΔͨΊʹɺͪΌΜͱ͖߹Θͳ͍ͱ ٕज़తෛ࠴ʁ 21 ઐੑΛߴΊͯɺ࣌ؒΛ͔͚͖ͯ߹͏ඞཁ͕͋Δ
ϑϩϯτΤϯυΤΩεύʔτνʔϜͱ ݉͢Δ͜ͱʹͨ͠ 22
wϑϩϯτΤϯυ͕ಘҙͳϝϯόʔͱݱঢ়ͷʹ͍ͭͯߟ͑ΔΑ͏ͳͬͨ w୳ٻͷ࣌ؒΛܧଓతʹͱΓ͘͢ͳͬͨ w৫ԣஅతͳઐνʔϜʹॴଐ͢Δ͜ͱͰɺଞͷϓϩμΫτͰಋೖ͍ͯ͠ ΔπʔϧͳͲɺLJOUPOFʹ࣋ͪؼΕͦ͏ͳݟ͕૿͑ͨ ݉Λ͡Ίͯ 23
w͍·ɺڊେͳ͔Βখ͞ͳ·ͰͪΌΜͱ͖߹͍ͬͯΔ wڧ͘ґଘ͍ͯ͠ΔϥΠϒϥϦπʔϧΛݮΒ͢ w%9্͕͢ΔΑ͏ͳπʔϧͷಋೖ wLJOUPOFͷྑ͍ઃܭʹ͍ͭͯߟ͑Δձ wϞϒϓϩάϥϛϯάͷ׆༻ wෆ࣮֬ੑ͕େ͖͍ఆظతͳϞϒϓϩΛεέδϡʔϦϯά͢Δ ࣍ͷεέδϡʔϧ·Ͱʹϝϯόʔ͕ղܾͯ͘͠ΕΔ͜ͱ͋Δ wΔ͜ͱ͕໌֬ͳΒظతʹɺҰؾʹਐΊͯ13Λ࡞Δ
ٕज़తෛ࠴ͷղফ͕ਐΜͰ͖ͨ 24
͓ɺͪΌΜͱ͖߹͑ͯΔʂ 25
w1SFUUJFSͷಋೖΛͬͯΈͨ wٕज़తෛ࠴ͱಛఆͷʹͿ͔ͭͬͯɺಋೖ͕Ͱ͖ͳ͔ͬͨ wٕज़తෛ࠴Λղফ͠ͳ͍ͱੈؒͷਐԽʹैͰ͖ͳ͍ ˠԸܙΛड͚Εͳ͘ͳΔͱ࠶ೝࣝͨ͠ ࠷ۙͷ 26
ͬͺΓٕज़తෛ࠴ͱ͖߹Θͳ͍ͱ 27
w࠷ॳ͔ΒΔͷͱɺେنͳϓϩδΣΫτʹೖΕΔͷͰқ͕ҧ͏ w৽͍ٕ͠ज़πʔϧɺϥΠϒϥϦʹ͍ͭͯͪΌΜͱཧղͯ͠ͳ͍ͱͰ͖ͳ͍ wݸਓ։ൃͰ͋ͨΓ·͑ʹ͍ͬͯΔϞϊͷϝϦοτΛߟ͑Δ͖͔͚ͬʹ ͳͬͨ wͳΜͰ3FBDUೖΕΔͷʁͦΕͰͲΕ͘Β͍վળ͢Δʁ5ZQF4DSJQUೖΕΔͷʁ &4-JOU1SFUUJFSʜͳΜͰʁ w͔֬ʹ͋·Γਂ͘ҙࣝͰ͖ͯͳ͔ͬͨ ٕज़తෛ࠴ͱ͖߹͏ͱ 28
wੌΤϯδχΞ͡Όͳ͍ɺ৽ଔ̏ͷΤϯδχΞͰҰาҰาਐΊͯΔ wษڧձϞϒϓϩΛ׆༻ͯ͠νʔϜͰٕज़తෛ࠴ͱ͖߹͑ා͘ͳ͍ wٕज़తෛ࠴ͱ͖߹͏͜ͱɺࣗͷʹܨ͕Δ ͍͞͝ʹ 29
5)"/,:06 νʔϜͱࣗͷͨΊʹٕज़తෛ࠴ͱ͖߹͓͏ʂ 30