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
Web フロントエンドに期待される適応と新陳代謝
Search
Ayumu Sato
February 16, 2017
Programming
11
5.8k
Web フロントエンドに期待される適応と新陳代謝
デブサミ 2017
http://event.shoeisha.jp/devsumi/20170216
で使用したスライドです。本編20分。
Ayumu Sato
February 16, 2017
Tweet
Share
More Decks by Ayumu Sato
See All by Ayumu Sato
Web 開発の長距離走と持続可能性 - TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来
ahomu
1
190
控えめな App Router と持続可能な開発 - PWA Night vol.59
ahomu
11
2.9k
GPT 生成物の評価、運用 toC 企画でのハードルと勘所
ahomu
0
290
副業をきっかけに 切り拓くキャリア形成
ahomu
1
140
Webフロントエンドと アーキテクチャ事情の持論を喋る
ahomu
2
1.7k
SPA/MPA 議論の俯瞰と 現代における設計のポイント - #tfcon 2022 フロントエンド設計
ahomu
4
3.7k
#TECHPLAY Talk - 理想的な Web のため MUST 駆動で主語が大きくなったキャリア
ahomu
0
270
最近の Web パフォーマンス改善について知っておきたいコト
ahomu
50
20k
Web フロントエンドで大切なことはすべて Audits が教えてくれた
ahomu
1
620
Other Decks in Programming
See All in Programming
20250429 - CNTUG Meetup #67 / DevOps Taiwan Meetup #69 - Deep Dive into Tetragon: Building Runtime Security and Observability with eBPF
tico88612
0
180
生成AIで知るお願いの仕方の難しさ
ohmori_yusuke
1
120
2025年のz-index設計を考える
tak_dcxi
11
4.1k
note の Elasticsearch 更新系を支える技術
tchov
9
3.6k
KANNA Android の技術的課題と取り組み
watabee
1
470
fieldalignmentから見るGoの構造体
kuro_kurorrr
0
140
Instrumentsを使用した アプリのパフォーマンス向上方法
hinakko
0
250
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
rkaga
4
1.3k
ぽちぽち選択するだけでOSSを読めるVSCode拡張機能
ymbigo
14
6.2k
Browser and UI #2 HTML/ARIA
ken7253
2
180
generative-ai-use-cases(GenU)の推しポイント ~2025年4月版~
hideg
1
390
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
2
530
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
A better future with KSS
kneath
239
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.7k
Making Projects Easy
brettharned
116
6.2k
Fireside Chat
paigeccino
37
3.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
We Have a Design System, Now What?
morganepeng
52
7.6k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Code Review Best Practice
trishagee
68
18k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
4 Signs Your Business is Dying
shpigford
183
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
Transcript
8FCؿٗٝزؒٝسח 劍䖉ׁ黝䘔ה倜꤫➿闐 %FWFMPQFST4VNNJUխ& 䖓⼱ !BIPNV"ZVNV4BUP
ֶכ״ֲ׀ְׂתׅ !BIPNVדׅ
‣ ⡟谏娄ׁהֲ֮ײ ‣ せ〢㾊ה幪靼䖂䗁⚥ך8FCر؍كٗحػ٦ ‣ 剑鵚ךꟼ䗰כXFCQFSGהBZה➂✲罋铬 ‣ 吳 $ZCFS"HFOUַ 吳
"CFNB57⳿ぢ⚥ ًر؍،窟䭍䪮遭䨌殛㹓䪮遭劤鿇8FC*OJUJBUJWF$FOUFS !BIPNV
ℹ ‣ ؿٗٝزؒٝسח劍䖉ׁ 黝䘔ה㢌⻉ ‣ 劍䖉ח䘔ִ竲ֽך 崞涪ז倜꤫➿闐
8FCؿٗٝزؒٝسח 劍䖉ׁ黝䘔ה㢌⻉
‣ 倜׃ְرغ؎أװ8FC䪮遭ך㹋遤橆㞮זוך涫㜥 ‣ رغ؎أװطحزٙ٦ؙך䚍腉ぢ♳ծⵃ欽أة؎ٕך㢌⻉ ‣ 8FC垥彊➬圫װـٓؐؠ㹋鄲ך،حفر٦ز ‣ ך➭ծ/PEFKTװ؎ٝؿٓծؙٓؐسזוꦄ䱸ⴓꅿך涪㾜 8FCؿٗٝزؒٝسワ鴟ך㢌⻉
倜׃ְرغ؎أװ8FC䪮遭ך㹋遤橆㞮זוך涫㜥 73٦يفٖ؎ׅ➂ך؎ٓأزIUUQXXXJSBTVUPZBDPNWS@IUNM "3٥䭁䓸植㹋ך؎ٓأزIUUQXXXJSBTVUPZBDPNBSIUNM
رغ؎أװطحزٙ٦ؙך䚍腉ぢ♳ծⵃ欽أة؎ٕך㢌⻉ ةـٖحزؗ٦ن٦سד乼⡲ׅ➂ך؎ٓأزIUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM ةـٖحزדٖءؾ鋅➂ך؎ٓأزIUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM 搀简طحزٙ٦ؙך؎ٓأزIUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM
鹈嫣 鹈嫣 黝㹅%FWFMPQFS&EJUJPO 嫣兓/JHIUMZ 鹈嫣 嫣鹈 鹈嫣 ꥤ儗$BOBSZ ꥤ儗$ISPNJVN 4PNFEBZ
鹈嫣5FDIOPMPHZ1SFWJFX ꥤ儗8FC,JU/JHIUMZ ` 黝㹅1SFWJFX3FMFBTF 4PNFEBZ 0SJHJOBMIUUQTUXJUUFSDPNLPTBNBSJTUBUVT ⚺銲ـٓؐؠך،حفر٦ز؟؎ؙٕ
ך➭ծ/PEFKTװ؎ٝؿٓծؙٓؐسזוꦄ䱸ⴓꅿך涪㾜 ػا؝ٝך؛٦ـٕח駈䒷䱦ֽ➂ך؎ٓأزIUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM ؟٦غ٦ך؎ٓأزIUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM ؙٓؐس؝ٝؾُ٦ذ؍ؚٝך؎ٓأزIUUQXXXJSBTVUPZBDPNCMPHQPTU@IUNM
‣ K2VFSZؒ؝ءأذيً؎ٝأزٔ٦ي儗➿ך穄提 8FC䪮遭ה銲実ך넝䏝⻉ח״8FC،فٔך醱꧟⻉ ‣ /PEFKTח״ؽٕسفٗإأװزٓٝأػ؎ٓך兛⿹ 8FCؿٗٝزؒٝس䖞✲罏ךإٔؗإحزך㢌⻉ ‣ ؙٓ؎،ٝز؟؎سٖٝتؚٔٝך♧菙⻉͑41"ך兛⿹
رغ؎أװطحزٙ٦ؙך䚍腉ぢ♳ծ"KBY䲿ז،٦ؗذؙثٍ銲実 ワ鴟ך㢌⻉הծֿתדך⳿勻✲
؟٦غծ؎ٝؿٓծؙٓؐس ꦄ䱸걄㚖ך鹌娄 رغ؎أծطحزٙ٦ؙ ؙٓ؎،ٝز橆㞮ך㢌⻉ 8FCծ؎ٝة٦طحز ـٓؐؠ䪮遭ך涪㾜 8FCؿٗٝزؒٝس ワ鴟橆㞮ך㢌⻉װ䪮遭ך鹌娄ח 黝䘔ׅ㢌⻉ָ䗳銲
‣ ؙٓ؎،ٝز؟؎سכ湡ח鋅ִٌظזךד꤫臰⻉ָ湡甧א ‣ 実㢌⻉ך鸞䏝כ؝ٝذؗأزח״ג殯ז ‣ 劍䖉ח䘔ִؙٓ؎،ٝز؟؎سד㖈竲ֽֿה ‣ ֿ植㜥ָ㹋植דֹفٗتؙزכ䓼ֻז 黝䘔ךח㢌⻉ָ実竲ֽ
劍䖉ח䘔ִ竲ֽך 崞涪ז倜꤫➿闐
崞涪ז倜꤫➿闐ך䠐纏 䗳銲ח䘔ׄג❛䳔ծ灶唱זו׃אא黝䏝ח倜׃ְ朐䡾ח⥂竲ֽֿה
‣ ؙٓ؎،ٝز橆㞮װ銲⟝ך㢌⻉ח㼎ׅ鴼鸞ז㼎䘔黝䘔 ‣ ـٓؐؠ䪮遭ך涪㾜ח⠵ֲػؿؓ٦وٝأぢ♳ ‣ 䪮遭涸頾⫈ך؝ٝزٗ٦ٕ ‣ 䪮遭罏ך䎊状䏝 崞涪ז倜꤫➿闐ך䗳銲䚍
‣ 儗➿鹼זֿה׃גְזְהְֲ㸜䗰䠬䋐㜥⣣⦼ ‣ 䪮遭涸ז胜兝ח鸬竲䚍ָ֮㷕统ծ穗꿀ך栻䖤 ‣ 㥨ֹ㱾ְכהַֻ秛䖤דֹ䠐䙼寸㹀 涪罏חהגך.JOJNBM-PWBCMF1SPEVDUך㹋植 䪮遭罏䎊状חׅ⸬腉
崞涪ז倜꤫➿闐ך笝䭯 劍䖉ח䘔ִծ䪮遭涸頾⫈؝ٝزٗ٦ٕ׃אא㢌⻉׃竲ֽך䠐䙼寸㹀
⚠ ‣ 葿ղזٓ؎ـٓٔך穈さׇח״醱꧟䚍ך㟓⸇ ‣ 花㣐ז⣛㶷ػح؛٦آח״ًٝذشٝأ؝أز㟓⸇ ‣ רֻךִַָ剑䓼ך䪮遭涸頾⫈ 鵚䎃ך獺ח״ֻ֮زٓـٕ
⢪ְְػح؛٦آ鋅אֽ TDSJQUך鎸鶢װDPODBUך鏣㹀鷄⸇ ꟼ鸬ؿ؋؎ٕتؐٝٗ٦س فٗآؙؑزⰻחꂁ縧 䩛⡲噟דꟼ鸬ؿ؋؎ٕ刿倜 OQNJOTUBMMQBDLBHFOBNF ؝٦سⰻדJNQPSUSFRVJSFׅ CSPXTFSJGZXFCQBDLדؽٕسׅ OQNVQEBUF
` "OHVMBS 3FBDU 7VFKT 8FC$PNQPOFOUT 1PMZNFS 6*ך؝ٝه٦طٝز⻉ה ػح؛٦آה׃גך،حفر٦ز⫘ぢ
Generated by https://chrisbateman.github.io/webpack-visualizer
崞涪ז倜꤫➿闐竲ֽחכ ⣛㶷ػح؛٦آך⿑鼅ה ،ٝثػة٦ٝך㔐鼘ָ♶〳妀
‣ ػؿؓ٦وٝأծ6*؝ٝه٦طٝزז،ؙإءؽٔذ؍ ‣ غٝسٕ儗؟؎ؤ㟓⸇ꆀծػح؛٦آ荈⡤ך⣛㶷خٔ٦ ‣ 殯暟䠬ךזׁ랲눤遭ד֮➭鎉铂鱐Ⰵ禸ד֮ ‣ קַDPOUSJCVUPSך➂侧װMBUFTUDPNNJUծWFSTJPOזו ػح؛٦آ鼅㹀ך♧菙涸錁挿
‣ זֻגזהַזِ٦ذ؍ٔذ؍װ䬄韋 ‣ הִלꟼ侧㘗זו暴㹀ך0QJOJPOBUFEזٓ؎ـٓٔ ‣ 麣Ⱗֲתֻ⢪ֲֿהכծְא䟝⫷״ꨇ׃ְ ‣ 㼰׃ך堣腉⢪ֲחؿ؋؎ٕ؟؎ؤ肍㣐⻉ׇׁ "OUJ1BUUFSO⤑ⵃ䬄韋ٌٌٔٔ IUUQTXXXJDLSDPNQIPUPTOPSJPOBLBZBNB
MPEBTI,# SFBDUEPN,# SY,# BDNFKT,#
DPSFKT,# WFMPDJUZBOJNBUF,# JNNVUBCMF,# SFBDU,# ˟NJOJGZ黝欽䖓ծH[JQ黝欽 Generated by https://alexkuz.github.io/webpack-chart
‣ فؚٓ؎ٝך㢳欽ח״⣛㶷خٔ٦ך肍㣐⻉ ‣ 㡪㣐זؽٕس橆㞮הꞿ㣐ז鏣㹀ؿ؋؎ٕ ‣ NBLFװOQNSVOד幥הֿח/PEF+4ָⰅ鴥 ‣ 剑鵚כֿך⫘ぢ鼘ֹֽזְؿء֮ךַ "OUJ1BUUFSOؽٕس橆㞮وءوء IUUQTXXXJDLSDPNQIPUPTUBLFTIJL
‣ ❌ꅾ⾨ז穈さׇח״ג䧭甧אكأزז圓䧭 ؽٕس鏣㹀װٓ؎ـٓٔ穈さׇ䱸滠㾴ָ⾨ֻזה⽬זְ ‣ ✅搀椚ךזְ穈さׇח״ג䧭甧אىصوٕז圓䧭 䗳銲⟃♳ך䬄韋⻉װِ٦ذ؍ٔذ؍Ⰵזְד剑㼭圓䧭ח⸕ "OUJ1BUUFSOרֻך罋ִ剑䓼
‣ ⢽ה׃ג3FBDUך41" 443ꟼ鸬כأؙٓحثָꨇ׃ְ ZBIPPVYJCMF葺ַծXBMNBSUFMFDUSPEFזוָ⯓➂ך濼䜋 ‣ ꅾ㣐זٗحؙ؎ٝחזָ؎ثַ圓眠ׅ״وء ‣ ؟٦غ٦ؿٖ٦يٙ٦ؙ➰㾩ךأُ٦ءّٝכ ٥٥
⯓➂ח״鑐遤ꐪ铎ך䛷䜋
֮㉏겗鍑ֻ麓玎דծך㉏겗״ ꨇ׃ְ㉏겗鍑ְגכזזְ ⯋כ堣唒㷕统ך俑腞דծ然桦㺘䏝実ֿהכػة٦ٝ钠陎荈⡤״ꨇ׃ְ㉏겗ד֮ 鼘ֽג鍑寸㔳然桦㺘䏝嫰実קֲָ葺ְהְֲ鑧ך״ֲדׅ 7BQOJL 7/4UBUJTUJDBMMFBSOJOHUIFPSZ 8IFOTPMWJOHBQSPCMFNPGJOUFSFTU EPOPUTPMWFBNPSFHFOFSBMQSPCMFNBTBOJOUFSNFEJBUFTUFQ 5SZUPHFUUIFBOTXFSUIBUZPVSFBMMZOFFECVUOPUBNPSFHFOFSBMPOF
8FC*OJUJBUJWF$FOUFS ؐؑـ؎صء،ذ؍ـإٝة٦$ZCFS"HFOUًر؍،盖鱥ך8FC埆鯥穈籼
‣ ،ؙإءؽٔذ؍ⵃ⤑䚍ךぢ♳ ֮ײؼزծ堣唒ծرغ؎أחהג⢪ְװְֿׅהפךꂁ䣁 ‣ ػؿؓ٦وٝأ䘯黝䚍ךぢ♳ 넝鸞ח⹛⡲׃ג䘯黝ח⢪ִֿהח״ِ٦ؠ٦⡤꿀 ‣ 倜׃ְ8FC䪮遭⢪ثٍٖٝآ
倜꤫➿闐ך⚥דծ8FC䪮遭ךثؕٓ䌢ח䒷ֹ⳿ׅך鑐 8FCה׃גךㅷ颵넝ךבֻ
8FCָ䲿⣘דֹ⣣⦼ך 剑㣐⻉תכ⾱挿㔐䌓
תה
‣ اؿزؐؑ،ծع٦سؐؑ،ծٓ؎ؿأة؎ٕFUD ‣ 8FCؿٗٝزؒٝس《䋆ֻ橆㞮כ㢌⻉竲ֽגְ ‣ ؙٓ؎،ٝز؟؎سכח黝䘔׃竲ֽֿהָ実 ؙٓ؎،ٝز橆㞮ך㢌⻉ח黝䘔׃竲ֽ
‣ 劍䖉ח䘔ִך㢌⻉FUDך崞涪ז倜꤫➿闐ָ䗳銲 ‣ 㢳圫䚍הぢֹさְזָծ䪮遭涸頾⫈؝ٝزٗ٦ٕׅ ‣ 䗳銲⟃♳ח醱꧟זֿה׃גזְַ孡אֽ 8FCفٗتؙز肪גך倜꤫➿闐
劍䖉ח䘔ִ竲ֽך黝䘔ָֿ 8FCؿٗٝزؒٝسך植㜥ח䗳銲ז㢌⻉
2VFTUJPO IUUQBIPNV !BIPNV HJUIVCDPNBIPNV ! " ⌂ 5IBOLTGPSְְַؿٔ٦稆勞꧊ְׅהװ IUUQXXXJSBTVUPZBDPN