WEBVTT

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

2
00:00:00.893 --> 00:00:04.616
今回のテーマは、タイプスクリプトのクラス入門です。

3
00:00:04.616 --> 00:00:10.275
クラスは、データである状態と、その状態を使う操作を一つにまとめる仕組みです。

4
00:00:10.275 --> 00:00:17.496
中心になるのは、初期化を行うコンストラクタ、利用範囲を決めるアクセス修飾子、

5
00:00:17.496 --> 00:00:24.718
読み取り専用を表すリードオンリー、クラス自身が持つスタティック、そして値の取得と更新を制御するゲッターとセッターです。

6
00:00:24.718 --> 00:00:32.313
ジャバスクリプトのクラスを土台に、プロパティやメソッドへ型を付けられるのがタイプスクリプトの特徴です。

7
00:00:32.313 --> 00:00:37.673
各節は独立したファイルの例で、一つずつ実行しながら確認していきましょう。

8
00:00:37.673 --> 00:00:41.843
継承については前回のテーマでしたが、今回はその土台になる、クラスそのものの定義と、

9
00:00:41.843 --> 00:00:46.012
状態をどう守るかに集中します。

10
00:00:46.012 --> 00:00:47.898
まずコンストラクタです。

11
00:00:47.898 --> 00:00:52.140
パーソンクラスは、文字列の名前と数値の年齢を持ちます。

12
00:00:52.140 --> 00:00:58.347
コンストラクタは、ニュー・パーソンと書いてインスタンスを作るときに呼ばれ、

13
00:00:58.347 --> 00:01:04.554
渡された値をディス・ドット・名前、ディス・ドット・年齢へ代入して初期状態を作ります。

14
00:01:04.554 --> 00:01:08.639
自己紹介メソッドは、その二つを組み合わせて返します。

15
00:01:08.639 --> 00:01:12.882
葵・30と、蓮・25で実行すると、葵スラッシュ30歳、蓮スラッシュ25歳と表示され、

16
00:01:12.882 --> 00:01:17.125
記事の期待どおりでした。

17
00:01:17.125 --> 00:01:25.924
ストリクトに含まれる設定では、必須プロパティを初期化しないとエラー・ティーエス2564になることも確認済みです。

18
00:01:25.924 --> 00:01:31.424
後で代入するつもりでも、宣言のままでは診断される点に注意してください。

19
00:01:31.424 --> 00:01:33.188
次にアクセス修飾子です。

20
00:01:33.188 --> 00:01:40.095
パブリックは、外部のコードから利用できる範囲で、修飾子を省略したメンバーも通常はこの扱いです。

21
00:01:40.095 --> 00:01:46.562
プライベートは、宣言したクラスの中でだけ利用でき、継承先から直接読むことも制限されます。

22
00:01:46.562 --> 00:01:52.147
プロテクテッドは、宣言したクラスと、その継承先から利用できる中間の範囲です。

23
00:01:52.147 --> 00:01:57.585
大切なのは、見せる範囲を何となくではなく、値の役割に合わせて選ぶことです。

24
00:01:57.585 --> 00:02:02.876
外から自由に書き換えられて困る値は隠し、変更はメソッド経由にまとめます。

25
00:02:02.876 --> 00:02:05.375
具体例を次の節で見ていきましょう。

26
00:02:05.375 --> 00:02:10.960
迷ったときは、まず狭い範囲から始めて、必要になったら広げる考え方が安全です。

27
00:02:10.960 --> 00:02:15.516
一度外へ公開したメンバーは、後から隠し直すのが難しいからです。

28
00:02:15.516 --> 00:02:18.232
プライベートの具体例がカウンターです。

29
00:02:18.232 --> 00:02:21.949
内部の値はプライベートにし、外からは直接触れません。

30
00:02:21.949 --> 00:02:28.239
コンストラクタでは初期値を検証し、ゼロ以上の安全な整数でなければレンジエラーを投げます。

31
00:02:28.239 --> 00:02:33.672
値を増やすインクリメントと、現在値を返すゲットバリューだけを公開しています。

32
00:02:33.672 --> 00:02:38.676
2で作って一度増やし、値を取得すると3と表示され、記事と一致しました。

33
00:02:38.676 --> 00:02:46.967
外部からカウンター・ドット・バリューと直接読もうとすると、エラー・ティーエス2341になることも実機で確認しました。

34
00:02:46.967 --> 00:02:51.256
記事の完全版では、上限に達した場合のチェックも入っています。

35
00:02:51.256 --> 00:02:54.592
プライベートには、もう一つの形があります。

36
00:02:54.592 --> 00:03:02.851
シャープ付きフィールドはジャバスクリプト側の仕組みで、実行時にもクラス外からの直接アクセスを制限します。

37
00:03:02.851 --> 00:03:08.489
トグルクラスでは、シャープ・イネーブルドという真偽値を内部に持ち、スイッチメソッドで反転させ、

38
00:03:08.489 --> 00:03:14.128
有効かどうかを返すメソッドだけを公開しています。

39
00:03:14.128 --> 00:03:19.370
一度切り替えて実行すると、トゥルーと表示され、記事と一致しました。

40
00:03:19.370 --> 00:03:25.564
タイプスクリプトのプライベートとシャープ付きは、同じ記法の別名ではありません。

41
00:03:25.564 --> 00:03:33.188
どちらも、クライアントへ送った秘密情報そのものを安全に隠す用途には使えない点も押さえてください。

42
00:03:33.188 --> 00:03:39.110
スタティックは、個々のインスタンスではなく、クラス自身が持つメンバーです。

43
00:03:39.110 --> 00:03:44.792
アーティクルクラスでは、スタティックな作成数をゼロで用意し、コンストラクタが呼ばれるたびに、

44
00:03:44.792 --> 00:03:50.474
アーティクル・ドット・作成数として一つ増やします。

45
00:03:50.474 --> 00:03:56.396
二つの記事を作ってクラス名で参照すると、2と表示され、記事と一致しました。

46
00:03:56.396 --> 00:04:01.677
インスタンス経由ではなく、クラス名でアクセスするのがポイントです。

47
00:04:01.677 --> 00:04:10.320
なお、これはこのプログラムの中で作った数を数える例であり、サーバーをまたいで残る永続的な件数ではありません。

48
00:04:10.320 --> 00:04:14.555
リードオンリーは、型チェック上で読み取り専用にする指定です。

49
00:04:14.555 --> 00:04:19.426
アーティクルのアイディーはリードオンリーなので、作った後に再代入しようとすると、

50
00:04:19.426 --> 00:04:24.296
エラー・ティーエス2540になることを実機で確認しました。

51
00:04:24.296 --> 00:04:29.379
一方、タイトルには付いていないため、型の基本を学ぶ、へ書き換えられます。

52
00:04:29.379 --> 00:04:34.037
コンストラクタの引数にパブリックやリードオンリーを付ける書き方は、引数プロパティと呼ばれ、

53
00:04:34.037 --> 00:04:38.696
プロパティの宣言と初期化を一度に書けます。

54
00:04:38.696 --> 00:04:44.908
ただしリードオンリーを付けても、実行時にオブジェクト全体が凍結されるわけではありません。

55
00:04:44.908 --> 00:04:51.754
ゲッターとセッターは、プロパティを読むときと代入するときに動く処理です。

56
00:04:51.754 --> 00:05:01.072
ディスプレイネームクラスでは、内部にプライベートな保存用の値を持ち、外に見せる名前はバリューです。

57
00:05:01.072 --> 00:05:10.009
読み取りはゲッター、書き込みはセッターが担い、どちらも前後の空白を取り除く共通処理を通します。

58
00:05:10.009 --> 00:05:14.193
空白付きの葵で作ると、葵とだけ表示されます。

59
00:05:14.193 --> 00:05:19.137
蓮へ書き換えても同様に整えられ、記事と一致しました。

60
00:05:19.137 --> 00:05:25.603
空の文字列を設定しようとすると例外が発生し、元の値は更新されません。

61
00:05:25.603 --> 00:05:31.688
初期値も同じ検証を通すため、作った直後から有効な名前を保てます。

62
00:05:31.688 --> 00:05:32.733
実行方法です。

63
00:05:32.733 --> 00:05:38.105
記事の例は、ストリクト、ターゲット・イーエス2020、モジュール・ノードネクストを指定してコンパイルし、

64
00:05:38.105 --> 00:05:43.478
生成されたジャバスクリプトを実行します。

65
00:05:43.478 --> 00:05:47.358
最初の例なら、クラスパーソンのファイルを指定します。

66
00:05:47.358 --> 00:05:54.372
他の節もファイル名を変えて同じように試せますが、例同士を一つのファイルへ結合しないでください。

67
00:05:54.372 --> 00:06:00.938
今回の検証でも、記事の全五ファイルがこの設定でコンパイルでき、出力がすべて一致しました。

68
00:06:00.938 --> 00:06:05.863
プロパティは状態、メソッドはその状態を使った処理、アクセス修飾子は型チェック時の利用範囲、

69
00:06:05.863 --> 00:06:10.788
と分けて読むとクラスが追いやすくなります。

70
00:06:10.788 --> 00:06:15.132
設計で大切なのは、不正な状態を作らない入口を用意することです。

71
00:06:15.132 --> 00:06:19.616
ナンバーという型だけでは、負の在庫や無限大までは禁止できません。

72
00:06:19.616 --> 00:06:28.023
コンストラクタと更新メソッドで、値の範囲や状態の移り方を確認し、例外を返した後も状態が妥当なままかをテストしてください。

73
00:06:28.023 --> 00:06:32.787
カウンターの初期値チェックや、表示名の空文字チェックがその実例です。

74
00:06:32.787 --> 00:06:36.990
もう一つ、型のアクセス制限とデータの秘匿は区別してください。

75
00:06:36.990 --> 00:06:42.595
プライベートを付けても、クライアントへ送った情報が秘密になるわけではありません。

76
00:06:42.595 --> 00:06:46.939
本当に守るべき情報は、サーバー側で管理する判断が別に必要です。

77
00:06:46.939 --> 00:06:53.525
また、セッターのように後から値を変える入口がある場合は、その入口でも同じ検証を通してください。

78
00:06:53.525 --> 00:06:57.448
作るときだけ厳しくても、更新で壊れては意味がありません。

79
00:06:57.448 --> 00:06:58.359
まとめです。

80
00:06:58.359 --> 00:07:05.947
コンストラクタで初期状態を確実に作り、パブリック、プライベート、プロテクテッドで利用範囲を決めます。

81
00:07:05.947 --> 00:07:11.410
クラス全体で共有する値にはスタティック、変えたくない値にはリードオンリー、

82
00:07:11.410 --> 00:07:16.873
読み書きに処理を挟みたいときはゲッターとセッター、という使い分けです。

83
00:07:16.873 --> 00:07:21.806
練習として、在庫数を持つ小さなクラスを作り、負の数を防ぐ検証、増減するメソッド、

84
00:07:21.806 --> 00:07:26.738
読み取り専用の商品アイディーを付けてみてください。

85
00:07:26.738 --> 00:07:31.898
状態と操作をまとめ、入口で不正な状態を防ぐことが、クラスの基本です。

86
00:07:31.898 --> 00:07:33.264
お疲れさまでした。

87
00:07:33.264 --> 00:07:40.700
作ったクラスでは、正常な操作だけでなく、禁止したい操作が型エラーや例外になるかも確かめてください。