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
320
意外に知らない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
750
Other Decks in Technology
See All in Technology
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
710
Bet "Bet AI" - Accelerating Our AI Journey #BetAIDay
layerx
PRO
4
1.4k
Unson OS|48時間で「売れるか」を判定する AI 市場検証プラットフォーム
unson
0
170
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
masayoshi
1
400
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
290
Microsoft Clarityでインサイトを見つけよう
nakasho
0
120
robocopy の怖い話/scary-story-about-robocopy
emiki
0
450
JAWS AI/ML #30 AI コーディング IDE "Kiro" を触ってみよう
inariku
3
230
AI時代の経営、Bet AI Vision #BetAIDay
layerx
PRO
1
1.6k
【CEDEC2025】ブランド力アップのためのコンテンツマーケティング~ゲーム会社における情報資産の活かし方~
cygames
PRO
0
230
Claude Codeが働くAI中心の業務システム構築の挑戦―AIエージェント中心の働き方を目指して
os1ma
9
1.5k
Claude Codeから我々が学ぶべきこと
s4yuba
6
1.2k
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
How GitHub (no longer) Works
holman
314
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
GraphQLとの向き合い方2022年版
quramy
49
14k
Bash Introduction
62gerente
613
210k
Six Lessons from altMBA
skipperchong
28
3.9k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
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