VIDEO LESSON

JavaScriptのReflect.ownKeys()：非列挙プロパティとSymbolを含むキー一覧を取得するの解説動画

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

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

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

0:00こんにちは。
0:00今回はジャバスクリプトのリフレクト・オウンキーズを紹介します。
0:05これは、オブジェクト自身が持つキーを、漏れなく配列で取り出すためのメソッドです。
0:12普段よく使うオブジェクトキーズでは、表示から隠されたプロパティや、シンボルをキーにしたプロパティは出てきません。
0:21リフレクト・オウンキーズなら、列挙できるかどうかに関係なく、文字列キーとシンボルキーの両方を取得できます。
0:29ライブラリーが返したオブジェクトの中身を調べたいときや、設定データに想定外の項目が紛れていないか確かめたいときに役立ちます。
0:39この動画では、基本の書き方から、キーが並ぶ順番、配列を渡したときの注意点、
0:43エラーになるケースまで、順に解説します。
0:48まず、なぜキー一覧に出てこない項目があるのかを押さえましょう。
0:53プロパティには、列挙可能かどうかという設定があります。
0:57普通に代入して作ったプロパティは列挙可能で、一覧に表示されます。
1:02一方、オブジェクト・デファインプロパティで作ったプロパティは、明示しない限り非列挙になり、
1:06通常の一覧から外れます。
1:11でも非列挙は、アクセス禁止という意味ではありません。
1:15名前を知っていれば値は読めます。
1:18もう一つが、シンボルをキーにしたプロパティです。
1:21こちらもオブジェクトキーズには現れません。
1:25隠れているだけで存在する項目を見逃さないことが、今回のテーマです。
1:30基本の書き方を見ましょう。
1:32リフレクト・オウンキーズと書き、かっこの中に調べたいオブジェクトを一つだけ渡します。
1:39引数には、通常のオブジェクトだけでなく、配列や関数も渡せます。
1:44戻り値は、キーを要素に持つ新しい配列です。
1:48要素は文字列かシンボルで、キーが一つもなければ空の配列が返ります。
1:53ここで大切なのは、対象がオブジェクト自身のプロパティだけだという点です。
1:59プロトタイプから継承したプロパティは含まれません。
2:03さらに、戻ってきた配列を書き換えても、元のオブジェクトからプロパティが消えることはありません。
2:11結果はあくまでキーの一覧表だと考えてください。
2:15よく使うオブジェクトキーズとの違いを整理します。
2:18オブジェクトキーズが取るのは、自身の、列挙可能な、文字列キーだけです。
2:23条件が三つ重なっています。
2:25これに対してリフレクト・オウンキーズは、自身のキーであれば、列挙可能かどうかも、
2:28文字列かシンボルかも問いません。
2:32似た役割のメソッドに、非列挙も含む文字列だけを取るものや、シンボルだけを取るものもありますが、
2:37両方を一度にそろえられるのがオウンキーズの強みです。
2:42画面表示用の項目を取りたいだけならオブジェクトキーズで十分です。
2:46構造を漏れなく調べたいときこそ、オウンキーズの出番です。
2:50目的に合わせて選びましょう。
2:52次に、キーが並ぶ順番のルールを覚えましょう。
2:56通常のオブジェクトでは、まず配列の添字に当たる文字列キーが、数値の小さい順に並びます。
3:04次に、その他の文字列キーが作られた順に続き、最後にシンボルキーが作られた順に並びます。
3:11たとえば十というキーを先に、二というキーを後に追加しても、結果は二、十の順になります。
3:19しかも戻り値の中では、これらは数値ではなく文字列です。
3:23注意したいのは、ゼロイチやマイナス一のような書き方は、添字としては扱われない点です。
3:31入力した順番そのものを記録したい用途では、この並び替えに頼らず、順番を別に管理してください。
3:39ここからは実例です。
3:41継承した項目、数値に見えるキー、非列挙の項目、シンボルキーを持つオブジェクトを作って、
3:45取得範囲を確かめます。
3:49まず内部という説明を持つシンボルを作り、親オブジェクトを用意します。
3:54セッティングズは、その親を継承して作ります。
3:57タイトルを通常の代入で加え、十番と二番を数値に見えるキーで加えます。
4:02さらにヒドゥンという項目を、列挙できない設定で追加し、シンボルキーには内部識別子という値を入れます。
4:10画面表示では見えにくい項目を、あえてそろえた構成です。
4:14次のセクションで、このオブジェクトからキーを取り出してみましょう。
4:19実行結果を確認しましょう。
4:21リフレクト・オウンキーズで取れる全キーは、二、十、タイトル、ヒドゥン、そしてシンボル・インターナルの五つです。
4:30一方、通常の一覧では、二、十、タイトルの三つしか出てきません。
4:35差の二つこそ、非列挙のヒドゥンとシンボルキーです。
4:39また、親から継承したインヘリテッドは結果に含まれません。
4:43自身のキーだけを取る、という約束どおりです。
4:47表示のためにキーを文字列へ変換していますが、実際の配列の中には元のシンボルそのものが入っています。
4:54だからこそ、保存しておいたシンボルと同一かどうかを、そのまま判定できるのです。
5:00配列を渡した場合の注意点です。
5:03配列もオブジェクトの一種なので、オウンキーズに渡せます。
5:07エーとビーの二つの要素を持つ配列なら、結果はゼロ、一、レングスとなります。
5:12最後のレングスは、配列自身が持つ非列挙プロパティです。
5:16つまり、取得結果は要素の添字だけとは限りません。
5:20そのため、返ってきた配列の長さを、そのまま要素の数として使うと誤りになります。
5:25要素数が必要なら、配列のレングスプロパティを直接読んでください。
5:30配列の要素だけを処理したい場面では、そもそもオウンキーズではなく、配列向けの繰り返し処理を使う方が安全です。
5:38失敗するケースも知っておきましょう。
5:41ヌルやアンデファインドはもちろん、文字列や数値などのプリミティブ値を渡すと、
5:44タイプエラーが発生します。
5:48たとえば文字列を渡して、文字の位置の一覧を得るような使い方はできません。
5:53このメソッドは同期的で、結果はすぐに配列として返るので、アウェイトやプロミスの失敗処理は不要です。
6:01例外はその場で発生します。
6:02外部から受け取った値がオブジェクトかどうか分からない場合は、処理全体をトライ・キャッチで囲み、
6:07エラー時の扱いを先に決めておきましょう。
6:12エラーメッセージの文面は環境で変わるため、文面で判定しないことも大切です。
6:18細かな落とし穴を二つ押さえます。
6:20一つ目はシンボルの同一性です。
6:22インターナルという同じ説明でシンボルを二つ作っても、それぞれは別のキーになります。
6:27ところが表示用に文字列へ変換すると、どちらも同じ見た目になってしまいます。
6:32表示文字列をキーの識別や照合に使うと、別物を同じものと誤認します。
6:37照合には、元のシンボルを必ず保持してください。
6:40二つ目はプロキシです。
6:41通常のオブジェクトでは、キー取得だけでゲッターは呼ばれません。
6:46しかし対象がプロキシだと、取得処理に独自の処理が介入し、順番が変わったり、
6:49例外が発生したりすることがあります。
6:53調査ツールでは取得自体をトライ・キャッチで守る設計が有効です。
6:57最後に活用場面とまとめです。
6:59リフレクト・オウンキーズは、ライブラリーを更新したあとにオブジェクトの構造が変わっていないか調べたり、
7:06設定オブジェクトのキーを、文字列とシンボルの両方について許可リストと照合したりする場面に向いています。
7:14値を全部読み出さず、まずキーだけを確認できる点も調査向きです。
7:18ただし、キーが存在することと、値が正しいことは別問題です。
7:22値の型や妥当性の検査は、別に設計してください。
7:26導入の合言葉はシンプルです。
7:28表示用の項目が欲しいならオブジェクトキーズ、見えない項目まで含めて構造を調べたいならオウンキーズ。
7:35この使い分けを覚えておきましょう。
7:37お疲れさまでした。

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

この動画で学べること

Reflect.ownKeys()でオブジェクト自身のキーを漏れなく取得する方法を解説。非列挙プロパティとSymbol、キーの順序、ブラウザーとNode.jsの実行手順、例外や用途の制約を学べます。

解説記事・サンプルコードを読む：JavaScriptのReflect.ownKeys()：非列挙プロパティとSymbolを含むキー一覧を取得する →