WEBVTT

1
00:00:00.000 --> 00:00:01.028
こんにちは。

2
00:00:01.028 --> 00:00:03.256
リアクト入門の第四回です。

3
00:00:03.256 --> 00:00:10.967
今回は、ユースアイディーを使って、入力欄とラベルと説明文を正しく関連付ける方法を学びます。

4
00:00:10.967 --> 00:00:16.621
題材は、申込者と同行者、二人分の名前を入力する参加者フォームです。

5
00:00:16.621 --> 00:00:26.217
同じ入力部品を二つ並べると、入力欄のアイディーが重なって、ラベルが別の欄を指してしまう問題が起きやすくなります。

6
00:00:26.217 --> 00:00:32.729
部品ごとに重ならないアイディーを自動で作るのが、ユースアイディーの役割です。

7
00:00:32.729 --> 00:00:38.898
タイプスクリプトの小さなコードで、仕組みを一つずつ確認していきましょう。

8
00:00:38.898 --> 00:00:46.780
この考え方は、名前欄に限らず、説明文やエラー文を入力欄へ結び付ける場面でもそのまま使えます。

9
00:00:46.780 --> 00:00:50.389
まず、なぜ固定のアイディーでは困るのかを整理します。

10
00:00:50.389 --> 00:00:58.161
入力部品の中に、名前欄、といった決まったアイディーを書いてしまうと、その部品を一つだけ使う間は問題になりません。

11
00:00:58.161 --> 00:01:04.962
ところが、申込者用と同行者用に二つ並べた途端、ページの中に同じアイディーが二つ存在してしまいます。

12
00:01:04.962 --> 00:01:08.987
アイディーは、ページの中で一つの要素を指すための目印です。

13
00:01:08.987 --> 00:01:15.233
重なると、ラベルをクリックしたときに、どちらの入力欄へ移動すればよいか分からなくなります。

14
00:01:15.233 --> 00:01:20.369
再利用できる部品ほど、置かれた場所ごとに違うアイディーが必要になるのです。

15
00:01:20.369 --> 00:01:28.280
手書きの連番で避ける方法も考えられますが、部品の側で番号を管理すると、置く場所が増えるたびに注意が必要になります。

16
00:01:28.280 --> 00:01:30.883
関連付けの仕組みは三つあります。

17
00:01:30.883 --> 00:01:34.138
一つ目は、ラベルと入力欄の結び付けです。

18
00:01:34.138 --> 00:01:40.321
エイチティーエムエルでは、ラベルのフォーと入力欄のアイディーを一致させます。

19
00:01:40.321 --> 00:01:48.457
リアクトのジェイエスエックスでは、フォーの代わりにエイチティーエムエルフォーという名前で指定します。

20
00:01:48.457 --> 00:01:51.223
二つ目は、説明文との結び付けです。

21
00:01:51.223 --> 00:01:58.220
説明文の要素にアイディーを付け、その値を入力欄のアリアディスクライブドバイへ渡します。

22
00:01:58.220 --> 00:01:59.684
三つ目は結果です。

23
00:01:59.684 --> 00:02:04.322
関連付けが正しければ、ラベルをクリックしたときに対応する入力欄へフォーカスが移り、

24
00:02:04.322 --> 00:02:08.959
支援技術にも説明文が伝わります。

25
00:02:08.959 --> 00:02:16.932
この三つの結び付けがそろって初めて、見た目だけでなく、操作と読み上げの両方で欄と説明が対応します。

26
00:02:16.932 --> 00:02:22.519
再利用できる入力部品、ネームフィールド・ティーエスエックスを作ります。

27
00:02:22.519 --> 00:02:27.388
親から受け取るプロップスは、ラベル、項目名のネーム、説明文のヒント、入力値のバリュー、

28
00:02:27.388 --> 00:02:32.258
変更を伝えるオンチェンジの五つです。

29
00:02:32.258 --> 00:02:38.962
部品の中でユースアイディーを呼ぶと、この部品専用のアイディーが文字列で返ってきます。

30
00:02:38.962 --> 00:02:47.264
スライドでは、説明文用のアイディーを、生成された値にハイフン、ヒントという文字列をつなげて作っています。

31
00:02:47.264 --> 00:02:52.053
記事のコードではテンプレート文字列で同じことを書いています。

32
00:02:52.053 --> 00:02:57.162
部品を何個並べても、呼び出すたびに違う値が返る点がポイントです。

33
00:02:57.162 --> 00:03:04.984
生成される文字列の中身は、部品ごとに異なれば十分で、特定の並びや意味を期待するものではありません。

34
00:03:04.984 --> 00:03:08.488
次に、部品が返す要素へアイディーを割り当てます。

35
00:03:08.488 --> 00:03:12.869
ラベルのエイチティーエムエルフォーには生成したアイディーを、入力欄のアイディーにも同じ値を指定して、

36
00:03:12.869 --> 00:03:17.250
二つを結び付けます。

37
00:03:17.250 --> 00:03:21.411
入力欄のアリアディスクライブドバイには説明文用のアイディーを渡し、説明文の段落には、

38
00:03:21.411 --> 00:03:25.573
そのアイディー自体を付けます。

39
00:03:25.573 --> 00:03:31.122
入力欄は必須を表すリクワイアドと、四十文字までのマックスレングスも持ちます。

40
00:03:31.122 --> 00:03:36.086
値と変更の通知は親から受け取る形で、部品自身は入力値を保持しません。

41
00:03:36.086 --> 00:03:39.883
アイディーの割り当てだけが、この部品の中の仕事です。

42
00:03:39.883 --> 00:03:48.644
開発者ツールで要素を確認すると、二つの部品で、入力欄のアイディーと説明文の参照先が組ごとにそろっていることが分かります。

43
00:03:48.644 --> 00:03:52.559
ここで、アイディーとネームの役割の違いを押さえます。

44
00:03:52.559 --> 00:03:59.184
アイディーは、ページの中の要素を識別するための値で、今回はユースアイディーが生成します。

45
00:03:59.184 --> 00:04:02.346
一方、ネームはフォームデータの項目名です。

46
00:04:02.346 --> 00:04:08.821
申込者ならアプライカント、同行者ならコンパニオンというように、親が部品ごとに渡します。

47
00:04:08.821 --> 00:04:14.543
もう一つ大切なのは、ユースアイディーは入力値を保存する機能ではないことです。

48
00:04:14.543 --> 00:04:22.222
入力された名前は親がユースステートで保持し、部品へは値として渡され、変更はオンチェンジで親へ戻ります。

49
00:04:22.222 --> 00:04:26.588
識別、項目名、値の保持は、それぞれ別の仕組みが担当します。

50
00:04:26.588 --> 00:04:33.816
この区別ができると、フォームをサーバー送信へ広げるときも、どの値が何のためにあるのか迷いません。

51
00:04:33.816 --> 00:04:37.630
フォーム全体は、アプリ・ティーエスエックスに置きます。

52
00:04:37.630 --> 00:04:42.292
申込者と同行者の入力値は、それぞれ別のユースステートで保持します。

53
00:04:42.292 --> 00:04:46.954
送信時の処理では、まずプリベントデフォルトでページ移動を止めます。

54
00:04:46.954 --> 00:04:51.827
次に、二つの名前をトリムして前後の空白を取り除き、どちらかが空なら、両方の名前を入力してください、

55
00:04:51.827 --> 00:04:56.701
というメッセージを出して処理を終えます。

56
00:04:56.701 --> 00:05:05.177
スライドのコードは、表示を安定させるため文字列の連結で書いていますが、記事ではテンプレート文字列で同じ文を作っています。

57
00:05:05.177 --> 00:05:09.556
問題がなければ、二人の名前を入れた確認メッセージを表示します。

58
00:05:09.556 --> 00:05:13.100
フォームの中では、ネームフィールドを二つ並べます。

59
00:05:13.100 --> 00:05:15.227
変えるのはプロップスだけです。

60
00:05:15.227 --> 00:05:23.592
申込者用には申込者の名前というラベルとアプライカントという項目名を、同行者用には同行者の名前とコンパニオンを渡します。

61
00:05:23.592 --> 00:05:27.987
それぞれの入力値と更新の通知も、対応するステートへつなぎます。

62
00:05:27.987 --> 00:05:34.225
変更の通知では、対応するステートへ新しい値を入れて、同時に確認メッセージを空に戻します。

63
00:05:34.225 --> 00:05:39.896
部品の作りは一つでも、ユースアイディーのおかげで、二つの関連付けは混ざりません。

64
00:05:39.896 --> 00:05:42.251
入力チェックの範囲も確認します。

65
00:05:42.251 --> 00:05:47.107
入力欄のリクワイアドは、空の入力に対するブラウザーのチェックです。

66
00:05:47.107 --> 00:05:53.582
ただし、空白だけの文字列は空とはみなされないため、この例ではトリムで別途確認しています。

67
00:05:53.582 --> 00:06:01.971
今回のフォームはサーバーへ送信しませんが、実際に送信する場合は、サーバー側でも必須項目や文字数を検証してください。

68
00:06:01.971 --> 00:06:06.091
確認メッセージは、ロールがステータスの段落で知らせます。

69
00:06:06.091 --> 00:06:11.021
なお、入力エラーの多いフォームでは、エラー文と入力欄の関連付けや、エラー箇所への移動もあわせて検討すると、

70
00:06:11.021 --> 00:06:15.951
利用者が直しやすくなります。

71
00:06:15.951 --> 00:06:23.604
ブラウザーの確認とプログラム側の確認は、担当する範囲が違うため、どちらか一方で済ませないことが大切です。

72
00:06:23.604 --> 00:06:26.698
ユースアイディーの注意点を三つ挙げます。

73
00:06:26.698 --> 00:06:29.792
一つ目、一覧のキーには使わないことです。

74
00:06:29.792 --> 00:06:35.515
ユースアイディーは商品や記事のデータのアイディーを作る機能ではありません。

75
00:06:35.515 --> 00:06:40.001
キーには、データが持つ安定したアイディーを使ってください。

76
00:06:40.001 --> 00:06:43.404
二つ目、繰り返しの中で呼び出さないことです。

77
00:06:43.404 --> 00:06:48.354
必要なら部品を分割して、その部品のトップレベルで呼ぶ形にします。

78
00:06:48.354 --> 00:06:53.923
三つ目、生成された文字列の書式を解析して、業務データに使わないことです。

79
00:06:53.923 --> 00:07:01.658
あわせて、サーバー描画を使う場合は、サーバーとブラウザーで部品の構造をそろえることが前提になります。

80
00:07:01.658 --> 00:07:08.464
複数ルートを一つのページに置く場合は、識別子の接頭辞の設定も公式資料で確認してください。

81
00:07:08.464 --> 00:07:09.284
まとめです。

82
00:07:09.284 --> 00:07:14.683
フォームの値はユースステート、親子間の受け渡しはプロップス、要素同士の関連付けにはユースアイディー、

83
00:07:14.683 --> 00:07:20.083
というように役割を分けると、コードの見通しがよくなります。

84
00:07:20.083 --> 00:07:23.636
今回、記事のコードそのままをタイプスクリプトの厳密な型チェックにかけて、

85
00:07:23.636 --> 00:07:27.190
エラーがないことを確認しました。

86
00:07:27.190 --> 00:07:33.205
また、送信時の判定やメッセージの組み立ては、ノード・ジェーエスで実行して確かめています。

87
00:07:33.205 --> 00:07:37.989
ブラウザー上での実際の描画と操作の確認は、実行環境の制約で未実施です。

88
00:07:37.989 --> 00:07:42.773
次回は、ユースメモとユースコールバックで、メモ化の使い分けを学びます。

89
00:07:42.773 --> 00:07:44.003
お疲れさまでした。

90
00:07:44.003 --> 00:07:50.564
練習として、メールアドレス用の部品を同じ作りで追加し、関連付けが混ざらないか確かめてみましょう。