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
Technical Selection for Surviving the Front End...
Search
gutchom
September 16, 2017
Technology
1
200
Technical Selection for Surviving the Front End Sengoku Period
フロントエンド戦国時代を生き延びるための技術選定
@Webフレーム品評会
gutchom
September 16, 2017
Tweet
Share
Other Decks in Technology
See All in Technology
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
3
3.1k
PO初心者が考えた ”POらしさ”
nb_rady
0
190
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
410
Lambda Web Adapterについて自分なりに理解してみた
smt7174
6
160
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
oliversmith12
0
150
mrubyと micro-ROSが繋ぐロボットの世界
kishima
3
410
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
220
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
3
11k
KubeCon + CloudNativeCon Japan 2025 に行ってきた! & containerd の新機能紹介
honahuku
0
120
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
150
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
6
5k
Tech-Verse 2025 Keynote
lycorptech_jp
PRO
0
1.7k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
How to train your dragon (web standard)
notwaldorf
94
6.1k
The Invisible Side of Design
smashingmag
301
51k
How to Ace a Technical Interview
jacobian
277
23k
How GitHub (no longer) Works
holman
314
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
4 Signs Your Business is Dying
shpigford
184
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Practical Orchestrator
shlominoach
188
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
ϑϩϯτΤϯυઓࠃ࣌Λ ੜ͖ԆͼΔͨΊͷ ٕज़બఆ @gutchom 20179݄16 WebϑϨʔϜϫʔΫධձ
ࣗݾհ @gutchom (͙ͬͪΐΉ) ϑϩϯτΤϯυΤϯδχΞ TypeScript / JavaScript React.js / Vue.js
ࣗݾհ झຯ։ൃ ࣄແ৬
ࣗݾհ ͍·࡞ͬͯΔͷ: ݕࡧΫΤϦϏϧμʔ
None
ຊ͓͢͠ΔτϐοΫ̐
ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ
React.jsͱVue.js
ϞμϯϑϩϯτΤϯυ ڥߏஙͷপ
ޙʹࢮͳͳ͍ͨΊͷ ϑϩϯτΤϯυڥ
ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ
ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ
⚠͜ͷ߲ࢲ͙ͬͪΐΉͷಠࣗݟղͰ͢⚠ ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ
• jQueryແࡑ ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ
• jQuery(DOMͷૢ࡞ʹݶΓ)ແࡑ ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ
• jQuery(DOMͷૢ࡞ʹݶΓ)ແࡑ • ΩʔϙΠϯτView͕StateΛ͔࣋ͭ൱͔ ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ
• jQuery(DOMͷૢ࡞ʹݶΓ)ແࡑ • ΩʔϙΠϯτView͕StateΛ͔࣋ͭ൱͔ • ϞμϯϑϩϯτΤϯυόζϫʔυ ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ
• jQuery(DOMͷૢ࡞ʹݶΓ)ແࡑ • ΩʔϙΠϯτView͕StateΛ͔࣋ͭ൱͔ • ϞμϯϑϩϯτΤϯυόζϫʔυ ΫϥΠΞϯταΠυΞϓϦέʔγϣϯ։ൃ ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ
ॏཁͳͷɺ
GUIΞϓϦέʔγϣϯ։ൃͷ ֮ޛ
GUIΞϓϦέʔγϣϯ։ൃͷ ֮ޛ
GUIΞϓϦέʔγϣϯ։ൃͷ ֮ޛ
GUIΞϓϦέʔγϣϯ։ൃͷ ֮ޛ
React.jsͱVue.js
React.jsͱVue.js ؆қൺֱରද
React.jsͱVue.js React.js Vue.js (v2.x) VirtualDOM YES YES Componentࢦ YES YES
JSX Must Not have to Ϗϧυπʔϧ Must Not have to σʔλόΠϯσΟϯά NO YES TypeScript Good Hmm… ؆қൺֱରද
React.jsͱVue.js ͦΕͧΕΛ༻͍࣮ͨࡍͷίʔυ
React.jsͰͷίʔυ
React.jsͰͷίʔυ ϥΠϑαΠΫϧϝιουɾΠϕϯτϋϯυϥ
React.jsͰͷίʔυ Ϩϯμʔؔ (ϚʔΫΞοϓ)
React.jsͰͷίʔυ Stateless Functional Component (ঢ়ଶͱϥΠϑαΠΫϧΛ࣋ͨͳ͍ίϯϙʔωϯτ)
Vue.jsͰͷίʔυ
None
ESΫϥεߏจ͡Όͳ͍…
ESΫϥεߏจ͡Όͳ͍… ͳͷͰ ΦϒδΣΫτʹهड़ͨ͠ ίϯϙʔωϯτఆٛΛ ίϯετϥΫλ
ESΫϥεߏจ͡Όͳ͍… ͳͷͰ ΦϒδΣΫτʹهड़ͨ͠ ίϯϙʔωϯτఆٛΛ ίϯετϥΫλ ੜͷJavaScriptͰهड़Մೳʂ
VueΠϯελϯεͷ࣋ͭػೳ
VueΠϯελϯεͷ࣋ͭػೳ • JSͰͷมߋΛViewʹࣗಈө • Viewͷೖྗ͕JSͷΛࣗಈมߋ • มߋ࣌ͷΠϕϯτൃՐ • getter/setter มͷํόΠϯσΟϯά
ͱ͜ΖͰ
Vueίϯϙʔωϯτ Ϟμϯʹॻ͖͍ͨ
(ຐվ)Vue.jsͰͷίʔυ Vueίϯϙʔωϯτఆٛ VueςϯϓϨʔτఆٛ (Pug/Jade)
(ຐվ)Vue.jsͰͷίʔυ VueςϯϓϨʔτఆٛ (Pug/Jade) VueςϯϓϨʔτఆٛ (Pug/Jade)
ϞμϯϑϩϯτΤϯυ ڥߏஙͷপ
• ։ൃڥ͕୲͏λεΫ ϞμϯϑϩϯτΤϯυ ڥߏஙͷপ
• ։ൃڥ͕୲͏λεΫ • ϒϥβͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ ϞμϯϑϩϯτΤϯυ ڥߏஙͷপ
• ։ൃڥ͕୲͏λεΫ • ϒϥβͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ (ECMAScript 6+, JSX, TypeScript…) ϞμϯϑϩϯτΤϯυ ڥߏஙͷপ
• ։ൃڥ͕୲͏λεΫ • ϒϥβͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ (ECMAScript 6+, JSX, TypeScript…) • ϝλݴޠ͔ΒCSSͷίϯόʔτ
ϞμϯϑϩϯτΤϯυ ڥߏஙͷপ
• ։ൃڥ͕୲͏λεΫ • ϒϥβͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ (ECMAScript 6+, JSX, TypeScript…) • ϝλݴޠ͔ΒCSSͷίϯόʔτ
(CSSnext, Sass, Less, Stylus…) ϞμϯϑϩϯτΤϯυ ڥߏஙͷপ
• ։ൃڥ͕୲͏λεΫ • ϒϥβͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ (ECMAScript 6+, JSX, TypeScript…) • ϝλݴޠ͔ΒCSSͷίϯόʔτ
(CSSnext, Sass, Less, Stylus…) • ϞοΫαʔόʔͷىಈ ϞμϯϑϩϯτΤϯυ ڥߏஙͷপ
• ։ൃڥ͕୲͏λεΫ • ϒϥβͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ (ECMAScript 6+, JSX, TypeScript…) • ϝλݴޠ͔ΒCSSͷίϯόʔτ
(CSSnext, Sass, Less, Stylus…) • ϞοΫαʔόʔͷىಈ • ࣗಈςετͷ࣮ߦ ϞμϯϑϩϯτΤϯυ ڥߏஙͷপ
• ։ൃڥ͕୲͏λεΫ • ϒϥβͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ (ECMAScript 6+, JSX, TypeScript…) • ϝλݴޠ͔ΒCSSͷίϯόʔτ
(CSSnext, Sass, Less, Stylus…) • ϞοΫαʔόʔͷىಈ • ࣗಈςετͷ࣮ߦ • etc… ϞμϯϑϩϯτΤϯυ ڥߏஙͷপ
• ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:
JSͷίϯόʔλʔ • webpack / browserify: ϥΠϒϥϦґଘؔղܾπʔϧ • Ճ͑ͯ ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ڥߏஙͷপ
• ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:
JSͷίϯόʔλʔ • webpack / browserify: ϥΠϒϥϦґଘؔղܾπʔϧ • Ճ͑ͯ ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ڥߏஙͷপ
• ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:
JSͷίϯόʔλʔ • webpack / browserify: ϥΠϒϥϦґଘؔղܾπʔϧ • Ճ͑ͯ ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ڥߏஙͷপ
• ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:
τϥϯεύΠϥ (ίϯόʔλʔ) • webpack / browserify: ϥΠϒϥϦґଘؔղܾπʔϧ • Ճ͑ͯ ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ڥߏஙͷপ
• ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:
τϥϯεύΠϥ (ίϯόʔλʔ) • webpack / browserify: ϥΠϒϥϦґଘؔղܾπʔϧ • Ճ͑ͯ ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ڥߏஙͷপ
• ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:
τϥϯεύΠϥ (ίϯόʔλʔ) • webpack / browserify: ϥΠϒϥϦґଘؔղܾπʔϧ • Ճ͑ͯ ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ڥߏஙͷপ
ޙʹࢮͳͳ͍ͨΊͷ ϑϩϯτΤϯυڥ
ޙʹࢮͳͳ͍ͨΊͷ ϑϩϯτΤϯυڥ • ϥΠϒϥϦͱϏδωεϩδοΫૄ݁߹ʹ
ޙʹࢮͳͳ͍ͨΊͷ ϑϩϯτΤϯυڥ • ϥΠϒϥϦͱϏδωεϩδοΫૄ݁߹ʹ • ݸʑͷπʔϧৗʹೖΕସ͑Մೳʹ
ޙʹࢮͳͳ͍ͨΊͷ ϑϩϯτΤϯυڥ • ϥΠϒϥϦͱϏδωεϩδοΫૄ݁߹ʹ • ݸʑͷπʔϧৗʹೖΕସ͑Մೳʹ • ڥߏஙͷ࣌ͰઃܭࢦΛ໌֬ʹ࣋ͭ
ͦΕͰΈͳ͞Μ ઃܭ͠·͠ΐ͏ɺ
࠷ߴͷ ϢʔβʔମݧΛʂ
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ @gutchomͰͨ͠