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.5k
「とっつきやすい」フレームワーク 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
410
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
1
2.4k
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
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
640
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
290
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
970
CSC509 Lecture 06
javiergs
PRO
0
270
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
実践Claude Code:20の失敗から学ぶAIペアプログラミング
takedatakashi
18
8.7k
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
Introduce Hono CLI
yusukebe
6
3.1k
Google Opalで使える37のライブラリ
mickey_kubo
3
150
Go言語はstack overflowの夢を見るか?
logica0419
0
600
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
250
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
233
18k
Why Our Code Smells
bkeepers
PRO
340
57k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
KATA
mclloyd
PRO
32
15k
Documentation Writing (for coders)
carmenintech
75
5.1k
YesSQL, Process and Tooling at Scale
rocio
173
15k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Designing Experiences People Love
moore
142
24k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Balancing Empowerment & Direction
lara
5
700
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!