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
400
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
6.9k
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.1k
私たちはなぜ SPA で開発するのか / Why you choose SPA
potato4d
39
27k
Amplify Console 誕生以来本番運用しつづけてわかったこと #awswakaran_tokyo
potato4d
6
3.5k
Other Decks in Programming
See All in Programming
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
880
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
150
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.4k
Porting a visionOS App to Android XR
akkeylab
0
640
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6.5k
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
130
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
320
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
410
CDK引数設計道場100本ノック
badmintoncryer
1
240
フロントエンドのパフォーマンスチューニング
koukimiura
4
1.5k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Navigating Team Friction
lara
187
15k
Rails Girls Zürich Keynote
gr2m
95
14k
Speed Design
sergeychernyshev
32
1k
Writing Fast Ruby
sferik
628
62k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Designing for humans not robots
tammielis
253
25k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Building Adaptive Systems
keathley
43
2.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
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!