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
38
Other Decks in Programming
See All in Programming
開発生産性を上げるための生成AI活用術
starfish719
3
1.5k
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
270
CSC509 Lecture 04
javiergs
PRO
0
300
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
510
Devoxx BE - Local Development in the AI Era
kdubois
0
130
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
590
One Enishi After Another
snoozer05
PRO
0
130
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
320
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
250
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
410
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.9k
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
For a Future-Friendly Web
brad_frost
180
10k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Code Reviewing Like a Champion
maltzj
526
40k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
34
2.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
Making Projects Easy
brettharned
120
6.4k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Building Adaptive Systems
keathley
44
2.8k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
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