VIDEO LESSON

JavaScriptのReflect.deleteProperty()：プロパティ削除の成否を判定するの解説動画

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

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

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

0:00こんにちは。
0:00今回はジャバスクリプトのリフレクト・デリートプロパティーを紹介します。
0:06これは、オブジェクトの項目を削除し、削除できたかどうかを真偽値で受け取るためのメソッドです。
0:12設定オブジェクトから一時的なメモを取り除くとき、削除できた場合とできなかった場合で、
0:17処理を分けたい場面があります。
0:21このメソッドは、対象のオブジェクトとキーを引数で渡すと、結果をトゥルーかフォルスで返してくれます。
0:28この動画では、基本の書き方から、削除できない項目や配列の注意点、例外になるケースまで順に解説します。
0:35キーを変数で渡せるため、共通のデータ処理にも組み込みやすいのが特長です。
0:41まず動作環境です。
0:42リフレクト・デリートプロパティーは、ブラウザー専用の機能ではなく、ジャバスクリプトの組み込みエーピーアイです。
0:49ブラウザーでもノード・ジェイエスでも利用でき、パッケージの追加やインポートは不要です。
0:54二千十六年九月ごろから主要ブラウザーで広く使えるようになりました。
0:59試すときは、ブラウザーなら開発者ツールのコンソールに貼るだけ、ノード・ジェイエスならファイルに保存して実行します。
1:06古いブラウザーや組み込み環境を対象にする場合は、画面のようにタイプオブで存在を確認してから使ってください。
1:13確認結果がフォルスなら、その環境では後続の処理を実行しない判断が必要です。
1:18基本の書き方を見ましょう。
1:20リフレクト・デリートプロパティーと書き、かっこの中に二つの引数を渡します。
1:26一つ目は削除対象のオブジェクトで、配列や関数もオブジェクトとして渡せます。
1:31二つ目は削除するプロパティのキーで、文字列またはシンボルを使います。
1:37数値のキーは文字列へ変換されます。
1:39戻り値は、削除が成功扱いならトゥルー、削除できない項目ならフォルスです。
1:45この処理は同期処理で、戻り値はプロミスではありません。
1:49その場で真偽値が得られるので、アウェイトは不要です。
1:53結果を受け取って、そのまま条件分岐に使えるのがポイントです。
1:58ここで大切な注意点です。
2:00トゥルーは、項目が存在していて削除した、という意味ではありません。
2:05通常のオブジェクトでは、指定したキーが最初から存在しなくてもトゥルーが返ります。
2:12そのため、戻り値だけで削除件数を数えると、実際より多く数えてしまう可能性があります。
2:18存在した項目を削除したと記録したい場合は、削除の前にイン演算子などで存在確認を別途行ってください。
2:26反対に、その項目がない状態へ片付けることだけが目的なら、存在しないキーを成功扱いにする動作は便利です。
2:34目的に合わせて、戻り値の意味を正しく読み分けることが大切です。
2:39具体例で動きを確かめましょう。
2:41下書きデータを表すオブジェクトには、タイトルと一時メモの二項目があります。
2:46一時メモのキーを指定して削除すると、戻り値はトゥルーになります。
2:50そのあと一時メモを読み取ると、アンディファインドになります。
2:54項目そのものが取り除かれたためです。
2:57一方、タイトルなど他の項目はそのまま残ります。
3:00削除は指定したキーだけに効くので、残したい項目まで消える心配はありません。
3:05まずはこの基本パターンを、手元のコンソールで一度打ち込んで確かめてみてください。
3:10キーを変数に入れて渡せば、消したい項目を実行時に切り替えることもできます。
3:15次に、削除できないケースを見ましょう。
3:18コンフィギュラブルをフォルスにして定義した項目は、削除が保護されています。
3:24この項目を削除しようとすると、戻り値はフォルスになり、値は元のまま残ります。
3:30例外で止まらないので、通知を出すなどの分岐処理を続けて書けます。
3:34一方、対象にヌルを渡した場合は話が別です。
3:38ヌルはオブジェクトではないため、タイプエラーという例外が発生します。
3:43画面の例ではトライ・キャッチで受け止め、エラーの名前だけを表示しています。
3:48フォルスと例外は別の仕組みとして扱うことが、このあとの設計でも重要になります。
3:54従来のデリート演算子との違いも押さえましょう。
3:58厳格モードのデリートは、削除できない自己プロパティに対して例外を投げます。
4:03そのため、削除の失敗を通常の条件分岐で扱いたい場面では、例外処理を書く必要がありました。
4:10リフレクト・デリートプロパティーは、その場合にフォルスを返すだけです。
4:15画面の例のように、保護された項目でも結果を変数で受け取り、イフ文で分岐できます。
4:22削除できない項目を想定内の出来事として扱いたい場合に、この違いが効いてきます。
4:27逆に言えば、失敗に気づかず進んでしまう恐れもあるので、戻り値は必ず確認する習慣を付けてください。
4:35配列に使うときの注意点です。
4:37配列の添字を指定すると、その位置のプロパティが消えます。
4:41しかし、後ろの要素が前へ詰まるわけではなく、配列の長さも変わりません。
4:46画面の例では、長さは三のままで、その位置に要素が存在するかを調べるとフォルスになります。
4:53読み取るとアンディファインドに見えますが、値としてアンディファインドが入った要素ではなく、
4:57要素自体がない空きスロットです。
5:02一覧から行を削除して詰めたい用途では、このメソッドではなく、配列向けの削除や再構成の処理を選んでください。
5:09見た目が同じでも意味が違う点が、初心者がつまずきやすいところです。
5:14もう二つ、仕組みの注意点があります。
5:17一つ目は継承です。
5:18削除の対象は、オブジェクト自身のプロパティだけです。
5:22同名のプロパティがプロトタイプにあると、自分の項目を消したあとの読み取りでは、
5:26継承した値が見えてきます。
5:30画面の例では、エディターという自分の値を消すと、親から継承したビューワーが見えるようになりました。
5:38削除後の値がアンディファインドかどうかだけでは、削除の成否を判定できません。
5:43二つ目は、削除が元のオブジェクト自体を変更する点です。
5:47同じオブジェクトを別の場所から参照していれば、そちらから見える内容も変わります。
5:53共有データに使うときは、そのオブジェクトをどの処理が所有しているか、先に確認してください。
6:00フォルスと例外の区別を整理します。
6:03削除できない項目がフォルスになるからといって、例外が一切発生しないエーピーアイではありません。
6:10対象がヌルや数値などの場合はタイプエラーになります。
6:14さらに、対象がプロキシーの場合は、削除操作がハンドラーへ渡ります。
6:19その処理自身が例外を投げる場合や、守るべき条件に違反する場合にも例外が発生します。
6:25外部から受け取った任意のオブジェクトを扱う共通処理では、真偽値による分岐に加えて、
6:30例外への対応もあらかじめ設計しておくことが大切です。
6:35成否の確認と例外の受け止め、この二段構えが安全な使い方につながります。
6:40最後に活用場面とまとめです。
6:42下書きの一時メモ、使い終えた計算結果のキャッシュ、編集画面だけで使う補助項目など、
6:47不要になった項目を元のオブジェクトから取り除く用途に向いています。
6:53実装の前に、項目をなくしたいのか、値だけを空にしたいのか、新しいデータを作りたいのかを言葉にすると判断しやすくなります。
7:01たとえば送信データの整形では、不要なキーを削除する方式に加えて、送信するキーだけを明示して新しいオブジェクトを作る方式も検討できます。
7:11リフレクト・デリートプロパティーは、変更対象とキーが明確で、削除結果を処理へ反映したい場面に絞ると扱いやすくなります。
7:20戻り値の確認を忘れずに使ってみてください。
7:23お疲れさまでした。

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

この動画で学べること

Reflect.deleteProperty()でオブジェクトの項目を削除し、成否を判定する方法を解説。ブラウザーとNode.jsでの実行手順、期待出力、削除できない項目や配列を扱う際の注意点を学べます。

解説記事・サンプルコードを読む：JavaScriptのReflect.deleteProperty()：プロパティ削除の成否を判定する →