Reactで汎用的なinputコンポーネントを考える

2024.11.21
エンジニアコミュニティ内での登壇

Transcript

1. Reactで汎用的な input コンポーネントを考える Shumpei / 2024.11.21
2. 目次 1. 今日のゴール 2. 結論 3. useIdでアクセシブルにする 4. なるべく自分で型を書かない
3. 目次 1. 今日のゴール 2. 結論 3. useIdでアクセシブルにする 4. なるべく自分で型を書かない
4. 今日のゴール 01. useId という組み込みの React フックを使って、 label と input の紐づけを行う実装例を知ることができる 02. 型定義もなるべくReact や TypeScript がすでに用意しているものを 使い、自分で作らないようにする実装例を知ることができる
5. 目次 1. 今日のゴール 2. 結論 3. useIdでアクセシブルにする 4. なるべく自分で型を書かない
6. 結論 01. input はどこで何個使われるかわからないので、 useId も使って、 重複した id が発生しないようにしよう 02. InputHTMLAttributes や ComponentProps などを使って、 なるべく自分で書かないで保守性を高めよう
7. 目次 1. 今日のゴール 2. 結論 3. useIdでアクセシブルにする 4. なるべく自分で型を書かない
8. useId でアクセシブルにする useId は React が提供する、アクセシビリティを高めるためのフックです。 https://ja.react.dev/reference/react/useId
9. useId でアクセシブルにする useId は React が提供する、アクセシビリティを高めるためのフックです。 https://ja.react.dev/reference/react/useId どんな時に使うかと言うと、 input と label を組み合わせた コンポーネントを作るときなどが 良いと考えています。
10. おさらい input タグは、 label タグと紐づけることができます。 ブラウザは input タグの id と label の for 属性（React では htmlFor ）が 同じ場合、関連するものとして認識します。
11. おさらい 関連した組の場合、label をクリックすると 関連した input にフォーカスがあたります。 人はまずラベルが目に入り触ろうとするので、 UX の観点からも紐づけてあげることが よりよいアクセシビリティに繋がります。
12. なぜ useId を使うのか React を使うと部品単位でコンポーネントを作り、 組み合わせて画面を作ります。 どこで何個使うかわからないため、素朴に props で id を受け取るだけだと 被ってしまう可能性があります。 label と input を組み合わせた React コンポーネントが 気づかずに重複した id を渡してしまう可能性がある
13. Q. id が被ってしまうのはなぜ悪いのか A. HTMLのルールだから。 id グローバル属性は、文書全体で一意でなければならない識別子 (ID) を定義します。 引用：MDN (https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/id)
14. Q. 被ったらどうなるの？ 表面上、ただちに何か問題になることはありません。 が、重複した id を持つ入力フォームが1つの画面にある場合、 先頭のものがフォーカスの対象になります。 もし「歯磨きした？」ラベルをクリックしても 自分が思っている入力欄にフォーカスが当たらないので、 ユーザは混乱してしまう
15. useId を使ってユニークな id を自動で生成させる この React フックを使えば自動的にユニークな id を提供してくれるので、 重複することがなく、HTML のルールから外れることはありません。
16. useId を使ってユニークな id を自動で生成させる useId は例えば :r1: のようなただの文字列を提供するだけなので、 プレフィックスをつけたりなどして、生成された HTML から管理しやすく できる余地もあります。
17. 目次 1. 今日のゴール 2. 結論 3. useIdでアクセシブルにする 4. なるべく自分で型を書かない
18. なるべく自分で型を書かない React / TypeScript は、一般的な HTML タグに関わる型定義や、 コンポーネント独自に定義した型情報を便利に使い回せるユーティリティな型を用 意しています。
19. なるべく自分で型を書かない メリットとしては、DRY に書けることや、型指定のヌケモレが減らせるようなメンテナ ンス性の向上などが期待できます。
20. ComponentProps<T> を使う React が提供する型。 /node_modules/@types/react/index.d.ts で確認可能です。 コンポーネントがすでに定義している型 （propsでどんな型を受け取るのかなど）を利用することができます。 https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/
21. ComponentProps<T> を使う MUI や shadcn/ui などのUIライブラリのコンポーネントと、 独自の型を組み合わせたベースのコンポーネントの型を使いまわしたい。 そんな時に使えます。
22. ComponentProps<T> を使う 󰢏メリット 　カスタムコンポーネントやHTML 要素の型を再利用する場合に 　一貫性が担保される 󰢃デメリット 　複雑な定義をするのには向いていない。 　 ref を含むすべての props を含むので、組み合わせによっては不要な型情報も 含まれる可能性がある。
23. ComponentProps<T> を使う 󰢏メリット 　カスタムコンポーネントやHTML 要素の型を再利用する場合に 　一貫性が担保される 󰢃デメリット 　複雑な定義をするのには向いていない。 　 ref を含むすべての props を含むので、組み合わせによっては不要な型情報も 含まれる可能性がある。 　▶ ref の扱いを明示的に行う ComponentPropsWithRef / ComponentPropsWithoutRef という型もあるので適宜検討す る。
24. ComponentProps<T> を使う
25. HTMLXXXElement を使う TypeScript が提供する型。 /node_modules/typescript/lib/lib.dom.d.ts で確認可能です。 ブラウザが定義している各HTMLタグが受け取れる属性情報がすでに定義されて います。 例えば button タグなどは自分で定義せず HTMLButtonElement を使うことでメン テナンスコストを下げられます。
26. HTMLXXXElement を使う
27. まとめ • useId を使って input と label を紐づけるようにする • React / TypeScript を使って再利用性の高い型定義を心がける
28. まとめ よき React ライフを 🎉