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
BuefyのMaintainerを引き継いだ件
Search
Kikuo Emoto
March 07, 2024
Programming
1
980
BuefyのMaintainerを引き継いだ件
Vue.js v-tokyo Meetup #19
https://vuejs-meetup.connpass.com/event/309755/
Kikuo Emoto
March 07, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
AIエージェント開発、DevOps and LLMOps
ymd65536
1
380
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
240
1から理解するWeb Push
dora1998
7
1.7k
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
150
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
280
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
TanStack DB ~状態管理の新しい考え方~
bmthd
2
480
アセットのコンパイルについて
ojun9
0
110
Improving my own Ruby thereafter
sisshiki1969
1
160
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.3k
MLH State of the League: 2026 Season
theycallmeswift
0
220
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Documentation Writing (for coders)
carmenintech
74
5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
187
54k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Being A Developer After 40
akosma
90
590k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Transcript
,JLVP݄ #VFGZͷ.BJOUBJOFSΛҾ͖ܧ͍ͩ݅ ࠓߋͳ͕Β7VFˠͷΓ͑ۤ࿑
ࣗݾհ ,JLVPߐຊتٱஉ w ϑϦʔϥϯεͷԿͰ w ࠷ۙͷྲྀߦΓ3VTU 5ZQF4DSJQU "844FSWFSMFTT "84$%, w
ϓϩάϥϛϯάҎ֎ͷझຯֆɺΔ͜ͱ w ͖ͳΞΠεϗοέʔνʔϜ1JUUTCVSHI1FOHVJOT LJLVPNBY DPEFNPOHFSJP
#VFGZͱ IUUQTCVFGZPSH w #VMNBϕʔεͷ7VFKT༻ܰྔ6*ίϯϙʔωϯτ w ެࣜ൛ CFVGZ! 7VFઐ༻ #VFGZGPS7VF
w ։ൃ൛ !OUPIRCVFGZOFYU 7VFઐ༻ #VFGZGPS7VF
#VFGZ.BJOUBJOFSͷมભ w ݪ࡞ऀ!SBGBCFSBMEP w લͷ.BJOUBJOFS!KUPNNZ w ݄ʙ!XFTEFWQSP !LJLVPNBY ࢲ
w ͦͷଞଟ͘ͷίϯτϦϏϡʔλʹࢧ͑ΒΕ͍ͯ·͢
FYUFOEͷഇࢭ QSPQͷॳظԽͱUIJT 7VF
FYUFOEͷഇࢭ QSPQͷॳظԽͱUIJT 7VF
FYUFOEͷഇࢭ w #VFGZͷศརػೳ w ίϯϙʔωϯτΛ໌ࣔతʹຒΊࠐ·ͳͯ͘ϞʔμϧΛදࣔͰ͖Δ 1SPHSBNNBUJDػೳ this.$buefy.dialog.alert('Everything looks fine!')
FYUFOEͷഇࢭ #VFGZGPS7VFͷ࣮ w άϩʔόϧͳ7VFΠϯελϯεΛFYUFOE͠ɺಈతʹੜͨ͠%0.ʹϞʔμϧ ΛϚϯτ const ModalComponent = window.Vue.extend(Modal) const
component = new ModalComponent({ el: document.createElement('div') }) ࣮ࡍͷίʔυΛ؆ུԽ 7VFͰFYUFOEഇࢭ
FYUFOEͷഇࢭ #VFGZGPS7VFͷ࣮ެ։"1*ͷΈͰ࣮ w DSFBUF"QQͰ৽͍͠"QQΠϯελϯεΛ࡞ͯ͠ϞʔμϧΛϚϯτ const vueInstance = createApp({ render() {
return h(Modal, { onClose: () => vueInstance.unmount() }) } }) vueInstance.mount(document.createElement('div')) ࣮ࡍͷίʔυΛ؆ུԽ ϝΠϯͷ"QQʹΠϯετʔϧͨ͠ϓϥάΠϯ͕ϞʔμϧͰ͑ͳ͍
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ͷ෦ߏʹґଘ͗͢͠
FYUFOEͷഇࢭ QSPQͷॳظԽͱUIJT 7VF
QSPQͷॳظԽͱUIJT #VFGZGPS7VFͷ࣮ w λϒදࣔͳͲͰҰ෦QSPQͷॳظԽʹ7VFͷ෦ϑΟʔϧυUIJT@VJEΛ༻ w ͷলུ࣌ʹϢχʔΫ͞Λอূ͢ΔͨΊ props: { value: {
type: String, default() { return this._uid.toString() } } } ࣮ࡍͷίʔυΛ؆ུԽ 7VFͰQSPQͷσϑΥϧτؔͰUIJTΛ༻Ͱ͖ͳ͍ ˠ୯७ʹUIJTVJEʹஔ͖͑ΒΕͳ͍
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ͱཚޚ๏
QSPQͷॳظԽͱUIJT #VFGZGPS7VFͷ࣮ݱঢ় w QSPQΛOVMMͰॳظԽ͠ɺDPNQVUFEͰUIJTVJEʹϑΥʔϧόοΫ props: { value: { type: String,
default: null } }, computed: { uniqueValue() { return this.value != null ? this.value : this.$.uid } } ࣮ࡍͷίʔυΛ؆ུԽ
FYUFOEͷഇࢭ QSPQͷॳظԽͱUIJT 7VF
7VF w 7VFͷҠߦ࡞ۀͷେ݄ʙ݄ࠒˠ7VF w 7VFͷมߋ͕Өڹ
7VF มߋWGPSதͷSFG w WGPSதͷSFGྻͱͯ͠ΞΫηεՄೳʹ w 7VFͱಉ͡ڍಈʹͬͨˠ7VF༻ͷରࡦ͕ٲʹ 7VFެࣜυΩϡϝϯτ IUUQTKBWVFKTPSHHVJEFFTTFOUJBMTUFNQMBUFSFGTSFGTJOTJEFWGPS ΑΓൈਮ ˡ
7VF ͪͬͱϚΠφʔ͡Όͳ͍ϚΠφʔνΣϯδ w 7VF ʙͷڍಈWGPSͷ࠷ޙͷཁૉͷΈSFGTʹ֨ೲ ඇྻ w SFG໊ʹΠϯσοΫεΛՃ໊ͯ͠લͷॏෳΛճආ <li
v-for="childItem in items" :key="childItem.value"> <a :ref="`tabLink${childItem.index}`">{{ childItem.label }}</a> </li> const tab = this.$refs[`tabLink${index}`] tab.focus() ࣮ࡍͷίʔυΛ؆ུԽ ࣮ࡍͷίʔυΛ؆ུԽ
7VF ϋΠϒϦου w SFG໊ʹΠϯσοΫεΛՃ໊ͯ͠લͷॏෳΛճආ w SFGT͕ྻ͔൱͔Ͱόʔδϣϯఆ const tab = this.$refs[`tabLink${index}`]
if (Array.isArray(tab)) { tab = tab[0] } tab.focus() ࣮ࡍͷίʔυΛ؆ུԽ WҎ߱ˠཁૉͷྻ
ެࣜϦϦʔεʹ͚ͯ w 5ZQF4DSJQUͷҠߦ w ෆ۩߹मਖ਼ w ࡉ͔͍#VFGZGPS7VFͱͷඇޓੑͷൃݟͱରԠ w "1*υΩϡϝϯτͷߋ৽ w
/VYU༻ͷϞδϡʔϧ։ൃ ͝ࢼ༻ɾίϯτϦϏϡʔγϣϯ͓͍ͪͯ͠·͢ IUUQTHJUIVCDPNOUPIRCVFGZOFYU