From 8b9b6768f815fb3a24c50104e1d96cba51870026 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 19 Feb 2022 00:36:06 +0900 Subject: 2021/07/26 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../operators/object_initializer/index.md | 392 +++++++++++---------- 1 file changed, 198 insertions(+), 194 deletions(-) (limited to 'files/ja/web/javascript/reference/operators') diff --git a/files/ja/web/javascript/reference/operators/object_initializer/index.md b/files/ja/web/javascript/reference/operators/object_initializer/index.md index bd7259d336..21b3b36f98 100644 --- a/files/ja/web/javascript/reference/operators/object_initializer/index.md +++ b/files/ja/web/javascript/reference/operators/object_initializer/index.md @@ -5,307 +5,311 @@ tags: - ECMAScript 2015 - JSON - JavaScript - - Literal - - Methods - - Object + - 言語機能 + - リテラル + - メソッド + - オブジェクト - Primary Expression - computed - mutation - - properties + - プロパティ +browser-compat: javascript.operators.object_initializer translation_of: Web/JavaScript/Reference/Operators/Object_initializer --- -
{{JsSidebar("Operators")}}
+{{JsSidebar("Operators")}} -

オブジェクトは new Object()、Object.create()、リテラル表記法 (initializer 表記法) を使用して初期化されます。オブジェクト初期化子はオブジェクトのプロパティ名と関連した値のゼロ以上のペアのリストです。中括弧 ({}) で囲まれます。

+オブジェクトは [`new Object()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object)、[`Object.create()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/create)、*リテラル*表記法 (*初期化子*表記法) を使用して初期化されます。オブジェクト初期化子はオブジェクトのプロパティ名と関連した値のゼロ以上のペアのリストで、中括弧 (`{}`) で囲まれます。 -
{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html")}}
+{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html", "taller")}} +## 構文 +```js +let o = {} +let o = {a: 'foo', b: 42, c: {}} -

構文

+let a = 'foo', b = 42, c = {} +let o = {a: a, b: b, c: c} -
var o = {};
-var o = { a: 'foo', b: 42, c: {} };
-
-var a = 'foo', b = 42, c = {};
-var o = {a: a, b: b, c: c};
-
-var o = {
-  property: function (parameters) {},
-  get property() {},
-  set property(value) {},
+let o = {
+  property: function (parameters) {},
+  get property() {},
+  set property(value) {}
 };
-
+``` -

ECMAScript 2015 での新しい表記法

+### ECMAScript 2015 での新しい表記法 -

これらの表記をサポートするための互換性の表を参照してください。非サポート環境では、これらの表記は、構文エラーにつながります。

+これらの表記をサポートするための互換性の表を参照してください。非サポート環境では、これらの表記は、構文エラーにつながります。 -
// Shorthand property names (ES2015)
-var a = 'foo', b = 42, c = {};
-var o = {a, b, c};
+```js
+// 略記プロパティ名 (ES2015)
+let a = 'foo', b = 42, c = {};
+let o = {a, b, c}
 
-// Shorthand method names (ES2015)
-var o = {
-  property(parameters) {}
-};
+// 略記メソッド名 (ES2015)
+let o = {
+  property(parameters) {}
+}
 
-// Computed property names (ES2015)
-var prop = 'foo';
-var o = {
+// 計算プロパティ名 (ES2015)
+let prop = 'foo';
+let o = {
   [prop]: 'hey',
   ['b' + 'ar']: 'there'
-};
+} +``` + +## 解説 + +オブジェクト初期化子は、{{jsxref("Object")}} の初期化を表す式です。オブジェクトはオブジェクトを表す*プロパティ*で構成されます。オブジェクトプロパティの値は、特定の[プリミティブ](/ja/docs/Glossary/Primitive)データ型か他のオブジェクトのどちらかを含みます。 -

説明

+### オブジェクトリテラル表記法 vs JSON -

オブジェクト初期化子は、{{jsxref("Object")}} の初期化を表す式です。オブジェクトはオブジェクトを表すプロパティで構成されます。オブジェクトプロパティの値は特定の {{Glossary("primitive")}} データ型か他のオブジェクトのどちらかを含みます。

+オブジェクトリテラル表記法は **J**ava**S**cript **O**bject **N**otation ([JSON](/ja/docs/Glossary/JSON)) とは異なります。両者は似ていますが、ちがいがあります。 -

オブジェクトの生成

+- JSON は、`"property": value` 構文を使用するプロパティ定義*のみ*を許可します。プロパティ名は二重引用符で囲まなければなりません。そして、その定義を略記にすることはできません。 +- JSON で値とすることができるのは、文字列、数値、配列、`true`、`false`、`null`、別の (JSON) オブジェクトのみです。 +- 関数の値（後述の「メソッド」を参照）は JSON では値を割り当てることができません。 +- {{jsxref("Date")}} のようなオブジェクトは、 {{jsxref("JSON.parse()")}} の後で文字列になります。 +- {{jsxref("JSON.parse()")}} では計算プロパティ名は拒否され、エラーが発生します。 -

プロパティを持たない空のオブジェクトは下記のように中括弧を記述することで生成されます。

+## 例 -
var object = {};
+### オブジェクトの生成 -

リテラル表記法、initializer 表記法の利点は中括弧内にプロパティをもつオブジェクトをすばやく生成できる点です。また、カンマで区切られた key: value のペアを記述することでプロパティ値の生成も可能です。以下に、三つのプロパティをもつオブジェクトを生成する方法を記します。キーは "foo"、"age"、"baz" であり、各々のキーの値は、文字列の "bar"、数値の 42 、そして baz はオブジェクトがプロパティ値となります。

+プロパティを持たない空のオブジェクトは、下記のように中括弧を記述することで生成されます。 -
var object = {
+```js
+let object = {}
+```
+
+しかし、*リテラル*記法、*初期化子*記法の利点は、中括弧内にプロパティをもつオブジェクトを簡潔に生成できる点です。 `key: value` の組をカンマで区切ったリストで記述することができます。
+
+以下のコードでは、 `"foo"`、`"age"`、`"baz"` の 3 つのプロパティをもつオブジェクトを生成します。これらのキーの値はそれぞれ、文字列の `"bar"`、数値の `42`、そして他のオブジェクトです。
+
+```js
+let object = {
   foo: 'bar',
   age: 42,
-  baz: {myProp: 12},
-}
+ baz: {myProp: 12} +} +``` -

プロパティへのアクセス

+### プロパティへのアクセス -

一度オブジェクトを生成した後も、プロパティにアクセスすることができます。その方法は「ドット表記法」か「ブラケット表記法」と言われます。詳細については、プロパティへのアクセスをご覧ください。

+オブジェクトを生成すると、読み取ったり変更したりしたくなるでしょう。オブジェクトのプロパティには、ドット記法またはブラケット記法でアクセスすることができます。（詳細については、[プロパティへのアクセス](/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors)をご覧ください。） -
object.foo; // "bar"
-object['age']; // 42
+```js
+object.foo // "bar"
+object['age'] // 42
+object.baz          // {myProp: 12}
+object.baz.myProp   //12
+```
 
-object.foo = 'baz';
-
+### プロパティの定義 -

プロパティの定義

+初期化構文を使用してプロパティを記述する方法について既に学びました。多くの場合、コード内には、オブジェクトに設定したい変数があります。下記のコードをご覧ください。 -

初期化構文を使用してプロパティを記譜する方法について既に学びました。多くの場合、コード内には、オブジェクトに設定したい変数があります。下記のコードをご覧ください。:

- -
var a = 'foo',
+```js
+let a = 'foo',
     b = 42,
     c = {};
 
-var o = {
+let o = {
   a: a,
   b: b,
   c: c
-};
+} +``` -

ECMAScript 2015 では、同じことを達成するために利用可能な短い表記があります。:

+ECMAScript 2015 では、同じことを実現するために利用できる短い記法があります。 -
var a = 'foo',
+```js
+let a = 'foo',
     b = 42,
     c = {};
 
-// Shorthand property names (ES2015)
-var o = {a, b, c};
+// 略記プロパティ名 (ES2015)
+let o = {a, b, c}
 
 // In other words,
-console.log((o.a === {a}.a)); // true
-
+console.log((o.a === {a}.a)) // true +``` -

重複したプロパティ名

+#### 重複したプロパティ名 -

プロパティに対して同じ名前を使用するとき、二番目のプロパティは最初のプロパティを上書きします。

+プロパティに対して同じ名前を使用するとき、二番目のプロパティは最初のプロパティを上書きします。 -
var a = {x: 1, x: 2};
-console.log(a); // {x: 2}
-
+```js +let a = {x: 1, x: 2} +console.log(a) // {x: 2} +``` -

ECMAScript 5 の strict モードのコードでは、重複したプロパティの名前は {{jsxref("SyntaxError")}} とみなされます。実行時に重複を可能にする計算されたプロパティ名の導入により、ECMAScript 2015 ではこの制限は取り除かれました。

+ECMAScript 5 の厳格モードのコードでは、重複したプロパティの名前は {{jsxref("SyntaxError")}} とみなされます。実行時に重複を可能にする計算プロパティ名の導入により、 ECMAScript 2015 ではこの制限は取り除かれました。 -
function haveES2015DuplicatePropertySemantics() {
+```js
+function haveES2015DuplicatePropertySemantics() {
   'use strict';
   try {
     ({prop: 1, prop: 2});
 
-    // No error thrown, duplicate property names allowed in strict mode
+    // 厳格モードで重複するプロパティ名が許可されているため、エラーが発生しない場合。
     return true;
-  } catch (e) {
-    // Error thrown, duplicates prohibited in strict mode
+  } catch(e) {
+    // 厳格モードで重複が禁止されているため、エラーが発生する場合。
     return false;
   }
-}
+} +``` -

メソッドの定義

+### メソッドの定義 -

オブジェクトのプロパティは function、getter メソッド、setter メソッドも参照することができます

+オブジェクトのプロパティは[関数](/ja/docs/Web/JavaScript/Reference/Functions)、[ゲッター](/ja/docs/Web/JavaScript/Reference/Functions/get)メソッド、[セッター](/ja/docs/Web/JavaScript/Reference/Functions/set)メソッドも参照することができます。 -
var o = {
-  property: function (parameters) {},
-  get property() {},
-  set property(value) {},
-};
+```js +let o = { + property: function (parameters) {}, + get property() {}, + set property(value) {} +} +``` -

ECMAScript 2015 では、省略表記が利用可能です。そのため、キーワード "function" はもはや必要ではありません。

+ECMAScript 2015 では、略記法が利用可能ですので、キーワード "`function`" は必要なくなりました。 -
// Shorthand method names (ES2015)
-var o = {
-  property(parameters) {},
-  *generator() {}
-};
+```js +// メソッド名の略記法 (ES2015) +let o = { + property(parameters) {}, +} +``` -

ECMAScript 2015 では、その値がジェネレーター関数であるプロパティを簡潔に定義する方法があります。:

+ECMAScript 2015 では、ジェネレーター関数であるプロパティを簡潔に定義する方法があります。 -
var o = {
-  *generator() {
+```js
+let o = {
+  *generator() {
     ...........
   }
-};
+}; +``` -

ECMAScript 5 では、下記のように記述します (しかし、ES5 はジェネレーターを持たないことに注意してください):

+ECMAScript 5 では、下記のように記述します（ただし、 ES5 にはジェネレーターがないことに注意してください）。 -
var o = {
-  generator: function* () {
+```js
+let o = {
+  generator: function* () {
     ...........
   }
-};
+}; +``` + +メソッドの詳細や例については、[メソッド定義](/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions)をご覧ください。 -

メソッドの詳細や例については、メソッド定義をご覧ください。

+### 計算プロパティ名 -

計算されたプロパティ名

+ECMAScript 2015 から、オブジェクト初期化子構文でも、計算プロパティ名に対応します。括弧 `[]` の中に式を記述することができ、それが計算されてプロパティ名として使用されます。これは、プロパティの読み込みと設定に使用したことのある、[プロパティアクセサー](/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors)構文のブラケット表記を彷彿とさせるものです。 -

ECMAScript 2015 から、オブジェクト初期化子構文も計算されたプロパティ名をサポートします。括弧 [] の中に式を記述でき、それが計算されてプロパティ名として使用されます。これは、あなたが既にプロパティを読み込んだり設定したりするために使用したことがあるかもしれない、メンバー演算子構文のブラケット表記を思い起こさせます。今では、オブジェクトリテラルでも同様な構文を使うことができます:

+今では、オブジェクトリテラルでも同様な構文を使うことができます。 -
// Computed property names (ES2015)
-var i = 0;
-var a = {
+```js
+// Computed property names (ES2015)
+let i = 0
+let a = {
   ['foo' + ++i]: i,
   ['foo' + ++i]: i,
   ['foo' + ++i]: i
-};
+}
+
+console.log(a.foo1) // 1
+console.log(a.foo2) // 2
+console.log(a.foo3) // 3
 
-console.log(a.foo1); // 1
-console.log(a.foo2); // 2
-console.log(a.foo3); // 3
+const items = ["A","B","C"];
+const obj = {
+[items]: "Hello"
+}
+console.log(obj); // A,B,C: "Hello"
+console.log(obj["A,B,C"]) // "Hello"
 
-var param = 'size';
-var config = {
+let param = 'size'
+let config = {
   [param]: 12,
   ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
-};
+}
 
-console.log(config); // {size: 12, mobileSize: 4}
+console.log(config) // {size: 12, mobileSize: 4} +``` -

スプレッドプロパティ

+### スプレッドプロパティ -

ECMAScript proposal の Rest/Spread プロパティ （ステージ 4） オブジェクトリテラルにスプレッドプロパティを追加します。 渡されたオブジェクトから新しいオブジェクトに独自の列挙可能なプロパティをコピーします。

+[ECMAScript proposal の Rest/Spread プロパティ](https://github.com/tc39/proposal-object-rest-spread) （ステージ 4） では、オブジェクトリテラルに[スプレッド](/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)プロパティを追加します。 渡されたオブジェクトから新しいオブジェクトに独自の列挙可能なプロパティをコピーします。 -

{{jsxref("Object.assign()")}} を使うよりも短いコードで prototype を除いた浅いコピーの作成や、マージしたオブジェクトの作成を書けます。

+{{jsxref("Object.assign()")}} を使うよりも短いコードで `prototype` を除いた浅いコピーの作成や、マージしたオブジェクトの作成を書くことができます。 -
var obj1 = { foo: 'bar', x: 42 };
-var obj2 = { foo: 'baz', y: 13 };
+```js
+let obj1 = { foo: 'bar', x: 42 }
+let obj2 = { foo: 'baz', y: 13 }
 
-var clonedObj = { ...obj1 };
+let clonedObj = { ...obj1 }
 // Object { foo: "bar", x: 42 }
 
-var mergedObj = { ...obj1, ...obj2 };
-// Object { foo: "baz", x: 42, y: 13 }
- -

{{jsxref("Object.assign()")}} は setters をトリガーしますが、スプレッド構文はトリガーできません。

- -

プロトタイプ変異

- -

__proto__: value 形式、または "__proto__": value 形式のプロパティ定義は、__proto__ 名をもつプロパティを生成しません。かわりに、与えられた値がオブジェクトか null の場合、その値に生成されたオブジェクトの [[Prototype]] を変更します (その値がオブジェクト、または null ではない場合、オブジェクトは変更されません)。

- -
var obj1 = {};
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
-
-var obj2 = {__proto__: null};
-assert(Object.getPrototypeOf(obj2) === null);
+let mergedObj = { ...obj1, ...obj2 }
+// Object { foo: "baz", x: 42, y: 13 }
+```
 
-var protoObj = {};
-var obj3 = {'__proto__': protoObj};
-assert(Object.getPrototypeOf(obj3) === protoObj);
+> **Warning:** {{jsxref("Object.assign()")}} は[セッター](/ja/docs/Web/JavaScript/Reference/Functions/set)を起動しますが、スプレッド構文は起動しません。
 
-var obj4 = {__proto__: 'not an object or null'};
-assert(Object.getPrototypeOf(obj4) === Object.prototype);
-assert(!obj4.hasOwnProperty('__proto__'));
-
+### プロトタイプの変更 -

単一のプロトタイプの変異のみ、オブジェクトリテラルに許可されています: すなわち、複数のプロトタイプの変異は構文エラーです。

+`__proto__: value` 形式、または `"__proto__": value` 形式でプロパティを定義しても、 `__proto__` という名をもつプロパティを生成しません。代わりに、与えられた値がオブジェクトまたは [`null`](/ja/docs/Web/JavaScript/Reference/Global_Objects/null) の場合、その値に生成されたオブジェクトの `[[Prototype]]` を変更します（その値がオブジェクト、または null ではない場合、オブジェクトは変更されません）。 -

"colon" 表記法を使用しないプロパティ定義はプロトタイプ変異ではありません。:  任意の他の名称を使用する同様の定義と同じように動作するプロパティ定義です。

+```js +let obj1 = {} +assert(Object.getPrototypeOf(obj1) === Object.prototype) -
var __proto__ = 'variable';
+let obj2 = {__proto__: null}
+assert(Object.getPrototypeOf(obj2) === null)
 
-var obj1 = {__proto__};
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
-assert(obj1.hasOwnProperty('__proto__'));
-assert(obj1.__proto__ === 'variable');
+let protoObj = {}
+let obj3 = {'__proto__': protoObj}
+assert(Object.getPrototypeOf(obj3) === protoObj)
 
-var obj2 = {__proto__() { return 'hello'; }};
-assert(obj2.__proto__() === 'hello');
+let obj4 = {__proto__: 'not an object or null'}
+assert(Object.getPrototypeOf(obj4) === Object.prototype)
+assert(!obj4.hasOwnProperty('__proto__'))
+```
 
-var obj3 = { ['__prot' + 'o__']: 17 };
-assert(obj3.__proto__ === 17);
-
+オブジェクトリテラルでは、単一のプロトタイプの変更のみが許可されています。すなわち、複数のプロトタイプを変更すると構文エラーになります。 -

オブジェクトリテラル表記法 vs JSON

+「コロン」表記法を使用しないプロパティ定義は、プロトタイプの変更にはなりません。任意の他の名称を使用する同様の定義と同じように動作するプロパティ定義です。 -

オブジェクトリテラル表記法は JavaScript Object Notation (JSON) とは異なります。それらは似ていますが、それらの間には違いがあります。:

+```js +let __proto__ = 'variable' - +let obj1 = {__proto__} +assert(Object.getPrototypeOf(obj1) === Object.prototype) +assert(obj1.hasOwnProperty('__proto__')) +assert(obj1.__proto__ === 'variable') -

仕様

+let obj2 = {__proto__() { return 'hello'; }} +assert(obj2.__proto__() === 'hello') - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様ステータスコメント
{{SpecName('ES1')}}{{Spec2('ES1')}}初期定義。
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}{{Spec2('ES5.1')}}getter と setter が追加されました。
{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ES2015')}}簡略表現メソッド/プロパティの名称と計算されたプロパティ名が追加されました。
{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}{{Spec2('ESDraft')}}
+let obj3 = {['__prot' + 'o__']: 17} +assert(obj3.__proto__ === 17) +``` -

ブラウザー実装状況

+## 仕様書 -
+{{Specifications}} +## ブラウザーの互換性 -

{{Compat("javascript.operators.object_initializer")}}

-
+{{Compat}} -

関連情報

+## 関連情報 - +- [メンバー演算子](/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors) +- [`get`](/ja/docs/Web/JavaScript/Reference/Functions/get) / [`set`](/ja/docs/Web/JavaScript/Reference/Functions/set) +- [メソッド定義](/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions) +- [字句文法](/ja/docs/Web/JavaScript/Reference/Lexical_grammar) -- cgit v1.2.3-54-g00ecf