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.9k
Vue.js 3 に向けた Vue.js 入門
kazupon
December 06, 2019
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
520
Vapor Revolution
kazupon
3
3.6k
Vue.js最新動向
kazupon
3
1.6k
Vue 3.4
kazupon
13
4.7k
Vue & Vite Rustify
kazupon
4
2.3k
Vue.jsエコシステム動向2023
kazupon
17
7.9k
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
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
250
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
720
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
100
Design Foundational Data Engineering Observability
sucitw
3
190
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
190
Improving my own Ruby thereafter
sisshiki1969
1
160
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
280
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
500
アセットのコンパイルについて
ojun9
0
120
1から理解するWeb Push
dora1998
7
1.8k
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
私の後悔をAWS DMSで解決した話
hiramax
4
200
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
330
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Building Applications with DynamoDB
mza
96
6.6k
Designing Experiences People Love
moore
142
24k
Building an army of robots
kneath
306
46k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Code Review Best Practice
trishagee
70
19k
Thoughts on Productivity
jonyablonski
70
4.8k
Embracing the Ebb and Flow
colly
87
4.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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/
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ