Slide 1
Slide 1 text
Composition API
TypeScriptVue.jsͷເΛݟΔ͔?
KansaiTS#2
@Daikids2
Slide 2
Slide 2 text
খౡ େج / Daiki Kojima
@Daikids2
@daikikojima
ژେֶେֶӃใֶݚڀՊM2
Server/Front, Mobile(iOS/Android)…
Vue fes JPࢀՃ͠·͢!!
࠷ۙRxJavaશʹཧղͨ͠
Slide 3
Slide 3 text
Posted on …
IUUQTTQFBLFSEFDLDPNEBJLJETDPNQPTJUJPOBQJUZQFTDSJQUIBWVFEPUKTGBMTFNFOHXPKJBO
SVLB
Slide 4
Slide 4 text
ࠓճͷωλ
• Vue.jsͩͱਏ͔ͬͨTypeScriptʹ͍ͭͯɺ
ͤʹͳΕΔ͔?͠Εͳ͍Composition APIΛ
հ͠·͢!
• VuexपΓ͝צหΛ!!
Slide 5
Slide 5 text
Vue.jsΛTSͩͱͲ͏ॻ͔͘?
Slide 6
Slide 6 text
Vue.extend
import Vue from 'vue';
export default Vue.extend({
name: 'CountExtemd',
props: {
msg: {
Type: String,
required: true,
},
},
data() {
return {
count: 0,
};
},
methods: {
add() {
this.count += 1;
},
minus() {
this.count -= 1;
},
},
});
Slide 7
Slide 7 text
Vue.extend
• ͍ͭͷVueͱ΄΅ಉ͡!
• propsपΓͷܕ͕
গ͠ؾ࣋ͪѱ͍…
import Vue from 'vue';
export default Vue.extend({
name: 'CountExtemd',
props: {
msg: {
Type: String,
required: true,
},
},
data() {
return {
count: 0,
};
},
methods: {
add() {
this.count += 1;
},
minus() {
this.count -= 1;
},
},
});
Slide 8
Slide 8 text
Class Style (vue-property-decorator)
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
class CountClass extends Vue {
@Prop() private msg!: string;
count = 0;
add() {
this.count += 1;
}
minus() {
this.count -= 1;
}
}
Slide 9
Slide 9 text
Class Style (vue-property-decorator)
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
class CountClass extends Vue {
@Prop() private msg!: string;
count = 0;
add() {
this.count += 1;
}
minus() {
this.count -= 1;
}
}
• Vue + TSͷਓ͕
Αͬͯ͘Δͭ
• एׯσίϨʔλ͕ܳ
ա͗Δؾ͕͢Δ…
Slide 10
Slide 10 text
িܸͷࣄ࣮…
https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121
Slide 11
Slide 11 text
ඪ४Խ͔Β֎Ε·ͨ͠…
• ʑͱཧ༝͕ॻ͔ΕͯΔ…
• ͨͩɺvue-class-componentࣗମ
ࠓޙͱαϙʔτ͍༷ͯ͘͠…
Slide 12
Slide 12 text
զʑʹرͳ͍ͷͩΖ͏͔…
Slide 13
Slide 13 text
Composition API!!
https://github.com/vuejs/composition-api
Slide 14
Slide 14 text
Composition API!!
import {createComponent, reactive} from '@vue/composition-api';
const Count = createComponent({
props: ['msg'],
setup() {
const state = reactive({
count: 0,
});
const add = () => {
state.count += 1;
};
const minus = () => {
state.count -= 1;
};
return {
state,
add,
minus,
};
},
});
Slide 15
Slide 15 text
What’s Composition API?
• Vue 3.0Ͱಋೖ༧ఆͷAPI
• Function APIͱ͍͏໊લͰͨ͠…
Slide 16
Slide 16 text
Why?
• ैདྷͷVue-> `this`ʹґଘ
• ܕਪΛߟ͑ͯσβΠϯ͞Εͯͳ͔ͬͨ…
• Class Style
• ܕղܾͷͨΊʹσίϨʔλʹཔΒ͟ΔΛಘͳ͍…
Slide 17
Slide 17 text
Composition apiͩͱ…
• ܕʹ͍͞͠ૉͷมؔΛ͑Δ
• ܕਪʹ͍͞͠!
• ੜͷTypeScriptɺJavaScriptͷΑ͏ͳίʔυ
ʹͳΔ͔ΒIDEͷαϙʔτड͚͘͢ͳΔ!
Slide 18
Slide 18 text
ॻ͖ํ
• createComponentͰίϯϙʔωϯτΛ࡞ͯ͠
setup()ʹdataͱ͔methodsͳͲΛॻ͍͍ͯ͘…
const Count = createComponent({
props: ['msg'],
setup() {
Slide 19
Slide 19 text
ॻ͖ํ
• datarefstate, methodsؔͱͯ͠
ॻ͍ͯ͋͛ΕOK
• reactiveVue.observable()ͱ
ಉ(Rxͱͬͪ͝ΌʹͳΔ͔Β
վ໊ͨ͠Β͍͠…)
setup() {
const state = reactive({
count: 0,
});
const add = () => {
state.count += 1;
};
const minus = () => {
state.count -= 1;
};
return {
state,
add,
minus,
};
},
Slide 20
Slide 20 text
Ͷɺ؆୯Ͱ͠ΐ?
Slide 21
Slide 21 text
·ͱΊ
• Vue.jsΛTypeScriptͰॻ͘ʹ3ύλʔϯ
• Vue.extend
• Class
• Composition
• Composition APIͳΒܕਪͳͲ͕Α͘ͳΔ͔…
• ͨͩ͠ɺfunction-apiͷ࣌ͱൺͯ݁ߏมߋ͋ΔͷͰ
༷ࢠݟ͕ྑͦ͞͏…
Slide 22
Slide 22 text
ऴ
੍࡞ɾஶ࡞
ᴸᴸᴸᴸᴸ
@Daikids2
Slide 23
Slide 23 text
Reference
• https://github.com/vuejs/composition-api
• https://vue-composition-api-rfc.netlify.com/
• https://github.com/vuejs/rfcs/pull/
17#issuecomment-494242121