#wbkyoto x #ng_kyoto 共催 WordBench京都10月 JS-FWでのスライドです。
Vue.jsͱͦͷະདྷ 2.0#wbkyoto 2016/10 @ TAKUMA Hanatani
View Slide
https://speakerdeck.com/potato4d
Ұ൪ࠨ্
ಥવͰ͕͢ʂ
JSϑϨʔϜϫʔΫܦݧ͋Γ·͔͢ʁ
Vue.jsΛ৮ͬͨ͜ͱ͋Γ·͔͢ʁ
SPA։ൃΛͨ͜͠ͱ͋Γ·͔͢ʁ
ࠓճͳͯ͋͘ΔఔେৎͰ͢ʂʢલ·Ͱجຊతͳઆ໌Λ͠·͢ʣ
ࣗݾհ• Ֆ୩ຏ a.k.a. Potato4d• य़͔ΒࣾձਓʹͳΓͦ͏• JSϝΠϯͰɺσβΠϯཪͬͨΓ• ࠓճWordPressͷ෧ҹͯ͠·͢
Vue 2.0ͷυΩϡϝϯτͷ༁͡Ί·ͨ͠
ࠓճ͢͜ͱ• Vue.jsͷ͍͍ͱ͜Ζ• Vue.jsʹؚ·Ε࠷ۙͷϑϨʔϜϫʔΫͰසൟʹར༻͞ΕΔػೳʹ͍ͭͯ• Vue 2.0ʹ͍ͭͯ
What’s Vue.js?
Vue.jsͱԿ͔ʁ• JavaScriptͷϑϨʔϜϫʔΫͷͻͱͭ• γϯϓϧͰܰྔͰ͋Δ͜ͱ͕Ϧ• ϋʔυϧ͕͘ɺ༷ʑͳʹಋೖ͍͢͠• ࠷ۙ2.0͕Ͱͯɺ৭ʑਐԽͨ͠
Vue.jsͷັྗ1. γϯϓϧͰܰྔͳAPI2. शख़ʹԠͯ͡ߏΛมԽͰ͖Δॊೈ͞3. தنͰར༻͍֦͢͠ு܈
1. γϯϓϧͰܰྔͳAPI
Vue.jsͷAPI• ํόΠϯσΟϯά• ΧελϜίϯϙʔωϯτ• ΧελϜσΟϨΫςΟϒ• etc...
ͬ͘͟Γݴ͏ͱ• Mustacheه๏ଁͷϑοΫʹΑͬͯJSͱHTMLؒͰσʔλΛڞ༗͢Δػೳ• HTMLλάΛࣗ࡞͢Δػೳ• HTMLλάʹϑοΫΛ͚ͭΒΕΔػೳ
ํόΠϯσΟϯά
ํόΠϯσΟϯά• Mustacheه๏({{hoge}})Λ༻͍Δ͜ͱͰJS͔ΒHTMLσʔλΛྲྀ͠ࠐΉ͜ͱ͕ग़དྷΔ• v-modelΛར༻͢Δ͜ͱͰɺϑΥʔϜͷೖྗͱJS্ͷมͷͷยํ͕มΘΔͱ͖ɺ͏ยํࣗಈͰมΘΔΑ͏ʹͳΔ
ํόΠϯσΟϯά{{message}}HTML Codehttps://jp.vuejs.org
ํόΠϯσΟϯάvar demo = new Vue({el: “#demo”data:{message: “Hello Vue.js!”}});JavaScript Codehttps://jp.vuejs.org
ํόΠϯσΟϯάResulthttps://jp.vuejs.org
ΧελϜίϯϙʔωϯτ
ΧελϜίϯϙʔωϯτ• ͬ͘͟Γ͍͏ͱɺʮಠࣗͷHTMLλάΛఆٛͰ͖Δػೳʯ• Ͱ͋Δ͕ɺJSͷൣғͱͳΔ߹্ɺείʔϓΛด͡ࠐΊΒΕΔ༷ʹͳΔͳͲͷར͕͋Δ• Vue.jsΛ༻͢Δ߹ɺίϯϙʔωϯτ͕୯Ґͷج४ͱͳΔ
ΧελϜίϯϙʔωϯτ<br/>var Greeting = new Vue.extend({<br/>props: “name”,<br/>template: “<p>Hello, {{name}}.</p>”<br/>);<br/>Vue.component(“greeting”, Greeting);<br/>new Vue({el: “#app”});<br/>index.html
ΧελϜίϯϙʔωϯτResult
͜Ε·Ͱͷίʔυ
͜Ε·Ͱͷίʔυ(function(){var data = “hoge”;$(“input”).val(data);$(“p”).val(data);$(“input”).on(“keyup”, function(){$(“p”).text($(this).val());});}());jQuery Code
ॻ͔ͳ͍͍ͯ͘
2. Vue.js͕ͭॊೈ͞
͡Ίͯ͏ͱ͖
͡Ίͯ͏ͱ͖Hello, {{name}} <br/>.<br/>.<br/>.<br/>new Vue({<br/>el: “#app”,<br/>data: { <br/>name : “John”<br/>}<br/>});<br/>index.html<br/>
͋Δఔ׳Ε͖ͯͨͱ͖
͋Δఔ׳Ε͖ͯͨͱ͖ index.html
͋Δఔ׳Ε͖ͯͨͱ͖var ComponentA = Vue.extend({props: [“name”],template: “Hello, {{name}}”});Vue.extend(“comp-a”, ComponentA);comp-a.js
͋Δఔ׳Ε͖ͯͨͱ͖new Vue({el: “#app”});main.js
جຊ͕ͻͱͱ͓Γ͔Δ߹
جຊ͕ͻͱͱ͓Γ͔Δ߹$ 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 terminalindex.js
جຊ͕ͻͱͱ͓Γ͔Δ߹Hello, {{name}}!<br/>module.exports = {<br/>props: [“name”]<br/>};<br/>comp-a.js
Vue.jsͷར༻ํ๏• scriptλά͔Βͷར༻OK• ͪΖΜɺnpm͔ΒͷಋೖOK• webpack, browserify྆ํ͔ΒͷϏϧυՄೳ
தنͰར༻͍֦͢͠ு܈
͔ͬ͠ΓSPAͱͯ͠ͷମࡋͷͬͨΞϓϦέʔγϣϯΛ࡞Γ͍ͨVue.jsʹ࠷దԽ͞ΕͨFlux࣮ͳ͍ͷʁग़ͯ͘ΔཁJavaScriptͷϑϨʔϜϫʔΫ͏ͱSEOͷ໘͕ͳ͊……
ΑΓਂ͘͏߹• ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹ
ΑΓਂ͘͏߹• ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter
ΑΓਂ͘͏߹• ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter• FluxύλʔϯΛ͍͍ͨɹˠɹ
ΑΓਂ͘͏߹• ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter• FluxύλʔϯΛ͍͍ͨɹˠɹVuex
ΑΓਂ͘͏߹• ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter• FluxύλʔϯΛ͍͍ͨɹˠɹVuex• SSRΛ͍ͨ͠ɹɹɹɹɹɹˠɹ
ΑΓਂ͘͏߹• ʮͪΌΜͱʯSPA͍ͨ͠ɹˠɹVueRouter• FluxύλʔϯΛ͍͍ͨɹˠɹVuex• SSRΛ͍ͨ͠ɹɹɹɹɹɹˠɹVue 2.0
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”)}});
Vuexhttps://github.com/vuejs/vuex
and…
Vue 2.02
େ෯ͳεϐʔυΞοϓ1.0ͱൺֱͯ͠1.7ഒͷվળVanilla JS Vue 2.0 Vue 1.0https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8#.xqevlvkak1.0x1.37x2.16x
αʔόʔαΠυϨϯμϦϯά +
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
ߴ͍ޓੑશͯͷAPIͷ͏ͪɺ90%͕มߋͳ͠(Routerมߋ͋Γ)http://vuejs.org/guide/migration.html
Vue 2.0
Vue 2.0 is
Vue 2.0 is here!
·ͱΊ• Vue.js؆ܿͰΘ͔Γ͍͢• ॳֶऀ͔Βख़࿅ऀ·Ͱɺ෯͍Ϣʔβʔ͕ѻ͍͍ͭ͘͢Γʹͳ͍ͬͯΔ• ΦϑΟγϟϧͷ֦ு͕๛ͰɺجຊతʹେମͳΜͰͰ͖Δ
Thank you!
potato4d
akatsuki174
uhooi
okashoi
10xinc
koluku
ogijun2018
mackee
hicka04
aanrii
coa00
usamik26
speed1313
philhawksworth
jonyablonski
paigeccino
productmarketing
danielanewman
paulrobertlloyd
chrislema
brianwarren
afnizarnur
yeseniaperezcruz
aarron
myddelton