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
350
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.2k
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
potato4d
9
4.8k
終わりゆく Vue 2.x 時代の状態設計のアンサー - Vue 3 の Provider への期待 / The Last Architecture of the Vue 2.x
potato4d
25
6.9k
Web Worker を使ってブラウザ上でポケモンの画像を解析したい! / Pokemon recognition from screenshots in browser using web worker
potato4d
0
1.2k
Firebase & Google Cloud によるサーバーレス帳票管理 #FJUG / Serverless Architecture in Candy
potato4d
8
3.6k
NestJS meetup Tokyo Opening Talk / What is NestJS? #nestjs_meetup
potato4d
11
4k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
26k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.4k
Other Decks in Programming
See All in Programming
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
2
290
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
170
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
160
GoとPHPのインターフェイスの違い
shimabox
2
190
sappoRo.R #12 初心者セッション
kosugitti
0
260
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
170
定理証明プラットフォーム lapisla.net
abap34
1
1.8k
CI改善もDatadogとともに
taumu
0
120
color-scheme: light dark; を完全に理解する
uhyo
5
390
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
170
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
120
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
130
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
A Tale of Four Properties
chriscoyier
158
23k
Adopting Sorbet at Scale
ufuk
74
9.2k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Side Projects
sachag
452
42k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
How GitHub (no longer) Works
holman
314
140k
For a Future-Friendly Web
brad_frost
176
9.5k
Scaling GitHub
holman
459
140k
How STYLIGHT went responsive
nonsquared
98
5.4k
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!