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.4k
「とっつきやすい」フレームワーク 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
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
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
230
CloudNativePGを布教したい
nnaka2992
0
110
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.2k
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
510
Open source software: how to live long and go far
gaelvaroquaux
0
660
負債になりにくいCSSをデザイナとつくるには?
fsubal
10
2.6k
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
250
Rails アプリ地図考 Flush Cut
makicamel
1
130
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
54
19k
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
AIプログラミング雑キャッチアップ
yuheinakasaka
17
4.2k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
182
22k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Being A Developer After 40
akosma
89
590k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Designing for humans not robots
tammielis
250
25k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
370
Thoughts on Productivity
jonyablonski
69
4.5k
It's Worth the Effort
3n
184
28k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
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!