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
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
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
650
Porting a visionOS App to Android XR
akkeylab
0
460
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
Goで作る、開発・CI環境
sin392
0
230
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
NPOでのDevinの活用
codeforeveryone
0
840
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
220
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
Featured
See All Featured
Faster Mobile Websites
deanohume
307
31k
Building an army of robots
kneath
306
45k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Producing Creativity
orderedlist
PRO
346
40k
Gamification - CAS2011
davidbonilla
81
5.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
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!