Slide 1
Slide 1 text
Vue3৮ͬͯΈͨ
ʲmedibaࣾ߹ಉษڧձʳ
ίωώτϚϧγΣΦϯϥΠϯ
Slide 2
Slide 2 text
ࣗݾհ
• Name: Shota Yamamoto
• Twitter: @yamam00s
• Company: גࣜձࣾmedibaʢ2019/10 ೖࣾʣ
• Team: ςΫϊϩδʔηϯλʔ Eng1G
Slide 3
Slide 3 text
auεϚʔτύεͷϑϩϯτࣄ
• Nuxt.js
• TypeScript
• Vuex
• Jest
• Storybook
• etc…
Slide 4
Slide 4 text
ࠓճ৮ΕΔػೳ
• CompositionAPI
• Fragment
• Suspense
• v-model
• Teleport
Slide 5
Slide 5 text
Composition API
Slide 6
Slide 6 text
2.x·ͰͷOptions API
Slide 7
Slide 7 text
3.xͷ͔ΒͷComposition API
Slide 8
Slide 8 text
ϏδωεϩδοΫΛ
·ͱΊ͘͢ͳͬͨɻ
Γग़͠Մೳɻ
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
MixinͰͰ͖ͨͷͰ🤔
Slide 11
Slide 11 text
Composition API vs Mixin
Mixinͷා͍෦
• ໊લͷڝ߹࣌ͷڍಈ
• ҉తͳґଘؔ
• ઇ่ࣜͳංେԽ
Slide 12
Slide 12 text
Mixin
Slide 13
Slide 13 text
Composition APIͰͷuseXXX
Slide 14
Slide 14 text
Fragment
Slide 15
Slide 15 text
2.x vs 3.x
Slide 16
Slide 16 text
ΧελϜίϯϙʔωϯτͷ
ଐੑͷܧঝͲ͏ͳΔ͔
Slide 17
Slide 17 text
2.x vs 3.x
Slide 18
Slide 18 text
Suspense
Slide 19
Slide 19 text
ඇಉظͳίϯϙʔωϯτΛ
TemplateͰ੍ޚͰ͖Δ
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
৽͍͠v-model
Slide 22
Slide 22 text
ΧελϜίϯϙʔωϯτͷ
v-model͕ΑΓ͍͘͢ɺ
ෳఆٛՄೳʹ
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Teleport
Slide 25
Slide 25 text
ରͷηϨΫλʹૠೖ
Slide 26
Slide 26 text
·ͱΊ
Slide 27
Slide 27 text
ҰॹʹΩϟονΞοϓ
͍͖ͯ͠·͠ΐ͏ʂ
Slide 28
Slide 28 text
࠷ޙʹ
medibaͰڞʹಇ͘ΤϯδχΞΛ
ืू͍ͯ͠·͢
͓͓ͪͯ͠Γ·͢ʂʂʂʂ
Slide 29
Slide 29 text
͋Γ͕ͱ͏͍͟͝·ͨ͠ 🙇