VIDEO LESSON

JavaScriptのObject.getOwnPropertyDescriptors()：プロパティの設定をまとめて調べるの解説動画

再生時間 7:28動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回はジャバスクリプトのオブジェクト・ゲットオウンプロパティディスクリプターズを紹介します。
0:07これは、オブジェクトが自分自身で持つプロパティについて、値だけでなく、その設定までまとめて調べるメソッドです。
0:15代入しても値が変わらない、一覧に出てこない項目がある、値を読んだだけで処理が走る。
0:21そんな不思議な現象の理由は、プロパティの設定に隠れています。
0:26この動画では、基本の使い方から、読み取り専用の項目やゲッターを含む設定オブジェクトの調査、
0:31失敗しやすい注意点までを、実行結果と一緒に学びます。
0:36プロパティの値だけを見ていては分からない理由を、設定の側から確かめる方法を身につけましょう。
0:43まず、プロパティ記述子という考え方を押さえます。
0:47プロパティには、目に見える値だけではなく、代入できるか、一覧表示の対象になるかといった属性が付いています。
0:56この属性をまとめたものが、プロパティ記述子です。
1:00画面の例では、プライスという項目を持つオブジェクトを調べています。
1:05記述子のバリューを見れば保存されている値、千二百が取れます。
1:10ライタブルを見れば、代入で変更できるかが分かります。
1:14通常の書き方で作ったプロパティは、ライタブルがトゥルーで、代入できるのが普通です。
1:21値と設定を分けて見ることが、調査の第一歩です。
1:24引数と取得範囲のルールです。
1:26引数は、調べたいオブジェクト一つだけで、コールバックやオプションはありません。
1:33メソッド名のオウンは、自身が直接持つ、という意味です。
1:37親から継承したプロパティは対象外で、画面の例でも、結果に含まれるのは自分で持つオウンだけです。
1:44一方で、一覧に出てこない非列挙のプロパティや、シンボルのキーも取得対象に含まれます。
1:51自身のプロパティが一つもなければ、空のオブジェクトが返ります。
1:56キーの一覧だけを返すメソッドでは見つからない項目まで拾える点が、大きな特徴です。
2:02データプロパティの記述子の読み方です。
2:05項目は四つあります。
2:07バリューは保存されている値、ライタブルは代入で値を変更できるか、エニュメラブルは列挙の対象になるか、
2:13コンフィギュラブルは削除や属性の再設定に関わる設定です。
2:19通常の書き方で作ったプロパティは、この三つの真偽値がすべてトゥルーになります。
2:25逆に、どれかがフォールスになっている項目は、誰かが意図して設定を変えたサインです。
2:31なお、コンフィギュラブルがフォールスでも、ライタブルがトゥルーなら値の変更など一部の操作は可能です。
2:38すべて変更禁止と一括りにしないことが大切です。
2:42対応環境を確認します。
2:43このメソッドは、二千十七年四月から主要ブラウザーで広く利用でき、現在のクローム、
2:48エッジ、ファイアフォックス、サファリで使えます。
2:52ノード・ジェイエスでも動作し、バージョン七・ゼロ・ゼロの頃に導入された、
2:56イーエス二千十七のエーピーアイです。
3:00追加パッケージやインポートは要りません。
3:02ただし、古いブラウザーや組み込みのウェブビューを対象にする場合は注意が必要です。
3:08画面のように、メソッド自体が関数として存在するかを確認してから使ってください。
3:13この処理は同期で進み、プロミスは返りません。
3:16記事の中心となる実行例を読みます。
3:19設定オブジェクトのセッティングズに、三種類のプロパティを用意します。
3:24通常の値を持つモード、ゲッターで値を計算するレーベル、そして定義専用のメソッドで、
3:29書き換え不可、列挙不可に設定したビルドアイディーです。
3:35そのうえで、このメソッドで記述子をまとめて取得し、モードの値や、ビルドアイディーの列挙可否を調べます。
3:43ゲッターが何回実行されたかも、変数で数えて確認します。
3:47このコードはノード・ジェイエスの実機でも、記事の期待出力と同じ結果になることを確認済みです。
3:54次のセクションで結果を詳しく追います。
3:57実行結果を読み解きます。
3:59モードの値はプレビュー、代入可能かどうかはトゥルーでした。
4:03ビルドアイディーは列挙可能がフォールス、つまり一覧には出てきませんが、このメソッドの結果には、
4:08ちゃんと含まれています。
4:13そして重要なのが、レーベルについてです。
4:16レーベルはゲッターを持つ項目で、記述子のゲットが関数かどうかで、その存在を確認できます。
4:23調査の時点では、ゲッターの実行回数はゼロのままでした。
4:27実際にセッティングズのレーベルを読んだときに、初めて一回実行されます。
4:33副作用を起こさずに、計算される項目があるとだけ調べられる点が便利です。
4:38ゲッターを持つプロパティの記述子は、形が違います。
4:42こうした項目をアクセサープロパティと呼び、その記述子にはゲットとセットがあり、
4:46バリューとライタブルはありません。
4:50今回の例ではゲットは関数、セットはアンデファインドでした。
4:54ですから、記述子のバリューを読んでも、計算結果は取れません。
4:59知りたいのがゲッターの存在なら、ゲットの型を確認します。
5:03計算結果そのものが必要なときだけ、元のオブジェクトのプロパティへアクセスしてください。
5:10この区別ができると、値を読んだだけで処理が走る現象にも、落ち着いて対処できます。
5:15失敗例を見ます。
5:17一つ目は、書き換え不可の項目への代入です。
5:19ビルドアイディーはライタブルがフォールスのため、厳格モード、ストリクトモードで代入しようとすると、
5:23タイプエラーになります。
5:28これが、代入しても変わらない現象の正体でした。
5:31二つ目は、不正な引数です。
5:32ヌルやアンデファインドを渡すと、同じくタイプエラーになります。
5:36外部から受け取った値を調べる場合は、画面のようにトライとキャッチで呼び出しを囲むと、
5:40失敗したあとの処理を続けられます。
5:44なお、通常のオブジェクトではゲッターは実行されませんが、プロキシーが対象の場合は、
5:49対応する仕掛けが動作する可能性もあります。
5:53大切な注意点です。
5:54取得した記述子は、元のプロパティの設定画面ではありません。
5:58記述子側のモードの値を変えても、元のセッティングズのモードはプレビューのまま変わりませんでした。
6:05ただし、例外があります。
6:07記述子のバリューがオブジェクトの場合、その参照は元と共有されます。
6:12画面の例では、記述子を経由してテーマを書き換えると、元のオブジェクトの中身までダークに変わってしまいます。
6:20これは値を置き換えたのではなく、共有しているオブジェクトの中身を変えたためです。
6:26調査で使うときは、取得結果から入れ子のデータを書き換えないようにしてください。
6:31実務での活用とまとめです。
6:34設定を更新できない不具合では、まず記述子を取り、データプロパティならライタブル、
6:39アクセサープロパティならセットを確認すると、原因を絞れます。
6:45一覧に出ない項目の調査では、エニュメラブルを確認します。
6:50ただし、非列挙は秘密情報の保護ではない点も覚えておきましょう。
6:55このメソッドは、オブジェクト自身のプロパティの設定をまとめて取得し、非列挙やシンボルのキーも含み、
7:01ゲッターを実行せずに調べられます。
7:06取得結果は読み取り専用の調査結果として扱うのが安全です。
7:11練習として、自分の設定オブジェクトで各項目の真偽値を予想してから調べてみてください。
7:18値と設定を分けて考えられるようになると、オブジェクトの思わぬ動きに振り回されにくくなります。
7:26お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

Object.getOwnPropertyDescriptors()で書き換え可否やgetterの有無を調べる方法を解説。ブラウザーとNode.jsの実行手順、期待出力、非列挙プロパティや参照共有の注意点まで学べます。

解説記事・サンプルコードを読む：JavaScriptのObject.getOwnPropertyDescriptors()：プロパティの設定をまとめて調べる →