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.4k
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
410
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.3k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.9k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
7k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.3k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.7k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4.2k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.6k
Other Decks in Programming
See All in Programming
Swift Updates - Learn Languages 2025
koher
2
480
testingを眺める
matumoto
1
140
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
180
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
1から理解するWeb Push
dora1998
7
1.9k
RDoc meets YARD
okuramasafumi
4
170
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
330
Cache Me If You Can
ryunen344
2
1.4k
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
220
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
A Tale of Four Properties
chriscoyier
160
23k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Speed Design
sergeychernyshev
32
1.1k
Statistics for Hackers
jakevdp
799
220k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Docker and Python
trallard
45
3.6k
Navigating Team Friction
lara
189
15k
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!