Slide 1
Slide 1 text
,JLVP݄
#VFGZͷ.BJOUBJOFSΛҾ͖ܧ͍ͩ݅
ࠓߋͳ͕Β7VFˠͷΓ͑ۤ࿑
Slide 2
Slide 2 text
ࣗݾհ ,JLVPߐຊتٱஉ
w ϑϦʔϥϯεͷԿͰ
w ࠷ۙͷྲྀߦΓ3VTU
5ZQF4DSJQU
"844FSWFSMFTT
"84$%,
w ϓϩάϥϛϯάҎ֎ͷझຯֆɺΔ͜ͱ
w ͖ͳΞΠεϗοέʔνʔϜ1JUUTCVSHI1FOHVJOT
LJLVPNBY DPEFNPOHFSJP
Slide 3
Slide 3 text
#VFGZͱ
IUUQTCVFGZPSH
w #VMNBϕʔεͷ7VFKT༻ܰྔ6*ίϯϙʔωϯτ
w ެࣜ൛ CFVGZ!
7VFઐ༻ #VFGZGPS7VF
w ։ൃ൛ !OUPIRCVFGZOFYU
7VFઐ༻ #VFGZGPS7VF
Slide 4
Slide 4 text
#VFGZ.BJOUBJOFSͷมભ
w ݪ࡞ऀ!SBGBCFSBMEP
w લͷ.BJOUBJOFS!KUPNNZ
w ݄ʙ!XFTEFWQSP!LJLVPNBY ࢲ
w ͦͷଞଟ͘ͷίϯτϦϏϡʔλʹࢧ͑ΒΕ͍ͯ·͢
Slide 5
Slide 5 text
FYUFOEͷഇࢭ
QSPQͷॳظԽͱUIJT
7VF
Slide 6
Slide 6 text
FYUFOEͷഇࢭ
QSPQͷॳظԽͱUIJT
7VF
Slide 7
Slide 7 text
FYUFOEͷഇࢭ
w #VFGZͷศརػೳ
w ίϯϙʔωϯτΛ໌ࣔతʹຒΊࠐ·ͳͯ͘ϞʔμϧΛදࣔͰ͖Δ
1SPHSBNNBUJDػೳ
this.$buefy.dialog.alert('Everything looks fine!')
Slide 8
Slide 8 text
FYUFOEͷഇࢭ
#VFGZGPS7VFͷ࣮
w άϩʔόϧͳ7VFΠϯελϯεΛFYUFOE͠ɺಈతʹੜͨ͠%0.ʹϞʔμϧ
ΛϚϯτ
const ModalComponent = window.Vue.extend(Modal)
const component = new ModalComponent({
el: document.createElement('div')
})
࣮ࡍͷίʔυΛ؆ུԽ
7VFͰFYUFOEഇࢭ
Slide 9
Slide 9 text
FYUFOEͷഇࢭ
#VFGZGPS7VFͷ࣮ެ։"1*ͷΈͰ࣮
w DSFBUF"QQͰ৽͍͠"QQΠϯελϯεΛ࡞ͯ͠ϞʔμϧΛϚϯτ
const vueInstance = createApp({
render() {
return h(Modal, { onClose: () => vueInstance.unmount() })
}
})
vueInstance.mount(document.createElement('div'))
࣮ࡍͷίʔυΛ؆ུԽ
ϝΠϯͷ"QQʹΠϯετʔϧͨ͠ϓϥάΠϯ͕ϞʔμϧͰ͑ͳ͍
Slide 10
Slide 10 text
FYUFOEͷഇࢭ
#VFGZGPS7VFͷ࣮ݱঢ়
w ϝΠϯ"QQͷ"QQ$POUFYU @DPOUFYU
ͷதΛ৽͍͠"QQʹίϐʔ
const { _context: srcContext } = mainApp
const { _context: destContext } = destApp
destContext.config = srcContext.config
destContext.mixins = srcContext.mixins
destContext.components = srcContext.components
destContext.directives = srcContext.directives
destContext.provides = srcContext.provides
destContext.optionsCache = srcContext.optionsCache
destContext.propsCache = srcContext.propsCache
destContext.emitsCache = srcContext.emitsCache
if ('__VUE_I18N_SYMBOL__' in mainApp) {
destApp.__VUE_I18N_SYMBOL__ = mainApp.__VUE_I18N_SYMBOL__
}
Πϯετʔϧ࣌ʹ͓֮͑ͯ͘
👎ଞͷϓϥάΠϯͱͷ૬ੑ
࣮ࡍͷίʔυΛ؆ུԽ
👎7VFͷ෦ߏʹґଘ͗͢͠
Slide 11
Slide 11 text
FYUFOEͷഇࢭ
QSPQͷॳظԽͱUIJT
7VF
Slide 12
Slide 12 text
QSPQͷॳظԽͱUIJT
#VFGZGPS7VFͷ࣮
w λϒදࣔͳͲͰҰ෦QSPQͷॳظԽʹ7VFͷ෦ϑΟʔϧυUIJT@VJEΛ༻
w ͷলུ࣌ʹϢχʔΫ͞Λอূ͢ΔͨΊ
props: {
value: {
type: String,
default() { return this._uid.toString() }
}
}
࣮ࡍͷίʔυΛ؆ུԽ
7VFͰQSPQͷσϑΥϧτؔͰUIJTΛ༻Ͱ͖ͳ͍
ˠ୯७ʹUIJTVJEʹஔ͖͑ΒΕͳ͍
Slide 13
Slide 13 text
QSPQͷॳظԽͱUIJT
#VFGZGPS7VFͷ࣮۪൛
w ϥϯμϜͳͰQSPQΛॳظԽͯ͠ϢχʔΫ͞Λอূ
// props: { value: {
// type: String,
// default() { return makeUniqueId() }
// }}
function makeUniqueId() {
const values = new Uint8Array(12)
window.crypto.getRandomValues(values)
return Array.prototype.map.call(
values, (v) => v.toString(16)
).join(‘')
}
࣮ࡍͷίʔυΛܗ
4FSWFS4JEF3FOEFSJOH 443
ͰXJOEPXͱཚޚ๏
Slide 14
Slide 14 text
QSPQͷॳظԽͱUIJT
#VFGZGPS7VFͷ࣮ݱঢ়
w QSPQΛOVMMͰॳظԽ͠ɺDPNQVUFEͰUIJTVJEʹϑΥʔϧόοΫ
props: {
value: {
type: String,
default: null
}
},
computed: {
uniqueValue() {
return this.value != null ? this.value : this.$.uid
}
}
࣮ࡍͷίʔυΛ؆ུԽ
Slide 15
Slide 15 text
FYUFOEͷഇࢭ
QSPQͷॳظԽͱUIJT
7VF
Slide 16
Slide 16 text
7VF
w 7VFͷҠߦ࡞ۀͷେ݄ʙ݄ࠒˠ7VF
w 7VFͷมߋ͕Өڹ
Slide 17
Slide 17 text
7VF
มߋWGPSதͷSFG
w WGPSதͷSFGྻͱͯ͠ΞΫηεՄೳʹ
w 7VFͱಉ͡ڍಈʹͬͨˠ7VF༻ͷରࡦ͕ٲʹ
7VFެࣜυΩϡϝϯτ IUUQTKBWVFKTPSHHVJEFFTTFOUJBMTUFNQMBUFSFGTSFGTJOTJEFWGPS
ΑΓൈਮ
ˡ
Slide 18
Slide 18 text
7VF
ͪͬͱϚΠφʔ͡Όͳ͍ϚΠφʔνΣϯδ
w 7VF
ʙͷڍಈWGPSͷ࠷ޙͷཁૉͷΈSFGTʹ֨ೲ ඇྻ
w SFG໊ʹΠϯσοΫεΛՃ໊ͯ͠લͷॏෳΛճආ
{{ childItem.label }}
const tab = this.$refs[`tabLink${index}`]
tab.focus()
࣮ࡍͷίʔυΛ؆ུԽ
࣮ࡍͷίʔυΛ؆ུԽ
Slide 19
Slide 19 text
7VF
ϋΠϒϦου
w SFG໊ʹΠϯσοΫεΛՃ໊ͯ͠લͷॏෳΛճආ
w SFGT͕ྻ͔൱͔Ͱόʔδϣϯఆ
const tab = this.$refs[`tabLink${index}`]
if (Array.isArray(tab)) {
tab = tab[0]
}
tab.focus()
࣮ࡍͷίʔυΛ؆ུԽ
WҎ߱ˠཁૉͷྻ
Slide 20
Slide 20 text
ެࣜϦϦʔεʹ͚ͯ
w 5ZQF4DSJQUͷҠߦ
w ෆ۩߹मਖ਼
w ࡉ͔͍#VFGZGPS7VFͱͷඇޓੑͷൃݟͱରԠ
w "1*υΩϡϝϯτͷߋ৽
w /VYU༻ͷϞδϡʔϧ։ൃ
͝ࢼ༻ɾίϯτϦϏϡʔγϣϯ͓͍ͪͯ͠·͢
IUUQTHJUIVCDPNOUPIRCVFGZOFYU