「とっつきやすい」フレームワーク Vue.js #jsfes

秋のJavaScript 2016で登壇したスライドです

Transcript

1. ʮͱ͖ͬͭ΍͍͢ʯϑϨʔϜϫʔΫ Vue.js #jsfes 2016/10 @ TAKUMA Hanatani https://speakerdeck.com/potato4d/totutukiyasui-huremuwaku-vue-dot-js-number-jsfes
2. ಥવͰ͕͢ʂ
3. JSϑϨʔϜϫʔΫܦݧ͸͋Γ·͔͢ʁ
4. Vue.jsΛ৮ͬͨ͜ͱ͸͋Γ·͔͢ʁ
5. ࠓճ͸ͳͯ͘΋͋Δఔ౓͸େৎ෉Ͱ͢ʂ
6. ࣗݾ঺հ Ֆ୩୓ຏ a.k.a Potato4d • ݱࡏ18ࡀ(ߴߍ3೥) • ࠓ೔͸େࡕ͔Β͖·ͨ͠ • Vueͱ͔Riotͱ͔ɺαʔόʔαΠυͱ͔σ βΠϯͱ͔ • ौ୩ͰελʔτΞοϓ΍ͬͯ·͢ • ؔ੢ͷίϛϡχςΟӡӦ΍ͬͯ·͢
7. ࣗݾ঺հ Ֆ୩୓ຏ a.k.a Potato4d • ݱࡏ18ࡀ(ߴߍ3೥) • ࠓ೔͸େࡕ͔Β͖·ͨ͠ • Vueͱ͔Riotͱ͔ɺαʔόʔαΠυͱ͔σ βΠϯͱ͔ • ौ୩ͰελʔτΞοϓ΍ͬͯ·͢ • ؔ੢ͷίϛϡχςΟӡӦ΍ͬͯ·͢
8. ࣗݾ঺հ http://www.slideshare.net/TakumaHanatani/jquery-56093566 Ֆ୩୓ຏ a.k.a Potato4d
9. ࣗݾ঺հ ؔ੢ϑϩϯτΤϯυUG • ؔ੢ݍͷϑϩϯτΤϯυίϛϡχςΟ • ݄࣍ͰJS-FWϓϩϨεͱ͔΍ͬͯ·͢ • ೥ʹ2ճ΄ͲେܕΠϕϯτͳΜ͔΋ • TwitterͰ #frontkansai λάͰݕࡧʂ
10. ࠓճ࿩͢͜ͱ • ϑϨʔϜϫʔΫͷબఆج४ʹ͍ͭͯ • Vue.jsͱ͸ʁ • Vue.jsͷັྗʹ͍ͭͯ • Vue 2.0ʹ͍ͭͯ(͢͜͠)
11. ※஫ҙ
12. 1.ϑϨʔϜϫʔΫͷબఆج४
13. ϑϨʔϜϫʔΫΛબͿج४͸ʁ
14. ৽͍͠ઃܭ΍ύϥμΠϜʁ
15. εέʔϦϯάੑೳʁ
16. ύϑΥʔϚϯεʁ
17. No
18. શͯૉ੖Β͍͠ཁૉͰ͸ ͋Δ΋ͷͷ
19. ͦ΋ͦ΋ಋೖͰ͖ͳ͚Ε͹ɺ ͦͷՁ஋ΛൃشͰ͖ͳ͍
20. ࠓճͷΩʔϫʔυ
21. ʮڠۀʯ
22. ࣗ෼
23. ࣗ෼ x ଞਓ
24. ࣗ෼ x ଞਓ
25. ࣗ෼
26. ࣗ෼ x ະདྷͷࣗ෼
27. ࣗ෼ x ະདྷͷࣗ෼
28. ڠۀ͠΍͍͢࢓૊Έ͕ Vue.jsʹ͸͋Γ·͢
29. 2.What’s Vue.js?
30. Vue.jsͱ͸ʁ
31. Vue.jsͱ͸ʁ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ཈͑ͨAPIΛ΋ͪ
32. Vue.jsͱ͸ʁ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ཈͑ͨAPIΛ΋ͪ • ॳ৺ऀ͔ΒϞμϯͳ։ൃʹ׳Εͨਓ·Ͱɺ୭ Ͱ΋ѻ͍΍͘͢
33. Vue.jsͱ͸ʁ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ཈͑ͨAPIΛ΋ͪ • ॳ৺ऀ͔ΒϞμϯͳ։ൃʹ׳Εͨਓ·Ͱɺ୭ Ͱ΋ѻ͍΍͘͢ • ΦϑΟγϟϧͷ֦ுͰεέʔϦϯά͕༰қͳ
34. Vue.jsͱ͸ʁ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ཈͑ͨAPIΛ΋ͪ • ॳ৺ऀ͔ΒϞμϯͳ։ൃʹ׳Εͨਓ·Ͱɺ୭ Ͱ΋ѻ͍΍͘͢ • ΦϑΟγϟϧͷ֦ுͰεέʔϦϯά͕༰қͳ • JavaScriptϑϨʔϜϫʔΫ
35. 3.Vue.jsͷັྗʹ͍ͭͯ
36. Vue.jsͱ͸ʁ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ཈͑ͨAPIΛ΋ͪ • ॳ৺ऀ͔ΒϞμϯͳ։ൃʹ׳Εͨਓ·Ͱɺ୭ Ͱ΋ѻ͍΍͘͢ • ΦϑΟγϟϧͷ֦ுͰεέʔϦϯά͕༰қͳ • JavaScriptϑϨʔϜϫʔΫ
37. Vue.jsͷັྗ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ཈͑ͨAPI • ར༻ऀͷशख़౓ʹରԠ͠΍͍͢ॊೈ͞ • ΦϑΟγϟϧʹΑͬͯอূ͞Ε֦ͨுੑ
38. Vue.jsͷັྗ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ཈͑ͨAPI • ར༻ऀͷशख़౓ʹରԠ͠΍͍͢ॊೈ͞ • ΦϑΟγϟϧʹΑͬͯอূ͞Ε֦ͨுੑ
39. γϯϓϧ͔ͭڧྗͳAPI
40. Vue.jsͷAPI • ૒ํ޲όΠϯσΟϯά • ΧελϜίϯϙʔωϯτ • ΧελϜσΟϨΫςΟϒ • etc...
41. ͬ͘͟Γݴ͏ͱ • ಛघͳه๏ͱ಺ଂͷϑοΫʹΑͬͯJSͱHTML ؒͰσʔλΛڞ༗͢Δػೳ • HTMLλάΛࣗ࡞͢Δػೳ • HTMLλάʹϑοΫΛ͚ͭΒΕΔػೳ
42. Vue.jsͷAPI • ૒ํ޲όΠϯσΟϯά • ΧελϜίϯϙʔωϯτ • ΧελϜσΟϨΫςΟϒ • etc...
43. ΧελϜίϯϙʔωϯτ
44. • ͬ͘͟Γ͍͏ͱɺʮಠࣗͷHTMLλάΛఆٛͰ ͖Δػೳʯ • Ͱ͸͋Δ΋ͷͷɺʮ͜ͷίϯϙʔωϯτͷJS/ CSSʯͱ͍͏ܗͰ಺෦ʹίʔυΛด͡ࠐΊΔ ͜ͱ͕ՄೳͰɺ͜Ε͕ڧྗ ΧελϜίϯϙʔωϯτ
45. ΧελϜίϯϙʔωϯτ <btn-vuecolor> Click me! </btn-vuecolor> Source Code https://jp.vuejs.org/guide/component.html
46. ΧελϜίϯϙʔωϯτ <btn-vuecolor> Click me! </btn-vuecolor> Source Code https://jp.vuejs.org/guide/component.html
47. ΧελϜίϯϙʔωϯτ <btn-vuecolor> Click me! </btn-vuecolor> Source Code Click me! https://jp.vuejs.org/guide/component.html
48. ΧελϜίϯϙʔωϯτ <btn-vuecolor> Click me! </btn-vuecolor> Source Code Click me! https://jp.vuejs.org/guide/component.html
49. ΧελϜίϯϙʔωϯτ <btn-vuecolor> Click me! </btn-vuecolor> Source Code Click me! https://jp.vuejs.org/guide/component.html
50. ΧελϜίϯϙʔωϯτ • ʮίϯϙʔωϯτʯͱ͍͏୯ҐͰѻ͏ͨΊɺ ͦͷதͰ͸ࣗ༝ʹهड़Ͱ͖ɺ֎෦Ԛછ͕গͳ ͍ • ίϯϙʔωϯτࣗମΛಡ·ͳ͍৔߹ɺͦͷத ਎͸ϒϥοΫϘοΫεͱͳΔͨΊɺUIͷઃܭ ͚ͩͰ͋Ε͹ग़དྷΔਓΛ༰қʹ૿΍ͤΔ
51. Vue.jsͷັྗ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ཈͑ͨAPI • ར༻ऀͷशख़౓ʹରԠ͠΍͍͢ॊೈ͞ • ΦϑΟγϟϧʹΑͬͯอূ͞Ε֦ͨுੑ
52. Vue.js͕΋ͭॊೈ͞
53. ͸͡Ίͯ࢖͏ͱ͖
54. ͸͡Ίͯ࢖͏ͱ͖ <div id=“app”> Hello, {{name}} </div> <script src=“path/to/vue.min.js”></script>
 <script> . . . new Vue({ el: “#app”, data: {
 name : “John” } }); index.html
55. جຊ͕ͻͱͱ͓Γ෼͔Δ৔߹
56. جຊ͕ͻͱͱ͓Γ෼͔Δ৔߹ $ npm install -D vue webpack vue-loader etc… const Vue = require(“vue”); const App = require(“./app.vue”); Vue.component(“comp-a”, require(“./components/comp-a.vue”); Vue.component(“comp-b”, require(“./components/comp-b.vue”); new Vue(App); On the terminal index.js
57. جຊ͕ͻͱͱ͓Γ෼͔Δ৔߹ <template> <p>Hello, {{name}}!</p> </template> <script> module.exports = { props: [“name”] }; </script> comp-a.js
58. Vue.jsͷॊೈͳར༻ํ๏ • scriptλά͔Β௚ͷར༻OK • ΋ͪΖΜɺnpm͔Βͷಋೖ΋OK • webpack, browserify྆ํ͔ΒͷϏϧυ΋Մೳ
59. Vue.jsͷັྗ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ཈͑ͨAPI • ར༻ऀͷशख़౓ʹରԠ͠΍͍͢ॊೈ͞ • ΦϑΟγϟϧʹΑͬͯอূ͞Ε֦ͨுੑ
60. ΦϑΟγϟϧʹΑͬͯ อূ͞Ε֦ͨுੑ
61. ग़ͯ͘Δཁ๬
62. ͔ͬ͠ΓSPAͱͯ͠ͷମࡋͷ੔ͬͨΞϓϦέʔγϣϯΛ࡞Γ͍ͨ ग़ͯ͘Δཁ๬
63. ͔ͬ͠ΓSPAͱͯ͠ͷମࡋͷ੔ͬͨΞϓϦέʔγϣϯΛ࡞Γ͍ͨ Vue.jsʹ࠷దԽ͞ΕͨFlux࣮૷͸ͳ͍ͷʁ ग़ͯ͘Δཁ๬
64. ͔ͬ͠ΓSPAͱͯ͠ͷମࡋͷ੔ͬͨΞϓϦέʔγϣϯΛ࡞Γ͍ͨ Vue.jsʹ࠷దԽ͞ΕͨFlux࣮૷͸ͳ͍ͷʁ ग़ͯ͘Δཁ๬ JavaScriptͷϑϨʔϜϫʔΫ࢖͏ͱSEOͷ໘͕ͳ͊……
65. ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹ
66. ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter
67. ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter • FluxύλʔϯΛ࢖͍͍ͨɹˠɹ
68. ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter • FluxύλʔϯΛ࢖͍͍ͨɹˠɹVuex
69. ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter • FluxύλʔϯΛ࢖͍͍ͨɹˠɹVuex • SSRΛ͍ͨ͠ɹɹɹɹɹɹˠɹ
70. ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter • FluxύλʔϯΛ࢖͍͍ͨɹˠɹVuex • SSRΛ͍ͨ͠ɹɹɹɹɹɹˠɹVue 2.0
71. VueRouter(with 1.x) router.map({ "/": { component: require(“./pages/index.vue”) }, “users/“ :{ component: require(“./pages/users/index.vue”) }, “/users/:id”: { component: require(“./pages/users/detail.vue”) } });
72. Vuex https://github.com/vuejs/vuex
73. Server-Side Rendering(with 2.0) const Vue = require('vue'); const app = new Vue({ render: function (h) { return h('p', 'hello world'); }; }); const renderer = require('vue-server-renderer').createRenderer(); renderer.renderToString(app, (error, html) => { if (error) throw error; console.log(html); }); http://vuejs.org/guide/ssr.html
74. ֦ுػೳ • ϧʔςΟϯά΍Flux࣮૷ɺSSRͳͲඞཁͳ΋ͷ ͸Ұ௨Γἧ͍ͬͯΔ • ݱঢ়શͯVue.jsຊମͷ؅ཧԼͱͳ͍ͬͯΔͷ Ͱɺͦͷ͋ͨΓ΋҆৺ϙΠϯτ
75. ັྗ·ͱΊ
76. Vue.jsͷັྗ·ͱΊ 1 • γϯϓϧͳAPIઃܭͰɺ୭Ͱ΋ֶͼ΍͍͢ • ͦ͜͢Β΋ϒϥοΫϘοΫεʹͰ͖Δ • scriptλά͔Β͸͡ΊΔ͜ͱ΋ग़དྷΔ • ૯ͯ͡ʮͱ͖ͬͭ΍͍͢ʯ
77. Vue.jsͷັྗ·ͱΊ 2 • ͔ͬ͠Γ։ൃ͍ͨ͠৔߹͸Router͔ΒFluxύ λʔϯͷ׆༻ɺSSR·ͰͳΜͰ΋Ͱ͖Δ • ͦΕΒΛར༻͢Δ࣌ʹɺ(VuexΛআ͖)ݩͷઃ ܭ͔Βେ͖͘ҳ୤͢Δ͜ͱ͕ͳ͍ • εςοϓΞοϓ͠΍͍͢
78. Vue.jsͷັྗ·ͱΊ 3 ։ൃϝϯόʔͷ शख़౓͕·ͪ·ͪ
79. Vue.jsͷັྗ·ͱΊ 3 ͋ͱͰͲΜͳਓ͕ ϝϯςφϯε͢Δ͔෼͔Βͳ͍
80. Vue.jsͷັྗ·ͱΊ 3 ٕज़ਫ४ͷࠩҟΛٵऩ͠΍͍͢
81. Vue.jsͷັྗ·ͱΊ 3 ʹ
82. Vue.jsͷັྗ·ͱΊ 3 ಋೖ͠΍͘͢ɺ׆༂ͤ͞΍͍͢
83. Vue.jsͷັྗ·ͱΊ 3 ͦΜͳϑϨʔϜϫʔΫ
84. Thank you!
85. and…
86. Vue 2.0 2
87. େ෯ͳεϐʔυΞοϓ 1.0ͱൺֱͯ͠໿1.7ഒͷ଎౓վળ Vanilla JS Vue 2.0 Vue 1.0 https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8#.xqevlvkak 1.0x 1.37x 2.16x
88. αʔόʔαΠυϨϯμϦϯά   +
89. ߴ͍ޓ׵ੑ શͯͷAPIͷ͏ͪɺ90%͕มߋͳ͠(Router͸มߋ͋Γ) http://vuejs.org/guide/migration.html 
90. Vue 2.0
91. Vue 2.0 is
92. Vue 2.0 is here!
93. ·ͱΊ • Vue.js͸ʮͱ͖ͬͭ΍͍͢ʯFWͰ͋Δ • ͦͷಛ௕͸ɺ࡞ۀऀͷशख़౓ͷࠩҟΛٵऩ͠΍͢ ͘ɺʮڠۀʯͱ͍͏఺Ͱඇৗʹ༏ल • ͦͷ্ͰɺެࣜϓϥάΠϯʹΑΔόϦόϦ։ൃ΋ OK • ͭ·Γ……
94. Vue.js͸
95. ಋೖ͠΍͘͢ɺ׆༂ͤ͞΍͍͢
96. ڠۀʹదͨ͠ϑϨʔϜϫʔΫͰ͢
97. Thank you!