「ボタンだけどリンクにしたい…」をスマートに解決するPolymorphicコンポーネントの話

【teamLab Study Session ~frontend~ #3 】にてチームラボのフロントエンドエンジニアが登壇用に作成したスライドです。

teamLab Study Session ~frontend~ とは

チームラボのフロントエンド班がチームラボ内で定期的に実施している勉強会を、フロントエンドの技術に興味ある参加者を募集し、オンラインで配信する勉強会です。

https://teamlab.connpass.com/event/393589/

Transcript

1. © teamLab Inc. 「ボタンだけどリンクにしたい...」をスマートに解決する Polymorphic Componentの話 teamLab Study Session ~frontend~ #3 竹内 颯汰 チームラボパッケージチーム 所属
2. © teamLab Inc. 所属｜ 2 自己紹介 2 パッケージチーム フロントエンド班 竹内 颯汰 Takeuchi Sota 入社｜2024年新卒入社　現在3年目 趣味｜スノボ
3. © teamLab Inc. 見た目はボタン、中身はリンク 3
4. © teamLab Inc. 見た目はボタン、中身はリンク 左は送信ボタン、右はリンク 4
5. © teamLab Inc. 見た目はボタン、中身はリンク デザインパターンとしては一つのボタンとして作られている！ 5
6. © teamLab Inc. 見た目はボタン、中身はリンク デザイン VS セマンティクス デザイン上は共通のボタンパーツだが、実装上の役割は変わってくる アクション実行 <button> ページ遷移 <a> SPA遷移 <Link> → 一つのUIコンポーネントとして実装したい！！ 6
7. © teamLab Inc. スマートじゃない実装 7 isLinkで<a>と<button>をだし分ける デメリット • タグが増えるほどpropsや条件分岐が複雑 化する • button属性なのにhrefを指定できてしまう • <a>タグなのにhrefが未指定でもエラーが 出ない → Propsの型安全性が崩壊 © teamLab Inc. 7 type ButtonProps = { isLink?: boolean; href?: string; // リンク時に必要 disabled?: boolean; // ボタン時に必要 children: React.ReactNode; } & ComponentProps<'button'> & ComponentProps<'a'>; export const Button = (props: ButtonProps) => { if (props.isLink) { return <a href={props.href}>{props.children}</a>; } return <button>{props.children}</button>; }; © teamLab Inc.
8. © teamLab Inc. Polymorphic Componentとは 8
9. © teamLab Inc. Polymorphic Componentとは 9 定義 Polymorphicとは・・・多態性・多様性のある UIデザインパターン 呼び出し側が渡すプロパティに応じて、レンダリングされるHTML要素を自由に変更できるコン ポーネントのことです。
10. © teamLab Inc. Polymorphic Componentとは 10 Propsのas Polymorphic Componentではよくasを propsとして使う HTMLタグを動的に受容 asでHTMLタグを受け取ることで、コン ポーネントを使う側が意味（セマンティ クス）を柔軟に定義できます。 export const Button = ({ as: Component = 'button', children, ...props }) => { return ( <Component {...props}> {children} </Component> ); };
11. © teamLab Inc. Polymorphic Componentとは 今のままだと型定義されていない • buttonなのにhrefを指定できる • asにhogeを指定できる 11 型安全ではないので壊れやすい実装に！ <Button as="button" href="#">Click</Button> <Button as="hoge" href="#">Click</Button>
12. © teamLab Inc. TypescriptでPropsの型定義をする 12
13. © teamLab Inc. TypescriptでPropsの型定義をする 13 T HTMLタグ（button / a / div など） を表すジェネリクス ComponentPropsWithoutRef<T> HTMLタグ T が受け取れる標準 props ButtonProps as に応じて受け取れる props が自動 で切り替わる型 type ButtonProps<T extends ElementType = 'button'> = { as?: T; children: ReactNode; } & Omit<ComponentPropsWithoutRef<T>, 'as' |'children'>;
14. © teamLab Inc. TypescriptでPropsの型定義をする 14 T HTMLタグ（button / a / div など） を表すジェネリクス ComponentPropsWithoutRef<T> HTMLタグ T が受け取れる標準 props ButtonProps as に応じて受け取れる props が自動 で切り替わる型 type ButtonProps<T extends ElementType = 'button'> = { as?: T; children: ReactNode; } & Omit<ComponentPropsWithoutRef<T>, 'as' |'children'>;
15. © teamLab Inc. TypescriptでPropsの型定義をする 15 T HTMLタグ（button / a / div など） を表すジェネリクス ComponentPropsWithoutRef<T> HTMLタグ T が受け取れる標準 props ButtonProps as に応じて受け取れる props が自動 で切り替わる型 type ButtonProps<T extends ElementType = 'button'> = { as?: T; children: ReactNode; } & Omit<ComponentPropsWithoutRef<T>, 'as' |'children'>;
16. © teamLab Inc. TypescriptでPropsの型定義をする 16 type ButtonProps<T extends ElementType = 'button'> = { as?: T; children: ReactNode; } & Omit<ComponentPropsWithoutRef<T>, 'as' | 'children'>; export const Button = <T extends ElementType = 'button'>({ as, children, ...props }: ButtonProps<T>) => { const Component = as ?? 'button'; return <Component {...props}>{children}</Component>; };
17. © teamLab Inc. TypescriptでPropsの型定義をする 17 type ButtonProps<T extends ElementType = 'button'> = { as?: T; children: ReactNode; } & Omit<ComponentPropsWithoutRef<T>, 'as' | 'children'>; export const Button = <T extends ElementType = 'button'>({ as, children, ...props }: ButtonProps<T>) => { const Component = as ?? 'button'; return <Component {...props}>{children}</Component>; };
18. © teamLab Inc. 使い方 Next.jsのLinkタグやReact-ariaのButtonコンポーネントなども可能！ 18 <Button as="a" href="#">Click</Button> <Button as="button" onClick={() => alert('Clicked!')}> Click </Button> <Button as={Link} href="#">Click</Button> <Button as={Button} onClick={() => alert('Clicked!')}>Click</Button>
19. © teamLab Inc. 使い方（エラー例） 19 これら全て型エラーになる！ ❌ buttonのpropsのhrefを指定しているので型エラー <Button as="button" href="#">Click</Button> ❌ HTMLタグではないhogeを指定しているので型エラー <Button as="hoge" onClick={() => alert('Clicked!')}> Click </Button>
20. © teamLab Inc. まとめ 20
21. © teamLab Inc. まとめ  デザインの共通化とセマンティクスの両立 21  as propsのジェネリクスでTypeScriptによる「型安全」な拡張性  アクセシビリティ向上とロジックの整理
22. © teamlab Inc. 竹内颯汰 チームラボパッケージチーム 所属 「ボタンだけどリンクにしたい...」をスマートに解決する Polymorphic Componentの話 ご清聴ありがとうございました teamLab Study Session ~frontend~ #3