WEBVTT

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

2
00:00:00.882 --> 00:00:03.967
今回はゲットプロトタイプオブを紹介します。

3
00:00:03.967 --> 00:00:10.579
これは、オブジェクトが直接つながっている継承元、つまりプロトタイプを取得するメソッドです。

4
00:00:10.579 --> 00:00:17.779
ジャバスクリプトでは、オブジェクト自身にプロパティがない場合、プロトタイプを順にたどって探します。

5
00:00:17.779 --> 00:00:21.893
書いた覚えのない値が読める理由は、この仕組みにあります。

6
00:00:21.893 --> 00:00:26.962
この動画では、書き方と引数、戻り値、共通設定を使った基本例、例外になる入力、

7
00:00:26.962 --> 00:00:32.032
そして戻り値を扱うときの注意点まで、実行結果と一緒に学びます。

8
00:00:32.032 --> 00:00:37.174
手元のオブジェクトの構造を調査する道具として使えるようになりましょう。

9
00:00:37.174 --> 00:00:40.921
プロトタイプチェーンという言葉も出てきますが、まずは直接の継承元を一段だけ見る、

10
00:00:40.921 --> 00:00:44.668
という感覚で十分です。

11
00:00:44.668 --> 00:00:46.473
まず動作環境を確認します。

12
00:00:46.473 --> 00:00:51.331
このメソッドはイーシーマスクリプト・ファイブで導入された標準機能です。

13
00:00:51.331 --> 00:00:57.578
エムディーエヌでは、二千十五年七月から主要ブラウザー間で広く利用できる機能とされています。

14
00:00:57.578 --> 00:01:02.437
現在のクローム、エッジ、ファイアーフォックス、サファリで利用できます。

15
00:01:02.437 --> 00:01:08.684
ノード・ジェイエスでも使えますが、この記事ではバージョン二十二以上を実行対象としています。

16
00:01:08.684 --> 00:01:12.293
これは対応の最小バージョンという意味ではありません。

17
00:01:12.293 --> 00:01:18.401
ドムや外部ライブラリーに依存しないため、ブラウザーとノードの両方で同じコードが動きます。

18
00:01:18.401 --> 00:01:21.872
実機でも関数として備わっていることを確認済みです。

19
00:01:21.872 --> 00:01:23.433
書き方を確認します。

20
00:01:23.433 --> 00:01:30.768
オブジェクトという名前の後にゲットプロトタイプオブと書き、カッコの中に調べたい対象を渡します。

21
00:01:30.768 --> 00:01:35.449
対象自身のメソッドとして呼ぶのではない点に注意してください。

22
00:01:35.449 --> 00:01:40.443
戻り値は、直接のプロトタイプであるオブジェクト、またはヌルです。

23
00:01:40.443 --> 00:01:45.906
継承関係の全体が配列で返るわけではなく、一度に取れるのは一段だけです。

24
00:01:45.906 --> 00:01:51.992
さらに先を調べたいときは、戻ってきたオブジェクトに対してもう一度呼び出します。

25
00:01:51.992 --> 00:01:55.581
ヌルまで到達したら、そこがチェーンの末端です。

26
00:01:55.581 --> 00:02:02.292
また、これは対象や継承元をコピーする処理ではなく、同期処理なのでアウェイトは不要です。

27
00:02:02.292 --> 00:02:04.068
記事の基本例を見ます。

28
00:02:04.068 --> 00:02:09.314
テーマがライト、ページサイズが二十という共通設定のオブジェクトを用意し、

29
00:02:09.314 --> 00:02:14.561
クリエイトでそれを継承元とする設定オブジェクトを作ります。

30
00:02:14.561 --> 00:02:19.404
設定オブジェクト自身にはオーナーというキーだけを追加します。

31
00:02:19.404 --> 00:02:26.830
ゲットプロトタイプオブで継承元を取得すると、共通設定そのものと一致し、トゥルーが返りました。

32
00:02:26.830 --> 00:02:32.642
自身が所有するキーはオーナーだけですが、テーマを読むとライトと返ります。

33
00:02:32.642 --> 00:02:35.871
これは継承元から読み取れている証拠です。

34
00:02:35.871 --> 00:02:38.938
実機でも記事の期待出力と一致しました。

35
00:02:38.938 --> 00:02:44.104
まず、直接の継承元が想定どおりかを確認するのが調査の第一歩です。

36
00:02:44.104 --> 00:02:45.530
基本例の続きです。

37
00:02:45.530 --> 00:02:49.731
設定オブジェクトのテーマにダークを代入すると、自身のプロパティが作られ、

38
00:02:49.731 --> 00:02:53.931
読み取りではその値が優先されます。

39
00:02:53.931 --> 00:02:57.734
一方、継承元のテーマはライトのまま変わりません。

40
00:02:57.734 --> 00:03:01.697
上書きは自身側に新しい値を作る動作だと分かります。

41
00:03:01.697 --> 00:03:09.463
次に、継承元に対してもう一度ゲットプロトタイプオブを呼ぶと、オブジェクト・プロトタイプが返ります。

42
00:03:09.463 --> 00:03:15.486
さらにその先を調べるとヌルになり、チェーンの末端であることが確認できました。

43
00:03:15.486 --> 00:03:19.131
実機でもすべて記事の期待出力と一致しています。

44
00:03:19.131 --> 00:03:23.252
一段ずつたどることで、値の出どころを順番に追えます。

45
00:03:23.252 --> 00:03:24.634
ほかの値でも試します。

46
00:03:24.634 --> 00:03:28.027
配列のプロトタイプはアレイ・プロトタイプと一致します。

47
00:03:28.027 --> 00:03:31.671
文字列を渡すと、通常はストリング・プロトタイプが返ります。

48
00:03:31.671 --> 00:03:34.435
数値でもナンバー・プロトタイプが返りました。

49
00:03:34.435 --> 00:03:38.205
イーシーマスクリプト二千十五以降では、文字列や数値などのプリミティブ値は、

50
00:03:38.205 --> 00:03:41.975
内部でオブジェクトに変換して扱われるためです。

51
00:03:41.975 --> 00:03:46.498
イーシーマスクリプト・ファイブ時代の扱いとは異なる点に注意してください。

52
00:03:46.498 --> 00:03:49.012
実機でも三つともトゥルーを確認しました。

53
00:03:49.012 --> 00:03:54.792
対象の種類ごとに、どのプロトタイプにつながっているかを見比べると、仕組みの理解が深まります。

54
00:03:54.792 --> 00:03:59.064
関数を渡した場合も、ファンクション・プロトタイプが継承元になります。

55
00:03:59.064 --> 00:04:01.742
継承元のないオブジェクトも見ます。

56
00:04:01.742 --> 00:04:05.759
クリエイトにヌルを渡して作ったオブジェクトは、辞書用途などで使われるもので、

57
00:04:05.759 --> 00:04:09.776
プロトタイプを持ちません。

58
00:04:09.776 --> 00:04:14.974
これにゲットプロトタイプオブを使うと、例外ではなくヌルが返ります。

59
00:04:14.974 --> 00:04:20.960
末端を表すヌルと、継承元そのものがない場合のヌルは、どちらも同じ戻り値です。

60
00:04:20.960 --> 00:04:24.268
実機でもヌルと一致することを確認しました。

61
00:04:24.268 --> 00:04:29.860
自分で生成経路を管理しているオブジェクトでは、辞書用オブジェクトが想定どおり継承元なしになっているかの確認に、

62
00:04:29.860 --> 00:04:35.452
このメソッドがそのまま使えます。

63
00:04:35.452 --> 00:04:36.840
失敗例を確認します。

64
00:04:36.840 --> 00:04:43.916
ヌルとアンディファインドはオブジェクトに変換できないため、このメソッドに渡すとタイプエラーになります。

65
00:04:43.916 --> 00:04:48.495
引数を省略した場合も、アンディファインドを渡したのと同じ扱いです。

66
00:04:48.495 --> 00:04:52.380
スライドの例では、ヌルとアンディファインドの両方で例外名のタイプエラーが表示され、

67
00:04:52.380 --> 00:04:56.266
記事の期待出力と一致しました。

68
00:04:56.266 --> 00:05:02.926
注意したいのは、正常な終端として返るヌルと、入力として渡して例外になるヌルは別物だという点です。

69
00:05:02.926 --> 00:05:06.603
チェーンを繰り返したどる処理では、ヌルを取得した時点でそれ以上呼び出さないよう、

70
00:05:06.603 --> 00:05:10.280
終了条件を設けてください。

71
00:05:10.280 --> 00:05:12.607
戻り値を扱うときの注意点です。

72
00:05:12.607 --> 00:05:16.950
取得した継承元は、元のオブジェクトへの参照そのものです。

73
00:05:16.950 --> 00:05:18.657
コピーではありません。

74
00:05:18.657 --> 00:05:25.327
そのため、継承元のテーマを書き換えると、共通設定そのもののテーマが変わってしまいます。

75
00:05:25.327 --> 00:05:34.480
複数の設定オブジェクトが同じ共通設定を継承している場合、その変更は、自身で上書きしていない読み取りすべてに影響します。

76
00:05:34.480 --> 00:05:41.616
調査のために取得したつもりが、アプリケーションの状態を変えてしまう事故につながりかねません。

77
00:05:41.616 --> 00:05:45.804
継承元は、比較やログ表示に使うのが扱いやすいでしょう。

78
00:05:45.804 --> 00:05:48.058
活用の場面と限界を整理します。

79
00:05:48.058 --> 00:05:54.370
このメソッドは、共通設定の参照先が想定どおりか、インスタンスが想定したプロトタイプにつながっているかなど、

80
00:05:54.370 --> 00:06:00.682
生成経路を自分で管理しているオブジェクトの調査に向いています。

81
00:06:00.682 --> 00:06:07.145
まず直接の継承元を取り、期待したオブジェクトと厳密等価で比較するのが基本の進め方です。

82
00:06:07.145 --> 00:06:13.156
一方で、この比較だけであらゆる入力の種類を確定するような使い方は避けてください。

83
00:06:13.156 --> 00:06:21.873
別のアイフレームで作られたオブジェクトではプロトタイプ自体が異なり、プロキシでは取得処理が例外になる場合もあります。

84
00:06:21.873 --> 00:06:25.480
取得が必ず成功すると決めつけないことが大切です。

85
00:06:25.480 --> 00:06:26.291
まとめです。

86
00:06:26.291 --> 00:06:31.964
ゲットプロトタイプオブは、オブジェクトの直接の継承元を一段だけ取得するメソッドです。

87
00:06:31.964 --> 00:06:33.315
ポイントは三つです。

88
00:06:33.315 --> 00:06:38.854
まず、戻り値はプロトタイプのオブジェクトかヌルで、先を調べるには繰り返し呼ぶこと。

89
00:06:38.854 --> 00:06:46.554
次に、文字列や数値は変換されて対応するプロトタイプが返りますが、ヌルとアンディファインドはタイプエラーになること。

90
00:06:46.554 --> 00:06:51.552
そして、戻り値は参照そのものなので、書き換えると共有元に影響することです。

91
00:06:51.552 --> 00:06:56.685
まずは記事の基本例と失敗例を実行し、結果を予測してから確かめてみてください。

92
00:06:56.685 --> 00:06:57.901
お疲れさまでした。

93
00:06:57.901 --> 00:07:03.980
値がどこから来たのかを自分の目で追えるようになると、クラスの設計を読むときにも役立ちます。