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
More Decks by Kikuo Emoto
See All by Kikuo Emoto
aws-smithy-mocksを使ってみよう
kikuomax
0
37
Other Decks in Programming
See All in Programming
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
0
130
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
550
What's new in Spring Modulith?
olivergierke
1
140
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
380
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
830
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.1k
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
990
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
850
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
1
100
ALL CODE BASE ARE BELONG TO STUDY
uzulla
15
2.3k
Catch Up: Go Style Guide Update
andpad
0
220
明日から始めるリファクタリング
ryounasso
0
140
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Navigating Team Friction
lara
190
15k
The Cost Of JavaScript in 2023
addyosmani
54
9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Rails Girls Zürich Keynote
gr2m
95
14k
Context Engineering - Making Every Token Count
addyosmani
6
240
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
How STYLIGHT went responsive
nonsquared
100
5.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
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