WEBVTT

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

2
00:00:00.977 --> 00:00:05.212
今回は、ネクストジェイエスのコンポーネント実践です。

3
00:00:05.212 --> 00:00:13.355
タイプスクリプトのプロップスとコールバックを使って、記事カードと親ページを連携させる方法を学びます。

4
00:00:13.355 --> 00:00:22.638
部品を使い回すには、受け取るデータと、利用者の操作をどう伝えるかを、プロップスの型として先に決めることが大切です。

5
00:00:22.638 --> 00:00:28.501
この記事ではページズルーターを前提に、共有するデータ型、選択できるカード、

6
00:00:28.501 --> 00:00:34.364
ジェネリクスを使う一覧、そして親ページでの状態管理までを順に作ります。

7
00:00:34.364 --> 00:00:38.110
初めての方も、流れを追えば全体像がつかめます。

8
00:00:38.110 --> 00:00:43.240
完成すると、記事を選ぶと親ページの表示とカードの状態が連動して変わり、解除すると未選択へ戻る、

9
00:00:43.240 --> 00:00:48.370
小さな選択画面ができあがります。

10
00:00:48.370 --> 00:00:51.263
まず、共有するデータ型を定義します。

11
00:00:51.263 --> 00:00:58.494
エスアールシー・タイプス・アーティクル・ドット・ティーエスに、アーティクル型を用意します。

12
00:00:58.494 --> 00:01:07.493
アイディーとタイトルは必須の文字列で、説明文のディスクリプションは、クエスチョンマークを付けて省略可能にします。

13
00:01:07.493 --> 00:01:11.831
この形はタイプだけでなくインターフェースでも表せます。

14
00:01:11.831 --> 00:01:15.849
注意点は、型はコンパイル時の情報だということです。

15
00:01:15.849 --> 00:01:21.795
エーピーアイの応答をこの型だと指定するだけでは、中身の検証にはなりません。

16
00:01:21.795 --> 00:01:29.990
受け取り側の境界で型を明示しておくと、どんなデータが来る前提なのかを、コードを読むだけで確認できます。

17
00:01:29.990 --> 00:01:32.393
次に、選択できるカードを作ります。

18
00:01:32.393 --> 00:01:36.775
プロップス型には、記事そのもの、選択中かどうかを示す真偽値、そして記事を受け取って何も返さない関数、

19
00:01:36.775 --> 00:01:41.157
オンセレクトを並べます。

20
00:01:41.157 --> 00:01:43.560
カード自身は選択状態を持ちません。

21
00:01:43.560 --> 00:01:49.073
セレクテッドを表示に使い、クリックされたらオンセレクトで親へ知らせるだけです。

22
00:01:49.073 --> 00:01:52.749
説明文がない場合は、準備中という代替文を表示します。

23
00:01:52.749 --> 00:01:57.131
ボタンには、アリア・プレストで選択状態を支援技術にも伝えます。

24
00:01:57.131 --> 00:02:03.068
状態を持つ場所を親だけに決めることで、親と子で同じ状態を同期する手間がなくなります。

25
00:02:03.068 --> 00:02:09.570
表示するデータと、操作の知らせ方を分けて考えることが、再利用しやすい部品づくりの第一歩です。

26
00:02:09.570 --> 00:02:12.484
コールバックの渡し方には注意点があります。

27
00:02:12.484 --> 00:02:17.897
ボタンのオンクリックへ渡しているのは、アロー関数の形をした、関数そのものです。

28
00:02:17.897 --> 00:02:22.615
クリックされたときに初めて、オンセレクトへ記事を渡して呼び出します。

29
00:02:22.615 --> 00:02:26.987
もしオンセレクトに記事を付けた呼び出しの形で書いてしまうと、クリックを待たずに、

30
00:02:26.987 --> 00:02:31.358
画面を描画している最中に実行されてしまいます。

31
00:02:31.358 --> 00:02:36.215
見た目が似ていても意味がまったく違うので、ここは丁寧に区別しましょう。

32
00:02:36.215 --> 00:02:40.379
イベントハンドラーには、実行結果ではなく、後で実行される関数を渡す、という原則を覚えておくと、

33
00:02:40.379 --> 00:02:44.542
他の場面でも応用できます。

34
00:02:44.542 --> 00:02:49.097
異なるデータの一覧にも使いたい場合は、ジェネリクスを使います。

35
00:02:49.097 --> 00:02:54.094
アイテムリストは、要素の型をティーという型パラメータで受け取ります。

36
00:02:54.094 --> 00:03:01.294
配列の要素型と、キーを取り出す関数、項目を描く関数が受け取る型は、すべてこのティーで結び付きます。

37
00:03:01.294 --> 00:03:06.291
記事の配列を渡せば、コールバックの中でも記事型として安全に扱えます。

38
00:03:06.291 --> 00:03:10.552
項目が空のときは、表示する項目がないという文を表示します。

39
00:03:10.552 --> 00:03:18.193
これは実行時に別のコンポーネントを自動で作る仕組みではなく、あくまで型の結び付きを保つための書き方です。

40
00:03:18.193 --> 00:03:25.394
型パラメータを使うことで、一覧の部品を記事専用に作り直さずに、別のデータでも同じ形で使い回せます。

41
00:03:25.394 --> 00:03:27.722
一覧のキーについても確認します。

42
00:03:27.722 --> 00:03:33.834
キーには、同じ一覧の兄弟の中で一意で、並び替えや更新があっても安定する値を使います。

43
00:03:33.834 --> 00:03:37.326
この例では、記事のアイディーをキーにしています。

44
00:03:37.326 --> 00:03:46.056
順序が変わる一覧で、配列の添字や、毎回変わる乱数をキーに使うと、状態と要素の対応が意図せず変わってしまうことがあります。

45
00:03:46.056 --> 00:03:51.877
項目の追加や削除、並べ替えをしたときに、選択状態が別の項目へ移ってしまわないか。

46
00:03:51.877 --> 00:03:55.660
安定したキーを使うことは、そのための土台になります。

47
00:03:55.660 --> 00:04:00.462
データ側に一意なアイディーがあるなら、それを優先して使いましょう。

48
00:04:00.462 --> 00:04:01.849
親ページを作ります。

49
00:04:01.849 --> 00:04:06.844
エスアールシー・ページズ・アーティクルピッカー・ティーエスエックスです。

50
00:04:06.844 --> 00:04:10.452
記事の配列は二件で、二件目は説明文を省略しています。

51
00:04:10.452 --> 00:04:13.366
選択中の記事は、ユースステートで持ちます。

52
00:04:13.366 --> 00:04:15.169
ここが状態の置き場所です。

53
00:04:15.169 --> 00:04:19.124
子どものカードは状態を持たず、親が選ばれた記事を保持し、各カードへ、選択中かどうかと、

54
00:04:19.124 --> 00:04:23.078
選択を伝える関数を渡します。

55
00:04:23.078 --> 00:04:29.044
ページの見出しの下には、現在選ばれている記事のタイトルか、未選択という表示を出します。

56
00:04:29.044 --> 00:04:34.317
開発サーバーでこのページを開けば、選択と解除の動きをその場で確かめられます。

57
00:04:34.317 --> 00:04:38.895
タイトルや説明文といった表示データは配列側に置き、変わる部分である選択状態だけをステートで扱う、

58
00:04:38.895 --> 00:04:43.474
という役割分担にも注目してください。

59
00:04:43.474 --> 00:04:44.806
配線の詳細を見ます。

60
00:04:44.806 --> 00:04:52.001
各カードのセレクテッドは、選択中の記事のアイディーと、そのカードの記事のアイディーが一致するかで決まります。

61
00:04:52.001 --> 00:04:56.664
オンセレクトには、状態を更新するセットセレクテッドをそのまま渡せます。

62
00:04:56.664 --> 00:05:00.795
記事を受け取って状態に入れる、という型が一致しているためです。

63
00:05:00.795 --> 00:05:05.191
解除ボタンでは、セットセレクテッドへヌルを渡して未選択へ戻します。

64
00:05:05.191 --> 00:05:11.853
初期値がヌルでも、後で記事を保持するため、ユースステートの型はアーティクル・オア・ヌルと明記します。

65
00:05:11.853 --> 00:05:16.783
型引数を省略すると初期値だけから推論され、この用途に必要な型になりません。

66
00:05:16.783 --> 00:05:19.588
ファイルと型の使い分けを整理します。

67
00:05:19.588 --> 00:05:26.443
エクスポート・デフォルトしたコンポーネントは、読み込み側で名前を付けてインポートします。

68
00:05:26.443 --> 00:05:33.298
エクスポート・タイプした型は、インポート・タイプで読み込むと、実行時の値と区別できます。

69
00:05:33.298 --> 00:05:42.335
ジェイエスエックスを含む部品はティーエスエックス、型定義だけのファイルはティーエスという拡張子の使い分けも基本です。

70
00:05:42.335 --> 00:05:45.451
リアクト・エフシーは必須ではありません。

71
00:05:45.451 --> 00:05:51.216
引数にプロップスの型を書いた通常の関数でも、コンポーネントは定義できます。

72
00:05:51.216 --> 00:05:59.318
なお、型が正しくても、画面の意味やアクセシビリティが自動で保証されるわけではない点も覚えておきましょう。

73
00:05:59.318 --> 00:06:01.698
アプリルーターで使うときの補足です。

74
00:06:01.698 --> 00:06:08.045
ユースステートやイベントを使うコンポーネントは、クライアントコンポーネントの境界の中へ置きます。

75
00:06:08.045 --> 00:06:13.731
ページ全体を対話用にする簡単な例なら、ページの先頭にユース・クライアントを指定します。

76
00:06:13.731 --> 00:06:20.740
大きなページでは、対話が必要な記事選択の部分だけを、別のクライアントコンポーネントへ分けることもできます。

77
00:06:20.740 --> 00:06:27.748
サーバーコンポーネントからクライアントコンポーネントへ、関数のプロップスを自由に渡せるわけではありません。

78
00:06:27.748 --> 00:06:35.021
この例のセットセレクテッドやレンダーアイテムは、同じクライアント側の部品の間で受け渡している点がポイントです。

79
00:06:35.021 --> 00:06:38.617
最後に、再利用する部品の確認点とまとめです。

80
00:06:38.617 --> 00:06:47.280
子どもは表示と操作の通知を担当し、親が選択状態を管理する形にすると、一覧以外の画面でも使いやすくなります。

81
00:06:47.280 --> 00:06:52.837
通信や保存まで子どもに集める前に、部品の利用範囲を確認してください。

82
00:06:52.837 --> 00:07:00.519
一覧については、項目の追加、並べ替え、削除を行い、選択状態が別の項目へ移らないことを試します。

83
00:07:00.519 --> 00:07:05.913
エーピーアイで一覧が更新されるアプリでは、記事そのものではなく選択アイディーだけを状態に持ち、

84
00:07:05.913 --> 00:07:11.307
現在の一覧から取り出す設計も候補です。

85
00:07:11.307 --> 00:07:15.884
型と状態の置き場所を決めることが、この実践のゴールです。

86
00:07:15.884 --> 00:07:23.893
まずはこの小さな例で、データの流れが親から子へ、操作の通知が子から親へ進む感覚をつかんでください。