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 3 に向けた Vue.js 入門
Search
kazupon
December 06, 2019
Programming
19
6.8k
Vue.js 3 に向けた Vue.js 入門
kazupon
December 06, 2019
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
480
Vapor Revolution
kazupon
3
3.5k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.7k
Vue & Vite Rustify
kazupon
4
2.3k
Vue.jsエコシステム動向2023
kazupon
17
7.8k
Reactivity Transform
kazupon
1
1.4k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.6k
Other Decks in Programming
See All in Programming
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
560
Deep Dive into ~/.claude/projects
hiragram
10
2.2k
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
670
エラーって何種類あるの?
kajitack
5
330
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
650
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
150
RailsGirls IZUMO スポンサーLT
16bitidol
0
120
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
150
GraphRAGの仕組みまるわかり
tosuri13
8
510
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
1
300
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
330
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Building an army of robots
kneath
306
45k
RailsConf 2023
tenderlove
30
1.1k
How STYLIGHT went responsive
nonsquared
100
5.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Being A Developer After 40
akosma
90
590k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
KATA
mclloyd
30
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Transcript
Vue.js 3 ʹ͚ͨ Vue.js ೖ Microsoft Ignite The Tour 2019.12.06
@kazupon
ࣗݾհ
PLAID, inc. Vue.js Core Team Member Vue.js Japan User Group
Organizer Vue I18n Author WebAssembly Love ❤ @kazu_pon kazupon kazupon
None
͡Ίʹ
201910݄
Vue.js 3 pre-alpha ެ։ʂ https://twitter.com/vuejs/status/1180159603507638274
vuejs/vue-next Ͱެ։ https://github.com/vuejs/vue-next
2020Q1ʹ͚ͯ։ൃத • RFCͰ༷ΛݻΊͭͭ։ൃ https://github.com/vuejs/rfcs
Vue.js 3 Ͱͷ৽ػೳ • ίϯϙδγϣϯ API • ϑϥάϝϯτ / ϙʔλϧ
• TypeScript ϑϧαϙʔτ • … ͳͲͳͲ https://github.com/vuejs/rfcs
v2 → v3
͍Ζ͍Ζͱ ػೳ͕૿͑ͯ
ഁյతมߋ ͋Δͱ
None
͜ͷ࣌ظʹೖ ͢Δͱେมͦ͏…
None
ͦ͏ ݟ͑ͦ͏Ͱ͕͢
৺͠ͳͯ͘ େৎͰ͢ʂ
ओཁػೳ
΄΅ͦͷ··Ͱ
ಈ͖·͢ʂ
ͱ͍͏Θ͚Ͱ
ࠓ͢͜ͱ
• Vue.js ͷಛͱઃܭࢥ • Vue.js 3 Ͱ௨༻͢Δߏจɾػೳͷհ • ࠷৽҆ఆόʔδϣϯ v2.6.10
Ͱઆ໌ • Vue.js 3 ͷۄػೳ ίϯϙδγϣϯAPIʹ ͍ͭͯܰ͘հ ࠓ͢͜ͱ
Vue.js ʹ͍ͭͯ
Vue.js • ࡞ऀ: Evan You • viewͷϥΠϒϥϦ • 2013ݸਓϓϩ δΣΫτͱͯ͠։࢝
• 20142݄ʹv0.8ެ ࣜϦϦʔε
2015.04.20 Laravel Ͱ࠾༻ܾఆ 2015.10.26 v1.0 Evangelion 2016.10.01 v2.0 Ghost in
the Shell 2019.02.05 v2.6 Macross 2019.12.06 ݱࡏ ࠷৽: v2.6.10 ྺ࢙
• ߴͳٕज़εΩϧ͕ແͯ͑͘Δ • ίϯϙʔωϯτࢦʹΑΔUIߏԽ • ϦΞΫςΟϒͳσʔλόΠϯσΟϯά ಛ
• HTML / JavaScript / CSS ͷجຊ͕ࣝ͋ Ε͙͢ʹ͑Δ • index.html
ͷ script λά͔Β͏͜ͱ͕Ͱ ͖Δ ߴͳٕज़εΩϧ͕ͳͯ͑͘Δ
• ίϯϙʔωϯτͱ͍͏෦ΛΈཱͯͯɺ UI ΛΈͨͯΔ ίϯϙʔωϯτࢦʹΑΔUIߏԽ
• DOM ্ͷσʔλͱJavaScript͕࣋ͭσʔλ ؒͰόΠϯυͯ͠ಉظΛऔΔ͜ͱ͕Ͱ͖Δ ϦΞΫςΟϒͳσʔλόΠϯσΟϯά
ϑϨʔϜϫʔΫ ͱͯ͠ͷ ઃܭࢥ
ϓϩάϨογϒ ϑϨʔϜϫʔΫ
VS ϑϨʔϜϫʔΫͷෳࡶ͞ ΞϓϦέʔγϣϯͷෳࡶ͞
ෆेͳέʔε
None
ෆेͳέʔε ͷ ൺᄻ
None
Φʔόʔͳέʔε
None
Φʔόʔͳέʔε ͷ ൺᄻ
None
ϑϨʔϜϫʔΫͷෳࡶੑ ΞϓϦέʔγϣϯͷෳࡶੑʹରͯ͠ ेͳίετΛPayͰ͖ΔͷͰͳ͚ΕͳΒͳ͍
͔͠͠ͳ͕Β ࣮ࡍͷݱ…
Ϗδωεཁ݅ ઈ͑ͣม͢Δ
ϑϨʔϜϫʔΫ ͜ΕʹରԠͰ͖ͳ͚Ε ͳΒͳ͍
͜Μͳײ͡Ͱελʔτͯ͠ viewίΞ
ن͕େ͖͘ͳ͖ͬͯͨͱ͖ viewίΞ ʴ ϧʔςΟϯάɺঢ়ଶཧ ͕ඞཁʂ
αϙʔτͰ͖Δ ϥΠϒϥϦͳ͚Ε…
ϑϩϯτΤϯυ։ൃ ਏ͍…
ϓϩάϨογϒ ϑϨʔϜϫʔΫ
http://ejje.weblio.jp/content/progressive
ΞϓϦέʔγϣϯͷ ஈ֊తͳมԽཁٻʹԠͯ͡ ղܾͰ͖Δํ๏Λఏڙ͢Δ
Vue.jsຊମ Vue Router Vuex Vue CLI
Vue.jsͰ WebΞϓϦΛ ࡞ͬͯΈΔ
• Vue ΠϯελϯεΛ࡞ • UIදࣔʹඞཁͳσʔλ(ঢ়ଶ)Λఆٛ • ςϯϓϨʔτͰ UI Λએݴ •
Vue ΠϯελϯεΛDOM ʹϚϯτ WebΞϓϦΛ࡞ΔྲྀΕ
ϝοηʔδΛ දࣔͤ͞ΔΞϓϦ
• Vue ίϯετϥΫλ Ͱ new ͢Δ VueΠϯελϯεΛ࡞
• data ΦϓγϣϯʹσʔλΛఆٛ UIදࣔʹඞཁͳσʔλΛఆٛ
• template Φϓγϣϯʹ HTML Λهड़ ςϯϓϨʔτʹUIΛએݴ
• $mount ϝιουͰର DOM ʹϚϯτ VueΠϯελϯεΛDOMʹϚϯτ
࣮ߦ͢Δͱ…
͍͔͕Ͱͨ͠Ͱ ͠ΐ͏͔ʁ
ςϯϓϨʔτ ߏจ
• ΠϯλʔϙϨʔγϣϯ (Interpolation) • σΟϨΫςΟϒ (Directive) ςϯϓϨʔτߏจ
ΠϯλʔϙϨʔγϣϯ ʹ͍ͭͯ
• ϓϩάϥϜʹ͓͍ͯɺ͋ΔมͱҰॹʹ ߏ͞Εͨσʔλʹ͓͍ͯɺίϯύΠϧ ࣌ɺ·࣮ͨߦ࣌ʹม͕ల։͞ΕΔ͜ͱ • ྫ: JavaScript ςϯϓϨʔτϦςϥϧ ΠϯλʔϙϨʔγϣϯͱʁ
• JavaScript Ҏ֎ʹςϯϓϨʔτଘࡏ͢Δ • ςϯϓϨʔτͰҎԼΛαϙʔτ • ςΩετ • HTMLͷଐੑ •
JavaScript ͷࣜ Vue.jsʹ͓͚ΔΠϯλʔϙϨʔγϣϯͱʁ
σΟϨΫςΟϒ ʹ͍ͭͯ
• ϓϩάϥϛϯάݴޠɺιϑτΣΞͷจ຺ ʹ͓͍ͯɺ໋ྩίϚϯυΛ࣮ߦ͢Δͨ Ίʹࢦࣔߏจ • ྫ: nginx (Webαʔό)ͷઃఆϑΝΠϧ σΟϨΫςΟϒͱʁ
• ςϯϓϨʔτʹ͓͍ͯɺWebඪ४༷ʹͳ͍ಛผͳ໋ྩΛ༩ ͑ΔͨΊͷߏจ • v-if / v-show: ཁૉͷදࣔɾඇදࣔͷͨΊͷ݅ఆ • v-for:
ཁૉʹର͢Δ܁Γฦ͠ॲཧ • v-bind: ཁૉʹର͢ΔσʔλͷόΠϯυ(ଋറ) • v-on: ཁૉͷΠϕϯτϋϯυϦϯά • v-model: ೖྗडՄೳͳཁૉͱσʔλؒํʹόΠϯυ Vue.jsʹ͓͚ΔσΟϨΫςΟϒͱʁ
• v-if • v-show v-if / v-show
v-for
v-bind
v-on
v-model
• v-slot • v-text • v-once • v-pre • v-cloak
ͦͷଞͷσΟϨΫςΟϒ
ࢉग़ϓϩύςΟ
• Ұൠతʹɺఆٛ͞Εͨσʔλ(ঢ়ଶ)ͷ ΛݩʹɺͦΕΒσʔλͷࢉग़͞Εͨσʔλ ͷ͜ͱ ྫ: JavaScript ͷ getter ࢉग़ϓϩύςΟͱʁ
• ͨͩ୯ʹܭࢉ ͯ͠ฦ͢σʔ λ͚ͩͰͳ ͘ɺσʔλͷ ͷมߋΛಈ తʹݕͯ͠ දࣔʹөͰ ͖ΔΑ͏ʹ͠ ͍ͯΔ
Vue.jsʹ͓͚Δࢉग़ϓϩύςΟͱʁ
• ςϯϓϨʔτʹΠϯλʔϙϨʔγϣϯ͕ෳ ࡶʹͳ͖ͬͯͨͱ͖ ࢉग़ϓϩύςΟͷϢʔεέʔε ࢉग़ϓϩύςΟ ෦ͰΩϟογϡ͢ΔͷͰ ύϑΥʔϚϯε্͢Δʂ
Υονϟ
• Vue.jsͰఆٛ͞ΕͨσʔλΛࢹͯ͠ɺม ߋ௨Λఏڙ͢Δ Υονϟͱʁ
• ࢉग़ϓϩύ ςΟɺ Υονϟ ͰػೳΛఏ ڙ͍ͯ͠Δ Υονϟͱʁ
ΥονϟΛͬͨίʔυྫ
• ࢉग़ϓϩύςΟͷܭࢉෛՙ͕ߴ͍ • ྫ: ڊେͳσʔλ͔Βࢉग़͢Δ͕ຖճҟͳͬ ͯ͠·͏ • ࢉग़ϓϩύςΟͰͰ͖ͳ͍͜ͱΛΓ͍ͨͱ͖ • ྫ:
αʔό͔Βඇಉظʹऔಘͨ͠σʔλΛݩʹ ࢉग़͍͍ͯͨ͠ͱ͖ ΥονϟͷϢʔεέʔε
ίϯϙʔωϯτ
• ҰൠతͳιϑτΣΞͷ จ຺ʹ͓͍ͯɺϓϩά ϥϜΛ࠶ར༻ʹ͢ΔͨΊ Ϟδϡʔϧͱͯ͠෦Խ ͞Εͨͷ • ϒϩοΫͷΑ͏ʹίϯ ϙʔωϯτΛΈཱͯͯ ߏ͍ͯ͘͠
ίϯϙʔωϯτͱʁ
• UI Λػೳใߏ ʹैͬͯϞδϡʔ ϧԽͨ͠ͷ • ίϯϙʔωϯτΛ Έ߹ΘΔ͜ͱͰ ࣗવͱπϦʔ্ʹ ߏ͞ΕΔ
Vue.jsʹ͓͚Δίϯϙʔωϯτͱʁ
Vue.jsಠࣗͷίϯϙʔωϯτ֓೦ • ୯ҰϑΝΠϧί ϯϙʔωϯτ (Single-file components) • Vue ίϯϙʔω
ϯτͱݺͿ͜ ͱ <HTML> {CSS} ({JS})
• ଞͷίϯϙʔωϯτͱΓऔΓ͢ΔͨΊʹ ΠϯλʔϑΣʔεΛఏڙ͢Δ • ϓϩύςΟ (props) • Πϕϯτ (emits) •
εϩοτ (slots) ίϯϙʔωϯτI/FΛఏڙ͢Δ
ϓϩύςΟ(Props) • ଞͷίϯϙʔωϯτ͔ΒσʔλΛड͚औΔ ͨΊͷΠϯλʔϑΣʔε Child ίϯϙʔωϯτ Parent ίϯϙʔωϯτ Props ܦ༝Ͱ͢
Πϕϯτ (emits) • ίϯϙʔωϯτΛ͏ଆ()ʹσʔλΛ ͨ͢ΊͷΠϯλʔϑΣʔε Child ίϯϙʔωϯτ Parent ίϯϙʔωϯτ $emitͰ
Πϕϯτ Λൃߦ
εϩοτ (slots) • ίϯϙʔωϯτʹ͏ଆ()͔Βίϯςϯ πΛࠩ͠ࠐ·ͤΔͨΊͷΠϯλʔϑΣʔε Child ίϯϙʔωϯτ Parent ίϯϙʔωϯτ <slot>ʹ
ࠩ͠ࠐ·ΕΔ
ίϯϙʔωϯτؒσʔλͷΓऔΓͷϧʔϧ • σʔλ͕ྲྀΕΔํΛنΛઃ͚Δ͜ͱͰ ෳࡶʹͳΔͷΛආ͚Δ
ଞʹ৭ʑ ͋Γ·͕͢
͜ͷล͓͑ͯ͞ ͓͍͍ͯͩ͘͞ʂ
Vue.js 3 ίϯϙδγϣϯ API
ίϯϙδγϣϯAPIͱʁ • ؔϕʔεͰఏڙ͞ΕΔ API • ίϯϙʔωϯτΛϩδοΫΛࣗ༝ߴ͘ Έ߹Θ࣮ͤ͢Δ͜ͱ͕Ͱ͖Δ
ੜ·Εͨഎܠ • Vue.js Ͱେن։ൃͰ͖Δ͕͕͋ͬͨ • ίϯϙʔωϯτ͕େ͖͘ͳΔͱίʔυ͕ಡ Έʹ͘͘ͳΔ • ίʔυ࠶ར༻ͷύλʔϯԽ͠ʹ͍͘ •
TypeScript ʹΑΔܕͷαϙʔτ͕ड͚ʹ͘ ͍
ίϯϙδγϣϯAPIΛ͏ͱ… • ίϯϙʔωϯτ ͷϩδοΫ͕៉ ྷʹͳΓɺ Λղܾ͢Δʂ
ྫ: ΧϯτΞοϓ
ৄࡉ͕ؾʹͳΔํRFCΛ͝ཡ͍ͩ͘͞ʂ • υΩϡϝϯτ https://vue-composition-api-rfc.netlify.com/
Vue.js v2 Ͱ͓ࢼ͠Ͱ͑Δ • vuejs/composition-api https://github.com/vuejs/composition-api
ऴΘΓʹ
• ͖ͨΔ Vue.js 3 ʹ͚ͯ • Vue.js ͷಛͱઃܭࢥ • Vue.js
3 Ͱ௨༻͢Δߏจɾػೳ • Vue.js 3 ͷۄػೳ ίϯϙδγϣϯAPI ࠓͨ͜͠ͱ
• ΦϯϥΠϯ: Vue.js ެࣜυΩϡϝϯτ https://jp.vuejs.org • ॻ੶: Vue.js ೖ (ٕज़ධࣾ)
͞Βʹ Vue.js ೖ͍ͯ͘͠ʹʁ
࠷ޙʹ
ίϛϡχςΟʹࢀՃ͠Α͏ʂ • Vue.jsຊϢʔβʔάϧʔϓӡӦ • Slack https://vuejs-jp-slackin.herokuapp.com • VuejsຊޠެࣜαΠτܦ༝ͰδϣΠϯͰ͖·͢ http://jp.vuejs.org •
Vue.js Meetup (connpass) https://vuejs-meetup.connpass.com
དྷ 2/1 ʹ Vue.js 3 ʹ͍ͭͯ͠·͢ • 2020-02-01 PWA Night
CONFERENCE 2020 https://conf2020.pwanight.jp/
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ