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
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
3
350
ClaudeCodeにキレない技術
gtnao
1
860
データ戦略部門 紹介資料
sansan33
PRO
1
3.3k
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
2
940
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
tsukuha
1
380
Introduction to Bill One Development Engineer
sansan33
PRO
0
260
第64回コンピュータビジョン勉強会「The PanAf-FGBG Dataset: Understanding the Impact of Backgrounds in Wildlife Behaviour Recognition」
x_ttyszk
0
240
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
590
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
500
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
4.4k
Featured
See All Featured
Navigating Team Friction
lara
187
15k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Thoughts on Productivity
jonyablonski
69
4.7k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Bash Introduction
62gerente
613
210k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Documentation Writing (for coders)
carmenintech
72
4.9k
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Ͱͨ͠