Vue3 で TypeScript と slots を活用した 堅牢かつ柔軟な UI コンポーネントづくり

Reject Conference - Vue Fes Japan Online 2022
https://vuejs-meetup.connpass.com/event/259621/

上記のイベントで登壇した際に発表した資料です。

Transcript

1. ひらやま Vue3 で TypeScript と slots を活用した 堅牢かつ柔軟な UI コンポーネントづくり
2. こんばんは！
3. ひらやまと申します
4. 前職の人として応募したのですが、
5. 退職後にこのイベントにお呼ばれされました。
9. 経歴はこう
10. ただ前職はこうだった
11. 結構いい感じ！
12. & Button Component の困りご & slots の活! & TypeScript の活用 Contents
13. Button Component の困りごと
16. Icon Prop 付け足す？
17. 1 2 3 4 5 6 7 8 < </ > template template > < = = = = /> Button icon icon-position icon-color text "bookmark" "left" "#ffffff" "ボタン" いろいろと受け付けることになりそう
18. はたまた…
19. 1 2 3 4 5 < </ > template template > < = > < = /> </ > RouterLink to Button text RouterLink "/" "ボタン" RouterLink（NuxtLink）使いたい！
20. 1 2 3 < </ > template template > < >{{ }}</ > button text button Button Component の中身
21. 1 2 3 < > < > </ > </ > a button button a = ボタン href "/" Rendering された HTML
22. HTML エラー！
23. 1 2 3 < </ > template template > < : =" ">{{ }}</ > component is tagName text component component を利用して、タグ名を動的にしてみる
24. 1 2 3 4 5 < </ > template template > < = > < = = /> </ > RouterLink to Button tag-name text RouterLink "/" "span" "ボタン" これだったら大丈夫そう！
25. 1 2 3 < </ > template template > < = = = /> Button tag-name href text "span" "/" "ボタン" ただ、span タグで href 使われたらHTMLエラーだ
26. タグ名ごとに受け付ける props (attrs) が異なるため ヒューマンエラーが起きやすい
27.  Icon との依存関È  props (attrs) の誤用問題 課題は2つ
28. Icon との依存関係 props (attrs) の誤用問題 slots TypeScript それぞれ解決！
29. slots の活用
30. そもそも slots って？
31. 1 2 3 4 5 < </ > template template > < > < /> </ > div slot div MyComponent という名で以下のように定義すると…
32. 1 2 3 4 5 < </ > template template > < > < >どんな要素でも受け付けられる</ > </ > MyComponent span span MyComponent 子要素を受け付けられるようになります
33. slots を使わないで Button Component に Icon を受け付けた場合…
34. 1 2 3 4 5 6 7 < </ > template template > < = = = = /> Button icon icon-position icon-color text "bookmark" "left" "#ffffff" "ボタン" いろいろと受け付けることになりそう
35. slots で子要素を受け付けるようにすると…
36. 1 2 3 4 5 6 < </ > template template > < > < /> < >ボタン</ > </ > Button BookmarkIcon span span Button
37. でもこれだと、Icon とテキストの配置用の CSS を 毎回書かないといけない
38. 1 2 3 4 5 6 7 8 < </ > template template > < > < > < # >< /></ > < # >ボタン</ > </ > </ > Button SymbolText template symbol BookmarkIcon template template text template SymbolText Button SymbolText という Component を作ってみました
39. 1 2 3 4 5 6 7 8 < </ > template template > < > < > < # >< /></ > < # >ボタン</ > </ > </ > Button SymbolText template symbol BookmarkIcon template template text template SymbolText Button slots は name を決めて入れる場所を限定できる！
40. 1 2 3 4 5 6 7 8 9 10 < </ > template template > < = > < = > < = /> </ > < = > < = /> </ > </ > div class div class slot name div div class slot name div div "symbolText" "symbolText__item" "symbol" "symbolText__item" "text" slots を受け付ける SymbolText 側
41. さてここで問題
42. 以下の UI の中で、SymbolText を使っているのは どこでしょう？
43. 当然ここ！
44. 実はここも！
45. IconText ではなく SymbolText という名にした理由がこれです
46. シンプル 1 2 3 4 5 6 7 8 < </ > template template > < > < > < # >※</ > < # >この文章は「ポラーノの広場」...</ > </ > </ > Button SymbolText template symbol template template text template SymbolText Button symbol として指定するものは Icon 以外でも良い
47. slots を活用して「注入」できるようにすると 柔軟な Component の一歩につながります
48. TypeScript の活用
49. どんな課題があったか？
50. RouterLink (NuxtLink) を使うことを想定すると タグ名を柔軟に変えるようにしておきたい
51. ただ、span タグを指定しているのに、 href を誤って指定してしまう可能性が出てくる…
52. これを解決するために…
53. SpanTagButton.vue LabelTagButton.vue ButtonTagButton.vue ATagButton.vue
54. これはきつい…
55. TypeScript の Generics を活用します！
56. ここからの説明は、VSCode + Volar を 使っている前提でお話していきます
57. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 < > script type type type type = = { : ... } = { : ... ?: ?: } = { : ... } = { : ... } lang tagName tagName href for tagName tagName "ts" 'a' 'button' 'label' 'span' ATagProps ButtonTagProps never never LabelTagProps SpanTagProps さらに、tagName の型を、 各タグ名の文字列で固定しておく。 それぞれのタグの Props を用意し、 タグごとに受け付けたくない Props を にする。 「never | undefined 型」
58. 20 21 22 23 24 25 26 27 28 29 30 31 type extends extends extends extends extends < | | | > = ? : ? : ? : ? : Props T T ATagProps T ButtonTagProps T LabelTagProps T SpanTagProps never 'a' 'button' 'label' 'span' 'a' 'button' 'label' 'span' Generics T を受け付け、T に応じて型を分岐できる
59. 1 2 3 < </ > template template > < = /> Button tag-name "button" こうするだけで、Props<T> が と解釈される Props<’button’> 各 Props の tagName の型が決まっているので 連鎖的に T が決まるようになっている
60. 31 32 33 34 35 36 37 38 39 40 type extends => script = < >( : < > ) { : < > : {} } ({}) DefineComponentType T Props T Props T DefineComponentType new export default as 'a' | 'button' | 'label' | 'span' props $props $emit defineComponent </ > Props<T> を Volar に認識させる
61. defineComponent に {} を渡しているので、 この段階ではレンダリングできません。 注意点
62. Vue2 のようにオブジェクトを正しく書いても良いですが Vue3 の setup でも上書きできます。 注意点
63. 実際に利用したときの VSCode のキャプチャがこちら
64. tag-name=”button” と href を指定するとエラー
65. CI で tsc のチェックを入れれば、 リリースを防ぐこともできちゃいます
66. https://github.com/rhirayamaaan/vue-flexible-ui-components より詳しいコードを見たい方はこちら
67. @rhirayamaaan @rhirayamaaan GitHub Twitter Vue3 で TypeScript と slots を活用した 堅牢かつ柔軟な UI コンポーネントづくり