diff options
Diffstat (limited to 'files/ja/web/javascript/reference/global_objects/object/assign')
| -rw-r--r-- | files/ja/web/javascript/reference/global_objects/object/assign/index.html | 276 | ||||
| -rw-r--r-- | files/ja/web/javascript/reference/global_objects/object/assign/index.md | 273 |
2 files changed, 273 insertions, 276 deletions
diff --git a/files/ja/web/javascript/reference/global_objects/object/assign/index.html b/files/ja/web/javascript/reference/global_objects/object/assign/index.html deleted file mode 100644 index 9a3db4cc82..0000000000 --- a/files/ja/web/javascript/reference/global_objects/object/assign/index.html +++ /dev/null @@ -1,276 +0,0 @@ ---- -title: Object.assign() -slug: Web/JavaScript/Reference/Global_Objects/Object/assign -tags: - - ECMAScript 2015 - - JavaScript - - Method - - Object - - Reference - - polyfill - - メソッド -translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign ---- -<p>{{JSRef}}</p> - -<p><span class="seoSummary"><strong><code>Object.assign()</code></strong> メソッドは、すべての{{jsxref("Object/propertyIsEnumerable", "列挙可能", "", 1)}}な{{jsxref("Object/hasOwnProperty", "自身のプロパティ", "", 1)}}の値を、1つ以上の<em>コピー元オブジェクト</em>から<em>コピー先オブジェクト</em>にコピーするために使用されます。</span></p> - -<div>{{EmbedInteractiveExample("pages/js/object-assign.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">Object.assign(<var>target</var>, ...<var>sources</var>)</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>target</var></code></dt> - <dd>コピー先オブジェクト — ソースのプロパティを適用するもので、変更後に返されます。</dd> - <dt><code><var>sources</var></code></dt> - <dd>コピー元オブジェクト — 適用したいプロパティを含むオブジェクトです。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>コピー先オブジェクトです。</p> - -<h2 id="Description" name="Description">解説</h2> - -<p>コピー先オブジェクトのプロパティは、コピー元に同じ{{jsxref("Object/keys", "キー", "", 1)}}のプロパティがあると上書きされます。より後のコピー元のプロパティが、より前のものを同様に上書きします。</p> - -<p><code>Object.assign()</code> メソッドは、コピー元オブジェクトから<ruby>列挙可能<rp> (</rp><rt>enumerable</rt><rp>) </rp></ruby>かつ<ruby>直接所有<rp> (</rp><rt>own</rt><rp>) </rp></ruby>のプロパティだけをコピー先オブジェクトにコピーします。この際、コピー元オブジェクトには <code>[[Get]]</code>、コピー先オブジェクトには <code>[[Set]]</code> を使いますので、<a href="/ja/docs/Web/JavaScript/Reference/Functions/get">ゲッター</a>と<a href="/ja/docs/Web/JavaScript/Reference/Functions/set">セッター</a>を呼び出すことになります。これはプロパティの<ruby><em>代入</em><rp> (</rp><rt>assign</rt><rp>) </rp></ruby>であり、プロパティをコピーしたり新しく定義をしたりするのとは違います。そのため、コピー元にゲッターが存在する場合、新しいプロパティをプロトタイプにマージする用途には不適切でしょう。</p> - -<p>プロパティ定義を (<ruby>列挙可能<rp> (</rp><rt>enumerable</rt><rp>) </rp></ruby>属性も含めて) プロトタイプの中にコピーするには、このメソッドではなく {{jsxref("Object.getOwnPropertyDescriptor()")}} と {{jsxref("Object.defineProperty()")}} を使用してください。</p> - -<p>{{jsxref("String")}} と {{jsxref("Symbol")}} の両方のプロパティがコピーされます。</p> - -<p>エラーが発生した場合、例えばプロパティが書き込み不可の場合は、 {{jsxref("TypeError")}} が発生しますが、エラーが発生する前にプロパティが追加される場合、 <code><var>target</var></code> オブジェクトが変更されることがあります。</p> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> <code>Object.assign()</code> はコピー元の値が {{jsxref("null")}} や {{jsxref("undefined")}} でも例外を投げないことに注意して下さい。</p> -</div> - -<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> - -<p>この{{Glossary("Polyfill","ポリフィル")}}は、 ES5 にシンボルがないため、シンボルのプロパティに対応していません。</p> - -<pre class="brush: js notranslate">if (typeof Object.assign !== 'function') { - // Must be writable: true, enumerable: false, configurable: true - Object.defineProperty(Object, "assign", { - value: function assign(target, varArgs) { // .length of function is 2 - 'use strict'; - if (target === null || target === undefined) { - throw new TypeError('Cannot convert undefined or null to object'); - } - - var to = Object(target); - - for (var index = 1; index < arguments.length; index++) { - var nextSource = arguments[index]; - - if (nextSource !== null && nextSource !== undefined) { - for (var nextKey in nextSource) { - // Avoid bugs when hasOwnProperty is shadowed - if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { - to[nextKey] = nextSource[nextKey]; - } - } - } - } - return to; - }, - writable: true, - configurable: true - }); -} -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Cloning_an_object" name="Cloning_an_object">オブジェクトの複製</h3> - -<pre class="brush: js notranslate">const obj = { a: 1 }; -const copy = Object.assign({}, obj); -console.log(copy); // { a: 1 } -</pre> - -<h3 id="Deep_Clone" name="Deep_Clone">深い複製についての注意</h3> - -<p><code>Object.assign()</code> はプロパティの値をコピーするため、深い複製を行うには別な方法を使用する必要があります。</p> - -<p>元の値がオブジェクトへの参照である場合、参照の値のみをコピーするからです。</p> - -<pre class="brush: js notranslate">function test() { - 'use strict'; - - let obj1 = { a: 0 , b: { c: 0}}; - let obj2 = Object.assign({}, obj1); - console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}} - - obj1.a = 1; - console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}} - console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}} - - obj2.a = 2; - console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}} - console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 0}} - - obj2.b.c = 3; - console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 3}} - console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 3}} - - // Deep Clone - obj1 = { a: 0 , b: { c: 0}}; - let obj3 = JSON.parse(JSON.stringify(obj1)); - obj1.a = 4; - obj1.b.c = 4; - console.log(JSON.stringify(obj3)); // { "a": 0, "b": { "c": 0}} -} - -test();</pre> - -<h3 id="Merging_objects" name="Merging_objects">オブジェクトの合成</h3> - -<pre class="brush: js notranslate">const o1 = { a: 1 }; -const o2 = { b: 2 }; -const o3 = { c: 3 }; - -const obj = Object.assign(o1, o2, o3); -console.log(obj); // { a: 1, b: 2, c: 3 } -console.log(o1); // { a: 1, b: 2, c: 3 }, コピー先オブジェクト自体が変化する</pre> - -<h3 id="Merging_objects_with_same_properties" name="Merging_objects_with_same_properties">同じプロパティを持つオブジェクトの合成</h3> - -<pre class="brush: js notranslate">const o1 = { a: 1, b: 1, c: 1 }; -const o2 = { b: 2, c: 2 }; -const o3 = { c: 3 }; - -const obj = Object.assign({}, o1, o2, o3); -console.log(obj); // { a: 1, b: 2, c: 3 }</pre> - -<p>プロパティは、引数の順でより後にあるオブジェクトが同じプロパティを持っていると上書きされます。</p> - -<h3 id="Copying_symbol-typed_properties" name="Copying_symbol-typed_properties">シンボル型のプロパティのコピー</h3> - -<pre class="brush: js notranslate">const o1 = { a: 1 }; -const o2 = { [Symbol('foo')]: 2 }; - -const obj = Object.assign({}, o1, o2); -console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox) -Object.getOwnPropertySymbols(obj); // [Symbol(foo)] -</pre> - -<h3 id="Properties_on_the_prototype_chain_and_non-enumerable_properties_cannot_be_copied" name="Properties_on_the_prototype_chain_and_non-enumerable_properties_cannot_be_copied">プロトタイプチェーン上のプロパティと列挙可能ではないプロパティはコピー不可</h3> - -<pre class="brush: js notranslate">const obj = Object.create({ foo: 1 }, { // foo は obj のプロトタイプチェーン - bar: { - value: 2 // bar は列挙可能ではないプロパティ - }, - baz: { - value: 3, - enumerable: true // bazは直接所有で列挙可能なプロパティ - } -}); - -const copy = Object.assign({}, obj); -console.log(copy); // { baz: 3 } -</pre> - -<h3 id="Primitives_will_be_wrapped_to_objects" name="Primitives_will_be_wrapped_to_objects">プリミティブはオブジェクトでラップされる</h3> - -<pre class="brush: js notranslate">const v1 = 'abc'; -const v2 = true; -const v3 = 10; -const v4 = Symbol('foo'); - -const obj = Object.assign({}, v1, null, v2, undefined, v3, v4); -// プリミティブ値はラップされ、 null と undefined は無視される -// なお、文字列をラップした時だけ、直接所有で列挙可能なプロパティが存在する -console.log(obj); // { "0": "a", "1": "b", "2": "c" } -</pre> - -<h3 id="Exceptions_will_interrupt_the_ongoing_copying_task" name="Exceptions_will_interrupt_the_ongoing_copying_task">例外が発生すると実行中のコピー作業が中断される</h3> - -<pre class="brush: js notranslate">const target = Object.defineProperty({}, 'foo', { - value: 1, - writable: false -}); // target.foo は読み取り専用のプロパティ - -Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 }); -// TypeError: "foo" is read-only -// target.foo に代入しようとすると、この例外が発生する - -console.log(target.bar); // 2, 一番目のコピー元オブジェクトはコピーされている -console.log(target.foo2); // 3, 二番目のコピー元の最初のプロパティもコピーされている -console.log(target.foo); // 1, ここで例外が発生 -console.log(target.foo3); // undefined, assign メソッドが終了したので foo3 はコピーされない -console.log(target.baz); // undefined, 三番目のコピー元もコピーされない -</pre> - -<h3 id="Copying_accessors" name="Copying_accessors">アクセサーのコピー</h3> - -<pre class="brush: js notranslate">var obj = { - foo: 1, - get bar() { - return 2; - } -}; - -let copy = Object.assign({}, obj); -console.log(copy); -// { foo: 1, bar: 2 } -// copy.bar の値は obj.bar のゲッターの返値。 - -// 記述子を完全にコピーする代入関数 -function completeAssign(target, ...sources) { - sources.forEach(source => { - let descriptors = Object.keys(source).reduce((descriptors, key) => { - descriptors[key] = Object.getOwnPropertyDescriptor(source, key); - return descriptors; - }, {}); - - // By default, Object.assign copies enumerable Symbols, too - Object.getOwnPropertySymbols(source).forEach(sym => { - let descriptor = Object.getOwnPropertyDescriptor(source, sym); - if (descriptor.enumerable) { - descriptors[sym] = descriptor; - } - }); - Object.defineProperties(target, descriptors); - }); - return target; -} - -copy = completeAssign({}, obj); -console.log(copy); -// { foo:1, get bar() { return 2 } } -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.assign', 'Object.assign')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.builtins.Object.assign")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Object.defineProperties()")}}</li> - <li><a href="/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">プロパティの列挙可能性と所有権</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals">Object リテラルでおスプレッド構文の使用</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/object/assign/index.md b/files/ja/web/javascript/reference/global_objects/object/assign/index.md new file mode 100644 index 0000000000..59acd67896 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/object/assign/index.md @@ -0,0 +1,273 @@ +--- +title: Object.assign() +slug: Web/JavaScript/Reference/Global_Objects/Object/assign +tags: + - ECMAScript 2015 + - JavaScript + - Method + - Object + - Reference + - Polyfill +browser-compat: javascript.builtins.Object.assign +translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign +--- +{{JSRef}} + +**`Object.assign()`** メソッドは、すべての{{jsxref("Object/propertyIsEnumerable", "列挙可能", "", 1)}}な{{jsxref("Object/hasOwnProperty", "自身のプロパティ", "", 1)}}の値を、 1 つ以上の*コピー元オブジェクト*から*コピー先オブジェクト*にコピーするために使用されます。変更されたコピー先オブジェクトを返します。 + +{{EmbedInteractiveExample("pages/js/object-assign.html")}} + +## 構文 + +```js +Object.assign(target, ...sources) +``` + +### 引数 + +- `target` + - : コピー先オブジェクト — コピー元のプロパティを適用するもので、変更後に返されます。 +- `sources` + - : コピー元オブジェクト (単数または複数) — 適用したいプロパティを含むオブジェクトです。 + +### 返値 + +コピー先オブジェクトです。 + +## 解説 + +コピー先オブジェクトのプロパティは、コピー元に同じ{{jsxref("Object/keys", "キー", "", 1)}}のプロパティがあると上書きされます。より後のコピー元のプロパティが、より前のものを同様に上書きします。 + +`Object.assign()` メソッドは、コピー元オブジェクトから*列挙可能 (enumerable)* かつ*直接所有 (own)* のプロパティだけをコピー先オブジェクトにコピーします。この際、コピー元オブジェクトには `{[[Get]]`、コピー先オブジェクトには `[[Set]]` を使いますので、[ゲッター](/ja/docs/Web/JavaScript/Reference/Functions/get)と[セッター](/ja/docs/Web/JavaScript/Reference/Functions/set)を呼び出すことになります。これはプロパティの*代入 (assign)* であり、プロパティをコピーしたり新しく定義したりするのとは異なります。そのため、コピー元にゲッターが存在する場合、新しいプロパティをプロトタイプにマージする用途には不適切でしょう。 + +プロパティ定義を (列挙可能属性も含めて) プロトタイプの中にコピーするには、このメソッドではなく {{jsxref("Object.getOwnPropertyDescriptor()")}} と {{jsxref("Object.defineProperty()")}} を使用してください。 + +{{jsxref("String")}} と {{jsxref("Symbol")}} の両方のプロパティがコピーされます。 + +エラーが発生した場合、例えばプロパティが書き込み不可の場合は、 {{jsxref("TypeError")}} が発生しますが、エラーが発生する前にプロパティが追加される場合、 `target` オブジェクトが変更されることがあります。 + +> **Note:** `Object.assign()` はコピー元の値が {{jsxref("null")}} や {{jsxref("undefined")}} でも例外を発生させません。 + +## ポリフィル + +この[ポリフィル](/ja/docs/Glossary/Polyfill)は、 ES5 にシンボルがないため、シンボルのプロパティに対応していません。 + +```js +if (typeof Object.assign !== 'function') { + // Must be writable: true, enumerable: false, configurable: true + Object.defineProperty(Object, "assign", { + value: function assign(target, varArgs) { // .length of function is 2 + 'use strict'; + if (target === null || target === undefined) { + throw new TypeError('Cannot convert undefined or null to object'); + } + + var to = Object(target); + + for (var index = 1; index < arguments.length; index++) { + var nextSource = arguments[index]; + + if (nextSource !== null && nextSource !== undefined) { + for (var nextKey in nextSource) { + // Avoid bugs when hasOwnProperty is shadowed + if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { + to[nextKey] = nextSource[nextKey]; + } + } + } + } + return to; + }, + writable: true, + configurable: true + }); +} +``` + +## 例 + +### オブジェクトの複製 + +```js +const obj = { a: 1 }; +const copy = Object.assign({}, obj); +console.log(copy); // { a: 1 } +``` + +### 深い複製についての注意 + +`Object.assign()` はプロパティの値をコピーするため、深い複製を行うには別な方法を使用する必要があります。 + +元の値がオブジェクトへの参照である場合、参照の値のみをコピーするからです。 + +```js +function test() { + 'use strict'; + + let obj1 = { a: 0 , b: { c: 0}}; + let obj2 = Object.assign({}, obj1); + console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}} + + obj1.a = 1; + console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}} + console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}} + + obj2.a = 2; + console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}} + console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 0}} + + obj2.b.c = 3; + console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 3}} + console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 3}} + + // Deep Clone + obj1 = { a: 0 , b: { c: 0}}; + let obj3 = JSON.parse(JSON.stringify(obj1)); + obj1.a = 4; + obj1.b.c = 4; + console.log(JSON.stringify(obj3)); // { "a": 0, "b": { "c": 0}} +} + +test(); +``` + +### オブジェクトのマージ + +```js +const o1 = { a: 1 }; +const o2 = { b: 2 }; +const o3 = { c: 3 }; + +const obj = Object.assign(o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 } +console.log(o1); // { a: 1, b: 2, c: 3 }, コピー先オブジェクト自体が変化する。 +``` + +### 同じプロパティを持つオブジェクトのマージ + +```js +const o1 = { a: 1, b: 1, c: 1 }; +const o2 = { b: 2, c: 2 }; +const o3 = { c: 3 }; + +const obj = Object.assign({}, o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 } +``` + +プロパティは、引数の順でより後にあるオブジェクトが同じプロパティを持っていると上書きされます。 + +### シンボル型のプロパティのコピー + +```js +const o1 = { a: 1 }; +const o2 = { [Symbol('foo')]: 2 }; + +const obj = Object.assign({}, o1, o2); +console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox) +Object.getOwnPropertySymbols(obj); // [Symbol(foo)] +``` + +### プロトタイプチェーン上のプロパティと列挙可能ではないプロパティはコピー不可 + +```js +const obj = Object.create({ foo: 1 }, { // foo is on obj's prototype chain. + bar: { + value: 2 // bar は列挙可能なプロパティではない。 + }, + baz: { + value: 3, + enumerable: true // baz は直接所有で列挙可能なプロパティ。 + } +}); + +const copy = Object.assign({}, obj); +console.log(copy); // { baz: 3 } +``` + +### プリミティブはオブジェクトでラップされる + +```js +const v1 = 'abc'; +const v2 = true; +const v3 = 10; +const v4 = Symbol('foo'); + +const obj = Object.assign({}, v1, null, v2, undefined, v3, v4); +// プリミティブ値はラップされ、 null と undefined は無視される +// なお、文字列をラップした時だけ、直接所有で列挙可能なプロパティが存在する +console.log(obj); // { "0": "a", "1": "b", "2": "c" } +``` + +### 例外が発生すると実行中のコピー作業が中断される + +```js +const target = Object.defineProperty({}, 'foo', { + value: 1, + writable: false +}); // target.foo is a read-only property + +Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 }); +// TypeError: "foo" is read-only +// target.foo に代入しようとすると、この例外が発生する + +console.log(target.bar); // 2, 一番目のコピー元オブジェクトはコピーされている +console.log(target.foo2); // 3, 二番目のコピー元の最初のプロパティもコピーされている +console.log(target.foo); // 1, ここで例外が発生 +console.log(target.foo3); // undefined, assign メソッドが終了したので foo3 はコピーされない +console.log(target.baz); // undefined, 三番目のコピー元もコピーされない +``` + +### アクセサーのコピー + +```js +const obj = { + foo: 1, + get bar() { + return 2; + } +}; + +let copy = Object.assign({}, obj); +console.log(copy); +// { foo: 1, bar: 2 } +// copy.bar の値は obj.bar のゲッターの返値。 + +// 記述子を完全にコピーする代入関数 +function completeAssign(target, ...sources) { + sources.forEach(source => { + let descriptors = Object.keys(source).reduce((descriptors, key) => { + descriptors[key] = Object.getOwnPropertyDescriptor(source, key); + return descriptors; + }, {}); + + // 既定では、 Object.assign は列挙可能なシンボルもコピーする + Object.getOwnPropertySymbols(source).forEach(sym => { + let descriptor = Object.getOwnPropertyDescriptor(source, sym); + if (descriptor.enumerable) { + descriptors[sym] = descriptor; + } + }); + Object.defineProperties(target, descriptors); + }); + return target; +} + +copy = completeAssign({}, obj); +console.log(copy); +// { foo:1, get bar() { return 2 } } +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- `Object.assign` のポリフィルは [`core-js`](https://github.com/zloirock/core-js#ecmascript-object) で利用できます +- {{jsxref("Object.defineProperties()")}} +- [プロパティの列挙可能性と所有権](/ja/docs/Web/JavaScript/Enumerability_and_ownership_of_properties) +- [オブジェクトリテラルでのスプレッド構文の使用](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals) |