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.7k
Vue.js 3 に向けた Vue.js 入門
kazupon
December 06, 2019
Tweet
Share
More Decks by kazupon
See All by kazupon
Vue.js最新動向
kazupon
3
1.4k
Vue 3.4
kazupon
13
4.4k
Vue & Vite Rustify
kazupon
4
2k
Vue.jsエコシステム動向2023
kazupon
17
7.3k
Reactivity Transform
kazupon
1
1.2k
わたしのOSS活動
kazupon
1
980
Vue with Vite
kazupon
2
2.4k
State of Vue I18n
kazupon
3
530
まちにまった Vue.js 3
kazupon
14
5.5k
Other Decks in Programming
See All in Programming
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
今インフラ技術をイチから学び直すなら
yuhta28
1
130
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
500
How to Break into Reading Open Source
kaspth
1
190
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
280
私のEbitengineの第一歩
qt_luigi
0
440
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.5k
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
320
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
970
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
410
What we keep in mind when migrating from Serverless Framework to AWS CDK and AWS SAM
kasacchiful
1
140
Featured
See All Featured
Navigating Team Friction
lara
183
13k
In The Pink: A Labor of Love
frogandcode
139
22k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
The Cost Of JavaScript in 2023
addyosmani
42
5.2k
The Cult of Friendly URLs
andyhume
76
6k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
No one is an island. Learnings from fostering a developers community.
thoeni
18
2.9k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
YesSQL, Process and Tooling at Scale
rocio
167
14k
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/
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ