VIDEO LESSON

JavaScriptのObject.assign()の使い方：引数・戻り値・実例と注意点の解説動画

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

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

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

0:00こんにちは。
0:01今回はオブジェクト・アサインを紹介します。
0:05これは、複数のオブジェクトが持つプロパティを、書き込み先のオブジェクトへまとめてコピーする静的メソッドです。
0:16たとえば、アプリの既定の設定と、利用者が選んだ設定を合成して、実際に使う設定を一つのオブジェクトに組み立てる、
0:23といった場面で活躍します。
0:30この動画では、書き方と引数と戻り値、記事の基本例と境界例、後から渡した値が優先される上書きの順番、
0:39浅いコピーという大切な注意点、そして例外の扱いまで、実行結果と一緒に学びます。
0:48オブジェクトを組み合わせる処理は、設定やデータの初期化など、日常のコードに数多く登場します。
0:58まず動作環境を確認します。
1:00オブジェクト・アサインは、イーエス・シックスで導入された歴史のあるメソッドです。
1:06クロームでは四十五以降、エッジでは十二以降、ファイアーフォックスでは三十四以降、
1:10サファリでは九以降で使えます。
1:14ノード・ジェイエスでは四・ゼロ・ゼロ以降に対応しています。
1:18記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:23対応範囲が広く、現在使われている環境ではほぼ心配なく使えますが、公開するコードでは対象環境を先に確認する習慣を付けてください。
1:32追加の読み込みは不要で、関数として備わっていることを実機でも確認済みです。
1:38書き方を確認します。
1:39オブジェクトと書き、続けてアサインと書いて、カッコの中に書き込み先とコピー元を渡します。
1:45第一引数が書き込み先で、ターゲットと呼ばれます。
1:48第二引数以降がコピー元で、ソースと呼ばれ、複数並べることができます。
1:53コピーされるのは、コピー元自身の、列挙可能な文字列キーとシンボルキーです。
1:58戻り値は新しく作られた別のオブジェクトではなく、変更されたターゲットそのものです。
2:03スライドの例では、戻り値とターゲットが同じオブジェクトであることを、イコール三つでの比較で実機確認しました。
2:11コピー元は変更されず、変わるのはターゲットだけです。
2:14記事の基本例を見ます。
2:16テーマがライトでサイズが十二という既定の設定と、テーマをダークに変える利用者設定を合成するコードです。
2:23ターゲットには空のオブジェクトを渡し、そこへ既定設定、続けて利用者設定の順にコピーします。
2:30実行結果は、テーマがダーク、サイズが十二となり、ノードの実機結果とも一致しています。
2:36ここで空のオブジェクトをターゲットにするのが大切な工夫です。
2:41既定設定そのものをターゲットにすると、元の既定が書き換わってしまいます。
2:46空の受け皿を用意することで、元の設定を守りながら合成結果だけを得られるのです。
2:52上書きの順番を確認します。
2:54コピー元は左から右へ順番にコピーされるため、同じキーが重なった場合は、後からコピーされた値が残ります。
3:02スライドの例では、エーが一のターゲットに、ビーが二のオブジェクト、続けてエーが三のオブジェクトを重ねると、
3:09最終的にエーは三、ビーは二になることを実機で確認しました。
3:16基本例でテーマがダークになったのも、この仕組みによるものです。
3:21つまり、優先したい設定ほど後ろに置く、という並べ方が基本ルールになります。
3:26逆に、既定値を先に、利用者の選択を後に置く順番を間違えると、意図と逆の結果になるので注意してください。
3:35ターゲットへの影響をもう少し詳しく見ます。
3:38ターゲットに既存のオブジェクトを渡すと、そのオブジェクト自体が直接書き換わります。
3:43スライドの例では、エックスが一のオブジェクトにワイが二をコピーすると、元の変数の中身自体が両方を持つ状態に変わることを実機で確認しました。
3:53これは便利な反面、元の状態を後で使いたい場面では思わぬ事故の元になります。
3:59元を残したいときは、基本例のように空のオブジェクトをターゲットにして、そこへ元のオブジェクトをコピーしてください。
4:07ターゲットが変わる、という一点を覚えておくだけで、多くの使い間違いを防げます。
4:12記事の境界条件の例を見ます。
4:14入れ子のオブジェクトを持つコピー元を用意し、空のオブジェクトへコピーしたうえで、
4:19入れ子の部分が同じオブジェクトかどうかを比べるコードです。
4:24実行結果はトゥルーで、記事の期待出力とも一致しています。
4:28これは、オブジェクト・アサインが浅いコピーだからです。
4:32表面的なキーは新しい受け皿へ移りますが、値がオブジェクトの場合は、その参照、
4:36つまり指し示す先がそのままコピーされます。
4:40そのため、コピー側の入れ子を変更すると、コピー元にも影響します。
4:45入れ子まで完全に独立させたい場合は、ストラクチャード・クローンなど別の方法が必要です。
4:51コピーされるプロパティの範囲を確認します。
4:54対象になるのは、コピー元自身の、列挙可能な文字列キーとシンボルキーです。
4:59スライドの例では、シンボルをキーに持つ値が正しくコピーされることを実機で確認しました。
5:05一方、継承したプロパティや、列挙できないように設定されたプロパティはコピーされません。
5:11もう一つ知っておきたいのがゲッターの扱いです。
5:15コピー元にゲッターがあると、それが実行されて得られた値が、通常の値として書き込まれます。
5:21セッターがあるターゲットではセッターが呼ばれる場合もあります。
5:25記事が注意点として挙げている点で、特殊なプロパティを持つオブジェクトでは動作が変わることがあります。
5:33注意点を見ます。
5:34もっとも大切なのは、ターゲットにヌルやアンディファインドを渡すと、タイプ・エラーの例外が発生することです。
5:42ターゲットだけは、必ずオブジェクトを用意してください。
5:46一方、コピー元の位置にヌルやアンディファインドが混ざっていても、例外にはならず、
5:50その引数は飛ばされて処理が続きます。
5:54スライドの結果はどちらも実機で確認済みです。
5:58この非対称な扱いは、設定の合成で役立ちます。
6:01存在しないかもしれない設定を、そのままコピー元に並べても安全だからです。
6:06ただし、ターゲット側に未定義の変数が紛れ込むと即座に例外になるので、代入先の確認は欠かさないでください。
6:14実務に近い実例として、スプレッド構文との関係を見ます。
6:18既定設定に利用者設定を重ねる合成は、ドット三つのスプレッド構文でも同じ結果が得られます。
6:25スライドでは両方の書き方を実行し、結果が完全に一致することを実機で確認しました。
6:31使い分けの目安はシンプルです。
6:33新しいオブジェクトを作るだけなら、どちらの書き方でも構いません。
6:38一方、すでに存在するオブジェクトへ後から書き足したい場合は、ターゲットを直接変更できるオブジェクト・アサインが必要です。
6:46また、セッターを呼びたい場合もアサイン側の特徴になります。
6:51場面に合わせて選べるよう、両方の読み書きに慣れておきましょう。
6:55まとめです。
6:56オブジェクト・アサインは、コピー元のプロパティをターゲットへコピーし、ターゲット自身を返す静的メソッドです。
7:04判断のポイントは三つです。
7:06まず、ターゲットは直接書き換わるので、元を守りたいときは空のオブジェクトをターゲットにすること。
7:14次に、同じキーは後ろのコピー元が優先されるので、既定、利用者設定の順に並べること。
7:20そして、コピーは浅く、入れ子のオブジェクトは共有されるので、独立させたいデータには別の方法を使うことです。
7:28まずは記事の基本例と境界例を実行し、引数の順番を入れ替えて結果を予測してから確かめてみてください。
7:35次に学ぶオブジェクト・フロム・エントリーズと組み合わせると、オブジェクト操作の幅がさらに広がります。
7:43お疲れさまでした。

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

この動画で学べること

Object.assign()で複数オブジェクトのプロパティを対象へコピーする方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのObject.assign()の使い方：引数・戻り値・実例と注意点 →