WEBVTT

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

2
00:00:01.151 --> 00:00:05.179
タイプスクリプト入門、第三回は基本型です。

3
00:00:05.179 --> 00:00:07.864
前回は環境構築を終えました。

4
00:00:07.864 --> 00:00:15.441
今回は、文字列、数値、真偽値といった基本の型を一覧で押さえ、型推論、配列とタプル、

5
00:00:15.441 --> 00:00:23.018
ヌルとアンディファインド、アンノウンとエニー、ボイドとネバーを順に学びます。

6
00:00:23.018 --> 00:00:28.964
型とは、値の扱い方をコンパイルの時点で確認するための情報です。

7
00:00:28.964 --> 00:00:35.486
文字列に数値専用の操作をするような間違いを、実行前に見つけられます。

8
00:00:35.486 --> 00:00:42.199
なお、型チェックは通信障害や不正な外部入力まで防ぐものではありません。

9
00:00:42.199 --> 00:00:45.652
その境界も意識しながら進めましょう。

10
00:00:45.652 --> 00:00:49.087
まず、型注釈と型推論の使い分けです。

11
00:00:49.087 --> 00:00:56.339
変数に初期値を入れて宣言すると、タイプスクリプトはその値から型を推測します。

12
00:00:56.339 --> 00:00:58.056
これが型推論です。

13
00:00:58.056 --> 00:01:07.217
たとえば文字列で初期化した変数はストリング型と推論され、後から数値を代入するとエラーになります。

14
00:01:07.217 --> 00:01:11.415
一方、コロンと型名を書く書き方が型注釈です。

15
00:01:11.415 --> 00:01:18.094
閲覧数を表す変数にナンバー型、公開フラグにブーリアン型を明示できます。

16
00:01:18.094 --> 00:01:25.919
コンスタントで宣言した文字列は、特定の文字列だけを表すリテラル型として扱われます。

17
00:01:25.919 --> 00:01:36.224
通常は小文字のストリング、ナンバー、ブーリアンを使い、大文字で始まるラッパー型と混同しないようにしましょう。

18
00:01:36.224 --> 00:01:38.733
基本型の注意点を押さえます。

19
00:01:38.733 --> 00:01:46.800
ナンバー型には、整数と小数のほかに、ナンやインフィニティと呼ばれる特殊な数値も含まれます。

20
00:01:46.800 --> 00:01:54.866
正の整数だけを受け付けたい場合は、ナンバー・イズ・インテジャーなどで追加の検証が必要です。

21
00:01:54.866 --> 00:01:59.706
ブーリアン型の値はトゥルーかフォールスの二つだけです。

22
00:01:59.706 --> 00:02:06.696
ただし、ジャバスクリプトの条件式では、空文字やゼロなども偽として評価されます。

23
00:02:06.696 --> 00:02:11.894
型の違いと、真偽への変換は別の話として分けて考えましょう。

24
00:02:11.894 --> 00:02:19.064
また、文字列の長さを数えるレンゲスは、見た目の文字数と一致しない場合があります。

25
00:02:19.064 --> 00:02:26.772
絵文字などではずれが生じるため、画面の入力制限では要件に合った数え方を選んでください。

26
00:02:26.772 --> 00:02:29.064
次は、文字列、配列、タプルです。

27
00:02:29.064 --> 00:02:38.660
ストリング型の値には、長さを調べるレンゲスや、一部を切り取るスライス、大文字に変換するトゥー・アッパー・ケースといった操作があります。

28
00:02:38.660 --> 00:02:43.959
ストリングの後ろに角括弧を付けた書き方は、文字列を要素に持つ配列の型です。

29
00:02:43.959 --> 00:02:47.826
アレイ・ストリングという書き方でも同じ意味になります。

30
00:02:47.826 --> 00:02:54.701
タプルは、位置ごとの型を決める書き方で、数値二個の組み合わせ、のように要素の型と個数を表します。

31
00:02:54.701 --> 00:02:59.570
先頭にリードオンリーを付けると、型チェックの上で変更を制限できます。

32
00:02:59.570 --> 00:03:03.580
ただし、これは実行時に配列を凍結する機能ではありません。

33
00:03:03.580 --> 00:03:10.312
通常の配列は空の場合もあるため、添字で取り出した値が存在するとは限らない点にも注意しましょう。

34
00:03:10.312 --> 00:03:15.741
オブジェクトの形は、タイプというキーワードで名前を付けて定義できます。

35
00:03:15.741 --> 00:03:21.325
各項目に型を指定し、クエスチョンマークを付けた項目は省略可能になります。

36
00:03:21.325 --> 00:03:26.599
省略できる項目を読むときは、値がない可能性を考えなければなりません。

37
00:03:26.599 --> 00:03:31.020
ステータスのように、ドラフトかパブリッシュドのどちらか、と候補を絞りたい場合は、

38
00:03:31.020 --> 00:03:35.441
縦棒でつなぐユニオン型が便利です。

39
00:03:35.441 --> 00:03:39.939
単なるストリング型よりも、許可する状態を具体的に表せます。

40
00:03:39.939 --> 00:03:48.161
なお、タイプによる型定義は名前を付ける仕組みであり、実行時にクラスやオブジェクトを作るものではありません。

41
00:03:48.161 --> 00:03:52.194
オブジェクト型は、インターフェースでも定義できます。

42
00:03:52.194 --> 00:03:53.900
詳しくは次回扱います。

43
00:03:53.900 --> 00:03:57.899
ヌルとアンディファインドは、値がない状態を表します。

44
00:03:57.899 --> 00:04:05.897
ストリクト・ヌル・チェックスが有効な場合、通常のストリング型へヌルやアンディファインドは代入できません。

45
00:04:05.897 --> 00:04:12.511
欠けた値を表したいときは、ストリング・オア・ヌルのようにユニオン型へ含めて明示します。

46
00:04:12.511 --> 00:04:17.586
値がない場合の代替には、クエスチョンを二つ重ねた演算子を使います。

47
00:04:17.586 --> 00:04:22.969
これは、左側がヌルかアンディファインドのときだけ右側を使う演算子です。

48
00:04:22.969 --> 00:04:27.737
よく似た縦棒二つの演算子では、ゼロも置き換えられてしまいます。

49
00:04:27.737 --> 00:04:33.428
回数の指定のように、ゼロが意味を持つ場面では、この違いが結果を左右します。

50
00:04:33.428 --> 00:04:39.888
省略可能な引数も、関数の中ではアンディファインドの可能性を持つ点に注意してください。

51
00:04:39.888 --> 00:04:46.664
エニーとアンノウンは、どちらもさまざまな値を受け取れる型ですが、安全さが大きく違います。

52
00:04:46.664 --> 00:04:50.668
エニーは、多くの型チェックを回避できる特別な型です。

53
00:04:50.668 --> 00:04:57.290
存在しないメソッドを呼んでもコンパイラが止めないため、実行時に失敗することがあります。

54
00:04:57.290 --> 00:05:01.602
一方、アンノウンは、値を代入すること自体は自由ですが、型を確認しない限り、

55
00:05:01.602 --> 00:05:05.914
プロパティやメソッドを利用できません。

56
00:05:05.914 --> 00:05:12.998
外部から届いた入力など、まだ正体が分からない値を受け取る場面では、アンノウンが向いています。

57
00:05:12.998 --> 00:05:19.466
なお、エーエスで型を言い換える型アサーションだけでは、値の検証も変換も行われません。

58
00:05:19.466 --> 00:05:23.624
分からない値は、アンノウンで受けて、確認してから使う。

59
00:05:23.624 --> 00:05:25.780
この流れを習慣にしましょう。

60
00:05:25.780 --> 00:05:28.536
アンノウンの実例を見てみましょう。

61
00:05:28.536 --> 00:05:32.588
表示用の関数では、引数をアンノウンで受け取ります。

62
00:05:32.588 --> 00:05:37.046
まず、タイプオブでストリングかどうかを確認し、文字列と分かった分岐の中だけで、

63
00:05:37.046 --> 00:05:41.504
空白を取り除くトリムを呼びます。

64
00:05:41.504 --> 00:05:50.257
次に、ナンバーかどうかを確認し、数値と分かった場合は小数点以下の桁をそろえるトゥー・フィックスドを使います。

65
00:05:50.257 --> 00:05:55.769
どちらでもない値は、表示できない値です、という安全な結果を返します。

66
00:05:55.769 --> 00:06:00.470
実際に、文字列を渡せば前後の空白が取れ、数値を渡せば小数一桁で表示され、

67
00:06:00.470 --> 00:06:05.171
ヌルを渡せば表示できない値です、となります。

68
00:06:05.171 --> 00:06:10.520
このように、確認してから使うことで、不正な操作を実行前に防げます。

69
00:06:10.520 --> 00:06:13.768
ボイドとネバーも混同しやすい組み合わせです。

70
00:06:13.768 --> 00:06:18.197
ボイドは、主に呼び出し側が戻り値を利用しないことを表します。

71
00:06:18.197 --> 00:06:22.773
メッセージを表示するだけの関数は、ボイドを指定する典型例です。

72
00:06:22.773 --> 00:06:25.430
一方、ネバーは値が存在しない型です。

73
00:06:25.430 --> 00:06:30.892
常に例外を投げる関数や、型の絞り込みで候補が残らなくなった場所に現れます。

74
00:06:30.892 --> 00:06:35.764
戻り値をネバーにした関数で値を返そうとすると、型エラーになります。

75
00:06:35.764 --> 00:06:41.078
ただし、型注釈はジャバスクリプトの制御の流れを変えるものではありません。

76
00:06:41.078 --> 00:06:47.722
ネバーと書いたから返却が実行されなくなる、という動作にはならない点も押さえておきましょう。

77
00:06:47.722 --> 00:06:54.660
例外を受け取るキャッチ側では、エラーをアンノウンで受けて、種類を確認してから扱うのが安全です。

78
00:06:54.660 --> 00:06:58.162
学んだ例は、コンパイルと実行で確かめましょう。

79
00:06:58.162 --> 00:07:02.882
各ファイルの先頭にあるエクスポートの記述は、そのファイルを独立したモジュールとして扱うための指定で、

80
00:07:02.882 --> 00:07:07.602
変数名の衝突を避けます。

81
00:07:07.602 --> 00:07:15.519
ファイルを直接指定してコンパイルするコマンドでは、ティーエス・コンフィグ・ジェイソンは読み込まれません。

82
00:07:15.519 --> 00:07:20.696
プロジェクトの設定を使う場合は、プロジェクト指定で実行してください。

83
00:07:20.696 --> 00:07:27.091
型チェックが通ることに加えて、期待する値が実行時にも返ることを確認するのが大切です。

84
00:07:27.091 --> 00:07:33.485
使い分けの目安として、初期値が明確なローカル変数は推論に任せ、関数の入力や公開するデータの形など、

85
00:07:33.485 --> 00:07:39.880
利用側と共有したい境界には型を明示すると、意図が伝わりやすくなります。

86
00:07:39.880 --> 00:07:40.835
まとめです。

87
00:07:40.835 --> 00:07:45.451
基本型は小文字のストリング、ナンバー、ブーリアンを使い、値から分かる型は推論に任せ、

88
00:07:45.451 --> 00:07:50.066
境界には型注釈で意図を示します。

89
00:07:50.066 --> 00:07:56.592
配列は要素の型を、タプルは位置ごとの型を表し、ユニオン型で候補を具体的に絞れます。

90
00:07:56.592 --> 00:08:03.913
ヌルとアンディファインドはユニオンで明示し、ゼロを大切にする場面では専用の演算子を使います。

91
00:08:03.913 --> 00:08:11.075
分からない値はエニーではなくアンノウンで受け取り、タイプオブなどで確認してから操作します。

92
00:08:11.075 --> 00:08:14.099
ボイドとネバーの違いも区別できました。

93
00:08:14.099 --> 00:08:21.580
次回は第四回として、インターフェースとタイプによる、オブジェクトの型定義と使い分けを学びます。

94
00:08:21.580 --> 00:08:23.012
お疲れさまでした。