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.9k
大規模フロントエンドの技術的負債と向き合う。
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.4k
歴史から学ぶ現代のフロントエンド
10shi10ma
17
11k
サイボウズ フロントエンドエキスパートチームとOSSの管理について
10shi10ma
0
1.1k
Google I/O ’19から見る新しいJavaScript
10shi10ma
5
3.1k
React+Storybook ことはじめ
10shi10ma
8
2.5k
TypeScript入門 〜型のあるモダンなJavaScript〜
10shi10ma
2
760
Other Decks in Technology
See All in Technology
mruby(PicoRuby)で ファミコン音楽を奏でる
kishima
1
220
.NET開発者のためのAzureの概要
tomokusaba
0
230
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
LLMエージェント時代に適応した開発フロー
hiragram
1
410
マイクロモビリティシェアサービスを支える プラットフォームアーキテクチャ
grimoh
1
200
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
180
Goでマークダウンの独自記法を実装する
lag129
0
210
ZOZOTOWNフロントエンドにおけるディレクトリの分割戦略
zozotech
PRO
16
5.2k
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
240
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
2
140
Browser
recruitengineers
PRO
3
260
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
4
210
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Typedesign – Prime Four
hannesfritz
42
2.8k
KATA
mclloyd
32
14k
Designing Experiences People Love
moore
142
24k
Unsuck your backbone
ammeep
671
58k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Bash Introduction
62gerente
614
210k
Automating Front-end Workflow
addyosmani
1370
200k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Writing Fast Ruby
sferik
628
62k
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