WEBVTT

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

2
00:00:00.969 --> 00:00:05.975
今回のテーマは、タイプスクリプトのテンプレートリテラル型です。

3
00:00:05.975 --> 00:00:12.595
これは、文字列のリテラルを組み合わせて、許可する文字列の集合を型で表す仕組みです。

4
00:00:12.595 --> 00:00:18.005
言語とページ名からアクセスパスを作ったり、項目の名前からイベント名を作ったりする場面で、

5
00:00:18.005 --> 00:00:23.414
文字列の書き間違いを早い段階で見つけられます。

6
00:00:23.414 --> 00:00:32.941
この動画では、基本の組み合わせ、定数から型を作る方法、外部入力の検証、そしてイベントハンドラーの型までを順に学びます。

7
00:00:32.941 --> 00:00:38.109
前回までのキーオフやアズコンスタントの知識を一歩進めた内容です。

8
00:00:38.109 --> 00:00:45.052
文字列をただのストリングとして扱うのではなく、形まで決めてしまう発想に触れていきます。

9
00:00:45.052 --> 00:00:46.118
まず基本です。

10
00:00:46.118 --> 00:00:52.364
ジャバスクリプトでは、バッククォートとドル記号付きの波括弧で文字列を組み立てます。

11
00:00:52.364 --> 00:00:59.523
タイプスクリプトでは、似た書き方を型の位置に書くと、文字列リテラル型同士を組み合わせられます。

12
00:00:59.523 --> 00:01:06.683
画面では、言語の候補が二つ、ページ名の候補が二つあり、その組み合わせでパスの型を作っています。

13
00:01:06.683 --> 00:01:10.034
結果は四通りの文字列だけを許す型になります。

14
00:01:10.034 --> 00:01:15.061
定義していない設定ページへのパスを代入すると、型エラーになります。

15
00:01:15.061 --> 00:01:21.916
ここで作っているのはあくまで型で、実行時に文字列の配列が自動で生まれるわけではありません。

16
00:01:21.916 --> 00:01:27.704
四通りという小さな集合だからこそ、間違った文字列が紛れ込む余地をなくせます。

17
00:01:27.704 --> 00:01:34.438
値と型を別々に手書きすると、候補を追加したときに片方だけ直し忘れる事故が起きます。

18
00:01:34.438 --> 00:01:40.351
そこで、候補の配列をアズコンスタントで固定し、そこから型を取り出します。

19
00:01:40.351 --> 00:01:47.578
タイプオブで配列の型を取得し、角括弧のナンバーで要素の型を抜き出す書き方がポイントです。

20
00:01:47.578 --> 00:01:52.341
この形なら、候補の置き場は配列の定義一か所だけになります。

21
00:01:52.341 --> 00:01:56.447
候補を増やせば、組み合わせの型も自動で広がります。

22
00:01:56.447 --> 00:02:01.868
型と実行時に使うデータを、同じ出発点から作るのがこの節の狙いです。

23
00:02:01.868 --> 00:02:07.452
前回のキーオフやタイプオブの知識が、ここで実践的な形でつながります。

24
00:02:07.452 --> 00:02:11.730
次に、パスを作る関数と、検証に使う集合を用意します。

25
00:02:11.730 --> 00:02:16.748
生成関数の引数と戻り値の両方に型を付けることで、呼び出し側の渡し間違いと、

26
00:02:16.748 --> 00:02:21.765
関数の中での組み立て間違いの両方を検出できます。

27
00:02:21.765 --> 00:02:27.524
許可済みパスの集合は、候補の配列から実際に文字列を組み立てて作ります。

28
00:02:27.524 --> 00:02:32.953
候補を増やせば、型だけでなく検証用のデータにも自動で反映されます。

29
00:02:32.953 --> 00:02:42.824
判定関数の戻り値に付けた、値がその型であるという宣言は型述語と呼ばれ、真になった分岐でその型として扱えるようになります。

30
00:02:42.824 --> 00:02:51.544
検証の正しさまでコンパイラーが証明してくれるわけではないので、実際の動作をテストで確かめる姿勢も大切です。

31
00:02:51.544 --> 00:02:52.833
大切な注意です。

32
00:02:52.833 --> 00:02:59.924
型を定義しても、フォームの入力やエーピーアイの応答が自動で検証されるわけではありません。

33
00:02:59.924 --> 00:03:06.047
外部から来た値は、まずアンノウンとして受け取り、条件を確認してから使います。

34
00:03:06.047 --> 00:03:09.995
画面の例では、許可済み集合と完全一致した値だけを通し、それ以外は使用できないパスです、

35
00:03:09.995 --> 00:03:13.943
と返します。

36
00:03:13.943 --> 00:03:20.067
実際に、正しいパスは移動先として表示され、未定義のパターンは拒否されました。

37
00:03:20.067 --> 00:03:24.095
末尾にスラッシュが付いた文字列などは一致しません。

38
00:03:24.095 --> 00:03:29.574
アズで型を付けるだけでは検証にならない点も、合わせて覚えてください。

39
00:03:29.574 --> 00:03:37.470
今回の判定は完全一致なので、末尾にスラッシュが付いた値や、クエリ文字列が付いた値は受け付けません。

40
00:03:37.470 --> 00:03:43.916
ユーアールエル全体を扱うときは、仕様に合わせてパスの取り出し方を決めてください。

41
00:03:43.916 --> 00:03:47.302
応用として、項目名からイベント名を作ります。

42
00:03:47.302 --> 00:03:51.997
記事のタイトルが変わったらタイトルチェンジド、閲覧数が変わったらビューズチェンジドを呼ぶ、

43
00:03:51.997 --> 00:03:56.692
という命名規則を型で表す例です。

44
00:03:56.692 --> 00:04:00.693
仕組みは、マップ型とキーの作り替えの組み合わせです。

45
00:04:00.693 --> 00:04:08.082
キーオフで元の型のキーを順に扱い、アズの後ろのテンプレートでキー名の末尾にチェンジドを付けます。

46
00:04:08.082 --> 00:04:13.315
アンドストリングは、文字列のキーだけを対象にするための絞り込みです。

47
00:04:13.315 --> 00:04:20.857
値の型は元の項目と対応付けて取り出すため、イベント名と、そこで扱う値の型を同じ元の型から作れます。

48
00:04:20.857 --> 00:04:27.168
ハンドラーを省略できる印も付いているため、必要なイベントだけを選んで実装できます。

49
00:04:27.168 --> 00:04:33.299
作った型でハンドラーの集まりを定義すると、各ハンドラーの引数の型が自動で決まります。

50
00:04:33.299 --> 00:04:40.306
タイトル用は文字列なので大文字化のメソッドが使え、閲覧数用は数値なので数値のメソッドが使えます。

51
00:04:40.306 --> 00:04:45.999
実際に呼び出すと、タイトルは大文字で表示され、閲覧数は百二十と表示されました。

52
00:04:45.999 --> 00:04:52.130
ハンドラーは省略可能にしているため、呼び出しにはクエスチョン付きのドットを使います。

53
00:04:52.130 --> 00:04:56.072
数値用のハンドラーへ文字列を渡すと型エラーになります。

54
00:04:56.072 --> 00:05:01.327
なお、変更の検知やイベントの配信そのものは、アプリ側で用意する処理です。

55
00:05:01.327 --> 00:05:08.188
イベント名の規則と値の型が連動するので、項目を増やしたときもハンドラーの形で迷わずに済みます。

56
00:05:08.188 --> 00:05:11.579
文字の形を変える組み込みの型も用意されています。

57
00:05:11.579 --> 00:05:18.078
アッパーケースは文字列型をすべて大文字にし、キャピタライズは先頭の文字だけを大文字にします。

58
00:05:18.078 --> 00:05:24.011
これらをテンプレートと組み合わせると、環境変数のキーのような命名規則も型で表せます。

59
00:05:24.011 --> 00:05:28.179
画面では、セクション名から大文字のキーと、ゲットで始まる名前の型を作り、

60
00:05:28.179 --> 00:05:32.347
正しい文字列が代入できることを確認しています。

61
00:05:32.347 --> 00:05:37.857
ただし、これらは型の世界の操作で、実行時に文字列を変換する処理ではありません。

62
00:05:37.857 --> 00:05:41.106
利用者向けの表示変換とは用途を分けてください。

63
00:05:41.106 --> 00:05:46.616
小文字化や、先頭だけを小文字化する型もあり、合わせて四種類が用意されています。

64
00:05:46.616 --> 00:05:49.038
使いどころの線引きも大切です。

65
00:05:49.038 --> 00:05:54.366
ユニオンを複数か所に埋め込むと、組み合わせの数は掛け算で増えます。

66
00:05:54.366 --> 00:05:58.321
たとえば十の言語、二十のページ、五つの表示モードをすべて組み合わせると、

67
00:05:58.321 --> 00:06:02.277
最大で千通りにもなります。

68
00:06:02.277 --> 00:06:08.170
候補が少なく、仕様として固定されている場合は便利ですが、大量のアイディーや自由入力まで文字列のリテラル型で表そうとすると、

69
00:06:08.170 --> 00:06:14.063
型が大きくなりすぎます。

70
00:06:14.063 --> 00:06:20.360
公式の案内でも、大きな文字列の集合は事前の生成を検討するよう勧められています。

71
00:06:20.360 --> 00:06:24.396
型で表す範囲は、見直しやすさも含めて決めましょう。

72
00:06:24.396 --> 00:06:29.724
自由入力の形式や範囲の確認は、実行時の検証に任せるのが現実的です。

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

74
00:06:36.601 --> 00:06:43.635
実行したい場合は、出力先を指定して変換し、生成されたジャバスクリプトをノードで動かします。

75
00:06:43.635 --> 00:06:45.666
よくある疑問も整理します。

76
00:06:45.666 --> 00:06:53.950
テンプレートリテラル型と正規表現は別物で、前者はコンパイル時の検査、後者は実行時に文字列を調べる道具です。

77
00:06:53.950 --> 00:07:00.984
また、キーの作り替えに使うアズは、値を別の型として扱う型アサーションとは役割が異なります。

78
00:07:00.984 --> 00:07:05.360
疑問が残ったら、短い例に切り出して確認するのが近道です。

79
00:07:05.360 --> 00:07:10.596
ファイルを直接指定するコマンドでは設定ファイルは読まれないため、プロジェクト全体で確認したい場合は、

80
00:07:10.596 --> 00:07:15.832
設定のある場所で実行してください。

81
00:07:15.832 --> 00:07:16.845
まとめです。

82
00:07:16.845 --> 00:07:25.797
テンプレートリテラル型は、文字列リテラルの組み合わせを型で表し、許可する文字列だけを受け付ける仕組みです。

83
00:07:25.797 --> 00:07:33.735
候補は定数から一元管理し、型と検証用のデータを同じ出発点から作ると、追加や変更に強くなります。

84
00:07:33.735 --> 00:07:38.633
項目名からイベント名を作るように、命名規則も型にできます。

85
00:07:38.633 --> 00:07:46.233
一方で、外部入力の検証は実行時の処理が担い、候補が増えすぎる使い方も避ける必要があります。

86
00:07:46.233 --> 00:07:52.314
イベント名や設定キーのように、決まった文字列から使い始めてみてください。

87
00:07:52.314 --> 00:07:53.834
お疲れさまでした。

88
00:07:53.834 --> 00:08:01.772
まずは自分のコードの中で、書き間違いが起きやすい文字列を一つ見つけることから始めてみましょう。