WEBVTT

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

2
00:00:00.889 --> 00:00:07.704
今回はジャバスクリプトのオブジェクト・ゲットオウンプロパティディスクリプターズを紹介します。

3
00:00:07.704 --> 00:00:15.853
これは、オブジェクトが自分自身で持つプロパティについて、値だけでなく、その設定までまとめて調べるメソッドです。

4
00:00:15.853 --> 00:00:21.928
代入しても値が変わらない、一覧に出てこない項目がある、値を読んだだけで処理が走る。

5
00:00:21.928 --> 00:00:26.373
そんな不思議な現象の理由は、プロパティの設定に隠れています。

6
00:00:26.373 --> 00:00:31.633
この動画では、基本の使い方から、読み取り専用の項目やゲッターを含む設定オブジェクトの調査、

7
00:00:31.633 --> 00:00:36.893
失敗しやすい注意点までを、実行結果と一緒に学びます。

8
00:00:36.893 --> 00:00:43.708
プロパティの値だけを見ていては分からない理由を、設定の側から確かめる方法を身につけましょう。

9
00:00:43.708 --> 00:00:47.586
まず、プロパティ記述子という考え方を押さえます。

10
00:00:47.586 --> 00:00:56.149
プロパティには、目に見える値だけではなく、代入できるか、一覧表示の対象になるかといった属性が付いています。

11
00:00:56.149 --> 00:01:00.027
この属性をまとめたものが、プロパティ記述子です。

12
00:01:00.027 --> 00:01:05.358
画面の例では、プライスという項目を持つオブジェクトを調べています。

13
00:01:05.358 --> 00:01:10.206
記述子のバリューを見れば保存されている値、千二百が取れます。

14
00:01:10.206 --> 00:01:14.406
ライタブルを見れば、代入で変更できるかが分かります。

15
00:01:14.406 --> 00:01:21.031
通常の書き方で作ったプロパティは、ライタブルがトゥルーで、代入できるのが普通です。

16
00:01:21.031 --> 00:01:24.747
値と設定を分けて見ることが、調査の第一歩です。

17
00:01:24.747 --> 00:01:26.971
引数と取得範囲のルールです。

18
00:01:26.971 --> 00:01:33.165
引数は、調べたいオブジェクト一つだけで、コールバックやオプションはありません。

19
00:01:33.165 --> 00:01:37.454
メソッド名のオウンは、自身が直接持つ、という意味です。

20
00:01:37.454 --> 00:01:44.919
親から継承したプロパティは対象外で、画面の例でも、結果に含まれるのは自分で持つオウンだけです。

21
00:01:44.919 --> 00:01:51.591
一方で、一覧に出てこない非列挙のプロパティや、シンボルのキーも取得対象に含まれます。

22
00:01:51.591 --> 00:01:56.515
自身のプロパティが一つもなければ、空のオブジェクトが返ります。

23
00:01:56.515 --> 00:02:02.868
キーの一覧だけを返すメソッドでは見つからない項目まで拾える点が、大きな特徴です。

24
00:02:02.868 --> 00:02:05.760
データプロパティの記述子の読み方です。

25
00:02:05.760 --> 00:02:07.283
項目は四つあります。

26
00:02:07.283 --> 00:02:13.220
バリューは保存されている値、ライタブルは代入で値を変更できるか、エニュメラブルは列挙の対象になるか、

27
00:02:13.220 --> 00:02:19.157
コンフィギュラブルは削除や属性の再設定に関わる設定です。

28
00:02:19.157 --> 00:02:25.094
通常の書き方で作ったプロパティは、この三つの真偽値がすべてトゥルーになります。

29
00:02:25.094 --> 00:02:31.335
逆に、どれかがフォールスになっている項目は、誰かが意図して設定を変えたサインです。

30
00:02:31.335 --> 00:02:38.947
なお、コンフィギュラブルがフォールスでも、ライタブルがトゥルーなら値の変更など一部の操作は可能です。

31
00:02:38.947 --> 00:02:42.448
すべて変更禁止と一括りにしないことが大切です。

32
00:02:42.448 --> 00:02:43.956
対応環境を確認します。

33
00:02:43.956 --> 00:02:48.343
このメソッドは、二千十七年四月から主要ブラウザーで広く利用でき、現在のクローム、

34
00:02:48.343 --> 00:02:52.731
エッジ、ファイアフォックス、サファリで使えます。

35
00:02:52.731 --> 00:02:56.433
ノード・ジェイエスでも動作し、バージョン七・ゼロ・ゼロの頃に導入された、

36
00:02:56.433 --> 00:03:00.134
イーエス二千十七のエーピーアイです。

37
00:03:00.134 --> 00:03:02.876
追加パッケージやインポートは要りません。

38
00:03:02.876 --> 00:03:08.361
ただし、古いブラウザーや組み込みのウェブビューを対象にする場合は注意が必要です。

39
00:03:08.361 --> 00:03:13.708
画面のように、メソッド自体が関数として存在するかを確認してから使ってください。

40
00:03:13.708 --> 00:03:16.724
この処理は同期で進み、プロミスは返りません。

41
00:03:16.724 --> 00:03:19.359
記事の中心となる実行例を読みます。

42
00:03:19.359 --> 00:03:24.629
設定オブジェクトのセッティングズに、三種類のプロパティを用意します。

43
00:03:24.629 --> 00:03:29.900
通常の値を持つモード、ゲッターで値を計算するレーベル、そして定義専用のメソッドで、

44
00:03:29.900 --> 00:03:35.170
書き換え不可、列挙不可に設定したビルドアイディーです。

45
00:03:35.170 --> 00:03:43.075
そのうえで、このメソッドで記述子をまとめて取得し、モードの値や、ビルドアイディーの列挙可否を調べます。

46
00:03:43.075 --> 00:03:47.260
ゲッターが何回実行されたかも、変数で数えて確認します。

47
00:03:47.260 --> 00:03:54.391
このコードはノード・ジェイエスの実機でも、記事の期待出力と同じ結果になることを確認済みです。

48
00:03:54.391 --> 00:03:57.336
次のセクションで結果を詳しく追います。

49
00:03:57.336 --> 00:03:59.235
実行結果を読み解きます。

50
00:03:59.235 --> 00:04:03.825
モードの値はプレビュー、代入可能かどうかはトゥルーでした。

51
00:04:03.825 --> 00:04:08.494
ビルドアイディーは列挙可能がフォールス、つまり一覧には出てきませんが、このメソッドの結果には、

52
00:04:08.494 --> 00:04:13.163
ちゃんと含まれています。

53
00:04:13.163 --> 00:04:16.328
そして重要なのが、レーベルについてです。

54
00:04:16.328 --> 00:04:23.292
レーベルはゲッターを持つ項目で、記述子のゲットが関数かどうかで、その存在を確認できます。

55
00:04:23.292 --> 00:04:27.565
調査の時点では、ゲッターの実行回数はゼロのままでした。

56
00:04:27.565 --> 00:04:33.105
実際にセッティングズのレーベルを読んだときに、初めて一回実行されます。

57
00:04:33.105 --> 00:04:38.644
副作用を起こさずに、計算される項目があるとだけ調べられる点が便利です。

58
00:04:38.644 --> 00:04:42.359
ゲッターを持つプロパティの記述子は、形が違います。

59
00:04:42.359 --> 00:04:46.520
こうした項目をアクセサープロパティと呼び、その記述子にはゲットとセットがあり、

60
00:04:46.520 --> 00:04:50.681
バリューとライタブルはありません。

61
00:04:50.681 --> 00:04:54.991
今回の例ではゲットは関数、セットはアンデファインドでした。

62
00:04:54.991 --> 00:04:59.449
ですから、記述子のバリューを読んでも、計算結果は取れません。

63
00:04:59.449 --> 00:05:03.610
知りたいのがゲッターの存在なら、ゲットの型を確認します。

64
00:05:03.610 --> 00:05:10.000
計算結果そのものが必要なときだけ、元のオブジェクトのプロパティへアクセスしてください。

65
00:05:10.000 --> 00:05:15.944
この区別ができると、値を読んだだけで処理が走る現象にも、落ち着いて対処できます。

66
00:05:15.944 --> 00:05:17.016
失敗例を見ます。

67
00:05:17.016 --> 00:05:19.832
一つ目は、書き換え不可の項目への代入です。

68
00:05:19.832 --> 00:05:23.920
ビルドアイディーはライタブルがフォールスのため、厳格モード、ストリクトモードで代入しようとすると、

69
00:05:23.920 --> 00:05:28.009
タイプエラーになります。

70
00:05:28.009 --> 00:05:31.092
これが、代入しても変わらない現象の正体でした。

71
00:05:31.092 --> 00:05:32.835
二つ目は、不正な引数です。

72
00:05:32.835 --> 00:05:36.991
ヌルやアンデファインドを渡すと、同じくタイプエラーになります。

73
00:05:36.991 --> 00:05:40.946
外部から受け取った値を調べる場合は、画面のようにトライとキャッチで呼び出しを囲むと、

74
00:05:40.946 --> 00:05:44.900
失敗したあとの処理を続けられます。

75
00:05:44.900 --> 00:05:49.056
なお、通常のオブジェクトではゲッターは実行されませんが、プロキシーが対象の場合は、

76
00:05:49.056 --> 00:05:53.212
対応する仕掛けが動作する可能性もあります。

77
00:05:53.212 --> 00:05:54.534
大切な注意点です。

78
00:05:54.534 --> 00:05:58.796
取得した記述子は、元のプロパティの設定画面ではありません。

79
00:05:58.796 --> 00:06:05.849
記述子側のモードの値を変えても、元のセッティングズのモードはプレビューのまま変わりませんでした。

80
00:06:05.849 --> 00:06:07.612
ただし、例外があります。

81
00:06:07.612 --> 00:06:12.461
記述子のバリューがオブジェクトの場合、その参照は元と共有されます。

82
00:06:12.461 --> 00:06:20.249
画面の例では、記述子を経由してテーマを書き換えると、元のオブジェクトの中身までダークに変わってしまいます。

83
00:06:20.249 --> 00:06:26.127
これは値を置き換えたのではなく、共有しているオブジェクトの中身を変えたためです。

84
00:06:26.127 --> 00:06:31.858
調査で使うときは、取得結果から入れ子のデータを書き換えないようにしてください。

85
00:06:31.858 --> 00:06:34.052
実務での活用とまとめです。

86
00:06:34.052 --> 00:06:39.961
設定を更新できない不具合では、まず記述子を取り、データプロパティならライタブル、

87
00:06:39.961 --> 00:06:45.869
アクセサープロパティならセットを確認すると、原因を絞れます。

88
00:06:45.869 --> 00:06:50.595
一覧に出ない項目の調査では、エニュメラブルを確認します。

89
00:06:50.595 --> 00:06:55.828
ただし、非列挙は秘密情報の保護ではない点も覚えておきましょう。

90
00:06:55.828 --> 00:07:01.399
このメソッドは、オブジェクト自身のプロパティの設定をまとめて取得し、非列挙やシンボルのキーも含み、

91
00:07:01.399 --> 00:07:06.969
ゲッターを実行せずに調べられます。

92
00:07:06.969 --> 00:07:11.696
取得結果は読み取り専用の調査結果として扱うのが安全です。

93
00:07:11.696 --> 00:07:18.786
練習として、自分の設定オブジェクトで各項目の真偽値を予想してから調べてみてください。

94
00:07:18.786 --> 00:07:26.551
値と設定を分けて考えられるようになると、オブジェクトの思わぬ動きに振り回されにくくなります。

95
00:07:26.551 --> 00:07:28.070
お疲れさまでした。