WEBVTT

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

2
00:00:00.883 --> 00:00:06.035
今回はジャバスクリプトのリフレクト・デリートプロパティーを紹介します。

3
00:00:06.035 --> 00:00:12.807
これは、オブジェクトの項目を削除し、削除できたかどうかを真偽値で受け取るためのメソッドです。

4
00:00:12.807 --> 00:00:17.002
設定オブジェクトから一時的なメモを取り除くとき、削除できた場合とできなかった場合で、

5
00:00:17.002 --> 00:00:21.197
処理を分けたい場面があります。

6
00:00:21.197 --> 00:00:28.410
このメソッドは、対象のオブジェクトとキーを引数で渡すと、結果をトゥルーかフォルスで返してくれます。

7
00:00:28.410 --> 00:00:35.771
この動画では、基本の書き方から、削除できない項目や配列の注意点、例外になるケースまで順に解説します。

8
00:00:35.771 --> 00:00:41.070
キーを変数で渡せるため、共通のデータ処理にも組み込みやすいのが特長です。

9
00:00:41.070 --> 00:00:42.240
まず動作環境です。

10
00:00:42.240 --> 00:00:49.388
リフレクト・デリートプロパティーは、ブラウザー専用の機能ではなく、ジャバスクリプトの組み込みエーピーアイです。

11
00:00:49.388 --> 00:00:54.976
ブラウザーでもノード・ジェイエスでも利用でき、パッケージの追加やインポートは不要です。

12
00:00:54.976 --> 00:00:59.265
二千十六年九月ごろから主要ブラウザーで広く使えるようになりました。

13
00:00:59.265 --> 00:01:06.673
試すときは、ブラウザーなら開発者ツールのコンソールに貼るだけ、ノード・ジェイエスならファイルに保存して実行します。

14
00:01:06.673 --> 00:01:13.561
古いブラウザーや組み込み環境を対象にする場合は、画面のようにタイプオブで存在を確認してから使ってください。

15
00:01:13.561 --> 00:01:18.370
確認結果がフォルスなら、その環境では後続の処理を実行しない判断が必要です。

16
00:01:18.370 --> 00:01:20.406
基本の書き方を見ましょう。

17
00:01:20.406 --> 00:01:26.201
リフレクト・デリートプロパティーと書き、かっこの中に二つの引数を渡します。

18
00:01:26.201 --> 00:01:31.996
一つ目は削除対象のオブジェクトで、配列や関数もオブジェクトとして渡せます。

19
00:01:31.996 --> 00:01:37.321
二つ目は削除するプロパティのキーで、文字列またはシンボルを使います。

20
00:01:37.321 --> 00:01:39.984
数値のキーは文字列へ変換されます。

21
00:01:39.984 --> 00:01:45.622
戻り値は、削除が成功扱いならトゥルー、削除できない項目ならフォルスです。

22
00:01:45.622 --> 00:01:49.851
この処理は同期処理で、戻り値はプロミスではありません。

23
00:01:49.851 --> 00:01:53.923
その場で真偽値が得られるので、アウェイトは不要です。

24
00:01:53.923 --> 00:01:58.622
結果を受け取って、そのまま条件分岐に使えるのがポイントです。

25
00:01:58.622 --> 00:02:00.521
ここで大切な注意点です。

26
00:02:00.521 --> 00:02:05.743
トゥルーは、項目が存在していて削除した、という意味ではありません。

27
00:02:05.743 --> 00:02:12.073
通常のオブジェクトでは、指定したキーが最初から存在しなくてもトゥルーが返ります。

28
00:02:12.073 --> 00:02:18.719
そのため、戻り値だけで削除件数を数えると、実際より多く数えてしまう可能性があります。

29
00:02:18.719 --> 00:02:26.474
存在した項目を削除したと記録したい場合は、削除の前にイン演算子などで存在確認を別途行ってください。

30
00:02:26.474 --> 00:02:34.544
反対に、その項目がない状態へ片付けることだけが目的なら、存在しないキーを成功扱いにする動作は便利です。

31
00:02:34.544 --> 00:02:39.450
目的に合わせて、戻り値の意味を正しく読み分けることが大切です。

32
00:02:39.450 --> 00:02:41.475
具体例で動きを確かめましょう。

33
00:02:41.475 --> 00:02:46.472
下書きデータを表すオブジェクトには、タイトルと一時メモの二項目があります。

34
00:02:46.472 --> 00:02:50.793
一時メモのキーを指定して削除すると、戻り値はトゥルーになります。

35
00:02:50.793 --> 00:02:54.844
そのあと一時メモを読み取ると、アンディファインドになります。

36
00:02:54.844 --> 00:02:57.274
項目そのものが取り除かれたためです。

37
00:02:57.274 --> 00:03:00.380
一方、タイトルなど他の項目はそのまま残ります。

38
00:03:00.380 --> 00:03:05.376
削除は指定したキーだけに効くので、残したい項目まで消える心配はありません。

39
00:03:05.376 --> 00:03:10.778
まずはこの基本パターンを、手元のコンソールで一度打ち込んで確かめてみてください。

40
00:03:10.778 --> 00:03:15.774
キーを変数に入れて渡せば、消したい項目を実行時に切り替えることもできます。

41
00:03:15.774 --> 00:03:18.661
次に、削除できないケースを見ましょう。

42
00:03:18.661 --> 00:03:24.283
コンフィギュラブルをフォルスにして定義した項目は、削除が保護されています。

43
00:03:24.283 --> 00:03:30.058
この項目を削除しようとすると、戻り値はフォルスになり、値は元のまま残ります。

44
00:03:30.058 --> 00:03:34.920
例外で止まらないので、通知を出すなどの分岐処理を続けて書けます。

45
00:03:34.920 --> 00:03:38.111
一方、対象にヌルを渡した場合は話が別です。

46
00:03:38.111 --> 00:03:43.278
ヌルはオブジェクトではないため、タイプエラーという例外が発生します。

47
00:03:43.278 --> 00:03:48.900
画面の例ではトライ・キャッチで受け止め、エラーの名前だけを表示しています。

48
00:03:48.900 --> 00:03:54.826
フォルスと例外は別の仕組みとして扱うことが、このあとの設計でも重要になります。

49
00:03:54.826 --> 00:03:58.321
従来のデリート演算子との違いも押さえましょう。

50
00:03:58.321 --> 00:04:03.943
厳格モードのデリートは、削除できない自己プロパティに対して例外を投げます。

51
00:04:03.943 --> 00:04:10.628
そのため、削除の失敗を通常の条件分岐で扱いたい場面では、例外処理を書く必要がありました。

52
00:04:10.628 --> 00:04:15.946
リフレクト・デリートプロパティーは、その場合にフォルスを返すだけです。

53
00:04:15.946 --> 00:04:22.024
画面の例のように、保護された項目でも結果を変数で受け取り、イフ文で分岐できます。

54
00:04:22.024 --> 00:04:27.950
削除できない項目を想定内の出来事として扱いたい場合に、この違いが効いてきます。

55
00:04:27.950 --> 00:04:35.243
逆に言えば、失敗に気づかず進んでしまう恐れもあるので、戻り値は必ず確認する習慣を付けてください。

56
00:04:35.243 --> 00:04:37.308
配列に使うときの注意点です。

57
00:04:37.308 --> 00:04:41.438
配列の添字を指定すると、その位置のプロパティが消えます。

58
00:04:41.438 --> 00:04:46.601
しかし、後ろの要素が前へ詰まるわけではなく、配列の長さも変わりません。

59
00:04:46.601 --> 00:04:53.091
画面の例では、長さは三のままで、その位置に要素が存在するかを調べるとフォルスになります。

60
00:04:53.091 --> 00:04:57.590
読み取るとアンディファインドに見えますが、値としてアンディファインドが入った要素ではなく、

61
00:04:57.590 --> 00:05:02.089
要素自体がない空きスロットです。

62
00:05:02.089 --> 00:05:09.907
一覧から行を削除して詰めたい用途では、このメソッドではなく、配列向けの削除や再構成の処理を選んでください。

63
00:05:09.907 --> 00:05:14.775
見た目が同じでも意味が違う点が、初心者がつまずきやすいところです。

64
00:05:14.775 --> 00:05:17.498
もう二つ、仕組みの注意点があります。

65
00:05:17.498 --> 00:05:18.859
一つ目は継承です。

66
00:05:18.859 --> 00:05:22.793
削除の対象は、オブジェクト自身のプロパティだけです。

67
00:05:22.793 --> 00:05:26.726
同名のプロパティがプロトタイプにあると、自分の項目を消したあとの読み取りでは、

68
00:05:26.726 --> 00:05:30.659
継承した値が見えてきます。

69
00:05:30.659 --> 00:05:38.072
画面の例では、エディターという自分の値を消すと、親から継承したビューワーが見えるようになりました。

70
00:05:38.072 --> 00:05:43.820
削除後の値がアンディファインドかどうかだけでは、削除の成否を判定できません。

71
00:05:43.820 --> 00:05:47.904
二つ目は、削除が元のオブジェクト自体を変更する点です。

72
00:05:47.904 --> 00:05:53.956
同じオブジェクトを別の場所から参照していれば、そちらから見える内容も変わります。

73
00:05:53.956 --> 00:06:00.763
共有データに使うときは、そのオブジェクトをどの処理が所有しているか、先に確認してください。

74
00:06:00.763 --> 00:06:03.296
フォルスと例外の区別を整理します。

75
00:06:03.296 --> 00:06:10.298
削除できない項目がフォルスになるからといって、例外が一切発生しないエーピーアイではありません。

76
00:06:10.298 --> 00:06:14.171
対象がヌルや数値などの場合はタイプエラーになります。

77
00:06:14.171 --> 00:06:19.087
さらに、対象がプロキシーの場合は、削除操作がハンドラーへ渡ります。

78
00:06:19.087 --> 00:06:25.195
その処理自身が例外を投げる場合や、守るべき条件に違反する場合にも例外が発生します。

79
00:06:25.195 --> 00:06:30.186
外部から受け取った任意のオブジェクトを扱う共通処理では、真偽値による分岐に加えて、

80
00:06:30.186 --> 00:06:35.177
例外への対応もあらかじめ設計しておくことが大切です。

81
00:06:35.177 --> 00:06:40.391
成否の確認と例外の受け止め、この二段構えが安全な使い方につながります。

82
00:06:40.391 --> 00:06:42.425
最後に活用場面とまとめです。

83
00:06:42.425 --> 00:06:47.801
下書きの一時メモ、使い終えた計算結果のキャッシュ、編集画面だけで使う補助項目など、

84
00:06:47.801 --> 00:06:53.178
不要になった項目を元のオブジェクトから取り除く用途に向いています。

85
00:06:53.178 --> 00:07:01.896
実装の前に、項目をなくしたいのか、値だけを空にしたいのか、新しいデータを作りたいのかを言葉にすると判断しやすくなります。

86
00:07:01.896 --> 00:07:11.631
たとえば送信データの整形では、不要なキーを削除する方式に加えて、送信するキーだけを明示して新しいオブジェクトを作る方式も検討できます。

87
00:07:11.631 --> 00:07:20.204
リフレクト・デリートプロパティーは、変更対象とキーが明確で、削除結果を処理へ反映したい場面に絞ると扱いやすくなります。

88
00:07:20.204 --> 00:07:23.255
戻り値の確認を忘れずに使ってみてください。

89
00:07:23.255 --> 00:07:24.563
お疲れさまでした。