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.8k
大規模フロントエンドの技術的負債と向き合う。
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.9k
フロントエンドのエコシステム / Frontend Ecosystem
10shi10ma
8
3.2k
Service Workerとブラウザでの通知について
10shi10ma
3
310
意外に知らないnpmと便利なCLI
10shi10ma
8
2.3k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
11k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
1.1k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
3k
React+Storybook ことはじめ
10shi10ma
8
2.5k
TypeScript入門 〜型のあるモダンなJavaScript〜
10shi10ma
2
730
Other Decks in Technology
See All in Technology
kubellが挑むBPaaSにおける、人とAIエージェントによるサービス開発の最前線と技術展望
kubell_hr
1
380
DenoとJSRで実現する最速MCPサーバー開発記 / Building MCP Servers at Lightning Speed with Deno and JSR
yamanoku
1
190
ローカルLLMでファインチューニング
knishioka
0
110
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
510
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
10
2.4k
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
1
1.6k
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
130
20250623 Findy Lunch LT Brown
3150
0
670
菸酒生在 LINE Taiwan 的後端雙刀流
line_developers_tw
PRO
0
890
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
190
Perk アプリの技術選定とリリースから1年弱経ってのふりかえり
stomk
0
120
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
1
150
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.7k
A designer walks into a library…
pauljervisheath
206
24k
Code Review Best Practice
trishagee
68
18k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Into the Great Unknown - MozCon
thekraken
39
1.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
480
Six Lessons from altMBA
skipperchong
28
3.8k
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