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
Formの複雑さに立ち向かう
bmthd
1
720
Immutable ActiveRecord
megane42
0
130
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
Writing documentation can be fun with plugin system
okuramasafumi
0
120
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
30
11k
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Site-Speed That Sticks
csswizardry
3
370
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Automating Front-end Workflow
addyosmani
1367
200k
The Pragmatic Product Professional
lauravandoore
32
6.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
31
2.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Documentation Writing (for coders)
carmenintech
67
4.6k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Building Your Own Lightsaber
phodgson
104
6.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
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