WEBVTT

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

2
00:00:01.232 --> 00:00:05.546
今回はオブジェクト・アサインを紹介します。

3
00:00:05.546 --> 00:00:16.638
これは、複数のオブジェクトが持つプロパティを、書き込み先のオブジェクトへまとめてコピーする静的メソッドです。

4
00:00:16.638 --> 00:00:23.623
たとえば、アプリの既定の設定と、利用者が選んだ設定を合成して、実際に使う設定を一つのオブジェクトに組み立てる、

5
00:00:23.623 --> 00:00:30.607
といった場面で活躍します。

6
00:00:30.607 --> 00:00:39.645
この動画では、書き方と引数と戻り値、記事の基本例と境界例、後から渡した値が優先される上書きの順番、

7
00:00:39.645 --> 00:00:48.683
浅いコピーという大切な注意点、そして例外の扱いまで、実行結果と一緒に学びます。

8
00:00:48.683 --> 00:00:58.132
オブジェクトを組み合わせる処理は、設定やデータの初期化など、日常のコードに数多く登場します。

9
00:00:58.132 --> 00:01:00.099
まず動作環境を確認します。

10
00:01:00.099 --> 00:01:06.152
オブジェクト・アサインは、イーエス・シックスで導入された歴史のあるメソッドです。

11
00:01:06.152 --> 00:01:10.314
クロームでは四十五以降、エッジでは十二以降、ファイアーフォックスでは三十四以降、

12
00:01:10.314 --> 00:01:14.475
サファリでは九以降で使えます。

13
00:01:14.475 --> 00:01:18.863
ノード・ジェイエスでは四・ゼロ・ゼロ以降に対応しています。

14
00:01:18.863 --> 00:01:23.252
記事の互換性情報はエムディーエヌのデータに基づく目安です。

15
00:01:23.252 --> 00:01:32.785
対応範囲が広く、現在使われている環境ではほぼ心配なく使えますが、公開するコードでは対象環境を先に確認する習慣を付けてください。

16
00:01:32.785 --> 00:01:38.384
追加の読み込みは不要で、関数として備わっていることを実機でも確認済みです。

17
00:01:38.384 --> 00:01:39.723
書き方を確認します。

18
00:01:39.723 --> 00:01:45.614
オブジェクトと書き、続けてアサインと書いて、カッコの中に書き込み先とコピー元を渡します。

19
00:01:45.614 --> 00:01:48.827
第一引数が書き込み先で、ターゲットと呼ばれます。

20
00:01:48.827 --> 00:01:53.379
第二引数以降がコピー元で、ソースと呼ばれ、複数並べることができます。

21
00:01:53.379 --> 00:01:58.332
コピーされるのは、コピー元自身の、列挙可能な文字列キーとシンボルキーです。

22
00:01:58.332 --> 00:02:03.821
戻り値は新しく作られた別のオブジェクトではなく、変更されたターゲットそのものです。

23
00:02:03.821 --> 00:02:11.051
スライドの例では、戻り値とターゲットが同じオブジェクトであることを、イコール三つでの比較で実機確認しました。

24
00:02:11.051 --> 00:02:14.532
コピー元は変更されず、変わるのはターゲットだけです。

25
00:02:14.532 --> 00:02:16.184
記事の基本例を見ます。

26
00:02:16.184 --> 00:02:23.842
テーマがライトでサイズが十二という既定の設定と、テーマをダークに変える利用者設定を合成するコードです。

27
00:02:23.842 --> 00:02:30.599
ターゲットには空のオブジェクトを渡し、そこへ既定設定、続けて利用者設定の順にコピーします。

28
00:02:30.599 --> 00:02:36.905
実行結果は、テーマがダーク、サイズが十二となり、ノードの実機結果とも一致しています。

29
00:02:36.905 --> 00:02:41.410
ここで空のオブジェクトをターゲットにするのが大切な工夫です。

30
00:02:41.410 --> 00:02:46.816
既定設定そのものをターゲットにすると、元の既定が書き換わってしまいます。

31
00:02:46.816 --> 00:02:52.672
空の受け皿を用意することで、元の設定を守りながら合成結果だけを得られるのです。

32
00:02:52.672 --> 00:02:54.755
上書きの順番を確認します。

33
00:02:54.755 --> 00:03:02.926
コピー元は左から右へ順番にコピーされるため、同じキーが重なった場合は、後からコピーされた値が残ります。

34
00:03:02.926 --> 00:03:09.496
スライドの例では、エーが一のターゲットに、ビーが二のオブジェクト、続けてエーが三のオブジェクトを重ねると、

35
00:03:09.496 --> 00:03:16.065
最終的にエーは三、ビーは二になることを実機で確認しました。

36
00:03:16.065 --> 00:03:21.032
基本例でテーマがダークになったのも、この仕組みによるものです。

37
00:03:21.032 --> 00:03:26.960
つまり、優先したい設定ほど後ろに置く、という並べ方が基本ルールになります。

38
00:03:26.960 --> 00:03:35.132
逆に、既定値を先に、利用者の選択を後に置く順番を間違えると、意図と逆の結果になるので注意してください。

39
00:03:35.132 --> 00:03:38.133
ターゲットへの影響をもう少し詳しく見ます。

40
00:03:38.133 --> 00:03:43.993
ターゲットに既存のオブジェクトを渡すと、そのオブジェクト自体が直接書き換わります。

41
00:03:43.993 --> 00:03:53.855
スライドの例では、エックスが一のオブジェクトにワイが二をコピーすると、元の変数の中身自体が両方を持つ状態に変わることを実機で確認しました。

42
00:03:53.855 --> 00:03:59.143
これは便利な反面、元の状態を後で使いたい場面では思わぬ事故の元になります。

43
00:03:59.143 --> 00:04:07.290
元を残したいときは、基本例のように空のオブジェクトをターゲットにして、そこへ元のオブジェクトをコピーしてください。

44
00:04:07.290 --> 00:04:12.864
ターゲットが変わる、という一点を覚えておくだけで、多くの使い間違いを防げます。

45
00:04:12.864 --> 00:04:14.843
記事の境界条件の例を見ます。

46
00:04:14.843 --> 00:04:19.720
入れ子のオブジェクトを持つコピー元を用意し、空のオブジェクトへコピーしたうえで、

47
00:04:19.720 --> 00:04:24.598
入れ子の部分が同じオブジェクトかどうかを比べるコードです。

48
00:04:24.598 --> 00:04:28.556
実行結果はトゥルーで、記事の期待出力とも一致しています。

49
00:04:28.556 --> 00:04:32.373
これは、オブジェクト・アサインが浅いコピーだからです。

50
00:04:32.373 --> 00:04:36.543
表面的なキーは新しい受け皿へ移りますが、値がオブジェクトの場合は、その参照、

51
00:04:36.543 --> 00:04:40.713
つまり指し示す先がそのままコピーされます。

52
00:04:40.713 --> 00:04:45.237
そのため、コピー側の入れ子を変更すると、コピー元にも影響します。

53
00:04:45.237 --> 00:04:51.316
入れ子まで完全に独立させたい場合は、ストラクチャード・クローンなど別の方法が必要です。

54
00:04:51.316 --> 00:04:54.333
コピーされるプロパティの範囲を確認します。

55
00:04:54.333 --> 00:04:59.506
対象になるのは、コピー元自身の、列挙可能な文字列キーとシンボルキーです。

56
00:04:59.506 --> 00:05:05.684
スライドの例では、シンボルをキーに持つ値が正しくコピーされることを実機で確認しました。

57
00:05:05.684 --> 00:05:11.863
一方、継承したプロパティや、列挙できないように設定されたプロパティはコピーされません。

58
00:05:11.863 --> 00:05:15.168
もう一つ知っておきたいのがゲッターの扱いです。

59
00:05:15.168 --> 00:05:21.490
コピー元にゲッターがあると、それが実行されて得られた値が、通常の値として書き込まれます。

60
00:05:21.490 --> 00:05:25.944
セッターがあるターゲットではセッターが呼ばれる場合もあります。

61
00:05:25.944 --> 00:05:33.128
記事が注意点として挙げている点で、特殊なプロパティを持つオブジェクトでは動作が変わることがあります。

62
00:05:33.128 --> 00:05:34.317
注意点を見ます。

63
00:05:34.317 --> 00:05:42.197
もっとも大切なのは、ターゲットにヌルやアンディファインドを渡すと、タイプ・エラーの例外が発生することです。

64
00:05:42.197 --> 00:05:46.212
ターゲットだけは、必ずオブジェクトを用意してください。

65
00:05:46.212 --> 00:05:50.523
一方、コピー元の位置にヌルやアンディファインドが混ざっていても、例外にはならず、

66
00:05:50.523 --> 00:05:54.835
その引数は飛ばされて処理が続きます。

67
00:05:54.835 --> 00:05:58.106
スライドの結果はどちらも実機で確認済みです。

68
00:05:58.106 --> 00:06:01.376
この非対称な扱いは、設定の合成で役立ちます。

69
00:06:01.376 --> 00:06:06.729
存在しないかもしれない設定を、そのままコピー元に並べても安全だからです。

70
00:06:06.729 --> 00:06:14.460
ただし、ターゲット側に未定義の変数が紛れ込むと即座に例外になるので、代入先の確認は欠かさないでください。

71
00:06:14.460 --> 00:06:18.484
実務に近い実例として、スプレッド構文との関係を見ます。

72
00:06:18.484 --> 00:06:25.041
既定設定に利用者設定を重ねる合成は、ドット三つのスプレッド構文でも同じ結果が得られます。

73
00:06:25.041 --> 00:06:31.001
スライドでは両方の書き方を実行し、結果が完全に一致することを実機で確認しました。

74
00:06:31.001 --> 00:06:33.237
使い分けの目安はシンプルです。

75
00:06:33.237 --> 00:06:38.005
新しいオブジェクトを作るだけなら、どちらの書き方でも構いません。

76
00:06:38.005 --> 00:06:46.947
一方、すでに存在するオブジェクトへ後から書き足したい場合は、ターゲットを直接変更できるオブジェクト・アサインが必要です。

77
00:06:46.947 --> 00:06:51.268
また、セッターを呼びたい場合もアサイン側の特徴になります。

78
00:06:51.268 --> 00:06:55.888
場面に合わせて選べるよう、両方の読み書きに慣れておきましょう。

79
00:06:55.888 --> 00:06:56.798
まとめです。

80
00:06:56.798 --> 00:07:04.988
オブジェクト・アサインは、コピー元のプロパティをターゲットへコピーし、ターゲット自身を返す静的メソッドです。

81
00:07:04.988 --> 00:07:06.960
判断のポイントは三つです。

82
00:07:06.960 --> 00:07:14.240
まず、ターゲットは直接書き換わるので、元を守りたいときは空のオブジェクトをターゲットにすること。

83
00:07:14.240 --> 00:07:20.458
次に、同じキーは後ろのコピー元が優先されるので、既定、利用者設定の順に並べること。

84
00:07:20.458 --> 00:07:28.496
そして、コピーは浅く、入れ子のオブジェクトは共有されるので、独立させたいデータには別の方法を使うことです。

85
00:07:28.496 --> 00:07:35.928
まずは記事の基本例と境界例を実行し、引数の順番を入れ替えて結果を予測してから確かめてみてください。

86
00:07:35.928 --> 00:07:43.511
次に学ぶオブジェクト・フロム・エントリーズと組み合わせると、オブジェクト操作の幅がさらに広がります。

87
00:07:43.511 --> 00:07:44.876
お疲れさまでした。