Technical Selection for Surviving the Front End Sengoku Period

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

Transcript

1. ϑϩϯτΤϯυઓࠃ࣌୅Λ ੜ͖ԆͼΔͨΊͷ ٕज़બఆ @gutchom 2017೥9݄16೔ WebϑϨʔϜϫʔΫ඼ධձ
2. ࣗݾ঺հ @gutchom (͙ͬͪΐΉ) ϑϩϯτΤϯυΤϯδχΞ TypeScript / JavaScript React.js / Vue.js
3. ࣗݾ঺հ झຯ͸։ൃ ࢓ࣄ͸ແ৬
4. ࣗݾ঺հ ͍·࡞ͬͯΔ΋ͷ: ݕࡧΫΤϦϏϧμʔ
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Ͱͷίʔυ
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Ͱͨ͠