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
0
590
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
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
Snowflakeで眠ったデータを起こそう!
estie
0
120
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
290
Goのmultiple errorsについて (2024年4月版)
syumai
4
950
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
3
910
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
2
200
Node.js v22 で変わること
yosuke_furukawa
PRO
9
3.5k
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.1k
雑に思考を整理する技術と効能
konifar
60
29k
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
110
Elm Form Validation
bkuhlmann
0
510
Featured
See All Featured
Being A Developer After 40
akosma
57
580k
Building Flexible Design Systems
yeseniaperezcruz
319
37k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Design by the Numbers
sachag
274
18k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
Become a Pro
speakerdeck
PRO
11
4.5k
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