Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.jsとその未来 2.0 #wbkyoto
Search
potato4d(Takuma HANATANI)
October 09, 2016
Programming
3
1.3k
Vue.jsとその未来 2.0 #wbkyoto
#wbkyoto x #ng_kyoto 共催 WordBench京都10月 JS-FWでのスライドです。
potato4d(Takuma HANATANI)
October 09, 2016
Tweet
Share
More Decks by potato4d(Takuma HANATANI)
See All by potato4d(Takuma HANATANI)
どうせキレイに書けない処理は逆にAIに書いてもらうほうが良い説 / #kyotojs 22
potato4d
3
270
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
1.9k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.7k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.1k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.5k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
3.8k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
25k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.3k
Other Decks in Programming
See All in Programming
rails_girls_is_my_gate_to_join_the_ruby_commuinty
maimux2x
0
190
Jakarta EE meets AI
ivargrimstad
0
350
null or undefined
susisu
22
6.2k
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.3k
Some more adventure of Happy Eyeballs
coe401_
2
180
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
410
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
540
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
130
dotfiles について話したい #湘なんか
stefafafan
2
290
実践!難読化ガイド
mitchan
0
120
オートマトン学習しろ / Do automata learning
makenowjust
3
120
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
786
250k
Producing Creativity
orderedlist
PRO
340
39k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
How to train your dragon (web standard)
notwaldorf
85
5.6k
The Cult of Friendly URLs
andyhume
76
6k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
Building Applications with DynamoDB
mza
89
6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
27
8.9k
What's in a price? How to price your products and services
michaelherold
242
11k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
103
48k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Transcript
Vue.jsͱͦͷະདྷ 2.0 #wbkyoto 2016/10 @ TAKUMA Hanatani
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. γϯϓϧͰܰྔͳAPI 2. शख़ʹԠͯ͡ߏΛมԽͰ͖Δॊೈ͞ 3. தنͰར༻͍֦͢͠ு܈
1. γϯϓϧͰܰྔͳAPI
Vue.jsͷAPI • ํόΠϯσΟϯά • ΧελϜίϯϙʔωϯτ • ΧελϜσΟϨΫςΟϒ • etc...
ͬ͘͟Γݴ͏ͱ • Mustacheه๏ଁͷϑοΫʹΑͬͯJSͱ HTMLؒͰσʔλΛڞ༗͢Δػೳ • HTMLλάΛࣗ࡞͢Δػೳ • HTMLλάʹϑοΫΛ͚ͭΒΕΔػೳ
Vue.jsͷAPI • ํόΠϯσΟϯά • ΧελϜίϯϙʔωϯτ • ΧελϜσΟϨΫςΟϒ • etc...
ํόΠϯσΟϯά
ํόΠϯσΟϯά • Mustacheه๏({{hoge}})Λ༻͍Δ͜ͱͰJS͔ ΒHTMLσʔλΛྲྀ͠ࠐΉ͜ͱ͕ग़དྷΔ • v-modelΛར༻͢Δ͜ͱͰɺϑΥʔϜͷೖྗ ͱJS্ͷมͷͷยํ͕มΘΔͱ͖ɺ͏ ยํࣗಈͰมΘΔΑ͏ʹͳΔ
ํόΠϯσΟϯά <div id=“demo”> <p>{{message}}</p> <input v-model=“message”> </div> HTML Code https://jp.vuejs.org
ํόΠϯσΟϯά var demo = new Vue({ el: “#demo” data:{ message:
“Hello Vue.js!” } }); JavaScript Code https://jp.vuejs.org
ํόΠϯσΟϯά Result https://jp.vuejs.org
ํόΠϯσΟϯά Result https://jp.vuejs.org
ΧελϜίϯϙʔωϯτ
ΧελϜίϯϙʔωϯτ • ͬ͘͟Γ͍͏ͱɺʮಠࣗͷHTMLλάΛఆٛͰ ͖Δػೳʯ • Ͱ͋Δ͕ɺJSͷൣғͱͳΔ߹্ɺείʔϓ Λด͡ࠐΊΒΕΔ༷ʹͳΔͳͲͷར͕͋Δ • Vue.jsΛ༻͢Δ߹ɺίϯϙʔωϯτ͕୯ Ґͷج४ͱͳΔ
ΧελϜίϯϙʔωϯτ <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
ΧελϜίϯϙʔωϯτ Result
ΧελϜίϯϙʔωϯτ <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
ΧελϜίϯϙʔωϯτ Result
͜Ε·Ͱͷίʔυ
͜Ε·Ͱͷίʔυ (function(){ var data = “hoge”; $(“input”).val(data); $(“p”).val(data); $(“input”).on(“keyup”, function(){
$(“p”).text($(this).val()); }); }()); jQuery Code
ॻ͔ͳ͍͍ͯ͘
2. Vue.js͕ͭॊೈ͞
͡Ίͯ͏ͱ͖
͡Ίͯ͏ͱ͖ <div id=“app”> Hello, {{name}} </div> <script src=“path/to/vue.min.js”></script> <script> .
. . new Vue({ el: “#app”, data: { name : “John” } }); index.html
͋Δఔ׳Ε͖ͯͨͱ͖
͋Δఔ׳Ε͖ͯͨͱ͖ <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
͋Δఔ׳Ε͖ͯͨͱ͖ var ComponentA = Vue.extend({ props: [“name”], template: “<p>Hello, {{name}}</p>”
}); 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 terminal index.js
جຊ͕ͻͱͱ͓Γ͔Δ߹ <template> <p>Hello, {{name}}!</p> </template> <script> module.exports = { props:
[“name”] }; </script> 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”) } });
Vuex https://github.com/vuejs/vuex
and…
Vue 2.0 2
େ෯ͳεϐʔυΞοϓ 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
αʔόʔαΠυϨϯμϦϯά +
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!