SEの部屋CODE. LEARN. BUILD.

VIDEO LESSON

ReactのuseId入門：ラベルと説明を関連付けた入力フォームを作るの解説動画

再生時間 7:50動画を別のタブで開く ↗
動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

  1. 0:00こんにちは。
  2. 0:01リアクト入門の第四回です。
  3. 0:03今回は、ユースアイディーを使って、入力欄とラベルと説明文を正しく関連付ける方法を学びます。
  4. 0:10題材は、申込者と同行者、二人分の名前を入力する参加者フォームです。
  5. 0:16同じ入力部品を二つ並べると、入力欄のアイディーが重なって、ラベルが別の欄を指してしまう問題が起きやすくなります。
  6. 0:26部品ごとに重ならないアイディーを自動で作るのが、ユースアイディーの役割です。
  7. 0:32タイプスクリプトの小さなコードで、仕組みを一つずつ確認していきましょう。
  8. 0:38この考え方は、名前欄に限らず、説明文やエラー文を入力欄へ結び付ける場面でもそのまま使えます。
  9. 0:46まず、なぜ固定のアイディーでは困るのかを整理します。
  10. 0:50入力部品の中に、名前欄、といった決まったアイディーを書いてしまうと、その部品を一つだけ使う間は問題になりません。
  11. 0:58ところが、申込者用と同行者用に二つ並べた途端、ページの中に同じアイディーが二つ存在してしまいます。
  12. 1:04アイディーは、ページの中で一つの要素を指すための目印です。
  13. 1:08重なると、ラベルをクリックしたときに、どちらの入力欄へ移動すればよいか分からなくなります。
  14. 1:15再利用できる部品ほど、置かれた場所ごとに違うアイディーが必要になるのです。
  15. 1:20手書きの連番で避ける方法も考えられますが、部品の側で番号を管理すると、置く場所が増えるたびに注意が必要になります。
  16. 1:28関連付けの仕組みは三つあります。
  17. 1:30一つ目は、ラベルと入力欄の結び付けです。
  18. 1:34エイチティーエムエルでは、ラベルのフォーと入力欄のアイディーを一致させます。
  19. 1:40リアクトのジェイエスエックスでは、フォーの代わりにエイチティーエムエルフォーという名前で指定します。
  20. 1:48二つ目は、説明文との結び付けです。
  21. 1:51説明文の要素にアイディーを付け、その値を入力欄のアリアディスクライブドバイへ渡します。
  22. 1:58三つ目は結果です。
  23. 1:59関連付けが正しければ、ラベルをクリックしたときに対応する入力欄へフォーカスが移り、
  24. 2:04支援技術にも説明文が伝わります。
  25. 2:08この三つの結び付けがそろって初めて、見た目だけでなく、操作と読み上げの両方で欄と説明が対応します。
  26. 2:16再利用できる入力部品、ネームフィールド・ティーエスエックスを作ります。
  27. 2:22親から受け取るプロップスは、ラベル、項目名のネーム、説明文のヒント、入力値のバリュー、
  28. 2:27変更を伝えるオンチェンジの五つです。
  29. 2:32部品の中でユースアイディーを呼ぶと、この部品専用のアイディーが文字列で返ってきます。
  30. 2:38スライドでは、説明文用のアイディーを、生成された値にハイフン、ヒントという文字列をつなげて作っています。
  31. 2:47記事のコードではテンプレート文字列で同じことを書いています。
  32. 2:52部品を何個並べても、呼び出すたびに違う値が返る点がポイントです。
  33. 2:57生成される文字列の中身は、部品ごとに異なれば十分で、特定の並びや意味を期待するものではありません。
  34. 3:04次に、部品が返す要素へアイディーを割り当てます。
  35. 3:08ラベルのエイチティーエムエルフォーには生成したアイディーを、入力欄のアイディーにも同じ値を指定して、
  36. 3:12二つを結び付けます。
  37. 3:17入力欄のアリアディスクライブドバイには説明文用のアイディーを渡し、説明文の段落には、
  38. 3:21そのアイディー自体を付けます。
  39. 3:25入力欄は必須を表すリクワイアドと、四十文字までのマックスレングスも持ちます。
  40. 3:31値と変更の通知は親から受け取る形で、部品自身は入力値を保持しません。
  41. 3:36アイディーの割り当てだけが、この部品の中の仕事です。
  42. 3:39開発者ツールで要素を確認すると、二つの部品で、入力欄のアイディーと説明文の参照先が組ごとにそろっていることが分かります。
  43. 3:48ここで、アイディーとネームの役割の違いを押さえます。
  44. 3:52アイディーは、ページの中の要素を識別するための値で、今回はユースアイディーが生成します。
  45. 3:59一方、ネームはフォームデータの項目名です。
  46. 4:02申込者ならアプライカント、同行者ならコンパニオンというように、親が部品ごとに渡します。
  47. 4:08もう一つ大切なのは、ユースアイディーは入力値を保存する機能ではないことです。
  48. 4:14入力された名前は親がユースステートで保持し、部品へは値として渡され、変更はオンチェンジで親へ戻ります。
  49. 4:22識別、項目名、値の保持は、それぞれ別の仕組みが担当します。
  50. 4:26この区別ができると、フォームをサーバー送信へ広げるときも、どの値が何のためにあるのか迷いません。
  51. 4:33フォーム全体は、アプリ・ティーエスエックスに置きます。
  52. 4:37申込者と同行者の入力値は、それぞれ別のユースステートで保持します。
  53. 4:42送信時の処理では、まずプリベントデフォルトでページ移動を止めます。
  54. 4:46次に、二つの名前をトリムして前後の空白を取り除き、どちらかが空なら、両方の名前を入力してください、
  55. 4:51というメッセージを出して処理を終えます。
  56. 4:56スライドのコードは、表示を安定させるため文字列の連結で書いていますが、記事ではテンプレート文字列で同じ文を作っています。
  57. 5:05問題がなければ、二人の名前を入れた確認メッセージを表示します。
  58. 5:09フォームの中では、ネームフィールドを二つ並べます。
  59. 5:13変えるのはプロップスだけです。
  60. 5:15申込者用には申込者の名前というラベルとアプライカントという項目名を、同行者用には同行者の名前とコンパニオンを渡します。
  61. 5:23それぞれの入力値と更新の通知も、対応するステートへつなぎます。
  62. 5:27変更の通知では、対応するステートへ新しい値を入れて、同時に確認メッセージを空に戻します。
  63. 5:34部品の作りは一つでも、ユースアイディーのおかげで、二つの関連付けは混ざりません。
  64. 5:39入力チェックの範囲も確認します。
  65. 5:42入力欄のリクワイアドは、空の入力に対するブラウザーのチェックです。
  66. 5:47ただし、空白だけの文字列は空とはみなされないため、この例ではトリムで別途確認しています。
  67. 5:53今回のフォームはサーバーへ送信しませんが、実際に送信する場合は、サーバー側でも必須項目や文字数を検証してください。
  68. 6:01確認メッセージは、ロールがステータスの段落で知らせます。
  69. 6:06なお、入力エラーの多いフォームでは、エラー文と入力欄の関連付けや、エラー箇所への移動もあわせて検討すると、
  70. 6:11利用者が直しやすくなります。
  71. 6:15ブラウザーの確認とプログラム側の確認は、担当する範囲が違うため、どちらか一方で済ませないことが大切です。
  72. 6:23ユースアイディーの注意点を三つ挙げます。
  73. 6:26一つ目、一覧のキーには使わないことです。
  74. 6:29ユースアイディーは商品や記事のデータのアイディーを作る機能ではありません。
  75. 6:35キーには、データが持つ安定したアイディーを使ってください。
  76. 6:40二つ目、繰り返しの中で呼び出さないことです。
  77. 6:43必要なら部品を分割して、その部品のトップレベルで呼ぶ形にします。
  78. 6:48三つ目、生成された文字列の書式を解析して、業務データに使わないことです。
  79. 6:53あわせて、サーバー描画を使う場合は、サーバーとブラウザーで部品の構造をそろえることが前提になります。
  80. 7:01複数ルートを一つのページに置く場合は、識別子の接頭辞の設定も公式資料で確認してください。
  81. 7:08まとめです。
  82. 7:09フォームの値はユースステート、親子間の受け渡しはプロップス、要素同士の関連付けにはユースアイディー、
  83. 7:14というように役割を分けると、コードの見通しがよくなります。
  84. 7:20今回、記事のコードそのままをタイプスクリプトの厳密な型チェックにかけて、
  85. 7:23エラーがないことを確認しました。
  86. 7:27また、送信時の判定やメッセージの組み立ては、ノード・ジェーエスで実行して確かめています。
  87. 7:33ブラウザー上での実際の描画と操作の確認は、実行環境の制約で未実施です。
  88. 7:37次回は、ユースメモとユースコールバックで、メモ化の使い分けを学びます。
  89. 7:42お疲れさまでした。
  90. 7:44練習として、メールアドレス用の部品を同じ作りで追加し、関連付けが混ざらないか確かめてみましょう。
日本語字幕をダウンロード（WebVTT）

この動画で学べること

ReactのuseIdで重複しないIDを生成し、入力欄・ラベル・説明文を関連付ける方法を解説。TypeScriptのフォーム例、keyとの違い、SSR時の注意点を学べます。

解説記事・サンプルコードを読む：ReactのuseId入門：ラベルと説明を関連付けた入力フォームを作る →