Vue.jsとその未来 2.0 #wbkyoto

#wbkyoto x #ng_kyoto 共催 WordBench京都10月 JS-FWでのスライドです。

Transcript

1. Vue.jsͱͦͷະདྷ 2.0 #wbkyoto 2016/10 @ TAKUMA Hanatani
2. https://speakerdeck.com/potato4d
3. Ұ൪ࠨ্
4. ಥવͰ͕͢ʂ
5. JSϑϨʔϜϫʔΫܦݧ͸͋Γ·͔͢ʁ
6. Vue.jsΛ৮ͬͨ͜ͱ͸͋Γ·͔͢ʁ
7. SPA։ൃΛͨ͜͠ͱ͸͋Γ·͔͢ʁ
8. ࠓճ͸ͳͯ͘΋͋Δఔ౓͸େৎ෉Ͱ͢ʂ ʢલ൒·Ͱ͸جຊతͳઆ໌Λ͠·͢ʣ
9. ࣗݾ঺հ • Ֆ୩୓ຏ a.k.a. Potato4d • य़͔ΒࣾձਓʹͳΓͦ͏ • JSϝΠϯͰɺσβΠϯ΍ཪ΋΍ͬͨΓ • ࠓճ͸WordPressͷ࿩͸෧ҹͯ͠·͢
10. Vue 2.0ͷυΩϡϝϯτͷ຋༁ ͸͡Ί·ͨ͠
11. ࠓճ࿩͢͜ͱ • Vue.jsͷ͍͍ͱ͜Ζ • Vue.jsʹ΋ؚ·Ε࠷ۙͷϑϨʔϜϫʔΫͰසൟ ʹར༻͞ΕΔػೳʹ͍ͭͯ • Vue 2.0ʹ͍ͭͯ
12. What’s Vue.js?
13. Vue.jsͱ͸Կ͔ʁ • JavaScriptͷϑϨʔϜϫʔΫͷͻͱͭ • γϯϓϧͰܰྔͰ͋Δ͜ͱ͕΢Ϧ • ϋʔυϧ͕௿͘ɺ༷ʑͳ৔ʹಋೖ͠΍͍͢ • ࠷ۙ2.0͕Ͱͯɺ৭ʑਐԽͨ͠
14. Vue.jsͷັྗ 1. γϯϓϧͰܰྔͳAPI 2. शख़౓ʹԠͯ͡ߏ੒ΛมԽͰ͖Δॊೈ͞ 3. தن໛Ͱ΋ར༻͠΍͍֦͢ு܈
15. 1. γϯϓϧͰܰྔͳAPI
16. Vue.jsͷAPI • ૒ํ޲όΠϯσΟϯά • ΧελϜίϯϙʔωϯτ • ΧελϜσΟϨΫςΟϒ • etc...
17. ͬ͘͟Γݴ͏ͱ • Mustacheه๏΍಺ଁͷϑοΫʹΑͬͯJSͱ HTMLؒͰσʔλΛڞ༗͢Δػೳ • HTMLλάΛࣗ࡞͢Δػೳ • HTMLλάʹϑοΫΛ͚ͭΒΕΔػೳ
18. Vue.jsͷAPI • ૒ํ޲όΠϯσΟϯά • ΧελϜίϯϙʔωϯτ • ΧελϜσΟϨΫςΟϒ • etc...
19. ૒ํ޲όΠϯσΟϯά
20. ૒ํ޲όΠϯσΟϯά • Mustacheه๏({{hoge}})Λ༻͍Δ͜ͱͰJS͔ ΒHTML΁σʔλΛྲྀ͠ࠐΉ͜ͱ͕ग़དྷΔ • v-modelΛར༻͢Δ͜ͱͰɺϑΥʔϜͷೖྗ஋ ͱJS্ͷม਺ͷ஋ͷยํ͕มΘΔͱ͖ɺ΋͏ ยํ΋ࣗಈͰมΘΔΑ͏ʹͳΔ
21. ૒ํ޲όΠϯσΟϯά <div id=“demo”> <p>{{message}}</p> <input v-model=“message”> </div> HTML Code https://jp.vuejs.org
22. ૒ํ޲όΠϯσΟϯά var demo = new Vue({ el: “#demo” data:{ message: “Hello Vue.js!” } }); JavaScript Code https://jp.vuejs.org
23. ૒ํ޲όΠϯσΟϯά Result https://jp.vuejs.org
24. ૒ํ޲όΠϯσΟϯά Result https://jp.vuejs.org
25. ΧελϜίϯϙʔωϯτ
26. ΧελϜίϯϙʔωϯτ • ͬ͘͟Γ͍͏ͱɺʮಠࣗͷHTMLλάΛఆٛͰ ͖Δػೳʯ • Ͱ͸͋Δ͕ɺJSͷൣғͱͳΔ౎߹্ɺείʔϓ Λด͡ࠐΊΒΕΔ༷ʹͳΔͳͲͷར఺͕͋Δ • Vue.jsΛ࢖༻͢Δ৔߹͸ɺίϯϙʔωϯτ͕୯ Ґͷج४ͱͳΔ
27. ΧελϜίϯϙʔωϯτ <div id=“app”> <greeting name=“John”></greeting> </div> <script src=“/path/to/vue.min.js”></script> <script> var Greeting = new Vue.extend({ props: “name”, template: “<p>Hello, {{name}}.</p>” ); Vue.component(“greeting”, Greeting); new Vue({el: “#app”}); </script> index.html
28. ΧελϜίϯϙʔωϯτ Result
29. ΧελϜίϯϙʔωϯτ <div id=“app”> <greeting name=“John”></greeting> <greeting name=“Jack”></greeting> </div> <script src=“/path/to/vue.min.js”></script> <script> var Greeting = new Vue.extend({ props: “name”, template: “<p>Hello, {{name}}.</p>” ); Vue.component(“greeting”, Greeting); new Vue({el: “#app”}); </script> index.html
30. ΧελϜίϯϙʔωϯτ Result
31. ͜Ε·Ͱͷίʔυ
32. ͜Ε·Ͱͷίʔυ (function(){ var data = “hoge”; $(“input”).val(data); $(“p”).val(data); $(“input”).on(“keyup”, function(){ $(“p”).text($(this).val()); }); }()); jQuery Code
33. ॻ͔ͳ͍͍ͯ͘
34. 2. Vue.js͕΋ͭॊೈ͞
35. ͸͡Ίͯ࢖͏ͱ͖
36. ͸͡Ίͯ࢖͏ͱ͖ <div id=“app”> Hello, {{name}} </div> <script src=“path/to/vue.min.js”></script>
 <script> . . . new Vue({ el: “#app”, data: {
 name : “John” } }); index.html
37. ͋Δఔ౓׳Ε͖ͯͨͱ͖
38. ͋Δఔ౓׳Ε͖ͯͨͱ͖ <div id=“app”> <comp-a name=“John”></comp-a> </div> <script src=“path/to/vue.min.js”></script>
 <script src=“./scripts/comp-a.js”></script> <script src=“./main.js”></script> index.html
39. ͋Δఔ౓׳Ε͖ͯͨͱ͖ var ComponentA = Vue.extend({ props: [“name”], template: “<p>Hello, {{name}}</p>” }); Vue.extend(“comp-a”, ComponentA); comp-a.js
40. ͋Δఔ౓׳Ε͖ͯͨͱ͖ new Vue({ el: “#app” }); main.js
41. جຊ͕ͻͱͱ͓Γ෼͔Δ৔߹
42. جຊ͕ͻͱͱ͓Γ෼͔Δ৔߹ $ 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
43. جຊ͕ͻͱͱ͓Γ෼͔Δ৔߹ <template> <p>Hello, {{name}}!</p> </template> <script> module.exports = { props: [“name”] }; </script> comp-a.js
44. Vue.jsͷར༻ํ๏ • scriptλά͔Β௚ͷར༻OK • ΋ͪΖΜɺnpm͔Βͷಋೖ΋OK • webpack, browserify྆ํ͔ΒͷϏϧυ΋Մೳ
45. தن໛Ͱ΋ ར༻͠΍͍֦͢ு܈
46. ͔ͬ͠ΓSPAͱͯ͠ͷମࡋͷ੔ͬͨΞϓϦέʔγϣϯΛ࡞Γ͍ͨ Vue.jsʹ࠷దԽ͞ΕͨFlux࣮૷͸ͳ͍ͷʁ ग़ͯ͘Δཁ๬ JavaScriptͷϑϨʔϜϫʔΫ࢖͏ͱSEOͷ໘͕ͳ͊……
47. ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹ
48. ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter
49. ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter • FluxύλʔϯΛ࢖͍͍ͨɹˠɹ
50. ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter • FluxύλʔϯΛ࢖͍͍ͨɹˠɹVuex
51. ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter • FluxύλʔϯΛ࢖͍͍ͨɹˠɹVuex • SSRΛ͍ͨ͠ɹɹɹɹɹɹˠɹ
52. ΑΓਂ͘࢖͏৔߹ • ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter • FluxύλʔϯΛ࢖͍͍ͨɹˠɹVuex • SSRΛ͍ͨ͠ɹɹɹɹɹɹˠɹVue 2.0
53. 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”) } });
54. Vuex https://github.com/vuejs/vuex
55. and…
56. Vue 2.0 2
57. େ෯ͳεϐʔυΞοϓ 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
58. αʔόʔαΠυϨϯμϦϯά   +
59. 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
60. ߴ͍ޓ׵ੑ શͯͷAPIͷ͏ͪɺ90%͕มߋͳ͠(Router͸มߋ͋Γ) http://vuejs.org/guide/migration.html 
61. Vue 2.0
62. Vue 2.0 is
63. Vue 2.0 is here!
64. ·ͱΊ • Vue.js͸؆ܿͰΘ͔Γ΍͍͢ • ॳֶऀ͔Βख़࿅ऀ·Ͱɺ෯޿͍Ϣʔβʔ͕ѻ ͍΍͍ͭ͘͢Γʹͳ͍ͬͯΔ • ΦϑΟγϟϧͷ֦ு͕๛෋Ͱɺجຊతʹେମ ͳΜͰ΋Ͱ͖Δ
65. Thank you!