WEBVTT

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

2
00:00:01.032 --> 00:00:05.851
今回のテーマは、タイプスクリプトのユーティリティ型です。

3
00:00:05.851 --> 00:00:10.066
一つの元の型から、一覧用、登録用、更新用といった用途別の型を作る仕組みを、

4
00:00:10.066 --> 00:00:14.282
会員管理の例で学びます。

5
00:00:14.282 --> 00:00:19.100
ピックは使う項目を選び、オミットは不要な項目を除きます。

6
00:00:19.100 --> 00:00:27.360
パーシャルは項目を任意にし、レコードはキーと値の対応を定め、リードオンリーは再代入を禁止します。

7
00:00:27.360 --> 00:00:31.834
大切な前提は、これらは型を作る道具であり、実行時のオブジェクトの中身を変える処理ではない、

8
00:00:31.834 --> 00:00:36.308
という点です。

9
00:00:36.308 --> 00:00:41.212
元の型を変更すると、導いた型も追従する便利さと、データ自体は消えない注意点を、

10
00:00:41.212 --> 00:00:46.116
実行できる例で確認していきましょう。

11
00:00:46.116 --> 00:00:54.892
登録、更新、表示で必要な項目が違う場面を思い浮かべながら、五つの道具の違いを順に押さえていきましょう。

12
00:00:54.892 --> 00:00:58.044
出発点は、会員を表すメンバー型です。

13
00:00:58.044 --> 00:01:06.099
数字のアイディー、文字列の名前とメール、リーダーかエディターのどちらかである役割を持ちます。

14
00:01:06.099 --> 00:01:10.826
記事では、この一つの型から三つの用途別の型を導きます。

15
00:01:10.826 --> 00:01:17.130
一覧表示にはアイディーと名前だけ、登録時にはサーバーが決めるアイディーを除いた入力、

16
00:01:17.130 --> 00:01:23.434
更新時には名前とメールだけを任意で渡せる形、という具合です。

17
00:01:23.434 --> 00:01:28.424
項目を何度も書き直すのではなく、元の型から導くことで、メンバーに項目が増えたときも、

18
00:01:28.424 --> 00:01:33.415
関係する型が一緒に変わります。

19
00:01:33.415 --> 00:01:36.742
次から、一つずつ作り方を見ていきます。

20
00:01:36.742 --> 00:01:44.096
この元の型が確かな土台になるからこそ、導いた型の意図も読み手に伝わりやすくなります。

21
00:01:44.096 --> 00:01:45.298
まずピックです。

22
00:01:45.298 --> 00:01:49.730
ピック・メンバー・アイディー・名前、と書くと、メンバーからアイディーと名前だけを選んだ、

23
00:01:49.730 --> 00:01:54.162
メンバーサマリー型ができます。

24
00:01:54.162 --> 00:02:01.223
一覧画面ではメールや役割まで必要ないことが多く、使う項目だけの型にすると意図が明確になります。

25
00:02:01.223 --> 00:02:06.482
ただし後で説明するように、型を選んだだけでは実データからは消えません。

26
00:02:06.482 --> 00:02:13.693
そこで記事のトゥーサマリー関数は、アイディーと名前だけを新しいオブジェクトに取り出して返します。

27
00:02:13.693 --> 00:02:20.604
型の指定と、実際に値を組み立てる処理をセットで考えることが、ピックを使うときのポイントです。

28
00:02:20.604 --> 00:02:22.069
次はオミットです。

29
00:02:22.069 --> 00:02:29.884
オミット・メンバー・アイディー、と書くと、アイディーを除いた残りの型、ニューメンバーができます。

30
00:02:29.884 --> 00:02:36.070
登録フォームから受け取る入力には、まだ決まっていないアイディーは含めません。

31
00:02:36.070 --> 00:02:40.710
名前、メール、役割だけを入力として受け取り、保存する段階でアイディー7を付け加えると、

32
00:02:40.710 --> 00:02:45.350
完全なメンバー型になります。

33
00:02:45.350 --> 00:02:50.723
ピックが使うものを選ぶ発想、オミットが除くものを指定する発想です。

34
00:02:50.723 --> 00:02:58.375
どちらが分かりやすいかは、項目の数や、将来増える項目を自動で含めたいかどうかで選んでください。

35
00:02:58.375 --> 00:03:06.352
迷ったときは、残したい項目が多いか、除きたい項目が明確か、という観点で比べると選びやすくなります。

36
00:03:06.352 --> 00:03:10.265
更新用の型には、パーシャルとピックを組み合わせます。

37
00:03:10.265 --> 00:03:16.585
パーシャル・メンバーだけでは、アイディーや役割まで任意の更新候補になってしまいます。

38
00:03:16.585 --> 00:03:20.272
そこで先にピックで名前とメールを選び、それをパーシャルで任意項目にしたものが、

39
00:03:20.272 --> 00:03:23.959
メンバーパッチです。

40
00:03:23.959 --> 00:03:29.978
更新関数は、パッチに値がなければ元の値を使う形で、新しいオブジェクトを返します。

41
00:03:29.978 --> 00:03:37.202
注意点として、パッチ全体をそのまま広げる実装では、型だけではアイディーの上書きを防ぎきれません。

42
00:03:37.202 --> 00:03:42.770
記事の関数のように、許可した項目だけを読み取る実装と組み合わせてください。

43
00:03:42.770 --> 00:03:46.532
元の会員名が変わらないことも、実機で確認済みです。

44
00:03:46.532 --> 00:03:50.013
レコードは、キーと値の対応を定める型です。

45
00:03:50.013 --> 00:03:54.406
ロールラベルズでは、メンバーの役割の型、つまりリーダーとエディターをキーにし、

46
00:03:54.406 --> 00:03:58.799
表示名の文字列を値にします。

47
00:03:58.799 --> 00:04:04.270
この形では、どちらか一方の表示名を書き忘れると型エラーになります。

48
00:04:04.270 --> 00:04:13.387
実際に役割へアドミンを追加した練習では、ラベル不足がエラー・ティーエス2741になることを実機で確認しました。

49
00:04:13.387 --> 00:04:23.168
逆に、レコード・文字列・文字列、のように任意の文字列をキーにすると、存在しないキーの読み取りまで考える必要があります。

50
00:04:23.168 --> 00:04:27.312
キーの候補が有限かどうかを区別して使ってください。

51
00:04:27.312 --> 00:04:31.214
リードオンリーは、その型を通じた再代入を禁止します。

52
00:04:31.214 --> 00:04:36.542
更新後の会員をリードオンリー・メンバーとして受け取ったスナップショットでは、

53
00:04:36.542 --> 00:04:41.869
名前への代入がエラー・ティーエス2540になることを確認しました。

54
00:04:41.869 --> 00:04:46.972
ただしこれはコピーを作る処理ではなく、同じオブジェクトを参照します。

55
00:04:46.972 --> 00:04:51.774
別の変更可能な参照から書き換えれば、その変更は見えてしまいます。

56
00:04:51.774 --> 00:04:58.077
あわせて紹介されるゲットフィールドは、キーオブでキーを制限するジェネリクス関数です。

57
00:04:58.077 --> 00:05:04.831
名前を取得すると文字列が返り、存在しないキーを渡すとエラー・ティーエス2345になります。

58
00:05:04.831 --> 00:05:11.284
表示結果は、あかりさん、閲覧者、一覧のジェイソン、あかり、の順で、記事と一致しました。

59
00:05:11.284 --> 00:05:13.530
ここが最も大切な注意点です。

60
00:05:13.530 --> 00:05:21.711
更新後の会員をメンバーサマリー型の変数に代入しても、実際のオブジェクトにはメールや役割が残っています。

61
00:05:21.711 --> 00:05:27.166
実機でも、そのままジェイソン化すると全項目が出ることを確認しました。

62
00:05:27.166 --> 00:05:35.668
ピックやオミットは、型の世界で見える項目を決めるだけであり、安全なレスポンスへ変換する処理ではありません。

63
00:05:35.668 --> 00:05:42.486
公開する項目を減らしたい場合は、トゥーサマリーのように、返してよい値だけを新しいオブジェクトへ詰め直し、

64
00:05:42.486 --> 00:05:49.304
シリアライズした結果にも不要な情報が含まれないか確認してください。

65
00:05:49.304 --> 00:05:53.814
パーシャルとリードオンリーは、浅い範囲にだけ働きます。

66
00:05:53.814 --> 00:05:57.823
設定オブジェクトを持つプロファイル型で考えます。

67
00:05:57.823 --> 00:06:05.006
パーシャルでは設定自体を省略できますが、設定を指定するなら、その中のテーマは必須です。

68
00:06:05.006 --> 00:06:10.018
空の設定を渡すとテーマ不足でエラーになることも確認しました。

69
00:06:10.018 --> 00:06:14.862
リードオンリーでは、設定そのものの再代入は禁止されますが、設定の中のテーマは変更でき、

70
00:06:14.862 --> 00:06:19.706
実行結果もダークに変わります。

71
00:06:19.706 --> 00:06:23.715
リードオンリーは実行時の凍結処理ではありません。

72
00:06:23.715 --> 00:06:30.564
ネストした全体を守りたい場合は、内側にも個別に型を付けるなどの設計が別途必要です。

73
00:06:30.564 --> 00:06:34.437
任意項目とアンディファインドの違いも決めておきます。

74
00:06:34.437 --> 00:06:41.588
今回の設定、イグザクトオプショナルプロパティタイプスが有効な場合、名前を省略することはできますが、

75
00:06:41.588 --> 00:06:48.739
名前 colon アンディファインド、を明示して渡すと、エラー・ティーエス2375になります。

76
00:06:48.739 --> 00:06:51.272
実機でも同じエラーを確認しました。

77
00:06:51.272 --> 00:06:56.337
アンディファインドも値として認めたい場合は、型へ明示的に追加します。

78
00:06:56.337 --> 00:07:00.806
またパーシャルは空のオブジェクトも許すため、最低一つは変更が必要というルールがあるなら、

79
00:07:00.806 --> 00:07:05.276
それは実行時に検証してください。

80
00:07:05.276 --> 00:07:10.192
項目を消す操作が必要なら、ヌルや専用の命令で意味を別途設計します。

81
00:07:10.192 --> 00:07:11.167
まとめです。

82
00:07:11.167 --> 00:07:17.910
実行は、初期化してタイプスクリプトとノードの型定義を入れ、三つのファイルをエスアールシーに保存し、

83
00:07:17.910 --> 00:07:24.653
ストリクトに加えて二つの追加チェックを有効にした設定でビルドします。

84
00:07:24.653 --> 00:07:29.690
ピックは選ぶ、オミットは除く、パーシャルは任意にする、レコードは対応表、

85
00:07:29.690 --> 00:07:34.727
リードオンリーは再代入の禁止、と目的で使い分けます。

86
00:07:34.727 --> 00:07:40.577
ただし、どれも実行時のデータ変換や検証、権限確認の代わりにはなりません。

87
00:07:40.577 --> 00:07:46.995
練習として、役割にアドミンを追加してラベルの書き漏れを型チェックで見つけ、

88
00:07:46.995 --> 00:07:53.413
次に権限変更の機能では型、実装、実行時確認がそれぞれ必要な理由を考えてみてください。

89
00:07:53.413 --> 00:07:54.875
お疲れさまでした。

90
00:07:54.875 --> 00:08:03.812
まずは会員管理の小さな例を自分で打ち換え、項目を一つ増やしたときに、どの型が追従するかを確認してみてください。