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
17
Reactで汎用的なinputコンポーネントを考える
2024.11.21
エンジニアコミュニティ内での登壇
Shumpei O.
November 21, 2024
Tweet
Share
More Decks by Shumpei O.
See All by Shumpei O.
例外処理について考える
shumpei0111
0
98
複数人での 大規模サイト移植のテクニック
shumpei0111
1
760
個人開発者は Jamstackでブログを書こう!〜WordPressもいいけどJamstackもね〜
shumpei0111
0
87
Other Decks in Programming
See All in Programming
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
10
1.4k
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
3
1.1k
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
340
2025.01.17_Sansan × DMM.swift
riofujimon
2
670
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
190
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
380
チームの立て直し施策をGoogleの 『効果的なチーム』と見比べてみた
maroon8021
0
270
Оптимизируем производительность блока Казначейство
lamodatech
0
990
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
0
130
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2k
BEエンジニアがFEの業務をできるようになるまでにやったこと
yoshida_ryushin
0
260
Alba: Why, How and What's So Interesting
okuramasafumi
0
240
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.3k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
For a Future-Friendly Web
brad_frost
176
9.5k
Statistics for Hackers
jakevdp
797
220k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Optimising Largest Contentful Paint
csswizardry
33
3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
A Philosophy of Restraint
colly
203
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.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 ライフを 🎉