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
Reactで汎用的なinputコンポーネントを考える
Search
Shumpei O.
November 21, 2024
Programming
0
79
Reactで汎用的なinputコンポーネントを考える
2024.11.21
エンジニアコミュニティ内での登壇
Shumpei O.
November 21, 2024
Tweet
Share
More Decks by Shumpei O.
See All by Shumpei O.
Next.js で始めるセキュリティ入門
shumpei0111
0
6
例外処理について考える
shumpei0111
0
170
複数人での 大規模サイト移植のテクニック
shumpei0111
1
890
個人開発者は Jamstackでブログを書こう!〜WordPressもいいけどJamstackもね〜
shumpei0111
0
120
Other Decks in Programming
See All in Programming
1から理解するWeb Push
dora1998
7
1.9k
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
220
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
230
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
150
Cache Me If You Can
ryunen344
2
730
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
530
🔨 小さなビルドシステムを作る
momeemt
4
680
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.2k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
74
5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
How to Ace a Technical Interview
jacobian
279
23k
Become a Pro
speakerdeck
PRO
29
5.5k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Scaling GitHub
holman
463
140k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Practical Orchestrator
shlominoach
190
11k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Docker and Python
trallard
45
3.6k
We Have a Design System, Now What?
morganepeng
53
7.8k
Transcript
Reactで汎用的な input コンポーネントを考える Shumpei / 2024.11.21
目次 1. 今日のゴール 2. 結論 3. useIdでアクセシブルにする 4. なるべく自分で型を書かない
目次 1. 今日のゴール 2. 結論 3. useIdでアクセシブルにする 4. なるべく自分で型を書かない
今日のゴール 01. useId という組み込みの React フックを使って、 label と input の紐づけを行う実装例を知ることができる
02. 型定義もなるべくReact や TypeScript がすでに用意しているものを 使い、自分で作らないようにする実装例を知ることができる
目次 1. 今日のゴール 2. 結論 3. useIdでアクセシブルにする 4. なるべく自分で型を書かない
結論 01. input はどこで何個使われるかわからないので、 useId も使って、 重複した id が発生しないようにしよう 02.
InputHTMLAttributes や ComponentProps などを使って、 なるべく自分で書かないで保守性を高めよう
目次 1. 今日のゴール 2. 結論 3. useIdでアクセシブルにする 4. なるべく自分で型を書かない
useId でアクセシブルにする useId は React が提供する、アクセシビリティを高めるためのフックです。 https://ja.react.dev/reference/react/useId
useId でアクセシブルにする useId は React が提供する、アクセシビリティを高めるためのフックです。 https://ja.react.dev/reference/react/useId どんな時に使うかと言うと、 input と
label を組み合わせた コンポーネントを作るときなどが 良いと考えています。
おさらい input タグは、 label タグと紐づけることができます。 ブラウザは input タグの id と
label の for 属性(React では htmlFor )が 同じ場合、関連するものとして認識します。
おさらい 関連した組の場合、label をクリックすると 関連した input にフォーカスがあたります。 人はまずラベルが目に入り触ろうとするので、 UX の観点からも紐づけてあげることが よりよいアクセシビリティに繋がります。
なぜ useId を使うのか React を使うと部品単位でコンポーネントを作り、 組み合わせて画面を作ります。 どこで何個使うかわからないため、素朴に props で id
を受け取るだけだと 被ってしまう可能性があります。 label と input を組み合わせた React コンポーネントが 気づかずに重複した id を渡してしまう可能性がある
Q. id が被ってしまうのはなぜ悪いのか A. HTMLのルールだから。 id グローバル属性は、文書全体で一意でなければならない識別子 (ID) を定義します。 引用:MDN
(https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/id)
Q. 被ったらどうなるの? 表面上、ただちに何か問題になることはありません。 が、重複した id を持つ入力フォームが1つの画面にある場合、 先頭のものがフォーカスの対象になります。 もし「歯磨きした?」ラベルをクリックしても 自分が思っている入力欄にフォーカスが当たらないので、 ユーザは混乱してしまう
useId を使ってユニークな id を自動で生成させる この React フックを使えば自動的にユニークな id を提供してくれるので、 重複することがなく、HTML
のルールから外れることはありません。
useId を使ってユニークな id を自動で生成させる useId は例えば :r1: のようなただの文字列を提供するだけなので、 プレフィックスをつけたりなどして、生成された HTML
から管理しやすく できる余地もあります。
目次 1. 今日のゴール 2. 結論 3. useIdでアクセシブルにする 4. なるべく自分で型を書かない
なるべく自分で型を書かない React / TypeScript は、一般的な HTML タグに関わる型定義や、 コンポーネント独自に定義した型情報を便利に使い回せるユーティリティな型を用 意しています。
なるべく自分で型を書かない メリットとしては、DRY に書けることや、型指定のヌケモレが減らせるようなメンテナ ンス性の向上などが期待できます。
ComponentProps<T> を使う React が提供する型。 /node_modules/@types/react/index.d.ts で確認可能です。 コンポーネントがすでに定義している型 (propsでどんな型を受け取るのかなど)を利用することができます。 https://react-typescript-cheatsheet.netlify.app/docs/react-types/componentprops/
ComponentProps<T> を使う MUI や shadcn/ui などのUIライブラリのコンポーネントと、 独自の型を組み合わせたベースのコンポーネントの型を使いまわしたい。 そんな時に使えます。
ComponentProps<T> を使う メリット カスタムコンポーネントやHTML 要素の型を再利用する場合に 一貫性が担保される デメリット 複雑な定義をするのには向いていない。 ref
を含むすべての props を含むので、組み合わせによっては不要な型情報も 含まれる可能性がある。
ComponentProps<T> を使う メリット カスタムコンポーネントやHTML 要素の型を再利用する場合に 一貫性が担保される デメリット 複雑な定義をするのには向いていない。 ref
を含むすべての props を含むので、組み合わせによっては不要な型情報も 含まれる可能性がある。 ▶ ref の扱いを明示的に行う ComponentPropsWithRef / ComponentPropsWithoutRef という型もあるので適宜検討す る。
ComponentProps<T> を使う
HTMLXXXElement を使う TypeScript が提供する型。 /node_modules/typescript/lib/lib.dom.d.ts で確認可能です。 ブラウザが定義している各HTMLタグが受け取れる属性情報がすでに定義されて います。 例えば button
タグなどは自分で定義せず HTMLButtonElement を使うことでメン テナンスコストを下げられます。
HTMLXXXElement を使う
まとめ • useId を使って input と label を紐づけるようにする • React
/ TypeScript を使って再利用性の高い型定義を心がける
まとめ よき React ライフを 🎉