Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Vue.js 3 に向けた Vue.js 入門
kazupon
December 06, 2019
Programming
19
6.2k
Vue.js 3 に向けた Vue.js 入門
kazupon
December 06, 2019
Tweet
Share
More Decks by kazupon
See All by kazupon
Reactivity Transform
kazupon
1
740
わたしのOSS活動
kazupon
1
820
Vue with Vite
kazupon
2
2.1k
State of Vue I18n
kazupon
3
380
まちにまった Vue.js 3
kazupon
14
5k
Native-ESM powered web dev build tool
kazupon
5
1.1k
まもなくやってくる Vue.js 3
kazupon
38
18k
Vue I18n 向けに ESLint プラグインを作った
kazupon
1
1.2k
Vue Fes Japan 2018 舞台裏について
kazupon
4
2k
Other Decks in Programming
See All in Programming
Cloudflare Workersと状態管理
chimame
3
510
What's new in Shopware 6.5
shyim
0
130
domain層のモジュール化 / MoT TechTalk #15
mot_techtalk
0
160
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
42k
量子コンピュータ時代のプログラミングセミナー / 20221222_Amplify_seminar _route_optimization
fixstars
0
250
存在しないアセットへの参照と 未公開アセットでのネタバレに どう立ち向かうか / How to prevent missing assets and spoilers by assets
orgachem
0
210
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
340
T3 Stack and TypeScript ecosystem
quramy
3
820
TokyoR#103_DataProcessing
kilometer
0
550
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
150
PHPDocにおける配列の型定義を少し知る
shimabox
1
140
Functional Fun in Kotlin
nomisrev
1
130
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
Practical Orchestrator
shlominoach
178
8.9k
Intergalactic Javascript Robots from Outer Space
tanoku
261
26k
Three Pipe Problems
jasonvnalue
89
8.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
240
11k
How STYLIGHT went responsive
nonsquared
89
4.2k
Ruby is Unlike a Banana
tanoku
93
9.6k
A better future with KSS
kneath
230
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
6
4.6k
Support Driven Design
roundedbygravity
88
8.9k
Facilitating Awesome Meetings
lara
33
4.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
29
8k
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/
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ