Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Shumpei O.
November 21, 2024

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

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

Shumpei O.

November 21, 2024
Tweet

More Decks by Shumpei O.

Other Decks in Programming

Transcript

  1. 今日のゴール 01. useId という組み込みの React フックを使って、 label と input の紐づけを行う実装例を知ることができる

    02. 型定義もなるべくReact や TypeScript がすでに用意しているものを 使い、自分で作らないようにする実装例を知ることができる
  2. 結論 01. input はどこで何個使われるかわからないので、 useId も使って、 重複した id が発生しないようにしよう 02.

    InputHTMLAttributes や ComponentProps などを使って、 なるべく自分で書かないで保守性を高めよう
  3. おさらい input タグは、 label タグと紐づけることができます。 ブラウザは input タグの id と

    label の for 属性(React では htmlFor )が 同じ場合、関連するものとして認識します。
  4. なぜ useId を使うのか React を使うと部品単位でコンポーネントを作り、 組み合わせて画面を作ります。 どこで何個使うかわからないため、素朴に props で id

    を受け取るだけだと 被ってしまう可能性があります。 label と input を組み合わせた React コンポーネントが 気づかずに重複した id を渡してしまう可能性がある
  5. ComponentProps<T> を使う 󰢏メリット  カスタムコンポーネントやHTML 要素の型を再利用する場合に  一貫性が担保される 󰢃デメリット  複雑な定義をするのには向いていない。   ref

    を含むすべての props を含むので、組み合わせによっては不要な型情報も 含まれる可能性がある。  ▶ ref の扱いを明示的に行う ComponentPropsWithRef / ComponentPropsWithoutRef という型もあるので適宜検討す る。
  6. まとめ • useId を使って input と label を紐づけるようにする • React

    / TypeScript を使って再利用性の高い型定義を心がける