From 4f1cf93bd612c68ce2a21a9ece6a6715b5dbc308 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 16 Feb 2022 12:22:06 +0900 Subject: Web/JavaScript/Reference/Operators 以下の残りの記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reference/operators/async_function/index.html | 98 ------- .../reference/operators/async_function/index.md | 98 +++++++ .../reference/operators/await/index.html | 139 --------- .../javascript/reference/operators/await/index.md | 139 +++++++++ .../reference/operators/class/index.html | 114 -------- .../javascript/reference/operators/class/index.md | 114 ++++++++ .../reference/operators/comma_operator/index.html | 90 ------ .../reference/operators/comma_operator/index.md | 90 ++++++ .../operators/conditional_operator/index.html | 113 -------- .../operators/conditional_operator/index.md | 113 ++++++++ .../reference/operators/grouping/index.html | 76 ----- .../reference/operators/grouping/index.md | 76 +++++ .../javascript/reference/operators/in/index.html | 141 ---------- .../web/javascript/reference/operators/in/index.md | 141 ++++++++++ .../reference/operators/instanceof/index.html | 175 ------------ .../reference/operators/instanceof/index.md | 175 ++++++++++++ .../reference/operators/logical_and/index.html | 144 ---------- .../reference/operators/logical_and/index.md | 144 ++++++++++ .../reference/operators/logical_not/index.html | 107 ------- .../reference/operators/logical_not/index.md | 107 +++++++ .../reference/operators/logical_or/index.html | 153 ---------- .../reference/operators/logical_or/index.md | 153 ++++++++++ .../reference/operators/new.target/index.html | 96 ------- .../reference/operators/new.target/index.md | 96 +++++++ .../javascript/reference/operators/new/index.html | 181 ------------ .../javascript/reference/operators/new/index.md | 181 ++++++++++++ .../nullish_coalescing_operator/index.html | 147 ---------- .../operators/nullish_coalescing_operator/index.md | 147 ++++++++++ .../operators/object_initializer/index.html | 311 --------------------- .../operators/object_initializer/index.md | 311 +++++++++++++++++++++ .../reference/operators/super/index.html | 176 ------------ .../javascript/reference/operators/super/index.md | 176 ++++++++++++ .../reference/operators/typeof/index.html | 288 ------------------- .../javascript/reference/operators/typeof/index.md | 288 +++++++++++++++++++ .../javascript/reference/operators/void/index.html | 102 ------- .../javascript/reference/operators/void/index.md | 102 +++++++ .../reference/operators/yield/index.html | 119 -------- .../javascript/reference/operators/yield/index.md | 119 ++++++++ .../reference/operators/yield_star_/index.html | 138 --------- .../reference/operators/yield_star_/index.md | 138 +++++++++ 40 files changed, 2908 insertions(+), 2908 deletions(-) delete mode 100644 files/ja/web/javascript/reference/operators/async_function/index.html create mode 100644 files/ja/web/javascript/reference/operators/async_function/index.md delete mode 100644 files/ja/web/javascript/reference/operators/await/index.html create mode 100644 files/ja/web/javascript/reference/operators/await/index.md delete mode 100644 files/ja/web/javascript/reference/operators/class/index.html create mode 100644 files/ja/web/javascript/reference/operators/class/index.md delete mode 100644 files/ja/web/javascript/reference/operators/comma_operator/index.html create mode 100644 files/ja/web/javascript/reference/operators/comma_operator/index.md delete mode 100644 files/ja/web/javascript/reference/operators/conditional_operator/index.html create mode 100644 files/ja/web/javascript/reference/operators/conditional_operator/index.md delete mode 100644 files/ja/web/javascript/reference/operators/grouping/index.html create mode 100644 files/ja/web/javascript/reference/operators/grouping/index.md delete mode 100644 files/ja/web/javascript/reference/operators/in/index.html create mode 100644 files/ja/web/javascript/reference/operators/in/index.md delete mode 100644 files/ja/web/javascript/reference/operators/instanceof/index.html create mode 100644 files/ja/web/javascript/reference/operators/instanceof/index.md delete mode 100644 files/ja/web/javascript/reference/operators/logical_and/index.html create mode 100644 files/ja/web/javascript/reference/operators/logical_and/index.md delete mode 100644 files/ja/web/javascript/reference/operators/logical_not/index.html create mode 100644 files/ja/web/javascript/reference/operators/logical_not/index.md delete mode 100644 files/ja/web/javascript/reference/operators/logical_or/index.html create mode 100644 files/ja/web/javascript/reference/operators/logical_or/index.md delete mode 100644 files/ja/web/javascript/reference/operators/new.target/index.html create mode 100644 files/ja/web/javascript/reference/operators/new.target/index.md delete mode 100644 files/ja/web/javascript/reference/operators/new/index.html create mode 100644 files/ja/web/javascript/reference/operators/new/index.md delete mode 100644 files/ja/web/javascript/reference/operators/nullish_coalescing_operator/index.html create mode 100644 files/ja/web/javascript/reference/operators/nullish_coalescing_operator/index.md delete mode 100644 files/ja/web/javascript/reference/operators/object_initializer/index.html create mode 100644 files/ja/web/javascript/reference/operators/object_initializer/index.md delete mode 100644 files/ja/web/javascript/reference/operators/super/index.html create mode 100644 files/ja/web/javascript/reference/operators/super/index.md delete mode 100644 files/ja/web/javascript/reference/operators/typeof/index.html create mode 100644 files/ja/web/javascript/reference/operators/typeof/index.md delete mode 100644 files/ja/web/javascript/reference/operators/void/index.html create mode 100644 files/ja/web/javascript/reference/operators/void/index.md delete mode 100644 files/ja/web/javascript/reference/operators/yield/index.html create mode 100644 files/ja/web/javascript/reference/operators/yield/index.md delete mode 100644 files/ja/web/javascript/reference/operators/yield_star_/index.html create mode 100644 files/ja/web/javascript/reference/operators/yield_star_/index.md (limited to 'files/ja') diff --git a/files/ja/web/javascript/reference/operators/async_function/index.html b/files/ja/web/javascript/reference/operators/async_function/index.html deleted file mode 100644 index f50d024a21..0000000000 --- a/files/ja/web/javascript/reference/operators/async_function/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: 非同期関数式 -slug: Web/JavaScript/Reference/Operators/async_function -tags: -- Function -- JavaScript -- Language feature -- Operator -- Primary Expression -translation_of: Web/JavaScript/Reference/Operators/async_function ---- -
{{jsSidebar("Operators")}}
- -

async function キーワードは、式の中で async 関数を定義するために使用できます。

- -

非同期関数は、 async function 文を使用して定義することもできます。

- -

構文

- -
async function [name]([param1[, param2[, ..., paramN]]]) {
-   statements
-}
- -

ES2015 では、アロー関数を使用することもできます。

- -

引数

- -
-
name
-
関数名です。関数が無名の場合は省略可能です。名前は関数の本体内のみのローカルです。
-
paramN
-
関数に渡される引数名です。
-
statements
-
関数本体を構成する文です。
-
- -

解説

- -

async function 式は {{jsxref('Statements/async_function', 'async function statement')}} と非常に似ており、構文もほとんど同じです。async function 式と async function 文の主な違いは、async function 式が無名関数を生成するために関数名を省略できる点です。async function 式は、定義後直ちに実行される IIFE (即時実行関数式) として使用することもできます。詳細は関数の章を見てください。

- -

例

- -

シンプルな例

- -
function resolveAfter2Seconds(x) {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve(x);
-    }, 2000);
-  });
-};
-
-const add = async function(x) { // 変数に代入された非同期関数式
-  let a = await resolveAfter2Seconds(20);
-  let b = await resolveAfter2Seconds(30);
-  return x + a + b;
-};
-
-add(10).then(v => {
-  console.log(v);  // 4 秒後に 60 を表示
-});
-
-(async function(x) { // IIFE として使用される非同期関数式
-  let p_a = resolveAfter2Seconds(20);
-  let p_b = resolveAfter2Seconds(30);
-  return x + await p_a + await p_b;
-})(10).then(v => {
-  console.log(v);  // 2 秒後に 60 を表示
-});
-
- -

仕様書

- - - - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/async_function/index.md b/files/ja/web/javascript/reference/operators/async_function/index.md new file mode 100644 index 0000000000..f50d024a21 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/async_function/index.md @@ -0,0 +1,98 @@ +--- +title: 非同期関数式 +slug: Web/JavaScript/Reference/Operators/async_function +tags: +- Function +- JavaScript +- Language feature +- Operator +- Primary Expression +translation_of: Web/JavaScript/Reference/Operators/async_function +--- +
{{jsSidebar("Operators")}}
+ +

async function キーワードは、式の中で async 関数を定義するために使用できます。

+ +

非同期関数は、 async function 文を使用して定義することもできます。

+ +

構文

+ +
async function [name]([param1[, param2[, ..., paramN]]]) {
+   statements
+}
+ +

ES2015 では、アロー関数を使用することもできます。

+ +

引数

+ +
+
name
+
関数名です。関数が無名の場合は省略可能です。名前は関数の本体内のみのローカルです。
+
paramN
+
関数に渡される引数名です。
+
statements
+
関数本体を構成する文です。
+
+ +

解説

+ +

async function 式は {{jsxref('Statements/async_function', 'async function statement')}} と非常に似ており、構文もほとんど同じです。async function 式と async function 文の主な違いは、async function 式が無名関数を生成するために関数名を省略できる点です。async function 式は、定義後直ちに実行される IIFE (即時実行関数式) として使用することもできます。詳細は関数の章を見てください。

+ +

例

+ +

シンプルな例

+ +
function resolveAfter2Seconds(x) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(x);
+    }, 2000);
+  });
+};
+
+const add = async function(x) { // 変数に代入された非同期関数式
+  let a = await resolveAfter2Seconds(20);
+  let b = await resolveAfter2Seconds(30);
+  return x + a + b;
+};
+
+add(10).then(v => {
+  console.log(v);  // 4 秒後に 60 を表示
+});
+
+(async function(x) { // IIFE として使用される非同期関数式
+  let p_a = resolveAfter2Seconds(20);
+  let p_b = resolveAfter2Seconds(30);
+  return x + await p_a + await p_b;
+})(10).then(v => {
+  console.log(v);  // 2 秒後に 60 を表示
+});
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/await/index.html b/files/ja/web/javascript/reference/operators/await/index.html deleted file mode 100644 index 775ce4a787..0000000000 --- a/files/ja/web/javascript/reference/operators/await/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: await -slug: Web/JavaScript/Reference/Operators/await -tags: - - Function - - JavaScript - - Language feature - - Operator - - Primary Expression -translation_of: Web/JavaScript/Reference/Operators/await ---- -
{{jsSidebar("Operators")}}
- -

await 演算子は、{{jsxref("Statements/async_function", "async function")}} によって {{jsxref("Promise")}} が返されるのを待機するために使用します。

- -

構文

- -
[rv] = await expression;
- -
-
expression
-
解決を待つ {{jsxref("Promise")}} もしくは何らかの値。
-
rv
-
-

解決された promise の値。expression が Promise ではない場合はその値自体を返す。

-
-
- -

説明

- -

await 式は async function の実行を一時停止し、Promise の解決または拒否を待ちます。解決した後に async function の実行を再開します。再開するときに await 式は解決された Promise にラップされた値を返します。

- -

Promise が拒否された場合、await 式は理由となった値を投げます。

- -

await 式に続く値が Promise ではなかった場合、解決された Promise に変換されます。

- -

await は実行フローを分割できるため、await の関数の呼び出し元は、await の関数の遅延継続の前に実行を再開できます。await がその関数の継続を延期した後、これが関数によって実行される最初の await でれば、await の関数の完了を求める保留中の Promise を関数の呼び出し元に返し、その呼び出し元の実行を再開することによって、即時実行も続行されます。

- -

例

- -

promise の解決を待つ

- -

Promise が await 式で停止された場合、Promise が解決されて、解決された値を返すのを待ちます。

- -
function resolveAfter2Seconds(x) {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve(x);
-    }, 2000);
-  });
-}
-
-async function f1() {
-  var x = await resolveAfter2Seconds(10);
-  console.log(x); // 10
-}
-
-f1();
-
- -

Thenable オブジェクト

- -

{{jsxref("Global_Objects/Promise/then", "Thenable オブジェクト")}}もまったく同じように実行されます。

- -
async function f2() {
-  const thenable = {
-    then: function(resolve, _reject) {
-      resolve('resolved!')
-    }
-  };
-  console.log(await thenable); // resolved!
-}
-
-f2();
-
- -

Promise への変換

- -

値が Promise でない場合は、値を解決済みの Promise に変換して待ちます。

- -
async function f3() {
-  var y = await 20;
-  console.log(y); // 20
-}
-
-f3();
- -

Promise の拒否

- -

Promise が拒否された場合、拒否された値が投げられます。

- -
async function f4() {
-  try {
-    var z = await Promise.reject(30);
-  } catch(e) {
-    console.error(e); // 30
-  }
-}
-
-f4();
- -

拒否された Promise を処理する

- -

拒否された Promise は try 文を使用せずにエラーハンドリングを行えます。

- -
var response = await promisedFunction().catch((err) => { console.error(err); });
-// response will be undefined if the promise is rejected
-
- -

仕様

- - - - - - - - - - - - -
仕様書
{{SpecName("ESDraft", "#sec-async-function-definitions", "async functions")}}
- -

ブラウザー実装状況

- -
- - -

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

-
- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/await/index.md b/files/ja/web/javascript/reference/operators/await/index.md new file mode 100644 index 0000000000..775ce4a787 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/await/index.md @@ -0,0 +1,139 @@ +--- +title: await +slug: Web/JavaScript/Reference/Operators/await +tags: + - Function + - JavaScript + - Language feature + - Operator + - Primary Expression +translation_of: Web/JavaScript/Reference/Operators/await +--- +
{{jsSidebar("Operators")}}
+ +

await 演算子は、{{jsxref("Statements/async_function", "async function")}} によって {{jsxref("Promise")}} が返されるのを待機するために使用します。

+ +

構文

+ +
[rv] = await expression;
+ +
+
expression
+
解決を待つ {{jsxref("Promise")}} もしくは何らかの値。
+
rv
+
+

解決された promise の値。expression が Promise ではない場合はその値自体を返す。

+
+
+ +

説明

+ +

await 式は async function の実行を一時停止し、Promise の解決または拒否を待ちます。解決した後に async function の実行を再開します。再開するときに await 式は解決された Promise にラップされた値を返します。

+ +

Promise が拒否された場合、await 式は理由となった値を投げます。

+ +

await 式に続く値が Promise ではなかった場合、解決された Promise に変換されます。

+ +

await は実行フローを分割できるため、await の関数の呼び出し元は、await の関数の遅延継続の前に実行を再開できます。await がその関数の継続を延期した後、これが関数によって実行される最初の await でれば、await の関数の完了を求める保留中の Promise を関数の呼び出し元に返し、その呼び出し元の実行を再開することによって、即時実行も続行されます。

+ +

例

+ +

promise の解決を待つ

+ +

Promise が await 式で停止された場合、Promise が解決されて、解決された値を返すのを待ちます。

+ +
function resolveAfter2Seconds(x) {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve(x);
+    }, 2000);
+  });
+}
+
+async function f1() {
+  var x = await resolveAfter2Seconds(10);
+  console.log(x); // 10
+}
+
+f1();
+
+ +

Thenable オブジェクト

+ +

{{jsxref("Global_Objects/Promise/then", "Thenable オブジェクト")}}もまったく同じように実行されます。

+ +
async function f2() {
+  const thenable = {
+    then: function(resolve, _reject) {
+      resolve('resolved!')
+    }
+  };
+  console.log(await thenable); // resolved!
+}
+
+f2();
+
+ +

Promise への変換

+ +

値が Promise でない場合は、値を解決済みの Promise に変換して待ちます。

+ +
async function f3() {
+  var y = await 20;
+  console.log(y); // 20
+}
+
+f3();
+ +

Promise の拒否

+ +

Promise が拒否された場合、拒否された値が投げられます。

+ +
async function f4() {
+  try {
+    var z = await Promise.reject(30);
+  } catch(e) {
+    console.error(e); // 30
+  }
+}
+
+f4();
+ +

拒否された Promise を処理する

+ +

拒否された Promise は try 文を使用せずにエラーハンドリングを行えます。

+ +
var response = await promisedFunction().catch((err) => { console.error(err); });
+// response will be undefined if the promise is rejected
+
+ +

仕様

+ + + + + + + + + + + + +
仕様書
{{SpecName("ESDraft", "#sec-async-function-definitions", "async functions")}}
+ +

ブラウザー実装状況

+ +
+ + +

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

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/class/index.html b/files/ja/web/javascript/reference/operators/class/index.html deleted file mode 100644 index c21b8594c7..0000000000 --- a/files/ja/web/javascript/reference/operators/class/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: クラス式 -slug: Web/JavaScript/Reference/Operators/class -tags: - - Class - - Classes - - ECMAScript6 - - Expression - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/class ---- -
{{jsSidebar("Operators")}}
- -

クラス式は、 ECMAScript 2015 でクラスを定義する方法の 1 つです。{{jsxref("Operators/function", "関数式", "", "true")}}と同じように、クラス式は名前を付けることも付けないこともできます。名前を付ける場合、クラス名はクラス内部のみのローカルです。

- -

JavaScript のクラスはプロトタイプベースの継承が使われます。

- -
{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}}
- - - -

構文

- -
const MyClass = class [className] [extends otherClassName] {
-    // クラス本体
-};
- -

説明

- -

クラス式の構文は、{{jsxref("Statements/class", "クラス宣言 (文)", "", "true")}} と似ています。 class 文では、 class 式の本体が{{jsxref("Strict_mode", "厳格モード", "", 1)}}で実行されます。

- -

しかし、クラス式と{{jsxref("Statements/class", "クラス文", "", "true")}}はいくつかの相違点があります。

- - - -

constructor メソッドは省略可能です。クラス式で生成されたクラスは、常に {{jsxref("Operators/typeof", "typeof")}} が "function" の値を返します。

- -
'use strict';
-let Foo = class {};  // コンストラクタープロパティは省略可能
-Foo = class {};      // 再宣言が可能
-
-typeof Foo;             // "function" を返す
-typeof class {};        // "function" を返す
-
-Foo instanceof Object;   // true
-Foo instanceof Function; // true
-class Foo {}            // SyntaxError が発生 (クラス宣言は再宣言ができない)
-
- -

例

- -

簡単なクラス式

- -

以下は、名前のない簡単なクラス式です。変数 Foo を使って参照できます。

- -
const Foo = class {
-  constructor() {}
-  bar() {
-    return 'Hello World!';
-  }
-};
-
-const instance = new Foo();
-instance.bar();  // "Hello World!"
-Foo.name;        // "Foo"
-
- -

名前付きクラス式

- -

クラス内部で現在のクラスを参照したい場合は、名前付きクラス式を作成してください。この名前は、そのクラス式自身のスコープ内だけで見ることができます。

- -
const Foo = class NamedFoo {
-  constructor() {}
-  whoIsThere() {
-    return NamedFoo.name;
-  }
-}
-const bar = new Foo();
-bar.whoIsThere();  // "NamedFoo"
-NamedFoo.name;     // ReferenceError: NamedFoo is not defined
-Foo.name;          // "NamedFoo"
-
- -

仕様書

- - - - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/class/index.md b/files/ja/web/javascript/reference/operators/class/index.md new file mode 100644 index 0000000000..c21b8594c7 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/class/index.md @@ -0,0 +1,114 @@ +--- +title: クラス式 +slug: Web/JavaScript/Reference/Operators/class +tags: + - Class + - Classes + - ECMAScript6 + - Expression + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators/class +--- +
{{jsSidebar("Operators")}}
+ +

クラス式は、 ECMAScript 2015 でクラスを定義する方法の 1 つです。{{jsxref("Operators/function", "関数式", "", "true")}}と同じように、クラス式は名前を付けることも付けないこともできます。名前を付ける場合、クラス名はクラス内部のみのローカルです。

+ +

JavaScript のクラスはプロトタイプベースの継承が使われます。

+ +
{{EmbedInteractiveExample("pages/js/expressions-classexpression.html")}}
+ + + +

構文

+ +
const MyClass = class [className] [extends otherClassName] {
+    // クラス本体
+};
+ +

説明

+ +

クラス式の構文は、{{jsxref("Statements/class", "クラス宣言 (文)", "", "true")}} と似ています。 class 文では、 class 式の本体が{{jsxref("Strict_mode", "厳格モード", "", 1)}}で実行されます。

+ +

しかし、クラス式と{{jsxref("Statements/class", "クラス文", "", "true")}}はいくつかの相違点があります。

+ + + +

constructor メソッドは省略可能です。クラス式で生成されたクラスは、常に {{jsxref("Operators/typeof", "typeof")}} が "function" の値を返します。

+ +
'use strict';
+let Foo = class {};  // コンストラクタープロパティは省略可能
+Foo = class {};      // 再宣言が可能
+
+typeof Foo;             // "function" を返す
+typeof class {};        // "function" を返す
+
+Foo instanceof Object;   // true
+Foo instanceof Function; // true
+class Foo {}            // SyntaxError が発生 (クラス宣言は再宣言ができない)
+
+ +

例

+ +

簡単なクラス式

+ +

以下は、名前のない簡単なクラス式です。変数 Foo を使って参照できます。

+ +
const Foo = class {
+  constructor() {}
+  bar() {
+    return 'Hello World!';
+  }
+};
+
+const instance = new Foo();
+instance.bar();  // "Hello World!"
+Foo.name;        // "Foo"
+
+ +

名前付きクラス式

+ +

クラス内部で現在のクラスを参照したい場合は、名前付きクラス式を作成してください。この名前は、そのクラス式自身のスコープ内だけで見ることができます。

+ +
const Foo = class NamedFoo {
+  constructor() {}
+  whoIsThere() {
+    return NamedFoo.name;
+  }
+}
+const bar = new Foo();
+bar.whoIsThere();  // "NamedFoo"
+NamedFoo.name;     // ReferenceError: NamedFoo is not defined
+Foo.name;          // "NamedFoo"
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/comma_operator/index.html b/files/ja/web/javascript/reference/operators/comma_operator/index.html deleted file mode 100644 index 0f8b47b1b8..0000000000 --- a/files/ja/web/javascript/reference/operators/comma_operator/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: 'カンマ演算子 (,)' -slug: Web/JavaScript/Reference/Operators/Comma_Operator -tags: -- Comma -- Compound -- Expression -- JavaScript -- Language feature -- Operator -- Reference -translation_of: Web/JavaScript/Reference/Operators/Comma_Operator ---- -
{{jsSidebar("Operators")}}
- -

カンマ演算子 (,) は、それぞれの演算対象を（左から右に）評価し、最後のオペランドの値を返します。これにより、複数の式が評価される複合式を作成することができ、複合式の最終値はそのメンバー式の一番右端の値となります。これは、for ループに複数の引数を提供する場合によく使用されます。

- -
{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}
- -

構文

- -
expr1, expr2, expr3...
- -

引数

- -
-
expr1, expr2, expr3...
-
1 つ以上の式で、最後の式が複合式の値として返されます。
-
- -

使用上の注意

- -

カンマ演算子は、単一の式が求められる場所で複数の式を記述したい場合に使うことができます。この演算子が最もよく使われるのは、 for ループで複数の引数を与えたいときです。

- -

カンマ演算子は、配列、オブジェクト、関数の引数や引数の内部にあるカンマとは大きく異なります。

- -

例

- -

例えば次のコードでは、 a が、1 辺 10 要素からなる 2 次元配列内の要素を一度に 2 つ 変化させる為に、変数宣言部分でカンマ演算子を用いています。

- -

このコードは、配列における対角線の要素の値を出力するものです。

- -
for (var i = 0, j = 9; i <= 9; i++, j--)
-  console.log('a[' + i + '][' + j + '] = ' + a[i][j]);
- -

代入​​​を行う際​​​にカンマを使うと、カンマ演算子が通常どおりに働いていないかのように見える場合があります (カンマ演算子が式の中にないため)。以下の例では a には b = 3 の値 (すなわち 3) が設定されますが、さらに c = 4 が評価されて、その結果 (すなわち 4) がコンソールに返されます。これは演算子の優先順位と結合性のためです。

- -
var a, b, c;
-
-a = b = 3, c = 4; // コンソールに 4 が返る
-console.log(a); // 3 (もっとも左)
-
-var x, y, z;
-
-x = (y = 5, z = 6); // コンソールに 6 が返る
-console.log(x); // 6 (もっとも右)
-
- -

処理と返値

- -

カンマ演算子が行うことのもうひとつの例が、値を返す前の処理です。前述のとおり最後の要素のみを返しますが、その他すべての要素も評価します。よって、以下のようなことができます。

- -
function myFunc() {
-	var x = 0;
-
-  return (x += 1, x); // 返値は ++x と同じ
-}
- -

仕様書

- - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/comma_operator/index.md b/files/ja/web/javascript/reference/operators/comma_operator/index.md new file mode 100644 index 0000000000..0f8b47b1b8 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/comma_operator/index.md @@ -0,0 +1,90 @@ +--- +title: 'カンマ演算子 (,)' +slug: Web/JavaScript/Reference/Operators/Comma_Operator +tags: +- Comma +- Compound +- Expression +- JavaScript +- Language feature +- Operator +- Reference +translation_of: Web/JavaScript/Reference/Operators/Comma_Operator +--- +
{{jsSidebar("Operators")}}
+ +

カンマ演算子 (,) は、それぞれの演算対象を（左から右に）評価し、最後のオペランドの値を返します。これにより、複数の式が評価される複合式を作成することができ、複合式の最終値はそのメンバー式の一番右端の値となります。これは、for ループに複数の引数を提供する場合によく使用されます。

+ +
{{EmbedInteractiveExample("pages/js/expressions-commaoperators.html")}}
+ +

構文

+ +
expr1, expr2, expr3...
+ +

引数

+ +
+
expr1, expr2, expr3...
+
1 つ以上の式で、最後の式が複合式の値として返されます。
+
+ +

使用上の注意

+ +

カンマ演算子は、単一の式が求められる場所で複数の式を記述したい場合に使うことができます。この演算子が最もよく使われるのは、 for ループで複数の引数を与えたいときです。

+ +

カンマ演算子は、配列、オブジェクト、関数の引数や引数の内部にあるカンマとは大きく異なります。

+ +

例

+ +

例えば次のコードでは、 a が、1 辺 10 要素からなる 2 次元配列内の要素を一度に 2 つ 変化させる為に、変数宣言部分でカンマ演算子を用いています。

+ +

このコードは、配列における対角線の要素の値を出力するものです。

+ +
for (var i = 0, j = 9; i <= 9; i++, j--)
+  console.log('a[' + i + '][' + j + '] = ' + a[i][j]);
+ +

代入​​​を行う際​​​にカンマを使うと、カンマ演算子が通常どおりに働いていないかのように見える場合があります (カンマ演算子が式の中にないため)。以下の例では a には b = 3 の値 (すなわち 3) が設定されますが、さらに c = 4 が評価されて、その結果 (すなわち 4) がコンソールに返されます。これは演算子の優先順位と結合性のためです。

+ +
var a, b, c;
+
+a = b = 3, c = 4; // コンソールに 4 が返る
+console.log(a); // 3 (もっとも左)
+
+var x, y, z;
+
+x = (y = 5, z = 6); // コンソールに 6 が返る
+console.log(x); // 6 (もっとも右)
+
+ +

処理と返値

+ +

カンマ演算子が行うことのもうひとつの例が、値を返す前の処理です。前述のとおり最後の要素のみを返しますが、その他すべての要素も評価します。よって、以下のようなことができます。

+ +
function myFunc() {
+	var x = 0;
+
+  return (x += 1, x); // 返値は ++x と同じ
+}
+ +

仕様書

+ + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/conditional_operator/index.html b/files/ja/web/javascript/reference/operators/conditional_operator/index.html deleted file mode 100644 index c21aec44fc..0000000000 --- a/files/ja/web/javascript/reference/operators/conditional_operator/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: 条件 (三項) 演算子 -slug: Web/JavaScript/Reference/Operators/Conditional_Operator -tags: - - Conditional - - JS - - JavaScript - - Operator - - Reference - - ternary - - 三項 - - 条件 - - 演算子 -translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator ---- -
{{jsSidebar("Operators")}}
- -

条件 (三項) 演算子は JavaScript では唯一の、3 つのオペランドをとる演算子です。条件に続いて疑問符 (?)、そして条件が{{Glossary("truthy", "真値")}}であった場合に実行する式、コロン (:) が続き、条件が{{Glossary("falsy")}}であった場合に実行する式が最後に来ます。この演算子は、 if 文のショートカットとしてよく用いられます。

- -
{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}
- - - -

構文

- -
condition ? exprIfTrue : exprIfFalse
- -

引数

- -
-
condition
-
値が条件として使用される式です。
-
exprIfTrue
-
condition が {{Glossary("truthy")}} の値 (true と等しいか、 true に変換できる値) と評価された場合に評価される式です。
-
exprIfFalse
-
condition が {{Glossary("falsy")}} の値 (false と等しいか、 false に変換できる値) と評価された場合に評価される式です。
-
- -

解説

- -

false についていえば、 falsy になる可能性がある式は null, NaN, 0, 空文字列 (""), undefined です。 condition がこのうちの何れかであれば、条件演算子の結果は exprIfFalse の式を実行した結果になります。

- -

例

- -

単純な例

- -
var age = 26;
-var beverage = (age >= 21) ? "ビール" : "ジュース";
-console.log(beverage); // "ビール"
-
- -

null 値の扱い

- -

よくある使い方の一つに、 null になる可能性がある値を扱うというものがあります。

- -
let greeting = person => {
-    let name = person ? person.name : `お客さん`
-    return `やあ、${name}`
-}
-
-console.log(greeting({name: `アリス`}));  // "やあ、アリス"
-console.log(greeting(null));             // "やあ、お客さん"
-
- -

条件の連鎖

- -

三項演算子は右結合で、すなわち以下のような方法で if … else if … else if … else の連鎖と同様に「連鎖」させることができます。

- -
function example(…) {
-    return condition1 ? value1
-         : condition2 ? value2
-         : condition3 ? value3
-         : value4;
-}
-
-// 以下のものと同等です。
-
-function example(…) {
-    if (condition1) { return value1; }
-    else if (condition2) { return value2; }
-    else if (condition3) { return value3; }
-    else { return value4; }
-}
-
- -

仕様書

- - - - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/conditional_operator/index.md b/files/ja/web/javascript/reference/operators/conditional_operator/index.md new file mode 100644 index 0000000000..c21aec44fc --- /dev/null +++ b/files/ja/web/javascript/reference/operators/conditional_operator/index.md @@ -0,0 +1,113 @@ +--- +title: 条件 (三項) 演算子 +slug: Web/JavaScript/Reference/Operators/Conditional_Operator +tags: + - Conditional + - JS + - JavaScript + - Operator + - Reference + - ternary + - 三項 + - 条件 + - 演算子 +translation_of: Web/JavaScript/Reference/Operators/Conditional_Operator +--- +
{{jsSidebar("Operators")}}
+ +

条件 (三項) 演算子は JavaScript では唯一の、3 つのオペランドをとる演算子です。条件に続いて疑問符 (?)、そして条件が{{Glossary("truthy", "真値")}}であった場合に実行する式、コロン (:) が続き、条件が{{Glossary("falsy")}}であった場合に実行する式が最後に来ます。この演算子は、 if 文のショートカットとしてよく用いられます。

+ +
{{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}}
+ + + +

構文

+ +
condition ? exprIfTrue : exprIfFalse
+ +

引数

+ +
+
condition
+
値が条件として使用される式です。
+
exprIfTrue
+
condition が {{Glossary("truthy")}} の値 (true と等しいか、 true に変換できる値) と評価された場合に評価される式です。
+
exprIfFalse
+
condition が {{Glossary("falsy")}} の値 (false と等しいか、 false に変換できる値) と評価された場合に評価される式です。
+
+ +

解説

+ +

false についていえば、 falsy になる可能性がある式は null, NaN, 0, 空文字列 (""), undefined です。 condition がこのうちの何れかであれば、条件演算子の結果は exprIfFalse の式を実行した結果になります。

+ +

例

+ +

単純な例

+ +
var age = 26;
+var beverage = (age >= 21) ? "ビール" : "ジュース";
+console.log(beverage); // "ビール"
+
+ +

null 値の扱い

+ +

よくある使い方の一つに、 null になる可能性がある値を扱うというものがあります。

+ +
let greeting = person => {
+    let name = person ? person.name : `お客さん`
+    return `やあ、${name}`
+}
+
+console.log(greeting({name: `アリス`}));  // "やあ、アリス"
+console.log(greeting(null));             // "やあ、お客さん"
+
+ +

条件の連鎖

+ +

三項演算子は右結合で、すなわち以下のような方法で if … else if … else if … else の連鎖と同様に「連鎖」させることができます。

+ +
function example(…) {
+    return condition1 ? value1
+         : condition2 ? value2
+         : condition3 ? value3
+         : value4;
+}
+
+// 以下のものと同等です。
+
+function example(…) {
+    if (condition1) { return value1; }
+    else if (condition2) { return value2; }
+    else if (condition3) { return value3; }
+    else { return value4; }
+}
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-conditional-operator', 'Conditional Operator')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/grouping/index.html b/files/ja/web/javascript/reference/operators/grouping/index.html deleted file mode 100644 index 5e960e8384..0000000000 --- a/files/ja/web/javascript/reference/operators/grouping/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: グループ化演算子 -slug: Web/JavaScript/Reference/Operators/Grouping -tags: - - JavaScript - - Language feature - - Operator - - Primary Expressions - - 一次式 - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Grouping ---- -
{{jsSidebar("Operators")}}
- -

グループ化演算子 ( ) は、式での評価の優先順位を制御します。

- -
{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}
- - - -

構文

- -
 ( )
- -

解説

- -

グループ化演算子は、式または部分式の周りに括弧のペアで構成され、通常の演算子の優先順位を上書きし、より低い優先順位の式をより高い優先順位の式の前に評価できるようにします。その名の通り、括弧の中にあるものをグループ化します。

- -

例

- -

グループ化演算子の使用

- -

最初に乗算と除算をし、次に加算と引き算をする優先順位を、最初に加算を評価するように上書きします。

- -
var a = 1;
-var b = 2;
-var c = 3;
-
-// default precedence
-a + b * c     // 7
-// evaluated by default like this
-a + (b * c)   // 7
-
-// now overriding precedence
-// addition before multiplication
-(a + b) * c   // 9
-
-// which is equivalent to
-a * c + b * c // 9
-
- -

仕様書

- - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/grouping/index.md b/files/ja/web/javascript/reference/operators/grouping/index.md new file mode 100644 index 0000000000..5e960e8384 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/grouping/index.md @@ -0,0 +1,76 @@ +--- +title: グループ化演算子 +slug: Web/JavaScript/Reference/Operators/Grouping +tags: + - JavaScript + - Language feature + - Operator + - Primary Expressions + - 一次式 + - 演算子 + - 言語機能 +translation_of: Web/JavaScript/Reference/Operators/Grouping +--- +
{{jsSidebar("Operators")}}
+ +

グループ化演算子 ( ) は、式での評価の優先順位を制御します。

+ +
{{EmbedInteractiveExample("pages/js/expressions-groupingoperator.html")}}
+ + + +

構文

+ +
 ( )
+ +

解説

+ +

グループ化演算子は、式または部分式の周りに括弧のペアで構成され、通常の演算子の優先順位を上書きし、より低い優先順位の式をより高い優先順位の式の前に評価できるようにします。その名の通り、括弧の中にあるものをグループ化します。

+ +

例

+ +

グループ化演算子の使用

+ +

最初に乗算と除算をし、次に加算と引き算をする優先順位を、最初に加算を評価するように上書きします。

+ +
var a = 1;
+var b = 2;
+var c = 3;
+
+// default precedence
+a + b * c     // 7
+// evaluated by default like this
+a + (b * c)   // 7
+
+// now overriding precedence
+// addition before multiplication
+(a + b) * c   // 9
+
+// which is equivalent to
+a * c + b * c // 9
+
+ +

仕様書

+ + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/in/index.html b/files/ja/web/javascript/reference/operators/in/index.html deleted file mode 100644 index 72b6bf5934..0000000000 --- a/files/ja/web/javascript/reference/operators/in/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: in -slug: Web/JavaScript/Reference/Operators/in -tags: - - JavaScript - - Language feature - - Operator - - Relational Operators -translation_of: Web/JavaScript/Reference/Operators/in ---- -
{{jsSidebar("Operators")}}
- -

in 演算子は、指定されたプロパティが指定されたオブジェクトにある場合に true を返します。

- -
{{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}}
- - - -

構文

- -
prop in object
- -

引数

- -
-
prop
-
プロパティ名または配列のインデックスを表す文字列式またはシンボルです（シンボルではない場合は、文字列に強制変換されます）。
-
- -
-
object
-
オブジェクト（またはそのプロトタイプチェーン）に、指定された名前（prop）のプロパティが含まれているかどうかを確認するオブジェクト。
-
- -

例

- -

基本的な使い方

- -

次の例で in 演算子の使用法を示します。

- -
// Arrays
-let trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
-0 in trees        // true を返す
-3 in trees        // true を返す
-6 in trees        // false を返す
-'bay' in trees    // false を返す (インデックスの指す値ではなく、インデックスの数字を指定しなければならない)
-'length' in trees // true を返す (length は Array のプロパティ)
-Symbol.iterator in trees // true を返す (配列は反復可能。ES2015 以上で動作する)
-
-// 定義済みオブジェクト
-'PI' in Math          // true を返す
-
-// ユーザー定義オブジェクト
-let mycar = {make: 'Honda', model: 'Accord', year: 1998};
-'make' in mycar  // true を返す
-'model' in mycar // true を返す
-
- -

in 演算子の右側には、オブジェクトを指定しなければなりません。例えば、String コンストラクタで作成した文字列は指定できますが、文字列リテラルは指定できません。

- -
let color1 = new String('green');
-'length' in color1 // true を返す
-
-let color2 = 'coral';
-// エラーが発生 (color2 は String オブジェクトではありません)
-'length' in color2
-
- -

削除済みあるいは未定義状態のプロパティへの in の使用

- -

delete 演算子で削除されたプロパティについて、in 演算子は false を返します。

- -
let mycar = {make: 'Honda', model: 'Accord', year: 1998};
-delete mycar.make;
-'make' in mycar;  // false を返す
-
-let trees = new Array('redwood', 'bay', 'cedar', 'oak', 'maple');
-delete trees[3];
-3 in trees; // false を返す
-
- -

{{jsxref("Global_Objects/undefined", "undefined")}} を設定しているが削除されていないプロパティについて、in 演算子は true を返します。

- -
let mycar = {make: 'Honda', model: 'Accord', year: 1998};
-mycar.make = undefined;
-'make' in mycar;  // true を返す
-
- -
let trees = new Array('redwood', 'bay', 'cedar', 'oak', 'maple');
-trees[3] = undefined;
-3 in trees; // true を返す
-
- -

in 演算子は、空の配列スロットに対して false を返します。直接アクセスしても undefined が返されます。

- -
let empties = new Array(3)
-empties[2] // undefined を返す
-2 in empties  // false を返す
-
- -

これを避けるためには、新しい配列が常に空でない値で埋められるようにするか、配列の終わりを超えてインデックスに書き込まないようにします。

- -
let empties = new Array(3).fill(undefined)
-2 in empties  // true を返す
-
- -

継承されたプロパティ

- -

in 演算子は、プロトタイプチェーンのプロパティに対して true を返します。(継承されていないプロパティのみをチェックする場合は、代わりに {{jsxref("Object.prototype.hasOwnProperty()")}} を使用してください)。

- -
'toString' in {}  // returns true
-
- -

仕様

- - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}
- -

ブラウザー実装状況

- - - -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/in/index.md b/files/ja/web/javascript/reference/operators/in/index.md new file mode 100644 index 0000000000..72b6bf5934 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/in/index.md @@ -0,0 +1,141 @@ +--- +title: in +slug: Web/JavaScript/Reference/Operators/in +tags: + - JavaScript + - Language feature + - Operator + - Relational Operators +translation_of: Web/JavaScript/Reference/Operators/in +--- +
{{jsSidebar("Operators")}}
+ +

in 演算子は、指定されたプロパティが指定されたオブジェクトにある場合に true を返します。

+ +
{{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}}
+ + + +

構文

+ +
prop in object
+ +

引数

+ +
+
prop
+
プロパティ名または配列のインデックスを表す文字列式またはシンボルです（シンボルではない場合は、文字列に強制変換されます）。
+
+ +
+
object
+
オブジェクト（またはそのプロトタイプチェーン）に、指定された名前（prop）のプロパティが含まれているかどうかを確認するオブジェクト。
+
+ +

例

+ +

基本的な使い方

+ +

次の例で in 演算子の使用法を示します。

+ +
// Arrays
+let trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];
+0 in trees        // true を返す
+3 in trees        // true を返す
+6 in trees        // false を返す
+'bay' in trees    // false を返す (インデックスの指す値ではなく、インデックスの数字を指定しなければならない)
+'length' in trees // true を返す (length は Array のプロパティ)
+Symbol.iterator in trees // true を返す (配列は反復可能。ES2015 以上で動作する)
+
+// 定義済みオブジェクト
+'PI' in Math          // true を返す
+
+// ユーザー定義オブジェクト
+let mycar = {make: 'Honda', model: 'Accord', year: 1998};
+'make' in mycar  // true を返す
+'model' in mycar // true を返す
+
+ +

in 演算子の右側には、オブジェクトを指定しなければなりません。例えば、String コンストラクタで作成した文字列は指定できますが、文字列リテラルは指定できません。

+ +
let color1 = new String('green');
+'length' in color1 // true を返す
+
+let color2 = 'coral';
+// エラーが発生 (color2 は String オブジェクトではありません)
+'length' in color2
+
+ +

削除済みあるいは未定義状態のプロパティへの in の使用

+ +

delete 演算子で削除されたプロパティについて、in 演算子は false を返します。

+ +
let mycar = {make: 'Honda', model: 'Accord', year: 1998};
+delete mycar.make;
+'make' in mycar;  // false を返す
+
+let trees = new Array('redwood', 'bay', 'cedar', 'oak', 'maple');
+delete trees[3];
+3 in trees; // false を返す
+
+ +

{{jsxref("Global_Objects/undefined", "undefined")}} を設定しているが削除されていないプロパティについて、in 演算子は true を返します。

+ +
let mycar = {make: 'Honda', model: 'Accord', year: 1998};
+mycar.make = undefined;
+'make' in mycar;  // true を返す
+
+ +
let trees = new Array('redwood', 'bay', 'cedar', 'oak', 'maple');
+trees[3] = undefined;
+3 in trees; // true を返す
+
+ +

in 演算子は、空の配列スロットに対して false を返します。直接アクセスしても undefined が返されます。

+ +
let empties = new Array(3)
+empties[2] // undefined を返す
+2 in empties  // false を返す
+
+ +

これを避けるためには、新しい配列が常に空でない値で埋められるようにするか、配列の終わりを超えてインデックスに書き込まないようにします。

+ +
let empties = new Array(3).fill(undefined)
+2 in empties  // true を返す
+
+ +

継承されたプロパティ

+ +

in 演算子は、プロトタイプチェーンのプロパティに対して true を返します。(継承されていないプロパティのみをチェックする場合は、代わりに {{jsxref("Object.prototype.hasOwnProperty()")}} を使用してください)。

+ +
'toString' in {}  // returns true
+
+ +

仕様

+ + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}
+ +

ブラウザー実装状況

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/instanceof/index.html b/files/ja/web/javascript/reference/operators/instanceof/index.html deleted file mode 100644 index a238d8b522..0000000000 --- a/files/ja/web/javascript/reference/operators/instanceof/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: instanceof -slug: Web/JavaScript/Reference/Operators/instanceof -tags: - - JavaScript - - Language feature - - Object - - Operator - - Prototype - - Relational Operators - - instanceof -translation_of: Web/JavaScript/Reference/Operators/instanceof ---- -
{{jsSidebar("Operators")}}
- -

instanceof 演算子は、オブジェクトが自身のプロトタイプにコンストラクタの prototype プロパティを持っているかを確認します。戻り値はブール値です。

- -
{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}
- - - -

構文

- -
object instanceof constructor
- -

引数

- -
-
object
-
確認するオブジェクト
-
- -
-
constructor
-
オブジェクトに対して確認を行う関数
-
- -

説明

- -

instanceof 演算子は、object のプロトタイプチェインで constructor.prototype の存在を確認します。

- -
// コンストラクタを定義
-function C() {}
-function D() {}
-
-let o = new C()
-
-// true なぜなら: Object.getPrototypeOf(o) === C.prototype
-o instanceof C;
-
-// false D.prototype は o のプロトタイプチェーンのどこにも存在しない
-o instanceof D;
-
-o instanceof Object;          // true なぜなら...
-C.prototype instanceof Object // true だから
-
-C.prototype = {}
-let o2 = new C()
-
-o2 instanceof C; // true
-
-// false C.prototype は o のプロトタイプチェーンの
-// どこにも存在しない
-o instanceof C;
-
-D.prototype = new C(); // 継承を使用
-let o3 = new D()
-o3 instanceof D; // true
-o3 instanceof C; // true o3 のプロトタイプチェーンに C.prototype があるため。
-
- -

注意事項: instanceof による確認結果はコンストラクタの prototype プロパティの変化に従って変わることがあります。また、オブジェクトのプロトタイプを Object.setPrototypeOf を用いて変更した場合や、非標準の __proto__ 疑似プロパティを用いた場合も変わりえます。

- -

instanceof と複数のコンテキスト (例: frame や window)

- -

異なるスコープは、別々の実行環境を持ちます。つまり、それらは別々の組み込み物 (別々のグローバルオブジェクト、別々のコンストラクタ 等々) を持ちます。これにより予期せぬ結果になる場合があります。例えば、[] instanceof window.frames[0].Array は、Array.prototype !== window.frames[0].Array であることおよび配列が以前から継承していることから false を返します。

- -

これは、始めはわかりにくいかもしれませんが、スクリプトで複数のフレームやウィンドウを扱い始め、オブジェクトをあるコンテキストから別のコンテキストへ関数を経由して渡すようになると、正当かつ重要な事項になります。例えば、Array.isArray(myObj) を使用して、与えられたオブジェクトが実際に配列であるかどうかを安全にチェックできます。

- -

例えば、別のコンテキストで Nodes が SVGElement であるかどうかをチェックするには、myNode instanceof myNode.ownerDocument.defaultView.SVGElement を使用します。

- -
-

Mozilla 開発者への注意点

- -

XPCOM を用いるコードでは instanceof に特別な効果があります: obj instanceof xpcomInterface (例えば Components.interfaces.nsIFile) は obj.QueryInterface(xpcomInterface) を呼び出し、QueryInterface が成功した場合に true を返します。

- -

このような呼び出しの副作用として、instanceof による確認の成功後に obj の xpcomInterface のプロパティを利用できることがあります。標準 JavaScript の環境と異なり、obj が異なるスコープ由来であっても obj instanceof xpcomInterface での確認は期待どおりに動作します。

-
- -

例

- -

String や Date が Object タイプであることの実証

- -

以下のコードは、String や Date オブジェクトが Object タイプでもある (Object から派生している) ことの実証に instanceof を用いています。

- -

また、オブジェクトリテラルを用いて作成されたオブジェクトに対する例外、つまり、prototype が undefined であるにも関わらず instanceof Object が true を報告する例を示します。

- -
let simpleStr = 'This is a simple string'
-let myString  = new String()
-let newStr    = new String('コンストラクターで作成された文字列')
-let myDate    = new Date()
-let myObj     = {}
-let myNonObj  = Object.create(null)
-
-simpleStr instanceof String  // false を返す 文字列リテラルはオブジェクトではありません。
-myString  instanceof String  // true を返す
-newStr    instanceof String  // true を返す
-myString  instanceof Object  // true を返す
-
-myObj    instanceof Object   // true を返す すべてのオブジェクトリテラルはプロトタイプとして Object.prototype を持っています。
-({})     instanceof Object   // true を返す 上記と同じ
-myNonObj instanceof Object   // false を返す プロトタイプはプロトタイプチェーンの終わりです（null）
-myString instanceof Date     // false を返す
-
-myDate instanceof Date      // true を返す
-myDate instanceof Object    // true を返す
-myDate instanceof String    // false を返す
-
- -

mycar が Car タイプおよび Object タイプであることの実証

- -

以下のコードは、Car オブジェクトタイプとそのインスタンスである mycar を生成しています。instanceof 演算子で、mycar は Car タイプおよび Object タイプであることを実証します。

- -
function Car(make, model, year) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-}
-let mycar = new Car('Honda', 'Accord', 1998)
-let a = mycar instanceof Car     // true を返す
-let b = mycar instanceof Object  // true を返す
-
- -

インスタンスではないことの実証

- -

オブジェクトが特定のコンストラクタの instanceof でないかどうかを確認するには次のようにします。

- -
if (!(mycar instanceof Car)) {
-  // Do something, like:
-  // mycar = new Car(mycar)
-}
-
- -

これは実際には次のものとは異なります。

- -
if (!mycar instanceof Car)
- -

これは常に false になります。(!mycar は instanceof の前に評価され、常に Car のインスタンスを確認したブール値になります)。

- -

仕様

- - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}
- -

ブラウザー実装状況

- - - -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/instanceof/index.md b/files/ja/web/javascript/reference/operators/instanceof/index.md new file mode 100644 index 0000000000..a238d8b522 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/instanceof/index.md @@ -0,0 +1,175 @@ +--- +title: instanceof +slug: Web/JavaScript/Reference/Operators/instanceof +tags: + - JavaScript + - Language feature + - Object + - Operator + - Prototype + - Relational Operators + - instanceof +translation_of: Web/JavaScript/Reference/Operators/instanceof +--- +
{{jsSidebar("Operators")}}
+ +

instanceof 演算子は、オブジェクトが自身のプロトタイプにコンストラクタの prototype プロパティを持っているかを確認します。戻り値はブール値です。

+ +
{{EmbedInteractiveExample("pages/js/expressions-instanceof.html")}}
+ + + +

構文

+ +
object instanceof constructor
+ +

引数

+ +
+
object
+
確認するオブジェクト
+
+ +
+
constructor
+
オブジェクトに対して確認を行う関数
+
+ +

説明

+ +

instanceof 演算子は、object のプロトタイプチェインで constructor.prototype の存在を確認します。

+ +
// コンストラクタを定義
+function C() {}
+function D() {}
+
+let o = new C()
+
+// true なぜなら: Object.getPrototypeOf(o) === C.prototype
+o instanceof C;
+
+// false D.prototype は o のプロトタイプチェーンのどこにも存在しない
+o instanceof D;
+
+o instanceof Object;          // true なぜなら...
+C.prototype instanceof Object // true だから
+
+C.prototype = {}
+let o2 = new C()
+
+o2 instanceof C; // true
+
+// false C.prototype は o のプロトタイプチェーンの
+// どこにも存在しない
+o instanceof C;
+
+D.prototype = new C(); // 継承を使用
+let o3 = new D()
+o3 instanceof D; // true
+o3 instanceof C; // true o3 のプロトタイプチェーンに C.prototype があるため。
+
+ +

注意事項: instanceof による確認結果はコンストラクタの prototype プロパティの変化に従って変わることがあります。また、オブジェクトのプロトタイプを Object.setPrototypeOf を用いて変更した場合や、非標準の __proto__ 疑似プロパティを用いた場合も変わりえます。

+ +

instanceof と複数のコンテキスト (例: frame や window)

+ +

異なるスコープは、別々の実行環境を持ちます。つまり、それらは別々の組み込み物 (別々のグローバルオブジェクト、別々のコンストラクタ 等々) を持ちます。これにより予期せぬ結果になる場合があります。例えば、[] instanceof window.frames[0].Array は、Array.prototype !== window.frames[0].Array であることおよび配列が以前から継承していることから false を返します。

+ +

これは、始めはわかりにくいかもしれませんが、スクリプトで複数のフレームやウィンドウを扱い始め、オブジェクトをあるコンテキストから別のコンテキストへ関数を経由して渡すようになると、正当かつ重要な事項になります。例えば、Array.isArray(myObj) を使用して、与えられたオブジェクトが実際に配列であるかどうかを安全にチェックできます。

+ +

例えば、別のコンテキストで Nodes が SVGElement であるかどうかをチェックするには、myNode instanceof myNode.ownerDocument.defaultView.SVGElement を使用します。

+ +
+

Mozilla 開発者への注意点

+ +

XPCOM を用いるコードでは instanceof に特別な効果があります: obj instanceof xpcomInterface (例えば Components.interfaces.nsIFile) は obj.QueryInterface(xpcomInterface) を呼び出し、QueryInterface が成功した場合に true を返します。

+ +

このような呼び出しの副作用として、instanceof による確認の成功後に obj の xpcomInterface のプロパティを利用できることがあります。標準 JavaScript の環境と異なり、obj が異なるスコープ由来であっても obj instanceof xpcomInterface での確認は期待どおりに動作します。

+
+ +

例

+ +

String や Date が Object タイプであることの実証

+ +

以下のコードは、String や Date オブジェクトが Object タイプでもある (Object から派生している) ことの実証に instanceof を用いています。

+ +

また、オブジェクトリテラルを用いて作成されたオブジェクトに対する例外、つまり、prototype が undefined であるにも関わらず instanceof Object が true を報告する例を示します。

+ +
let simpleStr = 'This is a simple string'
+let myString  = new String()
+let newStr    = new String('コンストラクターで作成された文字列')
+let myDate    = new Date()
+let myObj     = {}
+let myNonObj  = Object.create(null)
+
+simpleStr instanceof String  // false を返す 文字列リテラルはオブジェクトではありません。
+myString  instanceof String  // true を返す
+newStr    instanceof String  // true を返す
+myString  instanceof Object  // true を返す
+
+myObj    instanceof Object   // true を返す すべてのオブジェクトリテラルはプロトタイプとして Object.prototype を持っています。
+({})     instanceof Object   // true を返す 上記と同じ
+myNonObj instanceof Object   // false を返す プロトタイプはプロトタイプチェーンの終わりです（null）
+myString instanceof Date     // false を返す
+
+myDate instanceof Date      // true を返す
+myDate instanceof Object    // true を返す
+myDate instanceof String    // false を返す
+
+ +

mycar が Car タイプおよび Object タイプであることの実証

+ +

以下のコードは、Car オブジェクトタイプとそのインスタンスである mycar を生成しています。instanceof 演算子で、mycar は Car タイプおよび Object タイプであることを実証します。

+ +
function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+let mycar = new Car('Honda', 'Accord', 1998)
+let a = mycar instanceof Car     // true を返す
+let b = mycar instanceof Object  // true を返す
+
+ +

インスタンスではないことの実証

+ +

オブジェクトが特定のコンストラクタの instanceof でないかどうかを確認するには次のようにします。

+ +
if (!(mycar instanceof Car)) {
+  // Do something, like:
+  // mycar = new Car(mycar)
+}
+
+ +

これは実際には次のものとは異なります。

+ +
if (!mycar instanceof Car)
+ +

これは常に false になります。(!mycar は instanceof の前に評価され、常に Car のインスタンスを確認したブール値になります)。

+ +

仕様

+ + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}
+ +

ブラウザー実装状況

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/logical_and/index.html b/files/ja/web/javascript/reference/operators/logical_and/index.html deleted file mode 100644 index 7393320854..0000000000 --- a/files/ja/web/javascript/reference/operators/logical_and/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: 論理積 (&&) -slug: Web/JavaScript/Reference/Operators/Logical_AND -tags: - - JavaScript - - Language feature - - Logical Operator - - Operator - - Reference - - 演算子 - - 言語機能 - - 論理演算子 -translation_of: Web/JavaScript/Reference/Operators/Logical_AND ---- -
{{jsSidebar("Operators")}}
- -

論理積 (&&) 演算子 (論理結合) をオペランドの組み合わせに対して使用すると、すべてのオペランドが true である場合に true になります。一般的には {{jsxref("Boolean")}} (論理) 値で使用されます。その場合は論理値を返します。ただし && 演算子は実際には指定されたオペランドのうち一つの値を返すので、この演算子が論理値以外で使用された場合は、論理値以外の値を返すことになります。

- -
{{EmbedInteractiveExample("pages/js/expressions-logical-and.html", "shorter")}}
- - - -

構文

- -
expr1 && expr2
-
- -

解説

- -

expr1 が true に変換できる場合は expr2 を返し、それ以外の場合は expr1 を返します。

- -

ある値が true に変換できる場合、その値は真値 ({{Glossary("truthy")}}) と呼ばれます。ある値が false に変換できる場合、その値は偽値 ({{Glossary("falsy")}}) と呼ばれます。

- -

false に変換することができる式の例を示します。

- - - -

&& 演算子では論理値以外のオペランドを使用することができますが、返値が常に boolean プリミティブに変換することが可能であるため、論理演算子と見なすことができます。返値 (または一般的な式) を対応する論理値に明示的に変換するには、二重の否定演算子または {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}} コンストラクターを使用してください。

- -

短絡評価

- -

論理積の式は左から右へと評価され、下記の規則を使用して「短絡」評価が可能なように評価されます。

- -

(偽値の式) && expr は短絡評価で偽値の式に評価されます。

- -

短絡とは、上記の expr の部分が評価されず、したがって、これを行うことの副作用が効果を及ぼさないことを意味します (例えば、 expr が関数呼び出しであった場合、この場所では呼び出されません)。これは、最初のオペランドが評価された時点で、すでに演算子の値が決定しているためです。例を示します。

- -
function A(){ console.log('called A'); return false; }
-function B(){ console.log('called B'); return true; }
-
-console.log( A() && B() );
-// 関数呼び出しによって "called A" がログ出力され、
-// それから false (演算子の結果の値) が出力されます。
-
- -

演算子の優先順位

- -

以下の式は同じであるように見えるかもしれませんが、異なります。 && 演算子は || 演算子よりも先に実行されるからです (演算子の優先順位を参照)。

- -
true || false && false      // true を返す。 && が先に実行されるため
-(true || false) && false    // false を返す。演算子の優先順位が適用されないため
- -

例

- -

論理和の使用

- -

以下のコードは && (論理積) 演算子の例を示しています。

- -
a1 = true  && true       // t && t returns true
-a2 = true  && false      // t && f returns false
-a3 = false && true       // f && t returns false
-a4 = false && (3 == 4)   // f && f returns false
-a5 = 'Cat' && 'Dog'      // t && t returns "Dog"
-a6 = false && 'Cat'      // f && t returns false
-a7 = 'Cat' && false      // t && f returns false
-a8 = ''    && false      // f && f returns ""
-a9 = false && ''         // f && f returns false
- -

論理型の変換規則

- -

AND から OR への変換

- -

論理型に関する以下の操作は、

- -
bCondition1 && bCondition2
- -

常に以下のものと等しくなります。

- -
!(!bCondition1 || !bCondition2)
- -

OR から AND への変換

- -

論理型に関する以下の操作は、

- -
bCondition1 || bCondition2
- -

常に以下のものと等しくなります。

- -
!(!bCondition1 && !bCondition2)
- -

入れ子になった括弧の除去

- -

論理式は左から右に評価されるので、いくつかのルールに従って複雑な式から括弧を削除することは常に可能です。

- -

以下の論理型に関する複合操作は、

- -
bCondition1 || (bCondition2 && bCondition3)
- -

常に以下のものと等しくなります。

- -
bCondition1 || bCondition2 && bCondition3
- -

仕様書

- - - - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#prod-LogicalANDExpression', 'Logical AND expression')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/logical_and/index.md b/files/ja/web/javascript/reference/operators/logical_and/index.md new file mode 100644 index 0000000000..7393320854 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/logical_and/index.md @@ -0,0 +1,144 @@ +--- +title: 論理積 (&&) +slug: Web/JavaScript/Reference/Operators/Logical_AND +tags: + - JavaScript + - Language feature + - Logical Operator + - Operator + - Reference + - 演算子 + - 言語機能 + - 論理演算子 +translation_of: Web/JavaScript/Reference/Operators/Logical_AND +--- +
{{jsSidebar("Operators")}}
+ +

論理積 (&&) 演算子 (論理結合) をオペランドの組み合わせに対して使用すると、すべてのオペランドが true である場合に true になります。一般的には {{jsxref("Boolean")}} (論理) 値で使用されます。その場合は論理値を返します。ただし && 演算子は実際には指定されたオペランドのうち一つの値を返すので、この演算子が論理値以外で使用された場合は、論理値以外の値を返すことになります。

+ +
{{EmbedInteractiveExample("pages/js/expressions-logical-and.html", "shorter")}}
+ + + +

構文

+ +
expr1 && expr2
+
+ +

解説

+ +

expr1 が true に変換できる場合は expr2 を返し、それ以外の場合は expr1 を返します。

+ +

ある値が true に変換できる場合、その値は真値 ({{Glossary("truthy")}}) と呼ばれます。ある値が false に変換できる場合、その値は偽値 ({{Glossary("falsy")}}) と呼ばれます。

+ +

false に変換することができる式の例を示します。

+ + + +

&& 演算子では論理値以外のオペランドを使用することができますが、返値が常に boolean プリミティブに変換することが可能であるため、論理演算子と見なすことができます。返値 (または一般的な式) を対応する論理値に明示的に変換するには、二重の否定演算子または {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}} コンストラクターを使用してください。

+ +

短絡評価

+ +

論理積の式は左から右へと評価され、下記の規則を使用して「短絡」評価が可能なように評価されます。

+ +

(偽値の式) && expr は短絡評価で偽値の式に評価されます。

+ +

短絡とは、上記の expr の部分が評価されず、したがって、これを行うことの副作用が効果を及ぼさないことを意味します (例えば、 expr が関数呼び出しであった場合、この場所では呼び出されません)。これは、最初のオペランドが評価された時点で、すでに演算子の値が決定しているためです。例を示します。

+ +
function A(){ console.log('called A'); return false; }
+function B(){ console.log('called B'); return true; }
+
+console.log( A() && B() );
+// 関数呼び出しによって "called A" がログ出力され、
+// それから false (演算子の結果の値) が出力されます。
+
+ +

演算子の優先順位

+ +

以下の式は同じであるように見えるかもしれませんが、異なります。 && 演算子は || 演算子よりも先に実行されるからです (演算子の優先順位を参照)。

+ +
true || false && false      // true を返す。 && が先に実行されるため
+(true || false) && false    // false を返す。演算子の優先順位が適用されないため
+ +

例

+ +

論理和の使用

+ +

以下のコードは && (論理積) 演算子の例を示しています。

+ +
a1 = true  && true       // t && t returns true
+a2 = true  && false      // t && f returns false
+a3 = false && true       // f && t returns false
+a4 = false && (3 == 4)   // f && f returns false
+a5 = 'Cat' && 'Dog'      // t && t returns "Dog"
+a6 = false && 'Cat'      // f && t returns false
+a7 = 'Cat' && false      // t && f returns false
+a8 = ''    && false      // f && f returns ""
+a9 = false && ''         // f && f returns false
+ +

論理型の変換規則

+ +

AND から OR への変換

+ +

論理型に関する以下の操作は、

+ +
bCondition1 && bCondition2
+ +

常に以下のものと等しくなります。

+ +
!(!bCondition1 || !bCondition2)
+ +

OR から AND への変換

+ +

論理型に関する以下の操作は、

+ +
bCondition1 || bCondition2
+ +

常に以下のものと等しくなります。

+ +
!(!bCondition1 && !bCondition2)
+ +

入れ子になった括弧の除去

+ +

論理式は左から右に評価されるので、いくつかのルールに従って複雑な式から括弧を削除することは常に可能です。

+ +

以下の論理型に関する複合操作は、

+ +
bCondition1 || (bCondition2 && bCondition3)
+ +

常に以下のものと等しくなります。

+ +
bCondition1 || bCondition2 && bCondition3
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#prod-LogicalANDExpression', 'Logical AND expression')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/logical_not/index.html b/files/ja/web/javascript/reference/operators/logical_not/index.html deleted file mode 100644 index a702e6ecdd..0000000000 --- a/files/ja/web/javascript/reference/operators/logical_not/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: 論理否定 (!) -slug: Web/JavaScript/Reference/Operators/Logical_NOT -tags: - - JavaScript - - Language feature - - Logical Operator - - Operator - - Reference - - 演算子 - - 言語機能 - - 論理演算子 -translation_of: Web/JavaScript/Reference/Operators/Logical_NOT ---- -
{{jsSidebar("Operators")}}
- -

論理否定 (!) 演算子 (論理反転、否定) は、真値を取ると偽値になり、その逆も同様です。これは通常 {{jsxref("Boolean")}} (論理型) の値に使用されます。論理型以外の値に使用した場合、単一のオペランドが true に変換できる場合は false を返し、それ以外は true を返します。

- -
{{EmbedInteractiveExample("pages/js/expressions-logical-not.html", "shorter")}}
- - - -

構文

- -
!expr
-
- -

解説

- -

単一のオペランドが true に変換できる場合は false を返し、それ以外は true を返します。

- -

ある値が true に変換できる場合、その値は真値 ({{Glossary("truthy")}}) と呼ばれます。ある値が false に変換できる場合、その値は偽値 ({{Glossary("falsy")}}) と呼ばれます。

- -

false に変換することができる式の例を示します。

- - - -

! 演算子は論理値以外のオペランドに対して使用することができますが、返値が常に boolean プリミティブに変換することが可能であるため、論理演算子と見なすことができます。返値 (または一般的な式) を対応する論理値に明示的に変換するには、二重の否定演算子または {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}} コンストラクターを使用してください。

- -

例

- -

否定の使用

- -

以下のコードは ! (論理否定) 演算子の例を示しています。

- -
n1 = !true               // !t returns false
-n2 = !false              // !f returns true
-n3 = !''                 // !f returns true
-n4 = !'Cat'              // !t returns false
- -

二重否定 (!!)

- -

複数の否定演算子を連続して使用することで、明示的にあらゆる値を対応する論理型プリミティブに変換することができます。変換は値の「真値性」または「偽値性」に基づいて行われます ({{Glossary("truthy")}} および {{Glossary("falsy")}} を参照)。

- -

同じ変換は {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}} 関数を通じて行うこともできます。

- -
n1 = !!true                   // !!truthy returns true
-n2 = !!{}                     // !!truthy returns true: any object is truthy...
-n3 = !!(new Boolean(false))   // ...even Boolean objects with a false .valueOf()!
-n4 = !!false                  // !!falsy returns false
-n5 = !!""                     // !!falsy returns false
-n6 = !!Boolean(false)         // !!falsy returns false
- -

否定同士の変換

- -

以下の操作を論理値で行った場合、

- -
!!bCondition
- -

常に以下のものと等しくなります。

- -
bCondition
- -

仕様書

- - - - - - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#prod-LogicalORExpression', 'Logical OR expression')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/logical_not/index.md b/files/ja/web/javascript/reference/operators/logical_not/index.md new file mode 100644 index 0000000000..a702e6ecdd --- /dev/null +++ b/files/ja/web/javascript/reference/operators/logical_not/index.md @@ -0,0 +1,107 @@ +--- +title: 論理否定 (!) +slug: Web/JavaScript/Reference/Operators/Logical_NOT +tags: + - JavaScript + - Language feature + - Logical Operator + - Operator + - Reference + - 演算子 + - 言語機能 + - 論理演算子 +translation_of: Web/JavaScript/Reference/Operators/Logical_NOT +--- +
{{jsSidebar("Operators")}}
+ +

論理否定 (!) 演算子 (論理反転、否定) は、真値を取ると偽値になり、その逆も同様です。これは通常 {{jsxref("Boolean")}} (論理型) の値に使用されます。論理型以外の値に使用した場合、単一のオペランドが true に変換できる場合は false を返し、それ以外は true を返します。

+ +
{{EmbedInteractiveExample("pages/js/expressions-logical-not.html", "shorter")}}
+ + + +

構文

+ +
!expr
+
+ +

解説

+ +

単一のオペランドが true に変換できる場合は false を返し、それ以外は true を返します。

+ +

ある値が true に変換できる場合、その値は真値 ({{Glossary("truthy")}}) と呼ばれます。ある値が false に変換できる場合、その値は偽値 ({{Glossary("falsy")}}) と呼ばれます。

+ +

false に変換することができる式の例を示します。

+ + + +

! 演算子は論理値以外のオペランドに対して使用することができますが、返値が常に boolean プリミティブに変換することが可能であるため、論理演算子と見なすことができます。返値 (または一般的な式) を対応する論理値に明示的に変換するには、二重の否定演算子または {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}} コンストラクターを使用してください。

+ +

例

+ +

否定の使用

+ +

以下のコードは ! (論理否定) 演算子の例を示しています。

+ +
n1 = !true               // !t returns false
+n2 = !false              // !f returns true
+n3 = !''                 // !f returns true
+n4 = !'Cat'              // !t returns false
+ +

二重否定 (!!)

+ +

複数の否定演算子を連続して使用することで、明示的にあらゆる値を対応する論理型プリミティブに変換することができます。変換は値の「真値性」または「偽値性」に基づいて行われます ({{Glossary("truthy")}} および {{Glossary("falsy")}} を参照)。

+ +

同じ変換は {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}} 関数を通じて行うこともできます。

+ +
n1 = !!true                   // !!truthy returns true
+n2 = !!{}                     // !!truthy returns true: any object is truthy...
+n3 = !!(new Boolean(false))   // ...even Boolean objects with a false .valueOf()!
+n4 = !!false                  // !!falsy returns false
+n5 = !!""                     // !!falsy returns false
+n6 = !!Boolean(false)         // !!falsy returns false
+ +

否定同士の変換

+ +

以下の操作を論理値で行った場合、

+ +
!!bCondition
+ +

常に以下のものと等しくなります。

+ +
bCondition
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#prod-LogicalORExpression', 'Logical OR expression')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/logical_or/index.html b/files/ja/web/javascript/reference/operators/logical_or/index.html deleted file mode 100644 index 29a177506c..0000000000 --- a/files/ja/web/javascript/reference/operators/logical_or/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: 論理和 (||) -slug: Web/JavaScript/Reference/Operators/Logical_OR -tags: - - JavaScript - - Language feature - - Logical Operator - - Operator - - Reference - - 演算子 - - 言語機能 - - 論理演算子 -translation_of: Web/JavaScript/Reference/Operators/Logical_OR ---- -
{{jsSidebar("Operators")}}
- -

論理和 (||) 演算子 (論理的分割) をオペランドの組み合わせに対して使用すると、オペランドのうち 1 つ以上が true である場合に true になります。一般的には {{jsxref("Boolean")}} (論理) 値で使用されます。その場合は論理値を返します。ただし || 演算子は実際には指定されたオペランドのうち一つの値を返すので、この演算子が論理値以外で使用された場合は、論理値以外の値を返すことになります。

- -
{{EmbedInteractiveExample("pages/js/expressions-logical-or.html", "shorter")}}
- - - -

構文

- -
expr1 || expr2
-
- -

解説

- -

expr1 が true に変換できる場合は expr1 を返し、それ以外の場合は expr2 を返します。

- -

ある値が true に変換できる場合、その値は真値 ({{Glossary("truthy")}}) と呼ばれます。ある値が false に変換できる場合、その値は偽値 ({{Glossary("falsy")}}) と呼ばれます。

- -

false に変換されうる式の例を示します。

- - - -

|| 演算子では論理値以外のオペランドを使用することができますが、返値が常に boolean プリミティブに変換することが可能であるため、論理演算子と見なすことができます。返値 (または一般的な式) を対応する論理値に明示的に変換するには、二重の否定演算子または {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}} コンストラクターを使用してください。

- -

短絡評価

- -

論理和の式は左から右へと評価され、下記の規則を使用して「短絡」評価が可能なように評価されます。

- -

(真値の式) || expr は短絡評価で真値の式に評価されます。

- -

短絡とは、上記の expr の部分が評価されず、したがって、これを行うことの副作用が効果を及ぼさないことを意味します (例えば、 expr が関数呼び出しであった場合、この場所では呼び出されません)。これは、最初のオペランドが評価された時点で、すでに演算子の値が決定しているためです。例を示します。

- -
function A(){ console.log('called A'); return false; }
-function B(){ console.log('called B'); return true; }
-
-console.log( B() || A() );
-// 関数呼び出しによって "called B" がログ出力され、
-// それから true (演算子の結果の値) が出力されます。
-
- -

演算子の優先順位

- -

以下の式は同じであるように見えるかもしれませんが、異なります。 && 演算子は || 演算子よりも先に実行されるからです (演算子の優先順位参照)。

- -
true || false && false      //  true を返す。 && が先に実行されるため
-(true || false) && false    // false を返す。演算子の優先順位が適用されないため
- -

例

- -

OR の使用

- -

以下のコードは || (論理和) 演算子の例を示しています。

- -
o1 = true  || true       // t || t returns true
-o2 = false || true       // f || t returns true
-o3 = true  || false      // t || f returns true
-o4 = false || (3 == 4)   // f || f returns false
-o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
-o6 = false || 'Cat'      // f || t returns "Cat"
-o7 = 'Cat' || false      // t || f returns "Cat"
-o8 = ''    || false      // f || f returns false
-o9 = false || ''         // f || f returns ""
-o10 = false || varObject // f || object returns varObject
-
- -
-

注: この演算子を使用していくつかの変数に既定値を提供する場合、偽値 が使用されないことに注意してください。{{jsxref("null")}} や {{jsxref("undefined")}} をフィルタリングする必要がある場合は、Null 合体演算子の使用を検討してください。

-
- -

論理型の変換規則

- -

AND から OR への変換

- -

論理型に関する以下の操作は、

- -
bCondition1 && bCondition2
- -

常に以下のものと等しくなります。

- -
!(!bCondition1 || !bCondition2)
- -

OR から AND への変換

- -

論理型に関する以下の操作は、

- -
bCondition1 || bCondition2
- -

常に以下のものと等しくなります。

- -
!(!bCondition1 && !bCondition2)
- -

入れ子になった括弧の除去

- -

論理式は左から右に評価されるので、いくつかのルールに従って複雑な式から括弧を削除することは常に可能です。

- -

以下の論理型に関する複合操作は、

- -
bCondition1 && (bCondition2 || bCondition3)
- -

常に以下のものと等しくなります。

- -
!(!bCondition1 || !bCondition2 && !bCondition3)
- -

仕様書

- - - - - - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#prod-LogicalORExpression', 'Logical OR expression')}}
- -

ブラウザー実装状況

- -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/logical_or/index.md b/files/ja/web/javascript/reference/operators/logical_or/index.md new file mode 100644 index 0000000000..29a177506c --- /dev/null +++ b/files/ja/web/javascript/reference/operators/logical_or/index.md @@ -0,0 +1,153 @@ +--- +title: 論理和 (||) +slug: Web/JavaScript/Reference/Operators/Logical_OR +tags: + - JavaScript + - Language feature + - Logical Operator + - Operator + - Reference + - 演算子 + - 言語機能 + - 論理演算子 +translation_of: Web/JavaScript/Reference/Operators/Logical_OR +--- +
{{jsSidebar("Operators")}}
+ +

論理和 (||) 演算子 (論理的分割) をオペランドの組み合わせに対して使用すると、オペランドのうち 1 つ以上が true である場合に true になります。一般的には {{jsxref("Boolean")}} (論理) 値で使用されます。その場合は論理値を返します。ただし || 演算子は実際には指定されたオペランドのうち一つの値を返すので、この演算子が論理値以外で使用された場合は、論理値以外の値を返すことになります。

+ +
{{EmbedInteractiveExample("pages/js/expressions-logical-or.html", "shorter")}}
+ + + +

構文

+ +
expr1 || expr2
+
+ +

解説

+ +

expr1 が true に変換できる場合は expr1 を返し、それ以外の場合は expr2 を返します。

+ +

ある値が true に変換できる場合、その値は真値 ({{Glossary("truthy")}}) と呼ばれます。ある値が false に変換できる場合、その値は偽値 ({{Glossary("falsy")}}) と呼ばれます。

+ +

false に変換されうる式の例を示します。

+ + + +

|| 演算子では論理値以外のオペランドを使用することができますが、返値が常に boolean プリミティブに変換することが可能であるため、論理演算子と見なすことができます。返値 (または一般的な式) を対応する論理値に明示的に変換するには、二重の否定演算子または {{jsxref("Global_Objects/Boolean/Boolean", "Boolean")}} コンストラクターを使用してください。

+ +

短絡評価

+ +

論理和の式は左から右へと評価され、下記の規則を使用して「短絡」評価が可能なように評価されます。

+ +

(真値の式) || expr は短絡評価で真値の式に評価されます。

+ +

短絡とは、上記の expr の部分が評価されず、したがって、これを行うことの副作用が効果を及ぼさないことを意味します (例えば、 expr が関数呼び出しであった場合、この場所では呼び出されません)。これは、最初のオペランドが評価された時点で、すでに演算子の値が決定しているためです。例を示します。

+ +
function A(){ console.log('called A'); return false; }
+function B(){ console.log('called B'); return true; }
+
+console.log( B() || A() );
+// 関数呼び出しによって "called B" がログ出力され、
+// それから true (演算子の結果の値) が出力されます。
+
+ +

演算子の優先順位

+ +

以下の式は同じであるように見えるかもしれませんが、異なります。 && 演算子は || 演算子よりも先に実行されるからです (演算子の優先順位参照)。

+ +
true || false && false      //  true を返す。 && が先に実行されるため
+(true || false) && false    // false を返す。演算子の優先順位が適用されないため
+ +

例

+ +

OR の使用

+ +

以下のコードは || (論理和) 演算子の例を示しています。

+ +
o1 = true  || true       // t || t returns true
+o2 = false || true       // f || t returns true
+o3 = true  || false      // t || f returns true
+o4 = false || (3 == 4)   // f || f returns false
+o5 = 'Cat' || 'Dog'      // t || t returns "Cat"
+o6 = false || 'Cat'      // f || t returns "Cat"
+o7 = 'Cat' || false      // t || f returns "Cat"
+o8 = ''    || false      // f || f returns false
+o9 = false || ''         // f || f returns ""
+o10 = false || varObject // f || object returns varObject
+
+ +
+

注: この演算子を使用していくつかの変数に既定値を提供する場合、偽値 が使用されないことに注意してください。{{jsxref("null")}} や {{jsxref("undefined")}} をフィルタリングする必要がある場合は、Null 合体演算子の使用を検討してください。

+
+ +

論理型の変換規則

+ +

AND から OR への変換

+ +

論理型に関する以下の操作は、

+ +
bCondition1 && bCondition2
+ +

常に以下のものと等しくなります。

+ +
!(!bCondition1 || !bCondition2)
+ +

OR から AND への変換

+ +

論理型に関する以下の操作は、

+ +
bCondition1 || bCondition2
+ +

常に以下のものと等しくなります。

+ +
!(!bCondition1 && !bCondition2)
+ +

入れ子になった括弧の除去

+ +

論理式は左から右に評価されるので、いくつかのルールに従って複雑な式から括弧を削除することは常に可能です。

+ +

以下の論理型に関する複合操作は、

+ +
bCondition1 && (bCondition2 || bCondition3)
+ +

常に以下のものと等しくなります。

+ +
!(!bCondition1 || !bCondition2 && !bCondition3)
+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#prod-LogicalORExpression', 'Logical OR expression')}}
+ +

ブラウザー実装状況

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/new.target/index.html b/files/ja/web/javascript/reference/operators/new.target/index.html deleted file mode 100644 index cf1d45959f..0000000000 --- a/files/ja/web/javascript/reference/operators/new.target/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: new.target -slug: Web/JavaScript/Reference/Operators/new.target -tags: -- Classes -- ECMAScript 2015 -- JavaScript -- Language feature -- Reference -translation_of: Web/JavaScript/Reference/Operators/new.target ---- -
{{JSSidebar("Operators")}}
- -

new.target は擬似プロパティで、関数やコンストラクターが new 演算子を使用して呼び出されたかどうかを検出することができます。 new 演算子を使用して呼び出されたコンストラクターや関数の中では、 new.target はコンストラクターや関数への参照を返します。通常の関数呼び出しの場合、 new.target は {{jsxref("undefined")}} になります。

- -
{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}}
- -

構文

- -
new.target
- -

解説

- -

new.target の構文は、new キーワードとドット、 target 識別子で構成されています。通常、ドットの左側はプロパティアクセスが行われるオブジェクトですが、ここでの new はオブジェクトではありません。

- -

new.target は、すべての関数で使用できる擬似プロパティです。

- -

クラスのコンストラクターでは、構築されたクラスを参照します。

- -

通常の関数では、new 演算子を介して呼び出されたと仮定して、関数自体を参照します。それ以外の場合、new.target は {{jsxref("undefined")}} になります。

- -

アロー関数では、new.target は周囲のスコープから継承されます。

- -

例

- -

関数呼び出しにおける new.target の使用

- -

通常の関数呼び出しでは (コンストラクター関数の呼び出しとは対照的に)、 new.target は {{jsxref("undefined")}} になります。これにより、関数が new でコンストラクターとして呼び出されたかを検出できます。

- -
function Foo() {
-  if (!new.target) { throw 'Foo() must be called with new' }
-  console.log('Foo instantiated with new')
-}
-
-new Foo()  // logs "Foo instantiated with new"
-Foo()      // throws "Foo() must be called with new"
-
- -

コンストラクターにおける new.target

- -

クラスのコンストラクターでは、new.target は new で直接実行されたコンストラクターを参照します。これは、コンストラクターが親クラスにあり、子コンストラクターから委任された場合も同様です。

- -
class A {
-  constructor() {
-    console.log(new.target.name)
-  }
-}
-
-class B extends A { constructor() { super() } }
-
-let a = new A()  // logs "A"
-let b = new B()  // logs "B"
-
-class C { constructor() { console.log(new.target)  } }
-class D extends C { constructor() { super()  } }
-
-let c = new C()  // logs class C{constructor(){console.log(new.target);}}
-let d = new D()  // logs class D extends C{constructor(){super();}}
- -

上記の C および D クラスの例から、 new.target は初期化されたクラスのクラス定義を指しているように見えます。たとえば、d を new D() で初期化した場合は、 D のクラス定義が出力され、同様に c の場合は C のクラスが出力されます。

- -

仕様書

- - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/new.target/index.md b/files/ja/web/javascript/reference/operators/new.target/index.md new file mode 100644 index 0000000000..cf1d45959f --- /dev/null +++ b/files/ja/web/javascript/reference/operators/new.target/index.md @@ -0,0 +1,96 @@ +--- +title: new.target +slug: Web/JavaScript/Reference/Operators/new.target +tags: +- Classes +- ECMAScript 2015 +- JavaScript +- Language feature +- Reference +translation_of: Web/JavaScript/Reference/Operators/new.target +--- +
{{JSSidebar("Operators")}}
+ +

new.target は擬似プロパティで、関数やコンストラクターが new 演算子を使用して呼び出されたかどうかを検出することができます。 new 演算子を使用して呼び出されたコンストラクターや関数の中では、 new.target はコンストラクターや関数への参照を返します。通常の関数呼び出しの場合、 new.target は {{jsxref("undefined")}} になります。

+ +
{{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}}
+ +

構文

+ +
new.target
+ +

解説

+ +

new.target の構文は、new キーワードとドット、 target 識別子で構成されています。通常、ドットの左側はプロパティアクセスが行われるオブジェクトですが、ここでの new はオブジェクトではありません。

+ +

new.target は、すべての関数で使用できる擬似プロパティです。

+ +

クラスのコンストラクターでは、構築されたクラスを参照します。

+ +

通常の関数では、new 演算子を介して呼び出されたと仮定して、関数自体を参照します。それ以外の場合、new.target は {{jsxref("undefined")}} になります。

+ +

アロー関数では、new.target は周囲のスコープから継承されます。

+ +

例

+ +

関数呼び出しにおける new.target の使用

+ +

通常の関数呼び出しでは (コンストラクター関数の呼び出しとは対照的に)、 new.target は {{jsxref("undefined")}} になります。これにより、関数が new でコンストラクターとして呼び出されたかを検出できます。

+ +
function Foo() {
+  if (!new.target) { throw 'Foo() must be called with new' }
+  console.log('Foo instantiated with new')
+}
+
+new Foo()  // logs "Foo instantiated with new"
+Foo()      // throws "Foo() must be called with new"
+
+ +

コンストラクターにおける new.target

+ +

クラスのコンストラクターでは、new.target は new で直接実行されたコンストラクターを参照します。これは、コンストラクターが親クラスにあり、子コンストラクターから委任された場合も同様です。

+ +
class A {
+  constructor() {
+    console.log(new.target.name)
+  }
+}
+
+class B extends A { constructor() { super() } }
+
+let a = new A()  // logs "A"
+let b = new B()  // logs "B"
+
+class C { constructor() { console.log(new.target)  } }
+class D extends C { constructor() { super()  } }
+
+let c = new C()  // logs class C{constructor(){console.log(new.target);}}
+let d = new D()  // logs class D extends C{constructor(){super();}}
+ +

上記の C および D クラスの例から、 new.target は初期化されたクラスのクラス定義を指しているように見えます。たとえば、d を new D() で初期化した場合は、 D のクラス定義が出力され、同様に c の場合は C のクラスが出力されます。

+ +

仕様書

+ + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/new/index.html b/files/ja/web/javascript/reference/operators/new/index.html deleted file mode 100644 index 3e9267d703..0000000000 --- a/files/ja/web/javascript/reference/operators/new/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: new 演算子 -slug: Web/JavaScript/Reference/Operators/new -tags: - - JavaScript - - Left-hand-side expressions - - Operator - - Reference - - 左辺値式 - - 演算子 -translation_of: Web/JavaScript/Reference/Operators/new ---- -
{{jsSidebar("Operators")}}
- -

new 演算子を使用すると、開発者はユーザー定義のオブジェクト型やコンストラクタ関数を持つ組み込みオブジェクト型のインスタンスを作成することができます。

- -
{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}
- -

構文

- -
new constructor[([arguments])]
- -

引数

- -
-
constructor
-
オブジェクトインスタンスの型を指定するクラスまたは関数です。
-
- -
-
arguments
-
constructor が呼び出される際の引数のリストです。
-
- -

解説

- - -

new 演算子は次のことを行います。

- -
    -
  1. 空白のプレーンな JavaScript オブジェクトを作成します。
    2. -
  2. 他のオブジェクトを親プロトタイプとすることで、新しく作成されたオブジェクトと他のオブジェクトをリンク（コンストラクターを設定）します。 -
    3. -
  3. ステップ 1 で新しく作成されたオブジェクトを this コンテキストとして渡します。
    4. -
  4. 関数がオブジェクトを返さない場合は this を返します。
    5. -
- -

ユーザー定義のオブジェクトを生成するには、2 つのステップが必要です。

- -
    -
  1. 関数を記述して、オブジェクトの型を定義します。
    2. -
  2. new 演算子を使用して、オブジェクトのインスタンスを生成します。
    3. -
- -

オブジェクトの型を定義するために、オブジェクトの名称やプロパティを指定する、オブジェクトの型のための関数を作成します。オブジェクトは、別のオブジェクトそのものをプロパティとして持つことができます。後述の例をご覧ください。

- -

コード new Foo(...) を実行すると、以下の処理が行われます:

- -
    -
  1. Foo.prototype を継承する、新しいオブジェクトを生成します。
    2. -
  2. 指定した引数を伴ってコンストラクター関数 Foo が呼び出され、this が新たに生成したオブジェクトに紐づけられます。new Foo は new Foo() と等価です。すなわち、引数を指定しない場合は Foo が引数なしで呼び出されます。
    3. -
  3. コンストラクター関数が返すオブジェクト (null, false, 3.1415 などのプリミティブ型ではないもの) が、new 式の結果になります。コンストラクター関数が明示的にオブジェクトを返さない場合は、ステップ 1 で生成したオブジェクトを代わりに使用します。(通常、コンストラクターは値を返しませんが、通常のオブジェクト生成プロセスをオーバーライドしたい場合はそのようにすることができます。)
    4. -
- -

以前生成したオブジェクトに、いつでもプロパティを追加できます。例えば car1.color = "black" という構文は、color プロパティを car1 に追加して、値として "black" を代入します。しかし、これは他のオブジェクトには影響を与えません。同じ型のすべてのオブジェクトに新たなプロパティを追加するには、Car オブジェクト型の定義に対してプロパティを追加しなければなりません。

- -

Function.prototype プロパティを使用して、以前定義したオブジェクトに対して共有のプロパティを追加できます。これはオブジェクト型のあるインスタンスのプロパティではなく、関数を使用して生成したすべてのオブジェクトで共有するプロパティを定義します。以下のコードでは Car 型のオブジェクトすべてに対して color プロパティを値 "original color" で定義しています。また、インスタンスオブジェクト car1 の color プロパティに文字列の値 "black" を上書きしています。詳しくは prototype をご覧ください。

- -
function Car() {}
-car1 = new Car();
-car2 = new Car();
-
-console.log(car1.color);    // undefined
-
-Car.prototype.color = "original color";
-console.log(car1.color);    // original color
-
-car1.color = 'black';
-console.log(car1.color);   // black
-
-console.log(car1.__proto__.color) //original color
-console.log(car2.__proto__.color) //original color
-console.log(car1.color)  // black
-console.log(car2.color) // original color
-
- -
-

new 演算子を記述しなかった場合、コンストラクターは通常の関数として扱われ、オブジェクトを作成しません。その際、this の値も異なるものになります。

-
- -

例

- -

オブジェクトの型とオブジェクトのインスタンス

- -

自動車用のオブジェクト型を作成したいとします。このオブジェクト型は Car という名前で、make、model、year というプロパティを持たせます。そのために、以下の関数を記述します。

- -
function Car(make, model, year) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-}
-
- -

これで、以下のように mycar という名前のオブジェクトを生成できます。

- -
var mycar = new Car('Eagle', 'Talon TSi', 1993);
-
- -

この構文は mycar を生成して、プロパティに特定の値を代入しています。mycar.make の値は文字列 "Eagle"、mycar.year の値は整数 1993 などとなります。

- -

new を呼び出して、car オブジェクトをいくつも生成できます。例えば、

- -
var kenscar = new Car('Nissan', '300ZX', 1992);
-
- -

それ自身が別のオブジェクトであるプロパティ

- -

以下のように、Person という名前のオブジェクトを定義します:

- -
function Person(name, age, sex) {
-  this.name = name;
-  this.age = age;
-  this.sex = sex;
-}
-
- -

そして、以下のように Person オブジェクトのインスタンスを新たに 2 つ生成します。

- -
var rand = new Person('Rand McNally', 33, 'M');
-var ken = new Person('Ken Jones', 39, 'M');
-
- -

さらに Car の定義を、以下のように Person オブジェクトを値としてとる owner プロパティを持つように書き換えます:

- -
function Car(make, model, year, owner) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-  this.owner = owner;
-}
-
- -

新しいオブジェクトを生成するため、以下のように使用します。

- -
var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
-var car2 = new Car('Nissan', '300ZX', 1992, ken);
-
- -

この構文では新しいオブジェクトを生成するときに文字列や整数のリテラル値を渡す代わりに、owner のパラメータとしてオブジェクト rand や ken を渡しています。car2 の所有者名を調べるには、以下のようにしてプロパティにアクセスできます。

- -
car2.owner.name
-
- -

仕様

- - - - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-new-operator', 'The new Operator')}}
- -

ブラウザー実装状況

- - - -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/new/index.md b/files/ja/web/javascript/reference/operators/new/index.md new file mode 100644 index 0000000000..3e9267d703 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/new/index.md @@ -0,0 +1,181 @@ +--- +title: new 演算子 +slug: Web/JavaScript/Reference/Operators/new +tags: + - JavaScript + - Left-hand-side expressions + - Operator + - Reference + - 左辺値式 + - 演算子 +translation_of: Web/JavaScript/Reference/Operators/new +--- +
{{jsSidebar("Operators")}}
+ +

new 演算子を使用すると、開発者はユーザー定義のオブジェクト型やコンストラクタ関数を持つ組み込みオブジェクト型のインスタンスを作成することができます。

+ +
{{EmbedInteractiveExample("pages/js/expressions-newoperator.html")}}
+ +

構文

+ +
new constructor[([arguments])]
+ +

引数

+ +
+
constructor
+
オブジェクトインスタンスの型を指定するクラスまたは関数です。
+
+ +
+
arguments
+
constructor が呼び出される際の引数のリストです。
+
+ +

解説

+ + +

new 演算子は次のことを行います。

+ +
    +
  1. 空白のプレーンな JavaScript オブジェクトを作成します。
    2. +
  2. 他のオブジェクトを親プロトタイプとすることで、新しく作成されたオブジェクトと他のオブジェクトをリンク（コンストラクターを設定）します。 +
    3. +
  3. ステップ 1 で新しく作成されたオブジェクトを this コンテキストとして渡します。
    4. +
  4. 関数がオブジェクトを返さない場合は this を返します。
    5. +
+ +

ユーザー定義のオブジェクトを生成するには、2 つのステップが必要です。

+ +
    +
  1. 関数を記述して、オブジェクトの型を定義します。
    2. +
  2. new 演算子を使用して、オブジェクトのインスタンスを生成します。
    3. +
+ +

オブジェクトの型を定義するために、オブジェクトの名称やプロパティを指定する、オブジェクトの型のための関数を作成します。オブジェクトは、別のオブジェクトそのものをプロパティとして持つことができます。後述の例をご覧ください。

+ +

コード new Foo(...) を実行すると、以下の処理が行われます:

+ +
    +
  1. Foo.prototype を継承する、新しいオブジェクトを生成します。
    2. +
  2. 指定した引数を伴ってコンストラクター関数 Foo が呼び出され、this が新たに生成したオブジェクトに紐づけられます。new Foo は new Foo() と等価です。すなわち、引数を指定しない場合は Foo が引数なしで呼び出されます。
    3. +
  3. コンストラクター関数が返すオブジェクト (null, false, 3.1415 などのプリミティブ型ではないもの) が、new 式の結果になります。コンストラクター関数が明示的にオブジェクトを返さない場合は、ステップ 1 で生成したオブジェクトを代わりに使用します。(通常、コンストラクターは値を返しませんが、通常のオブジェクト生成プロセスをオーバーライドしたい場合はそのようにすることができます。)
    4. +
+ +

以前生成したオブジェクトに、いつでもプロパティを追加できます。例えば car1.color = "black" という構文は、color プロパティを car1 に追加して、値として "black" を代入します。しかし、これは他のオブジェクトには影響を与えません。同じ型のすべてのオブジェクトに新たなプロパティを追加するには、Car オブジェクト型の定義に対してプロパティを追加しなければなりません。

+ +

Function.prototype プロパティを使用して、以前定義したオブジェクトに対して共有のプロパティを追加できます。これはオブジェクト型のあるインスタンスのプロパティではなく、関数を使用して生成したすべてのオブジェクトで共有するプロパティを定義します。以下のコードでは Car 型のオブジェクトすべてに対して color プロパティを値 "original color" で定義しています。また、インスタンスオブジェクト car1 の color プロパティに文字列の値 "black" を上書きしています。詳しくは prototype をご覧ください。

+ +
function Car() {}
+car1 = new Car();
+car2 = new Car();
+
+console.log(car1.color);    // undefined
+
+Car.prototype.color = "original color";
+console.log(car1.color);    // original color
+
+car1.color = 'black';
+console.log(car1.color);   // black
+
+console.log(car1.__proto__.color) //original color
+console.log(car2.__proto__.color) //original color
+console.log(car1.color)  // black
+console.log(car2.color) // original color
+
+ +
+

new 演算子を記述しなかった場合、コンストラクターは通常の関数として扱われ、オブジェクトを作成しません。その際、this の値も異なるものになります。

+
+ +

例

+ +

オブジェクトの型とオブジェクトのインスタンス

+ +

自動車用のオブジェクト型を作成したいとします。このオブジェクト型は Car という名前で、make、model、year というプロパティを持たせます。そのために、以下の関数を記述します。

+ +
function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+
+ +

これで、以下のように mycar という名前のオブジェクトを生成できます。

+ +
var mycar = new Car('Eagle', 'Talon TSi', 1993);
+
+ +

この構文は mycar を生成して、プロパティに特定の値を代入しています。mycar.make の値は文字列 "Eagle"、mycar.year の値は整数 1993 などとなります。

+ +

new を呼び出して、car オブジェクトをいくつも生成できます。例えば、

+ +
var kenscar = new Car('Nissan', '300ZX', 1992);
+
+ +

それ自身が別のオブジェクトであるプロパティ

+ +

以下のように、Person という名前のオブジェクトを定義します:

+ +
function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+
+ +

そして、以下のように Person オブジェクトのインスタンスを新たに 2 つ生成します。

+ +
var rand = new Person('Rand McNally', 33, 'M');
+var ken = new Person('Ken Jones', 39, 'M');
+
+ +

さらに Car の定義を、以下のように Person オブジェクトを値としてとる owner プロパティを持つように書き換えます:

+ +
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+
+ +

新しいオブジェクトを生成するため、以下のように使用します。

+ +
var car1 = new Car('Eagle', 'Talon TSi', 1993, rand);
+var car2 = new Car('Nissan', '300ZX', 1992, ken);
+
+ +

この構文では新しいオブジェクトを生成するときに文字列や整数のリテラル値を渡す代わりに、owner のパラメータとしてオブジェクト rand や ken を渡しています。car2 の所有者名を調べるには、以下のようにしてプロパティにアクセスできます。

+ +
car2.owner.name
+
+ +

仕様

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-new-operator', 'The new Operator')}}
+ +

ブラウザー実装状況

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/nullish_coalescing_operator/index.html b/files/ja/web/javascript/reference/operators/nullish_coalescing_operator/index.html deleted file mode 100644 index 20eaf23925..0000000000 --- a/files/ja/web/javascript/reference/operators/nullish_coalescing_operator/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Null 合体 (??) -slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator -tags: - - JavaScript - - Language feature - - Operator - - Reference - - nullish coalescing -translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator ---- -

{{JSSidebar("Operators")}}

- -

Null 合体演算子 (??) は論理演算子の一種です。この演算子は左辺が {{jsxref("null")}} または {{jsxref("undefined")}} の場合に右の値を返し、それ以外の場合に左の値を返します。

- -

OR 演算子 (||) と違い、null と undefined 以外の falsy な値のときには左の値を返します。つまり、左辺が '' や 0 の場合は左の値を評価して返します。その他の例については以下を参照してください。

- -
{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}
- - - -

構文

- -
leftExpr ?? rightExpr
-
- -

説明

- -

Null 合体演算子は左辺が {{jsxref("null")}} または {{jsxref("undefined")}} の場合に右辺の値を返します。

- -

変数にデフォルト値を代入する

- -

以前は、変数にデフォルト値を代入したい場合、一般的なパターンは OR 演算子 (||) を使用することでした:

- -
let foo;
-
-//  foo is never assigned any value so it is still undefined
-let someDummyText = foo || 'Hello!';
- -

しかし、|| が論理演算子であるため、左辺の値は評価によって強制的にブール値になり、falsy な値 (0, '', NaN, null, undefined) が返されることはありません。この動作は、0 や '', NaN を有効な値と考えている場合、予期せぬ結果を引き起こす可能性があります。

- -
let count = 0;
-let text = "";
-
-let qty = count || 42;
-let message = text || "hi!";
-console.log(qty);     // 42 and not 0
-console.log(message); // "hi!" and not ""
-
- -

Null 合体演算子は、左辺の値が null もしくは undefined のどちらか (その他の falsy な値は含みません) に評価された場合にのみ右辺の値を返すことで、この潜在的な危険を回避します:

- -
let myText = ''; // An empty string (which is also a falsy value)
-
-let notFalsyText = myText || 'Hello world';
-console.log(notFalsyText); // Hello world
-
-let preservingFalsy = myText ?? 'Hi neighborhood';
-console.log(preservingFalsy); // '' (as myText is neither undefined nor null)
-
- -

短絡評価

- -

OR 演算子や AND 演算子と同様に、左辺が null でも undefined でもないことが証明された場合、右辺の式は評価されません。

- -
function A() { console.log('A was called'); return undefined;}
-function B() { console.log('B was called'); return false;}
-function C() { console.log('C was called'); return "foo";}
-
-console.log( A() ?? C() );
-// logs "A was called" then "C was called" and then "foo"
-// as A() returned undefined so both expressions are evaluated
-
-console.log( B() ?? C() );
-// logs "B was called" then "false"
-// as B() returned false (and not null or undefined), the right
-// hand side expression was not evaluated
-
- -

AND 演算子、OR 演算子とつなげて使わない

- -

AND 演算子 (&&) と OR 演算子 (||) を直接 ?? とつなげて使うことはできません。このような場合 SyntaxError が発生します。

- -
null || undefined ?? "foo"; // raises a SyntaxError
-true || undefined ?? "foo"; // raises a SyntaxError
- -

ただし、カッコを付けて明示的に優先順位を示すのは正しいやり方です。

- -
(null || undefined) ?? "foo"; // returns "foo"
-
- -

オプショナルチェイニング演算子 (?.) との関係

- -

Null 合体演算子は、null と undefined を特定の値として扱いますが、オプショナルチェイニング演算子 (?.) も同様の扱いをします。この演算子は、null または undefined である可能性のあるオブジェクトのプロパティにアクセスするのに便利です。

- -
let foo = { someFooProp: "hi" };
-
-console.log(foo.someFooProp?.toUpperCase());  // "HI"
-console.log(foo.someBarProp?.toUpperCase()); // undefined
-
- -

例

- -

次の例では、デフォルト値を設定していますが、null や undefined 以外の値は保持されます。

- -
const nullValue = null;
-const emptyText = ""; // falsy
-const someNumber = 42;
-
-const valA = nullValue ?? "default for A";
-const valB = emptyText ?? "default for B";
-const valC = someNumber ?? 0;
-
-console.log(valA); // "default for A"
-console.log(valB); // "" (as the empty string is not null or undefined)
-console.log(valC); // 42
-
- -

仕様

- - - - - - - - - - - - -
仕様書
-

{{SpecName('ESDraft', '#prod-Nulli', 'nullish coalescing expression')}}

-
- -

ブラウザー実装状況

- -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/nullish_coalescing_operator/index.md b/files/ja/web/javascript/reference/operators/nullish_coalescing_operator/index.md new file mode 100644 index 0000000000..20eaf23925 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/nullish_coalescing_operator/index.md @@ -0,0 +1,147 @@ +--- +title: Null 合体 (??) +slug: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +tags: + - JavaScript + - Language feature + - Operator + - Reference + - nullish coalescing +translation_of: Web/JavaScript/Reference/Operators/Nullish_coalescing_operator +--- +

{{JSSidebar("Operators")}}

+ +

Null 合体演算子 (??) は論理演算子の一種です。この演算子は左辺が {{jsxref("null")}} または {{jsxref("undefined")}} の場合に右の値を返し、それ以外の場合に左の値を返します。

+ +

OR 演算子 (||) と違い、null と undefined 以外の falsy な値のときには左の値を返します。つまり、左辺が '' や 0 の場合は左の値を評価して返します。その他の例については以下を参照してください。

+ +
{{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}}
+ + + +

構文

+ +
leftExpr ?? rightExpr
+
+ +

説明

+ +

Null 合体演算子は左辺が {{jsxref("null")}} または {{jsxref("undefined")}} の場合に右辺の値を返します。

+ +

変数にデフォルト値を代入する

+ +

以前は、変数にデフォルト値を代入したい場合、一般的なパターンは OR 演算子 (||) を使用することでした:

+ +
let foo;
+
+//  foo is never assigned any value so it is still undefined
+let someDummyText = foo || 'Hello!';
+ +

しかし、|| が論理演算子であるため、左辺の値は評価によって強制的にブール値になり、falsy な値 (0, '', NaN, null, undefined) が返されることはありません。この動作は、0 や '', NaN を有効な値と考えている場合、予期せぬ結果を引き起こす可能性があります。

+ +
let count = 0;
+let text = "";
+
+let qty = count || 42;
+let message = text || "hi!";
+console.log(qty);     // 42 and not 0
+console.log(message); // "hi!" and not ""
+
+ +

Null 合体演算子は、左辺の値が null もしくは undefined のどちらか (その他の falsy な値は含みません) に評価された場合にのみ右辺の値を返すことで、この潜在的な危険を回避します:

+ +
let myText = ''; // An empty string (which is also a falsy value)
+
+let notFalsyText = myText || 'Hello world';
+console.log(notFalsyText); // Hello world
+
+let preservingFalsy = myText ?? 'Hi neighborhood';
+console.log(preservingFalsy); // '' (as myText is neither undefined nor null)
+
+ +

短絡評価

+ +

OR 演算子や AND 演算子と同様に、左辺が null でも undefined でもないことが証明された場合、右辺の式は評価されません。

+ +
function A() { console.log('A was called'); return undefined;}
+function B() { console.log('B was called'); return false;}
+function C() { console.log('C was called'); return "foo";}
+
+console.log( A() ?? C() );
+// logs "A was called" then "C was called" and then "foo"
+// as A() returned undefined so both expressions are evaluated
+
+console.log( B() ?? C() );
+// logs "B was called" then "false"
+// as B() returned false (and not null or undefined), the right
+// hand side expression was not evaluated
+
+ +

AND 演算子、OR 演算子とつなげて使わない

+ +

AND 演算子 (&&) と OR 演算子 (||) を直接 ?? とつなげて使うことはできません。このような場合 SyntaxError が発生します。

+ +
null || undefined ?? "foo"; // raises a SyntaxError
+true || undefined ?? "foo"; // raises a SyntaxError
+ +

ただし、カッコを付けて明示的に優先順位を示すのは正しいやり方です。

+ +
(null || undefined) ?? "foo"; // returns "foo"
+
+ +

オプショナルチェイニング演算子 (?.) との関係

+ +

Null 合体演算子は、null と undefined を特定の値として扱いますが、オプショナルチェイニング演算子 (?.) も同様の扱いをします。この演算子は、null または undefined である可能性のあるオブジェクトのプロパティにアクセスするのに便利です。

+ +
let foo = { someFooProp: "hi" };
+
+console.log(foo.someFooProp?.toUpperCase());  // "HI"
+console.log(foo.someBarProp?.toUpperCase()); // undefined
+
+ +

例

+ +

次の例では、デフォルト値を設定していますが、null や undefined 以外の値は保持されます。

+ +
const nullValue = null;
+const emptyText = ""; // falsy
+const someNumber = 42;
+
+const valA = nullValue ?? "default for A";
+const valB = emptyText ?? "default for B";
+const valC = someNumber ?? 0;
+
+console.log(valA); // "default for A"
+console.log(valB); // "" (as the empty string is not null or undefined)
+console.log(valC); // 42
+
+ +

仕様

+ + + + + + + + + + + + +
仕様書
+

{{SpecName('ESDraft', '#prod-Nulli', 'nullish coalescing expression')}}

+
+ +

ブラウザー実装状況

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/object_initializer/index.html b/files/ja/web/javascript/reference/operators/object_initializer/index.html deleted file mode 100644 index bd7259d336..0000000000 --- a/files/ja/web/javascript/reference/operators/object_initializer/index.html +++ /dev/null @@ -1,311 +0,0 @@ ---- -title: オブジェクト初期化子 -slug: Web/JavaScript/Reference/Operators/Object_initializer -tags: - - ECMAScript 2015 - - JSON - - JavaScript - - Literal - - Methods - - Object - - Primary Expression - - computed - - mutation - - properties -translation_of: Web/JavaScript/Reference/Operators/Object_initializer ---- -
{{JsSidebar("Operators")}}
- -

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

- -
{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html")}}
- - - -

構文

- -
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) {},
-};
-
- -

ECMAScript 2015 での新しい表記法

- -

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

- -
// Shorthand property names (ES2015)
-var a = 'foo', b = 42, c = {};
-var o = {a, b, c};
-
-// Shorthand method names (ES2015)
-var o = {
-  property(parameters) {}
-};
-
-// Computed property names (ES2015)
-var prop = 'foo';
-var o = {
-  [prop]: 'hey',
-  ['b' + 'ar']: 'there'
-};
- -

説明

- -

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

- -

オブジェクトの生成

- -

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

- -
var object = {};
- -

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

- -
var object = {
-  foo: 'bar',
-  age: 42,
-  baz: {myProp: 12},
-}
- -

プロパティへのアクセス

- -

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

- -
object.foo; // "bar"
-object['age']; // 42
-
-object.foo = 'baz';
-
- -

プロパティの定義

- -

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

- -
var a = 'foo',
-    b = 42,
-    c = {};
-
-var o = {
-  a: a,
-  b: b,
-  c: c
-};
- -

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

- -
var a = 'foo',
-    b = 42,
-    c = {};
-
-// Shorthand property names (ES2015)
-var o = {a, b, c};
-
-// In other words,
-console.log((o.a === {a}.a)); // true
-
- -

重複したプロパティ名

- -

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

- -
var a = {x: 1, x: 2};
-console.log(a); // {x: 2}
-
- -

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

- -
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
-    return false;
-  }
-}
- -

メソッドの定義

- -

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

- -
var o = {
-  property: function (parameters) {},
-  get property() {},
-  set property(value) {},
-};
- -

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

- -
// Shorthand method names (ES2015)
-var o = {
-  property(parameters) {},
-  *generator() {}
-};
- -

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

- -
var o = {
-  *generator() {
-    ...........
-  }
-};
- -

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

- -
var o = {
-  generator: function* () {
-    ...........
-  }
-};
- -

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

- -

計算されたプロパティ名

- -

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

- -
// Computed property names (ES2015)
-var i = 0;
-var 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
-
-var param = 'size';
-var config = {
-  [param]: 12,
-  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
-};
-
-console.log(config); // {size: 12, mobileSize: 4}
- -

スプレッドプロパティ

- -

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

- -

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

- -
var obj1 = { foo: 'bar', x: 42 };
-var obj2 = { foo: 'baz', y: 13 };
-
-var 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);
-
-var protoObj = {};
-var obj3 = {'__proto__': protoObj};
-assert(Object.getPrototypeOf(obj3) === protoObj);
-
-var obj4 = {__proto__: 'not an object or null'};
-assert(Object.getPrototypeOf(obj4) === Object.prototype);
-assert(!obj4.hasOwnProperty('__proto__'));
-
- -

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

- -

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

- -
var __proto__ = 'variable';
-
-var obj1 = {__proto__};
-assert(Object.getPrototypeOf(obj1) === Object.prototype);
-assert(obj1.hasOwnProperty('__proto__'));
-assert(obj1.__proto__ === 'variable');
-
-var obj2 = {__proto__() { return 'hello'; }};
-assert(obj2.__proto__() === 'hello');
-
-var obj3 = { ['__prot' + 'o__']: 17 };
-assert(obj3.__proto__ === 17);
-
- -

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

- -

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

- - - -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様ステータスコメント
{{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')}}
- -

ブラウザー実装状況

- -
- - -

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

-
- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/object_initializer/index.md b/files/ja/web/javascript/reference/operators/object_initializer/index.md new file mode 100644 index 0000000000..bd7259d336 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/object_initializer/index.md @@ -0,0 +1,311 @@ +--- +title: オブジェクト初期化子 +slug: Web/JavaScript/Reference/Operators/Object_initializer +tags: + - ECMAScript 2015 + - JSON + - JavaScript + - Literal + - Methods + - Object + - Primary Expression + - computed + - mutation + - properties +translation_of: Web/JavaScript/Reference/Operators/Object_initializer +--- +
{{JsSidebar("Operators")}}
+ +

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

+ +
{{EmbedInteractiveExample("pages/js/expressions-objectinitializer.html")}}
+ + + +

構文

+ +
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) {},
+};
+
+ +

ECMAScript 2015 での新しい表記法

+ +

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

+ +
// Shorthand property names (ES2015)
+var a = 'foo', b = 42, c = {};
+var o = {a, b, c};
+
+// Shorthand method names (ES2015)
+var o = {
+  property(parameters) {}
+};
+
+// Computed property names (ES2015)
+var prop = 'foo';
+var o = {
+  [prop]: 'hey',
+  ['b' + 'ar']: 'there'
+};
+ +

説明

+ +

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

+ +

オブジェクトの生成

+ +

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

+ +
var object = {};
+ +

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

+ +
var object = {
+  foo: 'bar',
+  age: 42,
+  baz: {myProp: 12},
+}
+ +

プロパティへのアクセス

+ +

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

+ +
object.foo; // "bar"
+object['age']; // 42
+
+object.foo = 'baz';
+
+ +

プロパティの定義

+ +

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

+ +
var a = 'foo',
+    b = 42,
+    c = {};
+
+var o = {
+  a: a,
+  b: b,
+  c: c
+};
+ +

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

+ +
var a = 'foo',
+    b = 42,
+    c = {};
+
+// Shorthand property names (ES2015)
+var o = {a, b, c};
+
+// In other words,
+console.log((o.a === {a}.a)); // true
+
+ +

重複したプロパティ名

+ +

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

+ +
var a = {x: 1, x: 2};
+console.log(a); // {x: 2}
+
+ +

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

+ +
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
+    return false;
+  }
+}
+ +

メソッドの定義

+ +

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

+ +
var o = {
+  property: function (parameters) {},
+  get property() {},
+  set property(value) {},
+};
+ +

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

+ +
// Shorthand method names (ES2015)
+var o = {
+  property(parameters) {},
+  *generator() {}
+};
+ +

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

+ +
var o = {
+  *generator() {
+    ...........
+  }
+};
+ +

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

+ +
var o = {
+  generator: function* () {
+    ...........
+  }
+};
+ +

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

+ +

計算されたプロパティ名

+ +

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

+ +
// Computed property names (ES2015)
+var i = 0;
+var 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
+
+var param = 'size';
+var config = {
+  [param]: 12,
+  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
+};
+
+console.log(config); // {size: 12, mobileSize: 4}
+ +

スプレッドプロパティ

+ +

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

+ +

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

+ +
var obj1 = { foo: 'bar', x: 42 };
+var obj2 = { foo: 'baz', y: 13 };
+
+var 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);
+
+var protoObj = {};
+var obj3 = {'__proto__': protoObj};
+assert(Object.getPrototypeOf(obj3) === protoObj);
+
+var obj4 = {__proto__: 'not an object or null'};
+assert(Object.getPrototypeOf(obj4) === Object.prototype);
+assert(!obj4.hasOwnProperty('__proto__'));
+
+ +

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

+ +

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

+ +
var __proto__ = 'variable';
+
+var obj1 = {__proto__};
+assert(Object.getPrototypeOf(obj1) === Object.prototype);
+assert(obj1.hasOwnProperty('__proto__'));
+assert(obj1.__proto__ === 'variable');
+
+var obj2 = {__proto__() { return 'hello'; }};
+assert(obj2.__proto__() === 'hello');
+
+var obj3 = { ['__prot' + 'o__']: 17 };
+assert(obj3.__proto__ === 17);
+
+ +

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

+ +

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

+ + + +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様ステータスコメント
{{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')}}
+ +

ブラウザー実装状況

+ +
+ + +

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

+
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/super/index.html b/files/ja/web/javascript/reference/operators/super/index.html deleted file mode 100644 index f4787e8d5f..0000000000 --- a/files/ja/web/javascript/reference/operators/super/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: super -slug: Web/JavaScript/Reference/Operators/super -tags: - - Classes - - ECMAScript 2015 - - JavaScript - - Language feature - - Left-hand-side expressions - - Operator -translation_of: Web/JavaScript/Reference/Operators/super ---- -
{{jsSidebar("Operators")}}
- -

super キーワードは、オブジェクトの親の関数を呼び出すために使用できます。

- -

super.prop および super[expr] 式は、class と オブジェクトリテラル の両方におけるあらゆるメソッド定義で有効です。

- -

構文

- -
super([arguments]); // 親コンストラクターを呼び出します。
-super.functionOnParent([arguments]);
-
- -

解説

- -

コンストラクターで使用する場合、super キーワードを単独で置き、this キーワードが使われる前に使用する必要があります。super キーワードは、親オブジェクトの関数を呼び出すためにも使用できます。

- -

例

- -

クラス内での super の使用

- -

このコードスニペットは、classes sample (実際のデモ) からとっています。super() を利用することで、Rectangle と Square のコンストラクターに共通する処理を重複して記述しないようにしています。

- -
class Rectangle {
-  constructor(height, width) {
-    this.name = 'Rectangle';
-    this.height = height;
-    this.width = width;
-  }
-  sayName() {
-    console.log('Hi, I am a ', this.name + '.');
-  }
-  get area() {
-    return this.height * this.width;
-  }
-  set area(value) {
-    this.height = this.width = Math.sqrt(value);
-  }
-}
-
-class Square extends Rectangle {
-  constructor(length) {
-    this.height; // ReferenceError になります。super を先に呼び出さなければなりません！
-
-    // length の値で親クラスの constructor を呼びます。
-    // Rectangle の width と height になります。
-    super(length, length);
-
-    // Note: 'this' を使う前に super() をコールしなければなりません。
-    // でないと reference error になります。
-    this.name = 'Square';
-  }
-}
- -

静的メソッドでの super の呼び出し

- -

static メソッドでも super を呼び出すことができます。

- -
class Rectangle {
-  constructor() {}
-  static logNbSides() {
-    return 'I have 4 sides';
-  }
-}
-
-class Square extends Rectangle {
-  constructor() {}
-  static logDescription() {
-    return super.logNbSides() + ' which are all equal';
-  }
-}
-Square.logDescription(); // 'I have 4 sides which are all equal'
-
- -

super プロパティの削除でエラーが発生

- -

親クラスのプロパティを削除するために、delete 演算子 や super.prop、super[expr] を使うことはできません。{{jsxref("ReferenceError")}} がスローされます。

- -
class Base {
-  constructor() {}
-  foo() {}
-}
-class Derived extends Base {
-  constructor() {}
-  delete() {
-    delete super.foo; // this is bad
-  }
-}
-
-new Derived().delete(); // ReferenceError: invalid delete involving 'super'.
- -

super.prop は書き込み不可能なプロパティを上書きできない

- -

{{jsxref("Object.defineProperty")}} などで書き込み不可プロパティを定義した場合、super はプロパティの値を上書きできません。

- -
class X {
-  constructor() {
-    Object.defineProperty(this, 'prop', {
-      configurable: true,
-      writable: false,
-      value: 1
-    });
-  }
-}
-
-class Y extends X {
-  constructor() {
-    super();
-  }
-  foo() {
-    super.prop = 2;   // 値を上書きできない
-  }
-}
-
-var y = new Y();
-y.foo(); // TypeError: "prop" は読み取り専用
-console.log(y.prop); // 1
-
- -

オブジェクトリテラル内での super.prop の使用

- -

super は object initializer / literal 記法内でも使用できます。この例では、二つのオブジェクトがメソッドを定義しています。二つ目のオブジェクトの中で、super が最初のオブジェクトのメソッドを呼び出しています。これは {{jsxref("Object.setPrototypeOf()")}} の助けで動作し、これは obj2 のプロトタイプを obj1 に設定するので、super は method1 を obj1 上で見つけることができます。

- -
var obj1 = {
-  method1() {
-    console.log('method 1');
-  }
-}
-
-var obj2 = {
-  method2() {
-    super.method1();
-  }
-}
-
-Object.setPrototypeOf(obj2, obj1);
-obj2.method2(); // logs "method 1"
-
- -

仕様

- - - - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}
- -

ブラウザー実装状況

- - - -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/super/index.md b/files/ja/web/javascript/reference/operators/super/index.md new file mode 100644 index 0000000000..f4787e8d5f --- /dev/null +++ b/files/ja/web/javascript/reference/operators/super/index.md @@ -0,0 +1,176 @@ +--- +title: super +slug: Web/JavaScript/Reference/Operators/super +tags: + - Classes + - ECMAScript 2015 + - JavaScript + - Language feature + - Left-hand-side expressions + - Operator +translation_of: Web/JavaScript/Reference/Operators/super +--- +
{{jsSidebar("Operators")}}
+ +

super キーワードは、オブジェクトの親の関数を呼び出すために使用できます。

+ +

super.prop および super[expr] 式は、class と オブジェクトリテラル の両方におけるあらゆるメソッド定義で有効です。

+ +

構文

+ +
super([arguments]); // 親コンストラクターを呼び出します。
+super.functionOnParent([arguments]);
+
+ +

解説

+ +

コンストラクターで使用する場合、super キーワードを単独で置き、this キーワードが使われる前に使用する必要があります。super キーワードは、親オブジェクトの関数を呼び出すためにも使用できます。

+ +

例

+ +

クラス内での super の使用

+ +

このコードスニペットは、classes sample (実際のデモ) からとっています。super() を利用することで、Rectangle と Square のコンストラクターに共通する処理を重複して記述しないようにしています。

+ +
class Rectangle {
+  constructor(height, width) {
+    this.name = 'Rectangle';
+    this.height = height;
+    this.width = width;
+  }
+  sayName() {
+    console.log('Hi, I am a ', this.name + '.');
+  }
+  get area() {
+    return this.height * this.width;
+  }
+  set area(value) {
+    this.height = this.width = Math.sqrt(value);
+  }
+}
+
+class Square extends Rectangle {
+  constructor(length) {
+    this.height; // ReferenceError になります。super を先に呼び出さなければなりません！
+
+    // length の値で親クラスの constructor を呼びます。
+    // Rectangle の width と height になります。
+    super(length, length);
+
+    // Note: 'this' を使う前に super() をコールしなければなりません。
+    // でないと reference error になります。
+    this.name = 'Square';
+  }
+}
+ +

静的メソッドでの super の呼び出し

+ +

static メソッドでも super を呼び出すことができます。

+ +
class Rectangle {
+  constructor() {}
+  static logNbSides() {
+    return 'I have 4 sides';
+  }
+}
+
+class Square extends Rectangle {
+  constructor() {}
+  static logDescription() {
+    return super.logNbSides() + ' which are all equal';
+  }
+}
+Square.logDescription(); // 'I have 4 sides which are all equal'
+
+ +

super プロパティの削除でエラーが発生

+ +

親クラスのプロパティを削除するために、delete 演算子 や super.prop、super[expr] を使うことはできません。{{jsxref("ReferenceError")}} がスローされます。

+ +
class Base {
+  constructor() {}
+  foo() {}
+}
+class Derived extends Base {
+  constructor() {}
+  delete() {
+    delete super.foo; // this is bad
+  }
+}
+
+new Derived().delete(); // ReferenceError: invalid delete involving 'super'.
+ +

super.prop は書き込み不可能なプロパティを上書きできない

+ +

{{jsxref("Object.defineProperty")}} などで書き込み不可プロパティを定義した場合、super はプロパティの値を上書きできません。

+ +
class X {
+  constructor() {
+    Object.defineProperty(this, 'prop', {
+      configurable: true,
+      writable: false,
+      value: 1
+    });
+  }
+}
+
+class Y extends X {
+  constructor() {
+    super();
+  }
+  foo() {
+    super.prop = 2;   // 値を上書きできない
+  }
+}
+
+var y = new Y();
+y.foo(); // TypeError: "prop" は読み取り専用
+console.log(y.prop); // 1
+
+ +

オブジェクトリテラル内での super.prop の使用

+ +

super は object initializer / literal 記法内でも使用できます。この例では、二つのオブジェクトがメソッドを定義しています。二つ目のオブジェクトの中で、super が最初のオブジェクトのメソッドを呼び出しています。これは {{jsxref("Object.setPrototypeOf()")}} の助けで動作し、これは obj2 のプロトタイプを obj1 に設定するので、super は method1 を obj1 上で見つけることができます。

+ +
var obj1 = {
+  method1() {
+    console.log('method 1');
+  }
+}
+
+var obj2 = {
+  method2() {
+    super.method1();
+  }
+}
+
+Object.setPrototypeOf(obj2, obj1);
+obj2.method2(); // logs "method 1"
+
+ +

仕様

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-super-keyword', 'super')}}
+ +

ブラウザー実装状況

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/typeof/index.html b/files/ja/web/javascript/reference/operators/typeof/index.html deleted file mode 100644 index 20bc25f34e..0000000000 --- a/files/ja/web/javascript/reference/operators/typeof/index.html +++ /dev/null @@ -1,288 +0,0 @@ ---- -title: typeof -slug: Web/JavaScript/Reference/Operators/typeof -tags: - - JavaScript - - Language feature - - Operator - - Reference - - Unary -translation_of: Web/JavaScript/Reference/Operators/typeof ---- -
{{jsSidebar("Operators")}}
- -

typeof 演算子は、未評価のオペランドの型を示す文字列を返します。

- -
{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}
- - - -

構文

- -

typeof 演算子の後に、オペランドを続けて書きます。

- -
typeof operand
-typeof(operand)
-
- -

引数

- -

operand は、オブジェクトまたはプリミティブ型を表す式を返します。

- -

解説

- -

以下は typeof が返す事が出来る値 (文字列) の一覧表です。型とプリミティブの詳細については、JavaScript のデータ構造のページも参照してください。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
型返値
Undefined"undefined"
Null"object" (下記参照)
真偽値"boolean"
数値"number"
BigInt (ECMAScript 2020 の新機能)"bigint"
文字列"string"
シンボル (ECMAScript 2015 の新機能)"symbol"
Function オブジェクト (implements [[Call]] in ECMA-262 terms)"function"
その他のオブジェクト"object"
- -
-

メモ: ECMAScript 2019 およびそれ以前の実装では、呼び出し可能な非標準のオブジェクトに対して、typeof が任意の実装定義の文字列値を返すことを許可していました。

- -

実際にこれを利用したブラウザーとして知られているのは、古い Internet Explorer だけです。（下記参照）

-
- -

例

- -

基本的な使い方

- -
// 数値
-typeof 37 === 'number';
-typeof 3.14 === 'number';
-typeof(42) === 'number';
-typeof Math.LN2 === 'number';
-typeof Infinity === 'number';
-typeof NaN === 'number';            // "Not-A-Number" であるにもかかわらず。
-typeof Number('1') === 'number';    // Number は数値に型強制できない値を含めて、
-typeof Number('shoe') === 'number'; // あらゆるものを数字に解析します。
-
-typeof 42n === 'bigint';
-
-
-// 文字列
-typeof '' === 'string';
-typeof 'bla' === 'string';
-typeof `template literal` === 'string';
-typeof '1' === 'string';        // 文字列内の数値は文字列型のままです。
-typeof (typeof 1) === 'string'; // typeof は常に文字列を返します。
-typeof String(1) === 'string';  // String は何でも文字列に変換するので、toString よりも安全です。
-
-
-// 真偽値
-typeof true === 'boolean';
-typeof false === 'boolean';
-typeof Boolean(1) === 'boolean'; // Boolean は、値が truthy か falsy かに基づいて変換します。
-
-typeof !!(1) === 'boolean';      // ! (論理 NOT) 演算子 2 つの呼び出しは、Boolean() と同等です。
-
-
-// シンボル
-typeof Symbol() === 'symbol'
-typeof Symbol('foo') === 'symbol'
-typeof Symbol.iterator === 'symbol'
-
-
-// Undefined
-typeof undefined === 'undefined';
-typeof declaredButUndefinedVariable === 'undefined';
-typeof undeclaredVariable === 'undefined';
-
-
-// オブジェクト
-typeof {a: 1} === 'object';
-
-// Array.isArray または Object.prototype.toString.call を使用して、
-// 通常のオブジェクトと配列を区別します。
-typeof [1, 2, 4] === 'object';
-
-typeof new Date() === 'object';
-typeof /regex/ === 'object'; // 過去の実装は正規表現を参照してください。
-
-
-// 以下のようなものは、紛らわしく、危険で、無駄なものです。それらの使用を避けてください。
-typeof new Boolean(true) === 'object';
-typeof new Number(1) === 'object';
-typeof new String('abc') === 'object';
-
-
-// 関数
-typeof function() {} === 'function';
-typeof class C {} === 'function';
-typeof Math.sin === 'function';
- -

null 型

- -
// JavaScript の初期からの実装に基づく
-typeof null === 'object';
-
- -

JavaScript の最初の実装では、JavaScript の値は型タグと値で表現されていました。オブジェクトの型タグは 0 で、null は NULL ポインター (ほとんどのプラットフォームで 0x00) として表されていました。その結果、null はタグの型として 0 を持っていたため、typeof の戻り値は "object" です。(リファレンス)

- -

ECMAScript の修正案が (オプトインを使用して) 提案されましたが、却下されました。それは typeof null === 'null' という結果になるものでした。

- -

new 演算子の使用

- -
// Function コンストラクターを除くすべてのコンストラクター関数は、
-// 常に typeof 'object' です
-let str = new String('String');
-let num = new Number(100);
-
-typeof str; // 'object' を返す
-typeof num; // 'object' を返す
-
-let func = new Function();
-
-typeof func; // 'function' を返す
-
- -

構文で括弧が必要な場合

- -
// 式のデータ型を特定するために、かっこを使用することができます。
-let iData = 99;
-
-typeof iData + ' Wisen'; // 'number Wisen'
-typeof (iData + ' Wisen'); // 'string'
-
- -

正規表現

- -

呼び出し可能な正規表現は、一部のブラウザーでは非標準的な追加機能でした。

- -
typeof /s/ === 'function'; // Chrome 1-12 ECMAScript5.1 に非準拠
-typeof /s/ === 'object';   // Firefox 5+ ECMAScript 5.1 に準拠
-
- -

エラー

- -

ECMAScript 2015 より前では、typeof は常にそれが供給されたオペランドの文字列を返すことが保証されていました。宣言されていない識別子があっても、typeof は 'undefined' を返します。typeof を使用すると、エラーは発生しません。

- -

しかしながら、ブロックスコープの let と const が追加されたことで、変数が宣言される前のブロック内で let と const に typeof を使用すると（またはクラスに typeof を使用すると）、ReferenceError が投げられます。ブロックスコープ内の変数は、ブロックの開始から初期化が処理されるまで「一時的なデッドゾーン」にあり、その間にアクセスされるとエラーを投げます。

- -
typeof undeclaredVariable === 'undefined';
-
-typeof newLetVariable; // ReferenceError
-typeof newConstVariable; // ReferenceError
-typeof newClass; // ReferenceError
-
-let newLetVariable;
-const newConstVariable = 'hello';
-class newClass{};
- -

例外

- -

現在のブラウザーではすべて、標準外のホストオブジェクト {{domxref("document.all")}} は undefined 型になります。

- -
typeof document.all === 'undefined';
- -

仕様では、非標準のオブジェクトののためのカスタム型タグを許可していますが、それらの型タグは定義済みのものとは異なるものであることを要求しています。document.all が 'undefined' という型を持っている場合、ウェブ標準ではオリジナルの ECMA JavaScript 標準の "故意の違反" として分類されています。

- -

実際の使い方

- -

typeof は非常に便利ですが、汎用性はそれほど高くありません。たとえば、typeof([]) は typeof(new Date()) や typeof(/abc/) などと同様に 'object' です。

- -

型のチェックをより具体的にするために、プロダクションレベルのコードで使用するための typeof ラッパーは以下のようになります。（obj が存在する場合）

- -
  function type(obj, fullClass) {
-
-    // obj の toPrototypeString() を取得します。（すべての型を処理します）
-    // 初期の JS 環境では null の場合 '[object Object]' を返すので、直接確認するのがベストです。
-    if (fullClass) {
-        return (obj === null) ? '[object Null]' : Object.prototype.toString.call(obj);
-    }
-    if (obj == null) { return (obj + '').toLowerCase(); } // 暗黙の toString() 変換
-
-    var deepType = Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
-    if (deepType === 'generatorfunction') { return 'function' }
-
-    // 過剰な特異性を防いでください。(例えば、[object HTMLDivElement] など)
-    // 機能的な正規表現 (Android <=2.3)、機能的な <object> 要素 (Chrome <=57, Firefox <=52) などを考慮します。
-    // String.prototype.match は普遍的にサポートされています。
-
-    return deepType.match(/^(array|bigint|date|error|function|generator|regexp|symbol)$/) ? deepType :
-       (typeof obj === 'object' || typeof obj === 'function') ? 'object' : typeof obj;
-  }
- -

存在しない変数をチェックすると、{{JSxRef("ReferenceError")}} が投げられるため、typeof nonExistentVar === 'undefined' を使用します。

- -

仕様

- - - - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}
- -

ブラウザー実装状況

- - - -

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

- -

IE 特有のメモ

- -

IE 6、7、8 では、以下のように多くのホストオブジェクトがオブジェクト型であり、関数ではありません。

- -
typeof alert === 'object'
- -

一部の非標準 IE プロパティは他の値を返します。(tc39/ecma262#1440 (comment))

- -
typeof window.external.AddSearchProvider === "unknown";
-typeof window.external.IsSearchProviderInstalled === "unknown";
- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/typeof/index.md b/files/ja/web/javascript/reference/operators/typeof/index.md new file mode 100644 index 0000000000..20bc25f34e --- /dev/null +++ b/files/ja/web/javascript/reference/operators/typeof/index.md @@ -0,0 +1,288 @@ +--- +title: typeof +slug: Web/JavaScript/Reference/Operators/typeof +tags: + - JavaScript + - Language feature + - Operator + - Reference + - Unary +translation_of: Web/JavaScript/Reference/Operators/typeof +--- +
{{jsSidebar("Operators")}}
+ +

typeof 演算子は、未評価のオペランドの型を示す文字列を返します。

+ +
{{EmbedInteractiveExample("pages/js/expressions-typeof.html")}}
+ + + +

構文

+ +

typeof 演算子の後に、オペランドを続けて書きます。

+ +
typeof operand
+typeof(operand)
+
+ +

引数

+ +

operand は、オブジェクトまたはプリミティブ型を表す式を返します。

+ +

解説

+ +

以下は typeof が返す事が出来る値 (文字列) の一覧表です。型とプリミティブの詳細については、JavaScript のデータ構造のページも参照してください。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
型返値
Undefined"undefined"
Null"object" (下記参照)
真偽値"boolean"
数値"number"
BigInt (ECMAScript 2020 の新機能)"bigint"
文字列"string"
シンボル (ECMAScript 2015 の新機能)"symbol"
Function オブジェクト (implements [[Call]] in ECMA-262 terms)"function"
その他のオブジェクト"object"
+ +
+

メモ: ECMAScript 2019 およびそれ以前の実装では、呼び出し可能な非標準のオブジェクトに対して、typeof が任意の実装定義の文字列値を返すことを許可していました。

+ +

実際にこれを利用したブラウザーとして知られているのは、古い Internet Explorer だけです。（下記参照）

+
+ +

例

+ +

基本的な使い方

+ +
// 数値
+typeof 37 === 'number';
+typeof 3.14 === 'number';
+typeof(42) === 'number';
+typeof Math.LN2 === 'number';
+typeof Infinity === 'number';
+typeof NaN === 'number';            // "Not-A-Number" であるにもかかわらず。
+typeof Number('1') === 'number';    // Number は数値に型強制できない値を含めて、
+typeof Number('shoe') === 'number'; // あらゆるものを数字に解析します。
+
+typeof 42n === 'bigint';
+
+
+// 文字列
+typeof '' === 'string';
+typeof 'bla' === 'string';
+typeof `template literal` === 'string';
+typeof '1' === 'string';        // 文字列内の数値は文字列型のままです。
+typeof (typeof 1) === 'string'; // typeof は常に文字列を返します。
+typeof String(1) === 'string';  // String は何でも文字列に変換するので、toString よりも安全です。
+
+
+// 真偽値
+typeof true === 'boolean';
+typeof false === 'boolean';
+typeof Boolean(1) === 'boolean'; // Boolean は、値が truthy か falsy かに基づいて変換します。
+
+typeof !!(1) === 'boolean';      // ! (論理 NOT) 演算子 2 つの呼び出しは、Boolean() と同等です。
+
+
+// シンボル
+typeof Symbol() === 'symbol'
+typeof Symbol('foo') === 'symbol'
+typeof Symbol.iterator === 'symbol'
+
+
+// Undefined
+typeof undefined === 'undefined';
+typeof declaredButUndefinedVariable === 'undefined';
+typeof undeclaredVariable === 'undefined';
+
+
+// オブジェクト
+typeof {a: 1} === 'object';
+
+// Array.isArray または Object.prototype.toString.call を使用して、
+// 通常のオブジェクトと配列を区別します。
+typeof [1, 2, 4] === 'object';
+
+typeof new Date() === 'object';
+typeof /regex/ === 'object'; // 過去の実装は正規表現を参照してください。
+
+
+// 以下のようなものは、紛らわしく、危険で、無駄なものです。それらの使用を避けてください。
+typeof new Boolean(true) === 'object';
+typeof new Number(1) === 'object';
+typeof new String('abc') === 'object';
+
+
+// 関数
+typeof function() {} === 'function';
+typeof class C {} === 'function';
+typeof Math.sin === 'function';
+ +

null 型

+ +
// JavaScript の初期からの実装に基づく
+typeof null === 'object';
+
+ +

JavaScript の最初の実装では、JavaScript の値は型タグと値で表現されていました。オブジェクトの型タグは 0 で、null は NULL ポインター (ほとんどのプラットフォームで 0x00) として表されていました。その結果、null はタグの型として 0 を持っていたため、typeof の戻り値は "object" です。(リファレンス)

+ +

ECMAScript の修正案が (オプトインを使用して) 提案されましたが、却下されました。それは typeof null === 'null' という結果になるものでした。

+ +

new 演算子の使用

+ +
// Function コンストラクターを除くすべてのコンストラクター関数は、
+// 常に typeof 'object' です
+let str = new String('String');
+let num = new Number(100);
+
+typeof str; // 'object' を返す
+typeof num; // 'object' を返す
+
+let func = new Function();
+
+typeof func; // 'function' を返す
+
+ +

構文で括弧が必要な場合

+ +
// 式のデータ型を特定するために、かっこを使用することができます。
+let iData = 99;
+
+typeof iData + ' Wisen'; // 'number Wisen'
+typeof (iData + ' Wisen'); // 'string'
+
+ +

正規表現

+ +

呼び出し可能な正規表現は、一部のブラウザーでは非標準的な追加機能でした。

+ +
typeof /s/ === 'function'; // Chrome 1-12 ECMAScript5.1 に非準拠
+typeof /s/ === 'object';   // Firefox 5+ ECMAScript 5.1 に準拠
+
+ +

エラー

+ +

ECMAScript 2015 より前では、typeof は常にそれが供給されたオペランドの文字列を返すことが保証されていました。宣言されていない識別子があっても、typeof は 'undefined' を返します。typeof を使用すると、エラーは発生しません。

+ +

しかしながら、ブロックスコープの let と const が追加されたことで、変数が宣言される前のブロック内で let と const に typeof を使用すると（またはクラスに typeof を使用すると）、ReferenceError が投げられます。ブロックスコープ内の変数は、ブロックの開始から初期化が処理されるまで「一時的なデッドゾーン」にあり、その間にアクセスされるとエラーを投げます。

+ +
typeof undeclaredVariable === 'undefined';
+
+typeof newLetVariable; // ReferenceError
+typeof newConstVariable; // ReferenceError
+typeof newClass; // ReferenceError
+
+let newLetVariable;
+const newConstVariable = 'hello';
+class newClass{};
+ +

例外

+ +

現在のブラウザーではすべて、標準外のホストオブジェクト {{domxref("document.all")}} は undefined 型になります。

+ +
typeof document.all === 'undefined';
+ +

仕様では、非標準のオブジェクトののためのカスタム型タグを許可していますが、それらの型タグは定義済みのものとは異なるものであることを要求しています。document.all が 'undefined' という型を持っている場合、ウェブ標準ではオリジナルの ECMA JavaScript 標準の "故意の違反" として分類されています。

+ +

実際の使い方

+ +

typeof は非常に便利ですが、汎用性はそれほど高くありません。たとえば、typeof([]) は typeof(new Date()) や typeof(/abc/) などと同様に 'object' です。

+ +

型のチェックをより具体的にするために、プロダクションレベルのコードで使用するための typeof ラッパーは以下のようになります。（obj が存在する場合）

+ +
  function type(obj, fullClass) {
+
+    // obj の toPrototypeString() を取得します。（すべての型を処理します）
+    // 初期の JS 環境では null の場合 '[object Object]' を返すので、直接確認するのがベストです。
+    if (fullClass) {
+        return (obj === null) ? '[object Null]' : Object.prototype.toString.call(obj);
+    }
+    if (obj == null) { return (obj + '').toLowerCase(); } // 暗黙の toString() 変換
+
+    var deepType = Object.prototype.toString.call(obj).slice(8,-1).toLowerCase();
+    if (deepType === 'generatorfunction') { return 'function' }
+
+    // 過剰な特異性を防いでください。(例えば、[object HTMLDivElement] など)
+    // 機能的な正規表現 (Android <=2.3)、機能的な <object> 要素 (Chrome <=57, Firefox <=52) などを考慮します。
+    // String.prototype.match は普遍的にサポートされています。
+
+    return deepType.match(/^(array|bigint|date|error|function|generator|regexp|symbol)$/) ? deepType :
+       (typeof obj === 'object' || typeof obj === 'function') ? 'object' : typeof obj;
+  }
+ +

存在しない変数をチェックすると、{{JSxRef("ReferenceError")}} が投げられるため、typeof nonExistentVar === 'undefined' を使用します。

+ +

仕様

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-typeof-operator', 'The typeof Operator')}}
+ +

ブラウザー実装状況

+ + + +

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

+ +

IE 特有のメモ

+ +

IE 6、7、8 では、以下のように多くのホストオブジェクトがオブジェクト型であり、関数ではありません。

+ +
typeof alert === 'object'
+ +

一部の非標準 IE プロパティは他の値を返します。(tc39/ecma262#1440 (comment))

+ +
typeof window.external.AddSearchProvider === "unknown";
+typeof window.external.IsSearchProviderInstalled === "unknown";
+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/void/index.html b/files/ja/web/javascript/reference/operators/void/index.html deleted file mode 100644 index d86ba34f95..0000000000 --- a/files/ja/web/javascript/reference/operators/void/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: void 演算子 -slug: Web/JavaScript/Reference/Operators/void -tags: - - JavaScript - - Operator - - URIs - - Unary -translation_of: Web/JavaScript/Reference/Operators/void ---- -
{{jsSidebar("Operators")}}
- -

void 演算子は与えられた式 (expression) を評価し、{{jsxref("Global_Objects/undefined", "undefined")}} を返します。

- -

構文

- -
void expression
- -

説明

- -

この演算子は、「戻り値が undefined であってほしい場所に、それ以外の戻り値を持つ式を挿入したい場合」に有用です。

- -

void 演算子は単にプリミティブ値 undefined を得る目的でしばしば使われ、一般的に "void(0)" と書かれます（これは "void 0" と等価です）。この目的であれば、代わりに値が {{jsxref("Global_Objects/undefined", "undefined")}} の変数、未定義のグローバル変数などを使用する事もできます。

- -

即時実行関数式を使用するとき、 void は、function キーワードを宣言の代わりに式として扱うように強制するために使用できます。

- -
void function iife() {
-    var bar = function () {};
-    var baz = function () {};
-    var foo = function () {
-        bar();
-        baz();
-     };
-    var biz = function () {};
-
-    foo();
-    biz();
-}();
-
- -

JavaScript URI

- -

javascript: から始まる URI をサポートしたブラウザに於いて、それは、URI 内のコードを評価し、戻り値が {{jsxref("Global_Objects/undefined", "undefined")}} でなければ、返された値にページコンテンツを置き換えます。void 演算子は、{{jsxref("Global_Objects/undefined", "undefined")}} を返すために使用できます。たとえば：

- -
<a href="javascript:void(0);">
-  Click here to do nothing
-</a>
-
-<a href="javascript:void(document.body.style.backgroundColor='green');">
-  Click here for green background
-</a>
-
- -

但し、javascript: 疑似プロトコルはあくまで控えめなイベントハンドラなどの代替であり、積極的に使用するべきではないでしょう。
- しかしながらこれは、戻り値を必要としないブックマークレットの作成の際などに役立つ場合があります。

- -

仕様

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様ステータスコメント
{{SpecName('ESDraft', '#sec-void-operator', 'The void Operator')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-void-operator', 'The void Operator')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.4.2', 'The void Operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-11.4.2', 'The void Operator')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-11.4.2', 'The void Operator')}}{{Spec2('ES1')}}初期定義。JavaScript 1.1 で実装。
- -

ブラウザ実装状況

- -

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

- -

関連項目

- - diff --git a/files/ja/web/javascript/reference/operators/void/index.md b/files/ja/web/javascript/reference/operators/void/index.md new file mode 100644 index 0000000000..d86ba34f95 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/void/index.md @@ -0,0 +1,102 @@ +--- +title: void 演算子 +slug: Web/JavaScript/Reference/Operators/void +tags: + - JavaScript + - Operator + - URIs + - Unary +translation_of: Web/JavaScript/Reference/Operators/void +--- +
{{jsSidebar("Operators")}}
+ +

void 演算子は与えられた式 (expression) を評価し、{{jsxref("Global_Objects/undefined", "undefined")}} を返します。

+ +

構文

+ +
void expression
+ +

説明

+ +

この演算子は、「戻り値が undefined であってほしい場所に、それ以外の戻り値を持つ式を挿入したい場合」に有用です。

+ +

void 演算子は単にプリミティブ値 undefined を得る目的でしばしば使われ、一般的に "void(0)" と書かれます（これは "void 0" と等価です）。この目的であれば、代わりに値が {{jsxref("Global_Objects/undefined", "undefined")}} の変数、未定義のグローバル変数などを使用する事もできます。

+ +

即時実行関数式を使用するとき、 void は、function キーワードを宣言の代わりに式として扱うように強制するために使用できます。

+ +
void function iife() {
+    var bar = function () {};
+    var baz = function () {};
+    var foo = function () {
+        bar();
+        baz();
+     };
+    var biz = function () {};
+
+    foo();
+    biz();
+}();
+
+ +

JavaScript URI

+ +

javascript: から始まる URI をサポートしたブラウザに於いて、それは、URI 内のコードを評価し、戻り値が {{jsxref("Global_Objects/undefined", "undefined")}} でなければ、返された値にページコンテンツを置き換えます。void 演算子は、{{jsxref("Global_Objects/undefined", "undefined")}} を返すために使用できます。たとえば：

+ +
<a href="javascript:void(0);">
+  Click here to do nothing
+</a>
+
+<a href="javascript:void(document.body.style.backgroundColor='green');">
+  Click here for green background
+</a>
+
+ +

但し、javascript: 疑似プロトコルはあくまで控えめなイベントハンドラなどの代替であり、積極的に使用するべきではないでしょう。
+ しかしながらこれは、戻り値を必要としないブックマークレットの作成の際などに役立つ場合があります。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様ステータスコメント
{{SpecName('ESDraft', '#sec-void-operator', 'The void Operator')}}{{Spec2('ESDraft')}} 
{{SpecName('ES6', '#sec-void-operator', 'The void Operator')}}{{Spec2('ES6')}} 
{{SpecName('ES5.1', '#sec-11.4.2', 'The void Operator')}}{{Spec2('ES5.1')}} 
{{SpecName('ES3', '#sec-11.4.2', 'The void Operator')}}{{Spec2('ES3')}} 
{{SpecName('ES1', '#sec-11.4.2', 'The void Operator')}}{{Spec2('ES1')}}初期定義。JavaScript 1.1 で実装。
+ +

ブラウザ実装状況

+ +

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

+ +

関連項目

+ + diff --git a/files/ja/web/javascript/reference/operators/yield/index.html b/files/ja/web/javascript/reference/operators/yield/index.html deleted file mode 100644 index 2b2c68b691..0000000000 --- a/files/ja/web/javascript/reference/operators/yield/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: yield -slug: Web/JavaScript/Reference/Operators/yield -tags: - - ECMAScript 2015 - - Generators - - Iterator - - JavaScript - - Language feature - - Operator -browser-compat: javascript.operators.yield -translation_of: Web/JavaScript/Reference/Operators/yield ---- -
{{jsSidebar("Operators")}}
- -

yield キーワードは、ジェネレーター関数 ({{jsxref("Statements/function*", "function*")}} または古いジェネレーター関数) を一時停止したり再開したりするために使用します。

- -
{{EmbedInteractiveExample("pages/js/expressions-yield.html", "taller")}}
- -

構文

- -
[rv] = yield [expression]
- -
-
expression {{optional_inline}}
-
iterator プロトコル経由でジェネレーター関数が返す値を定義します。省略した場合、代わりに undefined が返されます。
-
rv {{optional_inline}}
-
-

ジェネレーターの実行を再開する next() メソッドに渡したオプションの値を受け取ります。

-
-
- -

解説

- -

yield キーワードは、ジェネレーター関数の実行を一時停止し、ジェネレーターの呼び出し元に yield キーワードに続く値を返します。これは、 return キーワードのジェネレーター版と考えることができます。

- -

yield はそれを含むジェネレーター関数の中で直接しか呼び出すことしかできません。呼び出し先の関数やコールバックから呼び出すことはできません。

- -

yield キーワードはジェネレーターの next() メソッドを呼び出させ、 value と done の 2 つのプロパティを持つ IteratorResult オブジェクトを返します。 value プロパティは yield 式の評価結果であり、 done は false、すなわちジェネレーター関数が完全には完了していないことを示します。

- -

yield 式によって実行が停止されると、ジェネレーターの next() メソッドが呼び出されるまで、ジェネレーターのコード実行は一時停止します。ジェネレーターの next() メソッドが呼ばれるたびに、ジェネレーターの実行が再開され、次のうちのいずれかに達するまで実行されます。

- - - -

ジェネレーターの next() メソッドにオプションの値が渡された場合、その値はジェネレーターの現在の yield 操作の返値となります。

- -

ジェネレーターのコードパス、 yield 演算子、新しい開始値を {{jsxref("Generator.prototype.next()")}} に渡すことで指定することができる機能により、ジェネレーターは大きな力と制御を提供します。

- -
-

警告: 残念ながら next() は非対称ですが、仕方がありません。常に現在中断している yield に値を送りますが、次の yield のオペランドを返します。

-
- -

例

- -

Using yield

- -

次のコードはジェネレーター関数の定義例です。

- -
function* countAppleSales () {
-  let saleList = [3, 7, 5]
-  for (let i = 0; i < saleList.length; i++) {
-    yield saleList[i]
-  }
-}
- -

ジェネレーター関数が定義されると、ご覧のようにイテレーターを構築するために使用されます。

- -
let appleStore = countAppleSales()  // Generator { }
-console.log(appleStore.next())      // { value: 3, done: false }
-console.log(appleStore.next())      // { value: 7, done: false }
-console.log(appleStore.next())      // { value: 5, done: false }
-console.log(appleStore.next())      // { value: undefined, done: true }
- -

You can also send a value with next(value) into the generator. 'step' evaluates as a - return value in this syntax [rv] = yield - [expression]

- -
function* counter(value) {
- let step;
-
- while (true) {
-   step = yield ++value;
-
-   if (step) {
-     value += step;
-   }
- }
-}
-
-const generatorFunc = counter(0);
-console.log(generatorFunc.next().value);   // 1
-console.log(generatorFunc.next().value);   // 2
-console.log(generatorFunc.next().value);   // 3
-console.log(generatorFunc.next(10).value); // 14
-console.log(generatorFunc.next().value);   // 15
-console.log(generatorFunc.next(10).value); // 26
- -

仕様書

- -{{Specifications}} - -

ブラウザーの互換性

- -

{{Compat}}

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/yield/index.md b/files/ja/web/javascript/reference/operators/yield/index.md new file mode 100644 index 0000000000..2b2c68b691 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/yield/index.md @@ -0,0 +1,119 @@ +--- +title: yield +slug: Web/JavaScript/Reference/Operators/yield +tags: + - ECMAScript 2015 + - Generators + - Iterator + - JavaScript + - Language feature + - Operator +browser-compat: javascript.operators.yield +translation_of: Web/JavaScript/Reference/Operators/yield +--- +
{{jsSidebar("Operators")}}
+ +

yield キーワードは、ジェネレーター関数 ({{jsxref("Statements/function*", "function*")}} または古いジェネレーター関数) を一時停止したり再開したりするために使用します。

+ +
{{EmbedInteractiveExample("pages/js/expressions-yield.html", "taller")}}
+ +

構文

+ +
[rv] = yield [expression]
+ +
+
expression {{optional_inline}}
+
iterator プロトコル経由でジェネレーター関数が返す値を定義します。省略した場合、代わりに undefined が返されます。
+
rv {{optional_inline}}
+
+

ジェネレーターの実行を再開する next() メソッドに渡したオプションの値を受け取ります。

+
+
+ +

解説

+ +

yield キーワードは、ジェネレーター関数の実行を一時停止し、ジェネレーターの呼び出し元に yield キーワードに続く値を返します。これは、 return キーワードのジェネレーター版と考えることができます。

+ +

yield はそれを含むジェネレーター関数の中で直接しか呼び出すことしかできません。呼び出し先の関数やコールバックから呼び出すことはできません。

+ +

yield キーワードはジェネレーターの next() メソッドを呼び出させ、 value と done の 2 つのプロパティを持つ IteratorResult オブジェクトを返します。 value プロパティは yield 式の評価結果であり、 done は false、すなわちジェネレーター関数が完全には完了していないことを示します。

+ +

yield 式によって実行が停止されると、ジェネレーターの next() メソッドが呼び出されるまで、ジェネレーターのコード実行は一時停止します。ジェネレーターの next() メソッドが呼ばれるたびに、ジェネレーターの実行が再開され、次のうちのいずれかに達するまで実行されます。

+ + + +

ジェネレーターの next() メソッドにオプションの値が渡された場合、その値はジェネレーターの現在の yield 操作の返値となります。

+ +

ジェネレーターのコードパス、 yield 演算子、新しい開始値を {{jsxref("Generator.prototype.next()")}} に渡すことで指定することができる機能により、ジェネレーターは大きな力と制御を提供します。

+ +
+

警告: 残念ながら next() は非対称ですが、仕方がありません。常に現在中断している yield に値を送りますが、次の yield のオペランドを返します。

+
+ +

例

+ +

Using yield

+ +

次のコードはジェネレーター関数の定義例です。

+ +
function* countAppleSales () {
+  let saleList = [3, 7, 5]
+  for (let i = 0; i < saleList.length; i++) {
+    yield saleList[i]
+  }
+}
+ +

ジェネレーター関数が定義されると、ご覧のようにイテレーターを構築するために使用されます。

+ +
let appleStore = countAppleSales()  // Generator { }
+console.log(appleStore.next())      // { value: 3, done: false }
+console.log(appleStore.next())      // { value: 7, done: false }
+console.log(appleStore.next())      // { value: 5, done: false }
+console.log(appleStore.next())      // { value: undefined, done: true }
+ +

You can also send a value with next(value) into the generator. 'step' evaluates as a + return value in this syntax [rv] = yield + [expression]

+ +
function* counter(value) {
+ let step;
+
+ while (true) {
+   step = yield ++value;
+
+   if (step) {
+     value += step;
+   }
+ }
+}
+
+const generatorFunc = counter(0);
+console.log(generatorFunc.next().value);   // 1
+console.log(generatorFunc.next().value);   // 2
+console.log(generatorFunc.next().value);   // 3
+console.log(generatorFunc.next(10).value); // 14
+console.log(generatorFunc.next().value);   // 15
+console.log(generatorFunc.next(10).value); // 26
+ +

仕様書

+ +{{Specifications}} + +

ブラウザーの互換性

+ +

{{Compat}}

+ +

関連情報

+ + diff --git a/files/ja/web/javascript/reference/operators/yield_star_/index.html b/files/ja/web/javascript/reference/operators/yield_star_/index.html deleted file mode 100644 index 5dae616341..0000000000 --- a/files/ja/web/javascript/reference/operators/yield_star_/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: yield* -slug: Web/JavaScript/Reference/Operators/yield* -tags: - - ECMAScript 2015 - - Generators - - Iterable - - Iterator - - JavaScript - - Operator - - Reference - - yield* - - ジェネレーター - - 演算子 -translation_of: Web/JavaScript/Reference/Operators/yield* ---- -
{{jsSidebar("Operators")}}
- -

yield* 式は別の {{jsxref("Statements/function*", "ジェネレーター", "", 1)}} や反復可能なオブジェクトに委任するために使用されます。

- -
{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}
- - - -

構文

- -
 yield* expression;
- -
-
expression
-
反復可能なオブジェクトを返す式。
-
- -

解説

- -

yield* 式はオペランドを反復し、それによって返されたそれぞれの値をもたらします。

- -

yield* 式自体の値は、イテレーターが閉じたとき (つまり done が true のとき) に返される値です。

- -

例

- -

別のジェネレータに委任する

- -

次のコードでは、 g1() によってもたらされる値は、 g2() で得られているものと同じように next() の呼び出しから返されます。

- -
function* g1() {
-  yield 2;
-  yield 3;
-  yield 4;
-}
-
-function* g2() {
-  yield 1;
-  yield* g1();
-  yield 5;
-}
-
-const iterator = g2();
-
-console.log(iterator.next()); // {value: 1, done: false}
-console.log(iterator.next()); // {value: 2, done: false}
-console.log(iterator.next()); // {value: 3, done: false}
-console.log(iterator.next()); // {value: 4, done: false}
-console.log(iterator.next()); // {value: 5, done: false}
-console.log(iterator.next()); // {value: undefined, done: true}
-
- -

他の反復可能なオブジェクト

- -

ジェネレータオブジェクトのほかに、 yield* は他の種類の反復 (例えば、配列、文字列、 {{jsxref("Functions/arguments", "arguments")}} オブジェクト) を yield することができます。

- -
function* g3() {
-  yield* [1, 2];
-  yield* '34';
-  yield* Array.from(arguments);
-}
-
-const iterator = g3(5, 6);
-
-console.log(iterator.next()); // {value: 1, done: false}
-console.log(iterator.next()); // {value: 2, done: false}
-console.log(iterator.next()); // {value: "3", done: false}
-console.log(iterator.next()); // {value: "4", done: false}
-console.log(iterator.next()); // {value: 5, done: false}
-console.log(iterator.next()); // {value: 6, done: false}
-console.log(iterator.next()); // {value: undefined, done: true}
-
- -

yield* 式自体の値

- -

yield* は式であり、文ではありません。そのため、値に評価されます。

- -
function* g4() {
-  yield* [1, 2, 3];
-  return 'foo';
-}
-
-function* g5() {
-  const g4ReturnValue = yield* g4();
-  console.log(g4ReturnValue) // 'foo'
-  return g4ReturnValue;
-}
-
-const iterator = g5();
-
-console.log(iterator.next()); // {value: 1, done: false}
-console.log(iterator.next()); // {value: 2, done: false}
-console.log(iterator.next()); // {value: 3, done: false} done is false because g5 generator isn't finished, only g4
-console.log(iterator.next()); // {value: 'foo', done: true}
-
- -

仕様書

- - - - - - - - - - - - -
仕様書
{{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/javascript/reference/operators/yield_star_/index.md b/files/ja/web/javascript/reference/operators/yield_star_/index.md new file mode 100644 index 0000000000..5dae616341 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/yield_star_/index.md @@ -0,0 +1,138 @@ +--- +title: yield* +slug: Web/JavaScript/Reference/Operators/yield* +tags: + - ECMAScript 2015 + - Generators + - Iterable + - Iterator + - JavaScript + - Operator + - Reference + - yield* + - ジェネレーター + - 演算子 +translation_of: Web/JavaScript/Reference/Operators/yield* +--- +
{{jsSidebar("Operators")}}
+ +

yield* 式は別の {{jsxref("Statements/function*", "ジェネレーター", "", 1)}} や反復可能なオブジェクトに委任するために使用されます。

+ +
{{EmbedInteractiveExample("pages/js/expressions-yieldasterisk.html")}}
+ + + +

構文

+ +
 yield* expression;
+ +
+
expression
+
反復可能なオブジェクトを返す式。
+
+ +

解説

+ +

yield* 式はオペランドを反復し、それによって返されたそれぞれの値をもたらします。

+ +

yield* 式自体の値は、イテレーターが閉じたとき (つまり done が true のとき) に返される値です。

+ +

例

+ +

別のジェネレータに委任する

+ +

次のコードでは、 g1() によってもたらされる値は、 g2() で得られているものと同じように next() の呼び出しから返されます。

+ +
function* g1() {
+  yield 2;
+  yield 3;
+  yield 4;
+}
+
+function* g2() {
+  yield 1;
+  yield* g1();
+  yield 5;
+}
+
+const iterator = g2();
+
+console.log(iterator.next()); // {value: 1, done: false}
+console.log(iterator.next()); // {value: 2, done: false}
+console.log(iterator.next()); // {value: 3, done: false}
+console.log(iterator.next()); // {value: 4, done: false}
+console.log(iterator.next()); // {value: 5, done: false}
+console.log(iterator.next()); // {value: undefined, done: true}
+
+ +

他の反復可能なオブジェクト

+ +

ジェネレータオブジェクトのほかに、 yield* は他の種類の反復 (例えば、配列、文字列、 {{jsxref("Functions/arguments", "arguments")}} オブジェクト) を yield することができます。

+ +
function* g3() {
+  yield* [1, 2];
+  yield* '34';
+  yield* Array.from(arguments);
+}
+
+const iterator = g3(5, 6);
+
+console.log(iterator.next()); // {value: 1, done: false}
+console.log(iterator.next()); // {value: 2, done: false}
+console.log(iterator.next()); // {value: "3", done: false}
+console.log(iterator.next()); // {value: "4", done: false}
+console.log(iterator.next()); // {value: 5, done: false}
+console.log(iterator.next()); // {value: 6, done: false}
+console.log(iterator.next()); // {value: undefined, done: true}
+
+ +

yield* 式自体の値

+ +

yield* は式であり、文ではありません。そのため、値に評価されます。

+ +
function* g4() {
+  yield* [1, 2, 3];
+  return 'foo';
+}
+
+function* g5() {
+  const g4ReturnValue = yield* g4();
+  console.log(g4ReturnValue) // 'foo'
+  return g4ReturnValue;
+}
+
+const iterator = g5();
+
+console.log(iterator.next()); // {value: 1, done: false}
+console.log(iterator.next()); // {value: 2, done: false}
+console.log(iterator.next()); // {value: 3, done: false} done is false because g5 generator isn't finished, only g4
+console.log(iterator.next()); // {value: 'foo', done: true}
+
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf