WEBVTT

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

2
00:00:01.031 --> 00:00:04.810
ジャバスクリプト入門、実践連載の第六回です。

3
00:00:04.810 --> 00:00:07.044
今回のテーマはクラスです。

4
00:00:07.044 --> 00:00:13.400
クラスは、データと、そのデータを扱う操作をひとまとめに定義する仕組みです。

5
00:00:13.400 --> 00:00:18.554
例として、商品の在庫数を管理する小さなプログラムを作ります。

6
00:00:18.554 --> 00:00:20.615
ポイントは四つあります。

7
00:00:20.615 --> 00:00:26.886
作る瞬間に初期化するコンストラクター、外から直接触れないプライベートな項目、

8
00:00:26.886 --> 00:00:33.157
親の機能を引き継ぐ継承、そしてメソッドの中で自分自身を指すディスです。

9
00:00:33.157 --> 00:00:40.372
在庫がマイナスになるような不正な更新を防ぎながら、読みやすいコードを目指しましょう。

10
00:00:40.372 --> 00:00:43.537
まず、クラスとインスタンスの違いを押さえます。

11
00:00:43.537 --> 00:00:44.913
クラスは設計図です。

12
00:00:44.913 --> 00:00:49.178
どんなデータを持ち、どんな操作ができるかを一度だけ定義します。

13
00:00:49.178 --> 00:00:55.370
その設計図からニューで作った実体がインスタンスで、インスタンスごとに別々の状態を持ちます。

14
00:00:55.370 --> 00:01:00.598
例えばノートという商品とペンという商品を作れば、在庫数はそれぞれ独立します。

15
00:01:00.598 --> 00:01:04.038
一方の在庫を減らしても、もう一方には影響しません。

16
00:01:04.038 --> 00:01:10.505
なお、ジャバスクリプトのクラスは、もともとあるプロトタイプという仕組みの上に成り立っています。

17
00:01:10.505 --> 00:01:13.669
まずは設計図と実体、というイメージで十分です。

18
00:01:13.669 --> 00:01:17.591
データをばらばらに管理していた頃と比べると、関連する値と操作が一か所に集まるため、

19
00:01:17.591 --> 00:01:21.512
変更の場所も探しやすくなります。

20
00:01:21.512 --> 00:01:26.794
コンストラクターは、ニューでインスタンスを作る瞬間に自動で呼ばれる特別なメソッドです。

21
00:01:26.794 --> 00:01:30.479
ここで商品名と初期の数量を受け取り、自分の項目へ保存します。

22
00:01:30.479 --> 00:01:34.901
この例では、名前が空の文字列ならタイプエラーを投げて作成自体を止めます。

23
00:01:34.901 --> 00:01:38.463
数量についても、ゼロ以上の安全な整数かどうかを確かめます。

24
00:01:38.463 --> 00:01:40.920
作る時点でルールを守らせるのが大切です。

25
00:01:40.920 --> 00:01:45.833
最初から正しい状態で生まれたインスタンスは、その後の処理でも扱いやすくなります。

26
00:01:45.833 --> 00:01:49.764
引数には初期値も指定でき、数量を省略すればゼロとして扱われます。

27
00:01:49.764 --> 00:01:53.429
在庫を増やす操作がアド、減らす操作がテイクです。

28
00:01:53.429 --> 00:01:57.705
どちらも、まず渡された量が正しい数かどうかを検証します。

29
00:01:57.705 --> 00:02:06.104
テイクではさらに、今の在庫より多く減らそうとしていないかを確認し、足りなければ在庫不足としてエラーを投げます。

30
00:02:06.104 --> 00:02:10.227
大事なのは、失敗したときに在庫数が変わらないことです。

31
00:02:10.227 --> 00:02:16.030
先に計算と確認をすべて終え、問題がないと分かってから初めて値を書き換えます。

32
00:02:16.030 --> 00:02:22.291
こうしておくと、エラーが起きてもデータが壊れたまま残る、という事態を避けられます。

33
00:02:22.291 --> 00:02:26.872
操作のたびにルールを通すことが、信頼できるクラスの基本です。

34
00:02:26.872 --> 00:02:31.610
プライベートフィールドは、名前の先頭にシャープを付けて宣言する項目です。

35
00:02:31.610 --> 00:02:35.559
シャープ付きの項目は、クラスの外から直接読み書きできません。

36
00:02:35.559 --> 00:02:41.613
在庫数を変える入口はアドとテイクだけに絞られるため、検証を飛ばした不正な書き換えを防げます。

37
00:02:41.613 --> 00:02:45.825
例えば外部のコードが勝手に在庫をマイナスにすることはできません。

38
00:02:45.825 --> 00:02:47.405
ただし注意点もあります。

39
00:02:47.405 --> 00:02:54.907
プライベートはプログラムの中の操作ルールを守るための仕組みで、ブラウザーへ送った秘密情報を隠す機能ではありません。

40
00:02:54.907 --> 00:02:57.539
その役割を混同しないようにしてください。

41
00:02:57.539 --> 00:03:02.804
入口を絞ることで、コードを読む人も、どこで在庫が変わるのかを追いやすくなります。

42
00:03:02.804 --> 00:03:05.331
三つの仕組みをまとめて紹介します。

43
00:03:05.331 --> 00:03:06.966
一つ目はゲッターです。

44
00:03:06.966 --> 00:03:12.913
名前や数量を読むための窓口で、この例では書き換え用のセッターを用意していません。

45
00:03:12.913 --> 00:03:18.116
つまり外からは読めるけれど、直接代入して変えることはできない設計です。

46
00:03:18.116 --> 00:03:20.049
二つ目はスタティックです。

47
00:03:20.049 --> 00:03:24.583
数量の検証は特定の商品の状態を使わないので、クラス自体に属するメソッドにし、

48
00:03:24.583 --> 00:03:29.117
インスタンスを作らずに呼べるようにしています。

49
00:03:29.117 --> 00:03:31.347
三つ目はトゥージェイソンです。

50
00:03:31.347 --> 00:03:38.185
プライベートな項目はそのままではジェイソンに含まれないため、公開する名前と数量を明示します。

51
00:03:38.185 --> 00:03:44.280
ただしジェイソンからメソッド付きのインスタンスが自動で復活するわけではありません。

52
00:03:44.280 --> 00:03:49.632
読み取りと書き込みの窓口を分けることで、うっかりした上書きも減らせます。

53
00:03:49.632 --> 00:03:52.184
作ったクラスを実際に動かしてみます。

54
00:03:52.184 --> 00:03:55.871
ノートを五個で作り、二個取り出して、一個追加します。

55
00:03:55.871 --> 00:04:00.267
説明を表示するメソッドを呼ぶと、在庫四個という結果が返ります。

56
00:04:00.267 --> 00:04:04.805
ジェイソン化すると、名前と数量だけが公開された形で出力されます。

57
00:04:04.805 --> 00:04:07.924
次に、わざと九十九個取り出そうとしてみます。

58
00:04:07.924 --> 00:04:12.887
在庫不足のエラーが出て処理は失敗しますが、在庫は四個のまま保たれます。

59
00:04:12.887 --> 00:04:18.134
失敗しても壊れない、という前回の約束が守られていることを確認してください。

60
00:04:18.134 --> 00:04:23.948
また別の商品を作っても数量が混ざらないことも、合わせて確かめると理解が深まります。

61
00:04:23.948 --> 00:04:29.620
実行結果を一つずつ予想してから確かめると、クラスの動きが頭に入りやすくなります。

62
00:04:29.620 --> 00:04:34.070
継承は、既存のクラスを土台に新しいクラスを作る仕組みです。

63
00:04:34.070 --> 00:04:41.282
エクステンズで在庫クラスを引き継ぎ、補充が必要かどうかを判定する機能を加えたクラスを作ります。

64
00:04:41.282 --> 00:04:47.880
子クラスのコンストラクターでは、ディスを使う前に、必ずスーパーで親の初期化を呼びます。

65
00:04:47.880 --> 00:04:49.721
これが大切な決まりです。

66
00:04:49.721 --> 00:04:54.095
また、親の説明メソッドをスーパーで呼び、その結果に補充が必要という一言を付け足すことで、

67
00:04:54.095 --> 00:04:58.468
親の処理を再利用できます。

68
00:04:58.468 --> 00:05:03.378
なお子クラスから親のプライベートな在庫数へは直接触れられません。

69
00:05:03.378 --> 00:05:06.907
公開されたゲッターを通して読むのがルールです。

70
00:05:06.907 --> 00:05:13.352
インスタンスオブで確認すると、補充付き商品が在庫商品としても扱えることが分かります。

71
00:05:13.352 --> 00:05:18.264
ディスは、メソッドの中で自分自身のインスタンスを指す言葉です。

72
00:05:18.264 --> 00:05:22.701
通常、ドットの左側にあるインスタンスがディスになります。

73
00:05:22.701 --> 00:05:31.257
ところがメソッドだけを取り出して変数に入れ、後から単独で呼ぶと、ディスが失われてエラーになることがあります。

74
00:05:31.257 --> 00:05:35.853
コールバックへメソッドを渡すときに起きやすい落とし穴です。

75
00:05:35.853 --> 00:05:37.437
対策は二つあります。

76
00:05:37.437 --> 00:05:42.825
一つはアロー関数で包み、本体の中で改めてインスタンス経由で呼ぶ方法。

77
00:05:42.825 --> 00:05:47.261
もう一つはバインドでディスを固定した関数を作る方法です。

78
00:05:47.261 --> 00:05:52.332
どちらも、呼ばれる相手を明確にするための工夫だと覚えてください。

79
00:05:52.332 --> 00:05:54.316
最後に設計の考え方です。

80
00:05:54.316 --> 00:05:58.782
継承は便利ですが、使えばよいというものではありません。

81
00:05:58.782 --> 00:06:05.562
今回の補充付き商品は、在庫商品の一種として同じ操作を提供するので、関係が自然です。

82
00:06:05.562 --> 00:06:14.657
一方、単に機能を再利用したいだけの理由で無関係なクラスを継承すると、親を変更したときの影響が子へ広く及びます。

83
00:06:14.657 --> 00:06:24.745
通知方法や保存先のように差し替えたい処理は、継承ではなく、別のオブジェクトや関数を外から渡す合成という方法が向いています。

84
00:06:24.745 --> 00:06:32.187
次回のタスクキューでも、処理そのものを継承で増やさず、実行する関数を受け取る構成にします。

85
00:06:32.187 --> 00:06:35.329
関係の自然さで選ぶことがポイントです。

86
00:06:35.329 --> 00:06:41.944
迷ったら、まず小さく作って関係を見直すことが、後からの直しやすさにつながります。

87
00:06:41.944 --> 00:06:42.850
まとめです。

88
00:06:42.850 --> 00:06:48.234
今回は、クラスとインスタンス、コンストラクターでの初期化と検証、アドとテイクによる操作、

89
00:06:48.234 --> 00:06:53.619
プライベートフィールドによる保護、ゲッターとスタティックとトゥージェイソン、

90
00:06:53.619 --> 00:06:59.003
継承とスーパー、そしてディスの注意点を学びました。

91
00:06:59.003 --> 00:07:02.626
練習として、不正な値をわざと渡してみてください。

92
00:07:02.626 --> 00:07:09.571
負の数、小数、安全な整数の範囲を超える大きな数を数量に指定し、エラーになることを確かめます。

93
00:07:09.571 --> 00:07:16.515
在庫不足で失敗した後に元の数が保たれること、別の商品と数量が混ざらないことも確認しましょう。

94
00:07:16.515 --> 00:07:23.761
次回は最終回として、クラスとプロミスを組み合わせ、並列数を制御する非同期タスクキューを作ります。

95
00:07:23.761 --> 00:07:25.724
これで第六回を終わります。