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
genericで強力な型が付いたコンポーネントを作ろう
Search
お窓
October 22, 2024
Programming
0
48
genericで強力な型が付いたコンポーネントを作ろう
こちらで発表したものです。初LTでした。
https://optim.connpass.com/event/330716/
お窓
October 22, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
950
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
190
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
時計仕掛けのCompose
mkeeda
1
290
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Introduction to kotlinx.rpc
arawn
0
670
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.1k
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
220
Ruby on cygwin 2025-02
fd0
0
140
Unity Android XR入門
sakutama_11
0
150
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Fireside Chat
paigeccino
34
3.2k
Typedesign – Prime Four
hannesfritz
40
2.5k
It's Worth the Effort
3n
184
28k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Into the Great Unknown - MozCon
thekraken
35
1.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
genericで強力な型が付いたコ ンポーネントを作ろう お窓
自己紹介 お窓 Vue3を書く3年目フロントエンドエンジニア Twitter (𝕏) @shallow_omado お仕事 ネットショップSaaS管理画面のフロントエンド開発 推し事 ご注文はうさぎですか
? の 香風智乃(かふうちの) を推します 趣味 ニコニコ動画で日常系アニメを見たり とあるゲームのAPIを開発したり 2
3 Vuetify3 の VSelect コンポーネント のラッパーに強力な型定義を付けたお話 話す内容
4 VSelectコンポーネントとは 選択肢から 1つ(または複数 )要素を選べるコンポーネント
5 VSelectコンポーネントの悲しいところ 型の絞り込みが完全じゃない 😥 Vuetify 公式サイト https://vuetifyjs.com/ja/components/selects/
6 VSelectコンポーネントを普通に使ってみる model-valueに渡したのと 同じ型がupdate:model-valueに返る
7 VSelectコンポーネントを普通に使ってみる itemsと噛み合わない型の ref値も渡せてしまう
8 VSelectコンポーネントを普通に使ってみる itemsと噛み合わない item-titleやitem-valueを渡せてしまう
9 もっと厳密な型を作りたい (既にデザインカスタマイズのために VSelectのラップコンポーネントがあるので) 型定義を上手い具合に改善できないものか ... 🤔
https://azukiazusa.dev/blog/vue-generic-component/ 10 解決策となりそうな記事 👀
https://azukiazusa.dev/blog/vue-generic-component/ 11 解決策となりそうな記事 👀
12 実際にやってみる
13 実際にやってみる
14 できたもの
15 できたもの
16 書いた感想 - ラッパーが無い環境であれば VSelectデフォルトの型でも 問題ないかも? (ドキュメント通りのanyだと勘違いしていた) - withDefaultsとの相性は悪そう 型エラーを回避する方法を模索するも見つからず断念
17 今後の展望 - VSelect以外にも VComboboxやVRadioGroup、VIcon等 のラッパーを作ると 型定義を強化できそう - genericsを大量に定義するとLinter負荷が心配 型パフォーマンスを計測する方法があれば計測したい
- VSelectは本来テキスト配列も受け取る可能性がある その型もなんとか表現したい
18 まとめ ・VSelectの items や update:modelValueの 型定義は不完全なところがある ・VSelectをラップするコンポーネントがあったので genericsを使って型定義を強化した ・型定義がビシバシ効いてRef指定ミスが起こりづらくなった✨
関連資料 - Vue.js でジェネリックコンポーネントを使う - https://azukiazusa.dev/blog/vue-generic-component/ - 【Vue3】ジェネリクスコンポーネント + Panda
CSS を使ってコンポーネントを 作成してみる - https://zenn.dev/comm_vue_nuxt/articles/2fc54416899fcb 19