WEBVTT

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

2
00:00:00.865 --> 00:00:06.489
今回のテーマは、タイプスクリプトのキーオフ、タイプオブ、アズコンスタントです。

3
00:00:06.489 --> 00:00:13.411
設定値と型定義を別々に手書きすると、値を追加したのに型の更新を忘れる、という事故が起きがちです。

4
00:00:13.411 --> 00:00:19.179
そこで、まず定数をひとつ置き、そこからキーの型や値の型を取り出す方法を学びます。

5
00:00:19.179 --> 00:00:22.063
題材は、記事の公開状態と表示ラベルです。

6
00:00:22.063 --> 00:00:30.427
下書き、公開中、アーカイブという状態を例に、型安全なプロパティ取得や、配列からユニオン型を作る方法まで順に進みます。

7
00:00:30.427 --> 00:00:36.628
基本的なオブジェクト型を知っている方を対象に、初心者にも分かるよう一歩ずつ解説します。

8
00:00:36.628 --> 00:00:38.043
まずキーオフです。

9
00:00:38.043 --> 00:00:42.602
これは、オブジェクト型が持つキーの型を取り出す演算子です。

10
00:00:42.602 --> 00:00:49.048
画面では、記事を表す型からキーを取り出し、アーティクルキーという型を作っています。

11
00:00:49.048 --> 00:00:55.494
結果は、アイディー、タイトル、ビューズという三つの文字列だけを許すユニオン型です。

12
00:00:55.494 --> 00:01:02.412
単なるストリングではないため、ボディのような未定義のキーを代入すると型エラーになります。

13
00:01:02.412 --> 00:01:08.229
実際に、間違ったキーはエラーコード付きで弾かれることを実機で確認しました。

14
00:01:08.229 --> 00:01:12.159
プロパティ名を引数に受け取る関数で特に役立ちます。

15
00:01:12.159 --> 00:01:22.064
なお、文字列のインデックスを持つ型では結果が広くなる場合もあるため、この動画では固定の文字列キーを持つオブジェクトを扱います。

16
00:01:22.064 --> 00:01:23.820
次にタイプオブです。

17
00:01:23.820 --> 00:01:32.953
すでに設定オブジェクトがある場合は、同じ構造の型を手書きせず、型の位置でタイプオブを使って参照できます。

18
00:01:32.953 --> 00:01:41.207
画面の設定では、ページサイズが数値、著者表示が真偽値と推論され、そのまま型として取り出せます。

19
00:01:41.207 --> 00:01:45.774
別の数値を入れた新しい設定も、同じ型で受けられます。

20
00:01:45.774 --> 00:01:52.974
注意点は、ジャバスクリプトで実行時に文字列を返すタイプオブとは役割が違うことです。

21
00:01:52.974 --> 00:01:57.892
型の位置では、変数に推論された型を参照しているだけです。

22
00:01:57.892 --> 00:02:03.161
また、型を取り出しても値の複製や実行時の検証は行われません。

23
00:02:03.161 --> 00:02:09.132
エーピーアイ応答の正しさを確かめたい場合は、別の検証処理が必要です。

24
00:02:09.132 --> 00:02:10.737
ここからが本題です。

25
00:02:10.737 --> 00:02:14.909
記事の状態と表示ラベルを、ひとつの定数で管理します。

26
00:02:14.909 --> 00:02:20.285
ドラフトは下書き、パブリッシュドは公開中、アーカイブドはアーカイブ、という対応をオブジェクトに置き、

27
00:02:20.285 --> 00:02:25.660
末尾にアズコンスタントを付けます。

28
00:02:25.660 --> 00:02:30.154
状態名の型は、キーオフ・タイプオブと書くだけで作れます。

29
00:02:30.154 --> 00:02:36.412
まずタイプオブで定数の型を取り出し、そこへキーオフを適用する、という順番です。

30
00:02:36.412 --> 00:02:40.263
状態名のユニオンを別に書き直す必要はありません。

31
00:02:40.263 --> 00:02:45.559
アズコンスタントを付けると、各プロパティは読み取り専用になり、値もストリングへ広がらず、

32
00:02:45.559 --> 00:02:50.854
具体的な文字列リテラル型のまま保持されます。

33
00:02:50.854 --> 00:02:59.680
固定キーの一覧だけならアズコンスタントなしでも作れますが、ラベルまで型に残したい場合は付けるのがポイントです。

34
00:02:59.680 --> 00:03:02.190
ラベルの型も同じ定数から作れます。

35
00:03:02.190 --> 00:03:09.721
丸括弧でくくったタイプオブの後ろに、状態名の型を角括弧で付けると、キーに対応する値の型を取り出せます。

36
00:03:09.721 --> 00:03:15.627
これをインデックスアクセス型と呼び、この例では三つのラベルのユニオンになります。

37
00:03:15.627 --> 00:03:21.386
候補を順番どおりに表示したい場合は、オブジェクトではなく配列が扱いやすいです。

38
00:03:21.386 --> 00:03:29.654
並び順の配列にアズコンスタントを付けると読み取り専用のタプル型になり、角括弧のナンバーで要素の型を取り出せます。

39
00:03:29.654 --> 00:03:33.641
この定数は画面の選択肢にもそのまま使えるため、候補と型を別々に管理するより、

40
00:03:33.641 --> 00:03:37.628
変更箇所をまとめやすくなります。

41
00:03:37.628 --> 00:03:43.191
応用として、オブジェクトから任意のプロパティを取り出す関数を作ります。

42
00:03:43.191 --> 00:03:50.502
ポイントは、型パラメーターのケーに、ティーのキーオフであること、という制約を付けることです。

43
00:03:50.502 --> 00:03:56.065
これで、引数のキーはそのオブジェクトに存在するものだけに制限されます。

44
00:03:56.065 --> 00:04:04.012
さらに戻り値の型を、ティーの角括弧ケーと書くことで、指定したキーに対応する値の型がそのまま返ります。

45
00:04:04.012 --> 00:04:10.211
タイトルを指定すれば文字列、閲覧数を指定すれば数値、という連動が効くわけです。

46
00:04:10.211 --> 00:04:15.297
存在しないキーを渡すと型エラーになることも、実機で確認しました。

47
00:04:15.297 --> 00:04:19.589
ただし、キー自体がユニオン型の場合は戻り値もユニオンになることがあるため、

48
00:04:19.589 --> 00:04:23.880
渡すキーの型にも注目してください。

49
00:04:23.880 --> 00:04:26.708
作った部品を実際に使ってみます。

50
00:04:26.708 --> 00:04:35.194
記事のオブジェクトからタイトルを取得すると文字列として扱えるため、大文字化のメソッドが使えます。

51
00:04:35.194 --> 00:04:40.497
閲覧数を取得すると数値になるため、数値のメソッドが使えます。

52
00:04:40.497 --> 00:04:45.801
状態にパブリッシュドを指定すると、ラベルの公開中が返ります。

53
00:04:45.801 --> 00:04:52.342
並び順の配列へラベル変換を適用すると、新しい順と古い順の一覧が得られます。

54
00:04:52.342 --> 00:04:59.943
これらの出力は、実機でコンパイルして実行し、記事の期待どおりであることを確認済みです。

55
00:04:59.943 --> 00:05:09.666
タイトルは日本語のため大文字化しても見た目は変わりませんが、文字列のメソッドが型の上で使えている点が大切です。

56
00:05:09.666 --> 00:05:13.732
キーと値の型が連動する便利さを感じてください。

57
00:05:13.732 --> 00:05:16.738
アズコンスタントでできないことも押さえます。

58
00:05:16.738 --> 00:05:24.251
これはタイプスクリプトの型の仕組みであり、ジャバスクリプト実行時にオブジェクトを凍結する処理は追加されません。

59
00:05:24.251 --> 00:05:31.219
画面の例では、既存の可変配列を参照するプロパティを持つオブジェクトに、アズコンスタントを付けています。

60
00:05:31.219 --> 00:05:34.634
プロパティ自体の再代入は制限されますが、参照先の配列は可変のままなので、

61
00:05:34.634 --> 00:05:38.050
要素を追加できてしまいます。

62
00:05:38.050 --> 00:05:42.148
実際に実行すると、二つの要素が表示されることを確認しました。

63
00:05:42.148 --> 00:05:46.383
外部で作った値まで再帰的に変更不可能になるわけではありません。

64
00:05:46.383 --> 00:05:53.624
実行時の変更を防ぎたい場合はオブジェクトフリーズを使いますが、通常は浅い凍結である点にも注意してください。

65
00:05:53.624 --> 00:05:55.188
もうひとつ注意です。

66
00:05:55.188 --> 00:06:03.319
オブジェクトキーズの戻り値の型は、標準ではストリングの配列であり、キーオフの型の配列とは推論されません。

67
00:06:03.319 --> 00:06:09.887
実行時のオブジェクトが、型に書かれたもの以外のプロパティを持つ可能性もあるためです。

68
00:06:09.887 --> 00:06:13.796
この食い違いを、実機でもエラーとして確認しました。

69
00:06:13.796 --> 00:06:20.989
安易な型アサーションでエラーを消す前に、その場所でキーの集合を保証できるかを確認しましょう。

70
00:06:20.989 --> 00:06:23.022
よくある疑問も整理します。

71
00:06:23.022 --> 00:06:30.059
アズコンスタントはすべての変数に付けるものではなく、固定の候補や変更しない設定で使います。

72
00:06:30.059 --> 00:06:33.968
後から更新する状態には通常の型注釈が向いています。

73
00:06:33.968 --> 00:06:40.692
また、エーピーアイの応答はアンノウンで受け取り、実行時に検証してから使うのが原則です。

74
00:06:40.692 --> 00:06:47.493
手元で試すときは、記事のファイル構成で保存し、型チェックだけを行うコマンドを実行します。

75
00:06:47.493 --> 00:06:51.976
画面のコマンドは、厳密な設定で四つの例を確認するものです。

76
00:06:51.976 --> 00:07:00.632
実行したい場合は、ノーエミットを出力先の指定へ置き換えて変換し、生成されたジャバスクリプトをノードで動かします。

77
00:07:00.632 --> 00:07:07.433
今回の動画のコード例も、この手順でコンパイルと実行を行い、記事の期待出力と照合しました。

78
00:07:07.433 --> 00:07:12.689
なお、ファイルを直接指定するコマンドでは設定ファイルは読まれません。

79
00:07:12.689 --> 00:07:19.026
プロジェクト全体を普段の設定で確認したい場合は、設定のある場所で実行してください。

80
00:07:19.026 --> 00:07:23.200
小さな例に切り分けて確かめる習慣が、理解への近道です。

81
00:07:23.200 --> 00:07:24.023
まとめです。

82
00:07:24.023 --> 00:07:31.707
キーオフは型からキーの型を、タイプオブは値から型を取り出す演算子で、組み合わせると定数のキーも値も型にできます。

83
00:07:31.707 --> 00:07:35.755
アズコンスタントでリテラル型を保持すれば、状態名とラベルのように同時に変わる情報を、

84
00:07:35.755 --> 00:07:39.802
ひとつの定義から一元管理できます。

85
00:07:39.802 --> 00:07:44.879
配列なら角括弧ナンバー、取得関数ならジェネリクスとの組み合わせが効きます。

86
00:07:44.879 --> 00:07:50.505
一方で、読み取り専用は型だけの制限であり、実行時の凍結や入力検証とは役割が別です。

87
00:07:50.505 --> 00:07:58.737
まずは自分のコードで、値と型を二重に管理している箇所をひとつ見つけ、定数からの導出に置き換えることから始めてみましょう。

88
00:07:58.737 --> 00:07:59.972
お疲れさまでした。