Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Technical Selection for Surviving the Front End...

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for gutchom gutchom
September 16, 2017
Technology
220
1

Technical Selection for Surviving the Front End Sengoku Period

フロントエンド戦国時代を生き延びるための技術選定
@Webフレーム品評会

Avatar for gutchom

gutchom

September 16, 2017

Other Decks in Technology

See All in Technology
どうして今サーバーサイドKotlinを選択したのか
Avatar for Nealle nealle
0
180
product engineering with qa
Avatar for Nealle nealle
0
140
きのこカンファレンス2026_肩書きを外したとき私は誰か
Avatar for yamasatimi yamasatimi
1
120
AWS Summit の片隅で、体育座りしながらコミュニティがにぎわう理由を考えた
Avatar for Kazuki Adachi k_adachi_01
2
330
WebGIS AI Agentの紹介
Avatar for _shimizu _shimizu
0
610
40代で“やっとエンジニアになれた”――閉じた学びを開き、空の青さを知る / 20260628 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
4
1.6k
技術・能力を向上する原理原則 #きのこセッションa #きのこ2026
Avatar for bash0C7 bash0c7
0
190
AI時代における最適なQA組織の作り方
Avatar for ymty ymty
3
330
FinOps X 2026 Recap from Engineer Side #JapanFinOps
Avatar for Satoshi Matsuzawa (Matt) chacco38
0
240
Why is RC4 still being used?
Avatar for tamaiyutaro tamaiyutaro
0
270
Hatena Engineer Seminar 37 jj1uzh
Avatar for jj1uzh jj1uzh
0
410
RAGの精度向上とエージェント活用
Avatar for KintoTech_Dev kintotechdev
2
120

Featured

See All Featured
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
380
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
62
44k
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
8
760
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
2
410
It's Worth the Effort
Avatar for 3n 3n
188
29k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
34k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.3k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k

Transcript

  1. ϑϩϯτΤϯυઓࠃ࣌୅Λ ੜ͖ԆͼΔͨΊͷ ٕज़બఆ @gutchom 2017೥9݄16೔ WebϑϨʔϜϫʔΫ඼ධձ

  2. ࣗݾ঺հ @gutchom (͙ͬͪΐΉ) ϑϩϯτΤϯυΤϯδχΞ TypeScript / JavaScript React.js / Vue.js

  3. ࣗݾ঺հ झຯ͸։ൃ ࢓ࣄ͸ແ৬

  4. ࣗݾ঺հ ͍·࡞ͬͯΔ΋ͷ: ݕࡧΫΤϦϏϧμʔ

  5. None

  6. ຊ೔͓࿩͢͠ΔτϐοΫ̐఺

  7. ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  8. React.jsͱVue.js

  9. ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  10. ൒೥ޙʹࢮͳͳ͍ͨΊͷ ϑϩϯτΤϯυ؀ڥ

  11. ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  12. ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  13. ⚠͜ͷ߲໨͸ࢲ͙ͬͪΐΉͷಠࣗݟղͰ͢⚠ ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  14. • jQueryແࡑ ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  15. • jQuery(͸DOMͷૢ࡞ʹݶΓ)ແࡑ ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  16. • jQuery(͸DOMͷૢ࡞ʹݶΓ)ແࡑ • ΩʔϙΠϯτ͸View͕StateΛ͔࣋ͭ൱͔ ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  17. • jQuery(͸DOMͷૢ࡞ʹݶΓ)ແࡑ • ΩʔϙΠϯτ͸View͕StateΛ͔࣋ͭ൱͔ • ϞμϯϑϩϯτΤϯυ͸όζϫʔυ
 ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  18. • jQuery(͸DOMͷૢ࡞ʹݶΓ)ແࡑ • ΩʔϙΠϯτ͸View͕StateΛ͔࣋ͭ൱͔ • ϞμϯϑϩϯτΤϯυ͸όζϫʔυ
 ΫϥΠΞϯταΠυΞϓϦέʔγϣϯ։ൃ
 ͦͷϑϩϯτΤϯυɺ ϞμϯͰ͋Δඞཁ͕͋Γ·͔͢ʁ

  19. ॏཁͳͷ͸ɺ

  20. GUIΞϓϦέʔγϣϯ։ൃͷ ֮ޛ

  21. GUIΞϓϦέʔγϣϯ։ൃͷ ֮ޛ

  22. GUIΞϓϦέʔγϣϯ։ൃͷ ֮ޛ

  23. GUIΞϓϦέʔγϣϯ։ൃͷ ֮ޛ

  24. React.jsͱVue.js

  25. React.jsͱVue.js ؆қൺֱର৅ද

  26. 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… ؆қൺֱର৅ද

  27. React.jsͱVue.js ͦΕͧΕΛ༻͍࣮ͨࡍͷίʔυ

  28. React.jsͰͷίʔυ

  29. React.jsͰͷίʔυ ϥΠϑαΠΫϧϝιουɾΠϕϯτϋϯυϥ

  30. React.jsͰͷίʔυ Ϩϯμʔؔ਺ (ϚʔΫΞοϓ)

  31. React.jsͰͷίʔυ Stateless Functional Component (ঢ়ଶͱϥΠϑαΠΫϧΛ࣋ͨͳ͍ίϯϙʔωϯτ)

  32. Vue.jsͰͷίʔυ

  33. None

  34. ESΫϥεߏจ͡Όͳ͍…

  35. ESΫϥεߏจ͡Όͳ͍… ͳͷͰ ΦϒδΣΫτʹهड़ͨ͠ ίϯϙʔωϯτఆٛΛ ίϯετϥΫλ΁

  36. ESΫϥεߏจ͡Όͳ͍… ͳͷͰ ΦϒδΣΫτʹهड़ͨ͠ ίϯϙʔωϯτఆٛΛ ίϯετϥΫλ΁ ੜͷJavaScriptͰهड़Մೳʂ

  37. VueΠϯελϯεͷ࣋ͭػೳ

  38. VueΠϯελϯεͷ࣋ͭػೳ • JSͰͷ஋มߋΛViewʹࣗಈ൓ө • Viewͷೖྗ͕JSͷ஋Λࣗಈมߋ • ஋มߋ࣌ͷΠϕϯτൃՐ • getter/setter ม਺ͷ૒ํ޲όΠϯσΟϯά

  39. ͱ͜ΖͰ

  40. Vueίϯϙʔωϯτ΋ Ϟμϯʹॻ͖͍ͨ

  41. (ຐվ଄)Vue.jsͰͷίʔυ Vueίϯϙʔωϯτఆٛ VueςϯϓϨʔτఆٛ (Pug/Jade)

  42. (ຐվ଄)Vue.jsͰͷίʔυ VueςϯϓϨʔτఆٛ (Pug/Jade) VueςϯϓϨʔτఆٛ (Pug/Jade)

  43. ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  44. • ։ൃ؀ڥ͕୲͏λεΫ ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  45. • ։ൃ؀ڥ͕୲͏λεΫ • ϒϥ΢βͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  46. • ։ൃ؀ڥ͕୲͏λεΫ • ϒϥ΢βͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ
 (ECMAScript 6+, JSX, TypeScript…) ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  47. • ։ൃ؀ڥ͕୲͏λεΫ • ϒϥ΢βͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ
 (ECMAScript 6+, JSX, TypeScript…) • ϝλݴޠ͔ΒCSS΁ͷίϯόʔτ

    ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  48. • ։ൃ؀ڥ͕୲͏λεΫ • ϒϥ΢βͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ
 (ECMAScript 6+, JSX, TypeScript…) • ϝλݴޠ͔ΒCSS΁ͷίϯόʔτ


    (CSSnext, Sass, Less, Stylus…) ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  49. • ։ൃ؀ڥ͕୲͏λεΫ • ϒϥ΢βͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ
 (ECMAScript 6+, JSX, TypeScript…) • ϝλݴޠ͔ΒCSS΁ͷίϯόʔτ


    (CSSnext, Sass, Less, Stylus…) • ϞοΫαʔόʔͷىಈ ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  50. • ։ൃ؀ڥ͕୲͏λεΫ • ϒϥ΢βͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ
 (ECMAScript 6+, JSX, TypeScript…) • ϝλݴޠ͔ΒCSS΁ͷίϯόʔτ


    (CSSnext, Sass, Less, Stylus…) • ϞοΫαʔόʔͷىಈ • ࣗಈςετͷ࣮ߦ ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  51. • ։ൃ؀ڥ͕୲͏λεΫ • ϒϥ΢βͰಈ࡞͢ΔJS࣮ߦίʔυͷϏϧυ
 (ECMAScript 6+, JSX, TypeScript…) • ϝλݴޠ͔ΒCSS΁ͷίϯόʔτ


    (CSSnext, Sass, Less, Stylus…) • ϞοΫαʔόʔͷىಈ • ࣗಈςετͷ࣮ߦ • etc… ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  52. • ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτ΢ΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:

    JSͷίϯόʔλʔ • webpack / browserify: ϥΠϒϥϦґଘؔ܎ղܾπʔϧ • Ճ͑ͯ
 ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  53. • ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτ΢ΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:

    JSͷίϯόʔλʔ • webpack / browserify: ϥΠϒϥϦґଘؔ܎ղܾπʔϧ • Ճ͑ͯ
 ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  54. • ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτ΢ΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:

    JSͷίϯόʔλʔ • webpack / browserify: ϥΠϒϥϦґଘؔ܎ղܾπʔϧ • Ճ͑ͯ
 ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  55. • ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτ΢ΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:

    τϥϯεύΠϥ (ίϯόʔλʔ) • webpack / browserify: ϥΠϒϥϦґଘؔ܎ղܾπʔϧ • Ճ͑ͯ
 ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  56. • ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτ΢ΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:

    τϥϯεύΠϥ (ίϯόʔλʔ) • webpack / browserify: ϥΠϒϥϦґଘؔ܎ղܾπʔϧ • Ճ͑ͯ
 ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  57. • ओཁπʔϧ • Node.js: ։ൃϚγϯ্ͰJavaScriptιϑτ΢ΣΞΛ࣮ߦ • npm: ύοέʔδϚωʔδϟʔ • babel:

    τϥϯεύΠϥ (ίϯόʔλʔ) • webpack / browserify: ϥΠϒϥϦґଘؔ܎ղܾπʔϧ • Ճ͑ͯ
 ֤छTesting framework, ߏจνΣοΧʔ, ϞμϯϑϩϯτΤϯυ ؀ڥߏஙͷপ

  58. ൒೥ޙʹࢮͳͳ͍ͨΊͷ ϑϩϯτΤϯυ؀ڥ

  59. ൒೥ޙʹࢮͳͳ͍ͨΊͷ ϑϩϯτΤϯυ؀ڥ • ϥΠϒϥϦͱϏδωεϩδοΫ͸ૄ݁߹ʹ

  60. ൒೥ޙʹࢮͳͳ͍ͨΊͷ ϑϩϯτΤϯυ؀ڥ • ϥΠϒϥϦͱϏδωεϩδοΫ͸ૄ݁߹ʹ • ݸʑͷπʔϧ΋ৗʹೖΕସ͑Մೳʹ

  61. ൒೥ޙʹࢮͳͳ͍ͨΊͷ ϑϩϯτΤϯυ؀ڥ • ϥΠϒϥϦͱϏδωεϩδοΫ͸ૄ݁߹ʹ • ݸʑͷπʔϧ΋ৗʹೖΕସ͑Մೳʹ • ؀ڥߏஙͷ࣌఺Ͱઃܭࢦ਑Λ໌֬ʹ࣋ͭ

  62. ͦΕͰ͸Έͳ͞Μ ઃܭ͠·͠ΐ͏ɺ

  63. ࠷ߴͷ ϢʔβʔମݧΛʂ

  64. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ @gutchomͰͨ͠