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 #jsfes
Search
potato4d(Takuma HANATANI)
October 15, 2016
Programming
6
1.3k
「とっつきやすい」フレームワーク Vue.js #jsfes
秋のJavaScript 2016で登壇したスライドです
potato4d(Takuma HANATANI)
October 15, 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
Regular Expressions, REXML, Automata Learning
makenowjust
0
190
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
390
Rubyのobject_id
qnighy
6
1.3k
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
190
Web技術を駆使してユーザーの画面を「録画」する
yukukotani
13
6.4k
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
430
Wallet API, Verifier APIで実現するIDカード on iPhoneの世界
shitamori1272
1
360
Rustではじめる負荷試験
skanehira
5
1.2k
connect-go で面倒くささと戦う / 2024-08-27 #newmo_layerx_go
izumin5210
2
610
全力の跳躍を捉える計測アプリを作る
ogijun2018
1
1.2k
ドメイン駆動設計を実践するために必要なもの
bikisuke
3
300
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
380
Featured
See All Featured
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Facilitating Awesome Meetings
lara
49
5.9k
Speed Design
sergeychernyshev
19
410
A better future with KSS
kneath
235
17k
Raft: Consensus for Rubyists
vanstee
135
6.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
45
4.8k
Embracing the Ebb and Flow
colly
83
4.4k
A Philosophy of Restraint
colly
202
16k
For a Future-Friendly Web
brad_frost
174
9.3k
Transcript
ʮͱ͖͍ͬͭ͢ʯϑϨʔϜϫʔΫ Vue.js #jsfes 2016/10 @ TAKUMA Hanatani https://speakerdeck.com/potato4d/totutukiyasui-huremuwaku-vue-dot-js-number-jsfes
ಥવͰ͕͢ʂ
JSϑϨʔϜϫʔΫܦݧ͋Γ·͔͢ʁ
Vue.jsΛ৮ͬͨ͜ͱ͋Γ·͔͢ʁ
ࠓճͳͯ͋͘ΔఔେৎͰ͢ʂ
ࣗݾհ Ֆ୩ຏ a.k.a Potato4d • ݱࡏ18ࡀ(ߴߍ3) • ࠓେࡕ͔Β͖·ͨ͠ • Vueͱ͔Riotͱ͔ɺαʔόʔαΠυͱ͔σ
βΠϯͱ͔ • ौ୩ͰελʔτΞοϓͬͯ·͢ • ؔͷίϛϡχςΟӡӦͬͯ·͢
ࣗݾհ Ֆ୩ຏ 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 ଞਓ
ࣗ
ࣗ 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Λͪ • ॳ৺ऀ͔ΒϞμϯͳ։ൃʹ׳Εͨਓ·Ͱɺ୭ Ͱѻ͍͘͢ • ΦϑΟγϟϧͷ֦ுͰεέʔϦϯά͕༰қͳ • JavaScriptϑϨʔϜϫʔΫ
Vue.jsͷັྗ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ͑ͨAPI • ར༻ऀͷशख़ʹରԠ͍͢͠ॊೈ͞ • ΦϑΟγϟϧʹΑͬͯอূ͞Ε֦ͨுੑ
Vue.jsͷັྗ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ͑ͨAPI • ར༻ऀͷशख़ʹରԠ͍͢͠ॊೈ͞ • ΦϑΟγϟϧʹΑͬͯอূ͞Ε֦ͨுੑ
γϯϓϧ͔ͭڧྗͳAPI
Vue.jsͷAPI • ํόΠϯσΟϯά • ΧελϜίϯϙʔωϯτ • ΧελϜσΟϨΫςΟϒ • etc...
ͬ͘͟Γݴ͏ͱ • ಛघͳه๏ͱଂͷϑοΫʹΑͬͯJSͱHTML ؒͰσʔλΛڞ༗͢Δػೳ • HTMLλάΛࣗ࡞͢Δػೳ • HTMLλάʹϑοΫΛ͚ͭΒΕΔػೳ
Vue.jsͷAPI • ํόΠϯσΟϯά • ΧελϜίϯϙʔωϯτ • ΧελϜσΟϨΫςΟϒ • etc...
ΧελϜίϯϙʔωϯτ
• ͬ͘͟Γ͍͏ͱɺʮಠࣗͷHTMLλάΛఆٛͰ ͖Δػೳʯ • Ͱ͋Δͷͷɺʮ͜ͷίϯϙʔωϯτͷJS/ CSSʯͱ͍͏ܗͰ෦ʹίʔυΛด͡ࠐΊΔ ͜ͱ͕ՄೳͰɺ͜Ε͕ڧྗ ΧελϜίϯϙʔωϯτ
ΧελϜίϯϙʔωϯτ <btn-vuecolor> Click me! </btn-vuecolor> Source Code https://jp.vuejs.org/guide/component.html
ΧελϜίϯϙʔωϯτ <btn-vuecolor> Click me! </btn-vuecolor> Source Code https://jp.vuejs.org/guide/component.html
ΧελϜίϯϙʔωϯτ <btn-vuecolor> Click me! </btn-vuecolor> Source Code Click me! https://jp.vuejs.org/guide/component.html
ΧελϜίϯϙʔωϯτ <btn-vuecolor> Click me! </btn-vuecolor> Source Code Click me! https://jp.vuejs.org/guide/component.html
ΧελϜίϯϙʔωϯτ <btn-vuecolor> Click me! </btn-vuecolor> Source Code Click me! https://jp.vuejs.org/guide/component.html
ΧελϜίϯϙʔωϯτ • ʮίϯϙʔωϯτʯͱ͍͏୯ҐͰѻ͏ͨΊɺ ͦͷதͰࣗ༝ʹهड़Ͱ͖ɺ֎෦Ԛછ͕গͳ ͍ • ίϯϙʔωϯτࣗମΛಡ·ͳ͍߹ɺͦͷத ϒϥοΫϘοΫεͱͳΔͨΊɺUIͷઃܭ ͚ͩͰ͋Εग़དྷΔਓΛ༰қʹ૿ͤΔ
Vue.jsͷັྗ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ͑ͨAPI • ར༻ऀͷशख़ʹରԠ͍͢͠ॊೈ͞ • ΦϑΟγϟϧʹΑͬͯอূ͞Ε֦ͨுੑ
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
جຊ͕ͻͱͱ͓Γ͔Δ߹
جຊ͕ͻͱͱ͓Γ͔Δ߹ $ 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྆ํ͔ΒͷϏϧυՄೳ
Vue.jsͷັྗ • γϯϓϧͳ͕ΒओཁͲ͜ΖΛ͑ͨAPI • ར༻ऀͷशख़ʹରԠ͍͢͠ॊೈ͞ • ΦϑΟγϟϧʹΑͬͯอূ͞Ε֦ͨுੑ
ΦϑΟγϟϧʹΑͬͯ อূ͞Ε֦ͨுੑ
ग़ͯ͘Δཁ
͔ͬ͠Γ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”) } });
Vuex https://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.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
αʔόʔαΠυϨϯμϦϯά +
ߴ͍ޓੑ શͯͷ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
ಋೖ͘͢͠ɺ׆༂͍ͤ͢͞
ڠۀʹదͨ͠ϑϨʔϜϫʔΫͰ͢
Thank you!