秋のJavaScript 2016で登壇したスライドです
ʮͱ͖͍ͬͭ͢ʯϑϨʔϜϫʔΫVue.js#jsfes 2016/10 @ TAKUMA Hanatanihttps://speakerdeck.com/potato4d/totutukiyasui-huremuwaku-vue-dot-js-number-jsfes
View Slide
ಥવͰ͕͢ʂ
JSϑϨʔϜϫʔΫܦݧ͋Γ·͔͢ʁ
Vue.jsΛ৮ͬͨ͜ͱ͋Γ·͔͢ʁ
ࠓճͳͯ͋͘ΔఔେৎͰ͢ʂ
ࣗݾհՖ୩ຏ a.k.a Potato4d• ݱࡏ18ࡀ(ߴߍ3)• ࠓେࡕ͔Β͖·ͨ͠• Vueͱ͔Riotͱ͔ɺαʔόʔαΠυͱ͔σβΠϯͱ͔• ौ୩ͰελʔτΞοϓͬͯ·͢• ؔͷίϛϡχςΟӡӦͬͯ·͢
ࣗݾհhttp://www.slideshare.net/TakumaHanatani/jquery-56093566Ֆ୩ຏ a.k.a Potato4d
ࣗݾհؔϑϩϯτΤϯυUG• ؔݍͷϑϩϯτΤϯυίϛϡχςΟ• ݄࣍ͰJS-FWϓϩϨεͱ͔ͬͯ·͢• ʹ2ճ΄ͲେܕΠϕϯτͳΜ͔• TwitterͰ #frontkansai λάͰݕࡧʂ
ࠓճ͢͜ͱ• ϑϨʔϜϫʔΫͷબఆج४ʹ͍ͭͯ• Vue.jsͱʁ• Vue.jsͷັྗʹ͍ͭͯ• Vue 2.0ʹ͍ͭͯ(͢͜͠)
※ҙ
1.ϑϨʔϜϫʔΫͷબఆج४
ϑϨʔϜϫʔΫΛબͿج४ʁ
৽͍͠ઃܭύϥμΠϜʁ
εέʔϦϯάੑೳʁ
ύϑΥʔϚϯεʁ
No
શͯૉΒ͍͠ཁૉͰ͋Δͷͷ
ͦͦಋೖͰ͖ͳ͚ΕɺͦͷՁΛൃشͰ͖ͳ͍
ࠓճͷΩʔϫʔυ
ʮڠۀʯ
ࣗ
ࣗ x ଞਓ
ࣗ x ະདྷͷࣗ
ڠۀ͍͢͠Έ͕Vue.jsʹ͋Γ·͢
2.What’s Vue.js?
Vue.jsͱʁ
Vue.jsͱʁ• γϯϓϧͳ͕ΒओཁͲ͜ΖΛ͑ͨAPIΛͪ
Vue.jsͱʁ• γϯϓϧͳ͕ΒओཁͲ͜ΖΛ͑ͨAPIΛͪ• ॳ৺ऀ͔ΒϞμϯͳ։ൃʹ׳Εͨਓ·Ͱɺ୭Ͱѻ͍͘͢
Vue.jsͱʁ• γϯϓϧͳ͕ΒओཁͲ͜ΖΛ͑ͨAPIΛͪ• ॳ৺ऀ͔ΒϞμϯͳ։ൃʹ׳Εͨਓ·Ͱɺ୭Ͱѻ͍͘͢• ΦϑΟγϟϧͷ֦ுͰεέʔϦϯά͕༰қͳ
Vue.jsͱʁ• γϯϓϧͳ͕ΒओཁͲ͜ΖΛ͑ͨAPIΛͪ• ॳ৺ऀ͔ΒϞμϯͳ։ൃʹ׳Εͨਓ·Ͱɺ୭Ͱѻ͍͘͢• ΦϑΟγϟϧͷ֦ுͰεέʔϦϯά͕༰қͳ• JavaScriptϑϨʔϜϫʔΫ
3.Vue.jsͷັྗʹ͍ͭͯ
Vue.jsͷັྗ• γϯϓϧͳ͕ΒओཁͲ͜ΖΛ͑ͨAPI• ར༻ऀͷशख़ʹରԠ͍͢͠ॊೈ͞• ΦϑΟγϟϧʹΑͬͯอূ͞Ε֦ͨுੑ
γϯϓϧ͔ͭڧྗͳAPI
Vue.jsͷAPI• ํόΠϯσΟϯά• ΧελϜίϯϙʔωϯτ• ΧελϜσΟϨΫςΟϒ• etc...
ͬ͘͟Γݴ͏ͱ• ಛघͳه๏ͱଂͷϑοΫʹΑͬͯJSͱHTMLؒͰσʔλΛڞ༗͢Δػೳ• HTMLλάΛࣗ࡞͢Δػೳ• HTMLλάʹϑοΫΛ͚ͭΒΕΔػೳ
ΧελϜίϯϙʔωϯτ
• ͬ͘͟Γ͍͏ͱɺʮಠࣗͷHTMLλάΛఆٛͰ͖Δػೳʯ• Ͱ͋Δͷͷɺʮ͜ͷίϯϙʔωϯτͷJS/CSSʯͱ͍͏ܗͰ෦ʹίʔυΛด͡ࠐΊΔ͜ͱ͕ՄೳͰɺ͜Ε͕ڧྗΧελϜίϯϙʔωϯτ
ΧελϜίϯϙʔωϯτClick me!Source Codehttps://jp.vuejs.org/guide/component.html
ΧελϜίϯϙʔωϯτClick me!Source CodeClick me!https://jp.vuejs.org/guide/component.html
ΧελϜίϯϙʔωϯτ• ʮίϯϙʔωϯτʯͱ͍͏୯ҐͰѻ͏ͨΊɺͦͷதͰࣗ༝ʹهड़Ͱ͖ɺ֎෦Ԛછ͕গͳ͍• ίϯϙʔωϯτࣗମΛಡ·ͳ͍߹ɺͦͷதϒϥοΫϘοΫεͱͳΔͨΊɺUIͷઃܭ͚ͩͰ͋Εग़དྷΔਓΛ༰қʹ૿ͤΔ
Vue.js͕ͭॊೈ͞
͡Ίͯ͏ͱ͖
͡Ίͯ͏ͱ͖Hello, {{name}} <br/>.<br/>.<br/>.<br/>new Vue({<br/>el: “#app”,<br/>data: { <br/>name : “John”<br/>}<br/>});<br/>index.html<br/>
جຊ͕ͻͱͱ͓Γ͔Δ߹
جຊ͕ͻͱͱ͓Γ͔Δ߹$ 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ͱͯ͠ͷମࡋͷͬͨΞϓϦέʔγϣϯΛ࡞Γ͍ͨग़ͯ͘Δཁ
͔ͬ͠ΓSPAͱͯ͠ͷମࡋͷͬͨΞϓϦέʔγϣϯΛ࡞Γ͍ͨVue.jsʹ࠷దԽ͞ΕͨFlux࣮ͳ͍ͷʁग़ͯ͘Δཁ
͔ͬ͠Γ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
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
֦ுػೳ• ϧʔςΟϯάFlux࣮ɺSSRͳͲඞཁͳͷҰ௨Γἧ͍ͬͯΔ• ݱঢ়શͯVue.jsຊମͷཧԼͱͳ͍ͬͯΔͷͰɺͦͷ͋ͨΓ҆৺ϙΠϯτ
ັྗ·ͱΊ
Vue.jsͷັྗ·ͱΊ 1• γϯϓϧͳAPIઃܭͰɺ୭Ͱֶͼ͍͢• ͦ͜͢ΒϒϥοΫϘοΫεʹͰ͖Δ• scriptλά͔Β͡ΊΔ͜ͱग़དྷΔ• ૯ͯ͡ʮͱ͖͍ͬͭ͢ʯ
Vue.jsͷັྗ·ͱΊ 2• ͔ͬ͠Γ։ൃ͍ͨ͠߹Router͔ΒFluxύλʔϯͷ׆༻ɺSSR·ͰͳΜͰͰ͖Δ• ͦΕΒΛར༻͢Δ࣌ʹɺ(VuexΛআ͖)ݩͷઃܭ͔Βେ͖͘ҳ͢Δ͜ͱ͕ͳ͍• εςοϓΞοϓ͍͢͠
Vue.jsͷັྗ·ͱΊ 3։ൃϝϯόʔͷशख़͕·ͪ·ͪ
Vue.jsͷັྗ·ͱΊ 3͋ͱͰͲΜͳਓ͕ϝϯςφϯε͢Δ͔͔Βͳ͍
Vue.jsͷັྗ·ͱΊ 3ٕज़ਫ४ͷࠩҟΛٵऩ͍͢͠
Vue.jsͷັྗ·ͱΊ 3ʹ
Vue.jsͷັྗ·ͱΊ 3ಋೖ͘͢͠ɺ׆༂͍ͤ͢͞
Vue.jsͷັྗ·ͱΊ 3ͦΜͳϑϨʔϜϫʔΫ
Thank you!
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
αʔόʔαΠυϨϯμϦϯά +
ߴ͍ޓੑશͯͷAPIͷ͏ͪɺ90%͕มߋͳ͠(Routerมߋ͋Γ)http://vuejs.org/guide/migration.html
Vue 2.0
Vue 2.0 is
Vue 2.0 is here!
·ͱΊ• Vue.jsʮͱ͖͍ͬͭ͢ʯFWͰ͋Δ• ͦͷಛɺ࡞ۀऀͷशख़ͷࠩҟΛٵऩ͘͢͠ɺʮڠۀʯͱ͍͏Ͱඇৗʹ༏ल• ͦͷ্ͰɺެࣜϓϥάΠϯʹΑΔόϦόϦ։ൃOK• ͭ·Γ……
Vue.js
ಋೖ͘͢͠ɺ׆༂͍ͤ͢͞
ڠۀʹదͨ͠ϑϨʔϜϫʔΫͰ͢
potato4d
leichteckig
utgwkk
javiergs
kotomin_m
dicoding
mski_iksm
hollycummins
tomokusaba
77web
meihei3
terukinakano
shgishzk
revolveconf
trallard
marcelosomers
panda_program
bermonpainter
jasonvnalue
afnizarnur
orderedlist
trishagee
carmenintech
jponch
smashingmag