diff options
Diffstat (limited to 'files/ja/web/javascript/reference/operators')
94 files changed, 4822 insertions, 5344 deletions
diff --git a/files/ja/web/javascript/reference/operators/addition/index.html b/files/ja/web/javascript/reference/operators/addition/index.html deleted file mode 100644 index dc258fc3c1..0000000000 --- a/files/ja/web/javascript/reference/operators/addition/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: 加算 (+) -slug: Web/JavaScript/Reference/Operators/Addition -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Addition ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>加算演算子 (<code>+</code>) は、数値オペランドまたは文字列連結の合計を生成します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-addition.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> + <var>y</var> -</pre> - -<h2 id="例">例</h2> - -<h3 id="数値加算">数値加算</h3> - -<pre class="brush: js notranslate">// 数値 + 数値 -> 加算 -1 + 2 // 3 - -// ブール値 + 数値 -> 加算 -true + 1 // 2 - -// ブール値 + ブール値 -> 加算 -false + false // 0 -</pre> - -<h3 id="文字列連結">文字列連結</h3> - -<pre class="brush: js notranslate">// 文字列 + 文字列 -> 連結 -'foo' + 'bar' // "foobar" - -// 数値 + 文字列 -> 連結 -5 + 'foo' // "5foo" - -// 文字列 + ブール値 -> 連結 -'foo' + false // "foofalse"</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-addition-operator-plus', 'Addition operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.addition")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/addition/index.md b/files/ja/web/javascript/reference/operators/addition/index.md new file mode 100644 index 0000000000..0bb3edc900 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/addition/index.md @@ -0,0 +1,70 @@ +--- +title: 加算 (+) +slug: Web/JavaScript/Reference/Operators/Addition +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.addition +translation_of: Web/JavaScript/Reference/Operators/Addition +--- +{{jsSidebar("Operators")}} + +加算演算子 (`+`) は、数値オペランドの合計または文字列の連結を生成します。 + +{{EmbedInteractiveExample("pages/js/expressions-addition.html")}} + +## 構文 + +```js +x + y +``` + +## 例 + +### 数値の加算 + +```js +// 数値 + 数値 -> 加算 +1 + 2 // 3 + +// 論理値 + 数値 -> 加算 +true + 1 // 2 + +// 論理値 + 論理値 -> 加算 +false + false // 0 +``` + +### 文字列の連結 + +```js +// 文字列 + 文字列 -> 連結 +'foo' + 'bar' // "foobar" + +// 数値 + 文字列 -> 連結 +5 + 'foo' // "5foo" + +// 文字列 + 論理値 -> 連結 +'foo' + false // "foofalse" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/ja/web/javascript/reference/operators/addition_assignment/index.html b/files/ja/web/javascript/reference/operators/addition_assignment/index.html deleted file mode 100644 index ca9497a6da..0000000000 --- a/files/ja/web/javascript/reference/operators/addition_assignment/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: 加算代入 (+=) -slug: Web/JavaScript/Reference/Operators/Addition_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Addition_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>加算代入演算子 (<code>+=</code>) は、右辺のオペランドの値を変数に加算し、結果を変数に代入します。 2つのオペランドの型は、加算代入演算子の動作を決定します。加算もしくは連結が可能です。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x += y -<strong>Meaning:</strong> x = x + y</pre> - -<h2 id="例">例</h2> - -<h3 id="加算代入の使用">加算代入の使用</h3> - -<pre class="brush: js notranslate">// 以下の変数を想定 -// foo = 'foo' -// bar = 5 -// baz = true - -// 数値 + 数値 -> 加算 -bar += 2 // 7 - -// ブール値 + 数値 -> 加算 -baz += 1 // 2 - -// ブール値 + ブール値 -> 加算 -baz += false // 1 - -// 数値 + 文字列 -> 連結 -bar += 'foo' // "5foo" - -// 文字列 + ブール値 -> 連結 -foo += false // "foofalse" - -// 文字列 + 文字列 -> 連結 -foo += 'bar' // "foobar"</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.addition_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/addition_assignment/index.md b/files/ja/web/javascript/reference/operators/addition_assignment/index.md new file mode 100644 index 0000000000..fabea99ceb --- /dev/null +++ b/files/ja/web/javascript/reference/operators/addition_assignment/index.md @@ -0,0 +1,65 @@ +--- +title: 加算代入 (+=) +slug: Web/JavaScript/Reference/Operators/Addition_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.addition_assignment +translation_of: Web/JavaScript/Reference/Operators/Addition_assignment +--- +{{jsSidebar("Operators")}} + +加算代入演算子 (`+=`) は、右オペランドの値を変数に加算し、結果を変数に代入します。2 つのオペランドの型が加算代入演算子の動作を決定します。加算もしくは連結が可能です。 + +{{EmbedInteractiveExample("pages/js/expressions-addition-assignment.html")}} + +## 構文 + +```js +x += y // x = x + y +``` + +## 例 + +### 加算代入の使用 + +```js +// 以下の変数を想定 +// foo = 'foo' +// bar = 5 +// baz = true + +// 数値 + 数値 -> 加算 +bar += 2 // 7 + +// 論理値 + 数値 -> 加算 +baz += 1 // 2 + +// 論理値 + 論理値 -> 加算 +baz += false // 1 + +// 数値 + 文字列 -> 連結 +bar += 'foo' // "5foo" + +// 文字列 + 論理値 -> 連結 +foo += false // "foofalse" + +// 文字列 + 文字列 -> 連結 +foo += 'bar' // "foobar" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) diff --git a/files/ja/web/javascript/reference/operators/assignment/index.html b/files/ja/web/javascript/reference/operators/assignment/index.html deleted file mode 100644 index c6b8cf4ceb..0000000000 --- a/files/ja/web/javascript/reference/operators/assignment/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 代入 (=) -slug: Web/JavaScript/Reference/Operators/Assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>代入（単純代入）演算子 (<code>=</code>) は、変数に値を代入するために使用されます。割り当て操作は、割り当てられた値を評価します。 単一の値を複数の変数に割り当てるため、代入演算子の連鎖が可能です。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x = y -</pre> - -<h2 id="例">例</h2> - -<h3 id="代入と連鎖">代入と連鎖</h3> - -<pre class="brush: js notranslate">// 以下の変数を想定 -// x = 5 -// y = 10 -// z = 25 - -x = y // x は 10 -x = y = z // x, y そして z は全て 25</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/assignment/index.md b/files/ja/web/javascript/reference/operators/assignment/index.md new file mode 100644 index 0000000000..417d784eed --- /dev/null +++ b/files/ja/web/javascript/reference/operators/assignment/index.md @@ -0,0 +1,49 @@ +--- +title: 代入 (=) +slug: Web/JavaScript/Reference/Operators/Assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.assignment +translation_of: Web/JavaScript/Reference/Operators/Assignment +--- +{{jsSidebar("Operators")}} + +単純代入演算子 (`=`) は、変数に値を代入するために使用されます。割り当て操作は、割り当てられた値として評価されます。代入演算子を使用して、単一の値を複数の変数に割り当てることができます。 + +{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}} + +## 構文 + +```js +x = y +``` + +## 例 + +### 代入と連鎖 + +```ja +// 以下の変数を想定 +// x = 5 +// y = 10 +// z = 25 + +x = y // x は 10 +x = y = z // x, y そして z はすべて 25 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) diff --git a/files/ja/web/javascript/reference/operators/bitwise_and/index.html b/files/ja/web/javascript/reference/operators/bitwise_and/index.html deleted file mode 100644 index 3d9615a528..0000000000 --- a/files/ja/web/javascript/reference/operators/bitwise_and/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: ビット論理積 (&) -slug: Web/JavaScript/Reference/Operators/Bitwise_AND -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>ビット論理積演算子 (<code>&</code>) は、両方のオペランドの対応するビットのいずれもが <code>1</code> である位置のビットで <code>1</code> を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-and.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><code><var>a</var> & <var>b</var></code> -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>オペランドは32ビットの整数値に変換され、ビット (ゼロまたは1) の並びによって表現されます。32ビットを超える数値は最上位のビットが破棄されます。例えば、次の32ビットを超える整数は32ビット整数に変換されます。</p> - -<pre class="brush: js notranslate">変換前: 11100110111110100000000000000110000000000001 -変換後: 10100000000000000110000000000001</pre> - -<p>第1オペランドの各ビットは、第2オペランドの対応するビットと組み合わせになります。<em>第1ビット</em>は<em>第1ビット</em>へ、<em>第2ビット</em>は<em>第2ビット</em>へ、という具合にです。</p> - -<p>この演算子は各ビットの組み合わせに適用され、結果はビット単位で構築されます。</p> - -<p>AND 演算の真理値表は次のようになります。</p> - -<table class="standard-table"> - <thead> - <tr> - <th class="header" scope="col">a</th> - <th class="header" scope="col">b</th> - <th class="header" scope="col">a AND b</th> - </tr> - </thead> - <tbody> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre class="brush: js notranslate">. 9 (10進数) = 00000000000000000000000000001001 (2進数) - 14 (10進数) = 00000000000000000000000000001110 (2進数) - -------------------------------- -14 | 9 (10進数) = 00000000000000000000000000001000 (2進数) = 8 (10進数) -</pre> - -<p>任意の <code><var>x</var></code> と <code>0</code> のビット論理積は <code>0</code> になります。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_bitwise_AND" name="Using_bitwise_AND">ビット論理積の使用</h3> - -<pre class="brush: js notranslate">// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -5 & 2; // 0</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#prod-BitwiseANDExpression', 'Bitwise AND expression')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.bitwise_and")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">ビット演算子ガイド</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">ビット論理積代入演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/bitwise_and/index.md b/files/ja/web/javascript/reference/operators/bitwise_and/index.md new file mode 100644 index 0000000000..dc691cf4e6 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/bitwise_and/index.md @@ -0,0 +1,77 @@ +--- +title: ビット論理積 (&) +slug: Web/JavaScript/Reference/Operators/Bitwise_AND +tags: + - ビット演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.bitwise_and +translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND +--- +{{jsSidebar("Operators")}} + +ビット論理積演算子 (`&`) は、両方のオペランドの対応するビットのいずれもが `1` である位置のビットで `1` を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-and.html")}} + +## 構文 + +```js +a & b +``` + +## 解説 + +オペランドは 32 ビットの整数値に変換され、ビット (ゼロまたは 1) の並びによって表現されます。32 ビットを超える数値は最上位のビットが破棄されます。例えば、次の 32 ビットを超える整数は 32 ビット整数に変換されます。 + +```js +変換前: 11100110111110100000000000000110000000000001 +変換後: 10100000000000000110000000000001 +``` + +第 1 オペランドの各ビットは、第 2 オペランドの対応するビットと組みになります。*第 1 ビット*は*第 1 ビット*へ、*第 2 ビット*は*第 2 ビット*へ、という具合にです。 + +この演算子は各ビットの組み合わせに適用され、結果はビット単位で構築されます。 + +AND 演算の真理値表は次のようになります。 + +| a | b | a AND b | +| --- | --- | ------- | +| 0 | 0 | 0 | +| 0 | 1 | 0 | +| 1 | 0 | 0 | +| 1 | 1 | 1 | + +```js +. 9 (10 進数) = 00000000000000000000000000001001 (2 進数) + 14 (10 進数) = 00000000000000000000000000001110 (2 進数) + -------------------------------- +14 & 9 (10 進数) = 00000000000000000000000000001000 (2 進数) = 8 (10 進数) +``` + +任意の `x` と `0` のビット論理積は `0` になります。 + +## 例 + +### ビット論理積の使用 + +```js +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +5 & 2; // 0 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビット演算子 (JavaScript ガイド)](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [ビット論理積代入演算子](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment) diff --git a/files/ja/web/javascript/reference/operators/bitwise_and_assignment/index.html b/files/ja/web/javascript/reference/operators/bitwise_and_assignment/index.html deleted file mode 100644 index 9c30120ab7..0000000000 --- a/files/ja/web/javascript/reference/operators/bitwise_and_assignment/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: ビット論理積代入 (&=) -slug: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference - - 代入演算子 - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>ビット論理積代入演算子 (<code>&=</code>) は、両方のオペランドのバイナリ表現を使用し、それらに対してビット単位の AND 演算を実行して、結果を変数に代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-and-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x &= y -<strong>Meaning:</strong> x = x & y -</pre> - -<h2 id="例">例</h2> - -<h3 id="ビット論理積代入の使用">ビット論理積代入の使用</h3> - -<pre class="brush: js notranslate">let a = 5; -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -a &= 2; // 0</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.bitwise_and_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">ビット演算子ガイド</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND">ビット論理積演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/bitwise_and_assignment/index.md b/files/ja/web/javascript/reference/operators/bitwise_and_assignment/index.md new file mode 100644 index 0000000000..7e89f99142 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/bitwise_and_assignment/index.md @@ -0,0 +1,47 @@ +--- +title: ビット論理積代入 (&=) +slug: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.bitwise_and_assignment +translation_of: Web/JavaScript/Reference/Operators/Bitwise_AND_assignment +--- +{{jsSidebar("Operators")}} + +ビット論理積代入演算子 (`&=`) は、両方のオペランドの二進表現を使用し、それらに対してビット単位の AND 演算を実行して、結果を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-and-assignment.html")}} + +## 構文 + +```js +x &= y // x = x & y +``` + +## 例 + +### ビット論理積代入の使用 + +```js +let a = 5; +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +a &= 2; // 0 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [ビット論理積演算子](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND) diff --git a/files/ja/web/javascript/reference/operators/bitwise_not/index.html b/files/ja/web/javascript/reference/operators/bitwise_not/index.html deleted file mode 100644 index ddd2d99c4d..0000000000 --- a/files/ja/web/javascript/reference/operators/bitwise_not/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: ビット否定 (~) -slug: Web/JavaScript/Reference/Operators/Bitwise_NOT -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Bitwise_NOT ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>ビット否定演算子 (<code>~</code>) は、オペランドの各ビットを反転します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-not.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><code><var>~a</var></code> -</pre> - -<h2 id="解説">解説</h2> - -<p>オペランドは32ビットの整数値に変換され、ビット (ゼロまたは1) の並びによって表現されます。32ビットを超える数値は最上位のビットが破棄されます。例えば、次の32ビットを超える整数は32ビット整数に変換されます。</p> - -<pre class="brush: js notranslate">変換前: 11100110111110100000000000000110000000000001 -変換後: 10100000000000000110000000000001</pre> - -<p>第1オペランドの各ビットは、第2オペランドの対応するビットと組み合わせになります。<em>第1ビット</em>は<em>第1ビット</em>へ、<em>第2ビット</em>は<em>第2ビット</em>へ、という具合にです。</p> - -<p>この演算子は各ビットの組み合わせに適用され、結果はビット単位に構築されます。</p> - -<p><code>NOT</code> 演算の真理値表は次のようになります。</p> - -<table class="standard-table"> - <thead> - <tr> - <th class="header" scope="col">a</th> - <th class="header" scope="col">NOT a</th> - </tr> - </thead> - <tbody> - <tr> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre class="brush: js notranslate"> 9 (10進数) = 00000000000000000000000000001001 (2進数) - -------------------------------- -~9 (10進数) = 11111111111111111111111111110110 (2進数) = -10 (10進数) -</pre> - -<p>ある数 <code>x</code> のビット否定 は <code>-(x + 1)</code> になります。例えば、<code>~-5</code> は <code>4</code> になります。</p> - -<p>数値に32ビット表現を使用するため <code>~-1</code> および <code>~4294967295</code> (2<sup>32</sup>-1) はいずれも <code>0</code> になることに注意してください。</p> - -<h2 id="例">例</h2> - -<h3 id="ビット否定の使用">ビット否定の使用</h3> - -<pre class="brush: js notranslate">~0; // -1 -~-1; // 0 -~1; // -2 -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-unary-operators', 'Unary NOT expression')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.bitwise_not")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">ビット演算子ガイド</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/bitwise_not/index.md b/files/ja/web/javascript/reference/operators/bitwise_not/index.md new file mode 100644 index 0000000000..3ff4b8e44c --- /dev/null +++ b/files/ja/web/javascript/reference/operators/bitwise_not/index.md @@ -0,0 +1,75 @@ +--- +title: ビット否定 (~) +slug: Web/JavaScript/Reference/Operators/Bitwise_NOT +tags: + - ビット演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.bitwise_not +translation_of: Web/JavaScript/Reference/Operators/Bitwise_NOT +--- +{{jsSidebar("Operators")}} + +ビット否定演算子 (`~`) は、オペランドの各ビットを反転します。他のビット演算子と同様、オペランドを 32 ビット符号付き整数に変換します。 + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-not.html")}} + +## 構文 + +```js +~a +``` + +## 解説 + +オペランドは 32 ビットの整数値に変換され、ビット (ゼロまたは 1) の並びによって表現されます。32 ビットを超える数値は最上位のビットが破棄されます。例えば、次の 32 ビットを超える整数は 32 ビット整数に変換されます。 + +```js +変換前: 11100110111110100000000000000110000000000001 +変換後: 10100000000000000110000000000001 +``` + +オペランドの各ビットが反転されて結果になります。 + +`NOT` 演算の真理値表は次のようになります。 + +| a | NOT a | +| --- | ----- | +| 0 | 1 | +| 1 | 0 | + +```js + 9 (10 進数) = 00000000000000000000000000001001 (2 進数) + -------------------------------- +~9 (10 進数) = 11111111111111111111111111110110 (2 進数) = -10 (10 進数) +``` + +32 ビット符号付き整数のオペランドは、[2 の補数](https://ja.wikipedia.org/wiki/2%E3%81%AE%E8%A3%9C%E6%95%B0)によって反転されます。すなわち、最上位ビットが負の数であることを表します。 + +ある数 `x` のビット否定 は `-(x + 1)` になります。例えば、`~-5` は `4` になります。 + +数値に 32 ビット表現を使用するため `~-1` および `~4294967295` (2^32 - 1) はいずれも `0` になることに注意してください。 + +## 例 + +### ビット否定の使用 + +```js +~0; // -1 +~-1; // 0 +~1; // -2 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビット演算子 (JavaScript ガイド)](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) diff --git a/files/ja/web/javascript/reference/operators/bitwise_or/index.html b/files/ja/web/javascript/reference/operators/bitwise_or/index.html deleted file mode 100644 index d19e7be3bf..0000000000 --- a/files/ja/web/javascript/reference/operators/bitwise_or/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: ビット論理和 (|) -slug: Web/JavaScript/Reference/Operators/Bitwise_OR -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Bitwise_OR ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>ビット論理和演算子 (<code>|</code>) は、両方のオペランドの対応するビットのどちらか一方が <code>1</code> である位置のビットで <code>1</code> を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-or.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><code><var>a</var> | <var>b</var></code> -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>オペランドは32ビットの整数値に変換され、ビット (ゼロまたは1) の並びによって表現されます。32ビットを超える数値は最上位のビットが破棄されます。例えば、次の32ビットを超える整数は32ビット整数に変換されます。</p> - -<pre class="brush: js notranslate">変換前: 11100110111110100000000000000110000000000001 -変換後: 10100000000000000110000000000001</pre> - -<p>第1オペランドの各ビットは、第2オペランドの対応するビットと組み合わせになります。<em>第1ビット</em>は<em>第1ビット</em>へ、<em>第2ビット</em>は<em>第2ビット</em>へ、という具合にです。</p> - -<p>この演算子は各ビットの組み合わせに適用され、結果はビット単位で構築されます。</p> - -<p>OR 演算の真理値表は次のようになります。</p> - -<table class="standard-table"> - <thead> - <tr> - <th class="header" scope="col">a</th> - <th class="header" scope="col">b</th> - <th class="header" scope="col">a OR b</th> - </tr> - </thead> - <tbody> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre class="brush: js notranslate">. 9 (10進数) = 00000000000000000000000000001001 (2進数) - 14 (10進数) = 00000000000000000000000000001110 (2進数) - -------------------------------- -14 | 9 (10進数) = 00000000000000000000000000001111 (2進数) = 15 (10進数) -</pre> - -<p>ある数 <code><var>x</var></code> と <code>0</code> のビット論理和は <code><var>x</var></code> になります。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_bitwise_OR" name="Using_bitwise_OR">ビット論理和の使用</h3> - -<pre class="brush: js notranslate">// 9 (00000000000000000000000000001001) -// 14 (00000000000000000000000000001110) - -14 | 9; -// 15 (00000000000000000000000000001111)</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#prod-BitwiseORExpression', 'Bitwise OR expression')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.bitwise_or")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise">ビット演算子ガイド</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment">ビット論理和代入演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/bitwise_or/index.md b/files/ja/web/javascript/reference/operators/bitwise_or/index.md new file mode 100644 index 0000000000..95167c0c42 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/bitwise_or/index.md @@ -0,0 +1,79 @@ +--- +title: ビット論理和 (|) +slug: Web/JavaScript/Reference/Operators/Bitwise_OR +tags: + - ビット演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.bitwise_or +translation_of: Web/JavaScript/Reference/Operators/Bitwise_OR +--- +{{jsSidebar("Operators")}} + +ビット論理和演算子 (`|`) は、両方のオペランドの対応するビットのどちらか一方が `1` である位置のビットで `1` を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-or.html")}} + +## 構文 + +```js +a | b +``` + +## 解説 + +オペランドは 32 ビットの整数値に変換され、ビット (ゼロまたは 1) の並びによって表現されます。32 ビットを超える数値は最上位のビットが破棄されます。例えば、次の 32 ビットを超える整数は 32 ビット整数に変換されます。 + +```js +変換前: 11100110111110100000000000000110000000000001 +変換後: 10100000000000000110000000000001 +``` + +第 1 オペランドの各ビットは、第 2 オペランドの対応するビットと組みになります。*第 1 ビット*は*第 1 ビット*へ、*第 2 ビット*は*第 2 ビット*へ、という具合にです。 + +この演算子は各ビットの組み合わせに適用され、結果はビット単位で構築されます。 + +OR 演算の真理値表は次のようになります。 + +| a | b | a OR b | +| --- | --- | ------ | +| 0 | 0 | 0 | +| 0 | 1 | 1 | +| 1 | 0 | 1 | +| 1 | 1 | 1 | + +```js +. 9 (10 進数) = 00000000000000000000000000001001 (2 進数) + 14 (10 進数) = 00000000000000000000000000001110 (2 進数) + -------------------------------- +14 | 9 (10 進数) = 00000000000000000000000000001111 (2 進数) = 15 (10 進数) +``` + +ある数 `x` と `0` のビット論理和は `x` になります。 + +## 例 + +### ビット論理和の使用 + +```js +// 9 (00000000000000000000000000001001) +// 14 (00000000000000000000000000001110) + +14 | 9; +// 15 (00000000000000000000000000001111) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビット演算子 (JavaScript ガイド)](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [ビット論理和代入演算子](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment) diff --git a/files/ja/web/javascript/reference/operators/bitwise_or_assignment/index.html b/files/ja/web/javascript/reference/operators/bitwise_or_assignment/index.html deleted file mode 100644 index b9f63ca320..0000000000 --- a/files/ja/web/javascript/reference/operators/bitwise_or_assignment/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: ビット論理和代入 (|=) -slug: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment -tags: - - Assignment operator - - Deprecated - - JavaScript - - Language feature - - Operator - - Reference - - 代入演算子 - - 演算子 -translation_of: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>ビット論理和代入演算子 (<code>|=</code>) は、両方のオペランドの二進表現を使用し、これらにビット単位の OR 演算を行って、結果を変数に代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-or-assignment.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><strong>演算子:</strong> x |= y -<strong>意味:</strong> x = x | y</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_bitwise_OR_assignment" name="Using_bitwise_OR_assignment">ビット論理和代入の使用</h3> - -<pre class="brush: js notranslate">let a = 5; -a |= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.bitwise_or_assignment")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">ビット演算子ガイド</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_OR">ビット論理和演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment">論理和代入 (<code>||=</code>)</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/bitwise_or_assignment/index.md b/files/ja/web/javascript/reference/operators/bitwise_or_assignment/index.md new file mode 100644 index 0000000000..38d941745e --- /dev/null +++ b/files/ja/web/javascript/reference/operators/bitwise_or_assignment/index.md @@ -0,0 +1,50 @@ +--- +title: ビット論理和代入 (|=) +slug: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.bitwise_or_assignment +translation_of: Web/JavaScript/Reference/Operators/Bitwise_OR_assignment +--- +{{jsSidebar("Operators")}} + +ビット論理和代入演算子 (`|=`) は、両方のオペランドの二進表現を使用し、それらに対してビット単位の OR 演算を実行して、結果を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-or-assignment.html")}} + +## 構文 + +```js +x |= y // x = x | y +``` + +## 例 + +### ビット論理和代入の使用 + +```js +let a = 5; +a |= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [ビット論理和演算子](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_OR) +- [論理 OR 代入 (`||=`)](/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment) diff --git a/files/ja/web/javascript/reference/operators/bitwise_xor/index.html b/files/ja/web/javascript/reference/operators/bitwise_xor/index.html deleted file mode 100644 index 684a987458..0000000000 --- a/files/ja/web/javascript/reference/operators/bitwise_xor/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: ビット排他的論理和 (^) -slug: Web/JavaScript/Reference/Operators/Bitwise_XOR -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Bitwise_XOR ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>ビット排他的論理和演算子 (<code>^</code>) は、両方のオペランドの対応するビットの一方だけが <code>1</code> である位置のビットで <code>1</code> を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><code><var>a</var> ^ <var>b</var></code> -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>オペランドは32ビットの整数値に変換され、ビット (ゼロまたは1) の並びによって表現されます。32ビットを超える数値は最上位のビットが破棄されます。例えば、次の32ビットを超える整数は32ビット整数に変換されます。</p> - -<pre class="brush: js notranslate">変換前: 11100110111110100000000000000110000000000001 -変換後: 10100000000000000110000000000001</pre> - -<p>第1オペランドの各ビットは、第2オペランドの対応するビットと組み合わせになります。<em>第1ビット</em>は<em>第1ビット</em>へ、<em>第2ビット</em>は<em>第2ビット</em>へ、という具合にです。</p> - -<p>この演算子は各ビットの組み合わせに適用され、結果はビット単位に構築されます。</p> - -<p>XOR 演算の真理値表は次のようになります。</p> - -<table class="standard-table"> - <thead> - <tr> - <th class="header" scope="col">a</th> - <th class="header" scope="col">b</th> - <th class="header" scope="col">a XOR b</th> - </tr> - </thead> - <tbody> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre class="brush: js notranslate">. 9 (10進数) = 00000000000000000000000000001001 (2進数) - 14 (10進数) = 00000000000000000000000000001110 (2進数) - -------------------------------- -14 ^ 9 (10進数) = 00000000000000000000000000000111 (2進数) = 7 (10進数) -</pre> - -<p>ある数 <code><var>x</var></code> と <code>0</code> のビット排他的論理和は <code><var>x</var></code> になります。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_bitwise_XOR" name="Using_bitwise_XOR">ビット排他的論理和の使用</h3> - -<pre class="brush: js notranslate">// 9 (00000000000000000000000000001001) -// 14 (00000000000000000000000000001110) - -14 ^ 9; -// 7 (00000000000000000000000000000111)</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#prod-BitwiseXORExpression', 'Bitwise XOR expression')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.bitwise_xor")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise">ビット演算子ガイド</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment">ビット排他的論理和代入演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/bitwise_xor/index.md b/files/ja/web/javascript/reference/operators/bitwise_xor/index.md new file mode 100644 index 0000000000..904bffe61d --- /dev/null +++ b/files/ja/web/javascript/reference/operators/bitwise_xor/index.md @@ -0,0 +1,79 @@ +--- +title: ビット排他的論理和 (^) +slug: Web/JavaScript/Reference/Operators/Bitwise_XOR +tags: + - ビット演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.bitwise_xor +translation_of: Web/JavaScript/Reference/Operators/Bitwise_XOR +--- +{{jsSidebar("Operators")}} + +ビット排他的論理和演算子 (`^`) は、両方のオペランドの対応するビットの一方だけが `1` である位置のビットで `1` を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor.html")}} + +## 構文 + +```js +a ^ b +``` + +## 解説 + +オペランドは 32 ビットの整数値に変換され、ビット (ゼロまたは 1) の並びによって表現されます。32 ビットを超える数値は最上位のビットが破棄されます。例えば、次の 32 ビットを超える整数は 32 ビット整数に変換されます。 + +```js +変換前: 11100110111110100000000000000110000000000001 +変換後: 10100000000000000110000000000001 +``` + +第 1 オペランドの各ビットは、第 2 オペランドの対応するビットと組みになります。*第 1 ビット*は*第 1 ビット*へ、*第 2 ビット*は*第 2 ビット*へ、という具合にです。 + +この演算子は各ビットの組み合わせに適用され、結果はビット単位で構築されます。 + +XOR 演算の真理値表は次のようになります。 + +| a | b | a XOR b | +| --- | --- | ------- | +| 0 | 0 | 0 | +| 0 | 1 | 1 | +| 1 | 0 | 1 | +| 1 | 1 | 0 | + +```js + 9 (10 進数) = 00000000000000000000000000001001 (2 進数) + 14 (10 進数) = 00000000000000000000000000001110 (2 進数) + -------------------------------- +14 ^ 9 (10 進数) = 00000000000000000000000000000111 (2 進数) = 7 (10 進数) +``` + +ある数 `x` と `0` のビット排他的論理和は `x` になります。 + +## 例 + +### ビット排他的論理和の使用 + +```js +// 9 (00000000000000000000000000001001) +// 14 (00000000000000000000000000001110) + +14 ^ 9; +// 7 (00000000000000000000000000000111) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビット演算子 (JavaScript ガイド)](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [ビット排他的論理和代入演算子](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment) diff --git a/files/ja/web/javascript/reference/operators/bitwise_xor_assignment/index.html b/files/ja/web/javascript/reference/operators/bitwise_xor_assignment/index.html deleted file mode 100644 index 90a6420cc5..0000000000 --- a/files/ja/web/javascript/reference/operators/bitwise_xor_assignment/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: ビット排他的論理和代入 (^=) -slug: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>ビット排他的論理和代入演算子 (<code>^=</code>) は、両方のオペランドのバイナリ表現を使用し、それらに対してビット単位の XOR 演算を実行し、結果を変数に代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x ^= y -<strong>Meaning:</strong> x = x ^ y</pre> - -<h2 id="例">例</h2> - -<h3 id="ビット排他的論理和代入の使用">ビット排他的論理和代入の使用</h3> - -<pre class="brush: js notranslate">let a = 5; // 00000000000000000000000000000101 -a ^= 3; // 00000000000000000000000000000011 - -console.log(a); // 00000000000000000000000000000110 -// 6 - -let b = 5; // 00000000000000000000000000000101 -b ^= 0; // 00000000000000000000000000000000 - -console.log(b); // 00000000000000000000000000000101 -// 5 - - - -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.bitwise_xor_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">代入演算子ガイド</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR">ビット排他的論理和演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/bitwise_xor_assignment/index.md b/files/ja/web/javascript/reference/operators/bitwise_xor_assignment/index.md new file mode 100644 index 0000000000..e738a330aa --- /dev/null +++ b/files/ja/web/javascript/reference/operators/bitwise_xor_assignment/index.md @@ -0,0 +1,53 @@ +--- +title: ビット排他的論理和代入 (^=) +slug: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +translation_of: Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment +--- +{{jsSidebar("Operators")}} + +ビット排他的論理和代入演算子 (`^=`) は、両方のオペランドの二進表現を使用し、それらに対してビット単位の XOR 演算を実行し、結果を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-bitwise-xor-assignment.html")}} + +## 構文 + +```js +x ^= y // x = x ^ y +``` + +## 例 + +### ビット排他的論理和代入の使用 + +```js +let a = 5; // 00000000000000000000000000000101 +a ^= 3; // 00000000000000000000000000000011 + +console.log(a); // 00000000000000000000000000000110 +// 6 + +let b = 5; // 00000000000000000000000000000101 +b ^= 0; // 00000000000000000000000000000000 + +console.log(b); // 00000000000000000000000000000101 +// 5 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [ビット排他的論理和演算子](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR) diff --git a/files/ja/web/javascript/reference/operators/decrement/index.html b/files/ja/web/javascript/reference/operators/decrement/index.html deleted file mode 100644 index f5e63fd791..0000000000 --- a/files/ja/web/javascript/reference/operators/decrement/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: デクリメント (--) -slug: Web/JavaScript/Reference/Operators/Decrement -tags: - - Decrement - - JavaScript - - Language feature - - Operator -translation_of: Web/JavaScript/Reference/Operators/Decrement ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>デクリメント演算子 (<code>--</code>) は、オペランドをデクリメント (1を減算) して値を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var>-- or --<var>x</var> -</pre> - -<h2 id="解説">解説</h2> - -<p>オペランドに後置で演算子を付けると (例えば <code><var>x</var>--</code>)、デクリメント演算子はデクリメントしますが、デクリメント前の値を返します。</p> - -<p>オペランドに前置で演算子を付けると (例えば <code>--<var>x</var></code>)、デクリメント演算子はデクリメントし、デクリメント後の値を返します。</p> - -<h2 id="例">例</h2> - -<h3 id="後置デクリメント">後置デクリメント</h3> - -<pre class="brush: js notranslate">let x = 3; -y = x--; - -// y = 3 -// x = 2 -</pre> - -<h3 id="前置デクリメント">前置デクリメント</h3> - -<pre class="brush: js notranslate">let a = 2; -b = --a; - -// a = 1 -// b = 1 -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-postfix-decrement-operator', 'Decrement operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.decrement")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/decrement/index.md b/files/ja/web/javascript/reference/operators/decrement/index.md new file mode 100644 index 0000000000..3f7348ea6d --- /dev/null +++ b/files/ja/web/javascript/reference/operators/decrement/index.md @@ -0,0 +1,71 @@ +--- +title: デクリメント (--) +slug: Web/JavaScript/Reference/Operators/Decrement +tags: + - デクリメント + - JavaScript + - 言語機能 + - 演算子 +browser-compat: javascript.operators.decrement +translation_of: Web/JavaScript/Reference/Operators/Decrement +--- +{{jsSidebar("Operators")}} + +デクリメント演算子 (`--`) は、オペランドをデクリメント (1 を減算) して値を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-decrement.html")}} + +## 構文 + +```js +x-- +--x +``` + +## 解説 + +オペランドに後置で演算子を付けると (例えば `x--`)、デクリメント演算子はデクリメントしますが、デクリメント前の値を返します。 + +オペランドに前置で演算子を付けると (例えば `--x`)、デクリメント演算子はデクリメントし、デクリメント後の値を返します。 + +## 例 + +### 後置デクリメント + +```js +let x = 3; +y = x--; + +// y = 3 +// x = 2 +``` + +### 前置デクリメント + +```js +let a = 2; +b = --a; + +// a = 1 +// b = 1 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/ja/web/javascript/reference/operators/delete/index.html b/files/ja/web/javascript/reference/operators/delete/index.html deleted file mode 100644 index 1095dd3d1c..0000000000 --- a/files/ja/web/javascript/reference/operators/delete/index.html +++ /dev/null @@ -1,296 +0,0 @@ ---- -title: delete -slug: Web/JavaScript/Reference/Operators/delete -tags: - - JavaScript - - Memory Management - - Object - - Operator - - Property - - Reference - - Release - - Unary - - delete -translation_of: Web/JavaScript/Reference/Operators/delete ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><span class="seoSummary">JavaScript の <strong><code>delete</code> 演算子</strong>は、オブジェクトからプロパティを削除します。同じプロパティへの参照がそれ以上保持されない場合は、自動的に解放されます。</span></p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}}</div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate">delete <em>expression</em> </pre> - -<p><em>expression</em> には、プロパティへの参照になる式を置きます。例えば:</p> - -<pre class="syntaxbox notranslate">delete <em>object.property</em> -delete <em>object</em>['<em>property</em>']</pre> - -<h3 id="引数">引数</h3> - -<dl> - <dt><code>object</code></dt> - <dd>オブジェクト名、またはオブジェクトとして評価される式</dd> - <dt><code>property</code></dt> - <dd>削除するプロパティです。</dd> -</dl> - -<h3 id="戻り値">戻り値</h3> - -<p>非 strict モードでは、プロパティが編集不可の場合、false が返ります。その他の場合すべてで <code>true</code> が返ります。</p> - -<h3 id="例外">例外</h3> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict モード</a> では、プロパティが編集不可の場合、{{jsxref("Global_objects/SyntaxError")}} をスローします。</p> - -<h2 id="説明">説明</h2> - -<p>一般的に信じられていることとは異なり、<code>delete</code> 演算子は、直接的にメモリを開放することは<strong>ありません</strong>。メモリの管理は参照が切れることで間接的に行われます。詳細は <a href="/ja/docs/Web/JavaScript/Memory_Management">memory management</a> をご覧ください。</p> - -<p><code><strong>delete</strong></code> 演算子は指定したプロパティをオブジェクトから取り除きます。削除に成功すると <code>true</code> を返し、そうでなければ <code>false</code> を返します。しかし、次のシナリオを考慮することが重要です:</p> - -<ul> - <li>削除しようとしたプロパティが存在しない場合、<code>delete</code> は何の効果もなく、<code>true</code> を返します。</li> - <li>同様の名前のプロパティがオブジェクトのプロトタイプチェーンに存在する場合、削除後はプロトタイプチェーンのプロパティをオブジェクトが使うようになります (つまり、<code>delete</code> 自身のプロパティにのみ効果があります)。</li> - <li>グローバルスコープや関数スコープから {{jsxref("Statements/var","var")}} で宣言されたプロパティは削除できません。 - <ul> - <li>そのため、<code>delete</code> はグローバルスコープ内の関数を削除できません (関数定義の一部であるか関数式の一部であるかにかかわらず)。</li> - <li>(グローバルスコープを除く) オブジェクトの一部である関数は <code>delete</code> で削除できます。</li> - </ul> - </li> - <li>{{jsxref("Statements/let","let")}} や {{jsxref("Statements/const","const")}} で宣言された任意のプロパティはそれらが宣言されたスコープから削除できません。</li> - <li>編集不可能なプロパティは削除できません。これには {{jsxref("Math")}} や {{jsxref("Array")}}、{{jsxref("Object")}} のようなビルトインオブジェクトのプロパティや {{jsxref("Object.defineProperty()")}} のようなメソッドで編集不可として生成されたプロパティが含まれます。</li> -</ul> - -<p>次のスニペットがシンプルな例です:</p> - -<pre class="brush: js notranslate">var Employee = { - age: 28, - name: 'abc', - designation: 'developer' -} - -console.log(delete Employee.name); // returns true -console.log(delete Employee.age); // returns true - -// When trying to delete a property that does -// not exist, true is returned -console.log(delete Employee.salary); // returns true -</pre> - -<h3 id="編集不可のプロパティ"><strong>編集不可のプロパティ</strong></h3> - -<p>プロパティが編集不可に設定されているとき、<code>delete</code> は何の効果もなく、<code>false</code> を返します。strict モードでは、これは <code>SyntaxError</code> を生成します。</p> - -<pre class="brush: js notranslate">var Employee = {}; -Object.defineProperty(Employee, 'name', {configurable: false}); - -console.log(delete Employee.name); // returns false -</pre> - -<p>{{jsxref("Statements/var","var")}} や {{jsxref("Statements/let","let")}}、{{jsxref("Statements/const","const")}} は、<code>delete</code> 演算子で削除できない編集不可のプロパティを生成します:</p> - -<pre class="brush: js notranslate">var nameOther = 'XYZ'; - -// We can access this global property using: -Object.getOwnPropertyDescriptor(window, 'nameOther'); - -// output: Object {value: "XYZ", -// writable: true, -// enumerable: true, -// <strong>configurable: false</strong>} - -// Since "nameOther" is added using with the -// var keyword, it is marked as "non-configurable" - -delete nameOther; // return false</pre> - -<p>strict モードでは、例外が発生します。</p> - -<h3 id="Strict_vs._非_strict_モード"><strong>Strict vs. 非 strict モード</strong></h3> - -<p>strict モードのとき、変数や関数の引数、関数名への参照に直接 <code>delete</code> が使われた場合、{{jsxref("SyntaxError")}} をスローします。</p> - -<p><code>var</code> で宣言された変数は編集不可に設定されます。次の例では、<code>salary</code> は編集不可で削除できません。非 strict モードでは、<code>delete</code> 演算子は <code>false</code> を返します。</p> - -<pre class="brush: js notranslate">function Employee() { - delete salary; - var salary; -} - -Employee(); -</pre> - -<p>strict モードで同じコードがどのように振る舞うか見てみましょう。<code>false</code> を返す代わりに、ステートメントは <code>SyntaxError</code> を発生させます。</p> - -<pre class="brush: js notranslate">"use strict"; - -function Employee() { - delete salary; // SyntaxError - var salary; -} - -// Similarly, any direct access to a function -// with delete will raise a SyntaxError - -function DemoFunction() { - //some code -} - -delete DemoFunction; // SyntaxError -</pre> - -<h2 id="例">例</h2> - -<pre class="brush: js notranslate">// creates the property adminName on the global scope -adminName = 'xyz'; - -// creates the property empCount on the global scope -// Since we are using var, this is marked as non-configurable. The same is true of let and const. -var empCount = 43; - -EmployeeDetails = { - name: 'xyz', - age: 5, - designation: 'Developer' -}; - -// adminName is a property of the global scope. -// It can be deleted since it is created without var. -// Therefore, it is configurable. -delete adminName; // returns true - -// On the contrary, empCount is not configurable, -// since var was used. -delete empCount; // returns false - -// delete can be used to remove properties from objects -delete EmployeeDetails.name; // returns true - -<strong>// </strong>Even when the property does not exists, it returns "true" -delete EmployeeDetails.salary; // returns true - -// delete does not affect built-in static properties -delete Math.PI; // returns false - -// EmployeeDetails is a property of the global scope. -// Since it defined without "var", it is marked configurable -delete EmployeeDetails; // returns true - -function f() { - var z = 44; - - // delete doesn't affect local variable names - delete z; // returns false -} -</pre> - -<h3 id="delete_とプロトタイプチェーン"><code>delete</code> とプロトタイプチェーン</h3> - -<p>次の例では、 <span id="result_box" lang="ja"><span>プロトタイプチェーンで同じ名前のプロパティを使用できる間に、オブジェクトの独自のプロパティを削除します</span></span> :</p> - -<pre class="brush: js notranslate">function Foo() { - this.bar = 10; -} - -Foo.prototype.bar = 42; - -var foo = new Foo(); - -// Returns true, since the own property -// has been deleted on the foo object -delete foo.bar; - -// foo.bar is still available, since it -// is available in the prototype chain. -console.log(foo.bar); - -// We delete the property on the prototype -delete Foo.prototype.bar; - -// logs "undefined" since the property -// is no longer inherited -console.log(foo.bar); </pre> - -<h3 id="配列の要素の削除"><strong>配列の要素の削除</strong></h3> - -<p>配列の要素を削除したとき、配列の長さは影響を受けません。これは配列の最後の要素を削除しても保持されます。</p> - -<p><code>delete</code> 演算子が配列の要素を削除すると、要素はもはや配列からなくなります。 次の例では、<code>trees[3]</code> が <code>delete</code> で削除されます。</p> - -<pre class="brush: js notranslate">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; -delete trees[3]; -if (3 in trees) { - // this does not get executed -}</pre> - -<p>配列の要素を存在させたいが値が未定義の場合、<code>delete</code> 演算子の代わりに <code>undefined</code> 値を用います。次の例では、<code>trees[3]</code> は undefined が割り当てられていますが、配列の要素はまだ存在しています:</p> - -<pre class="brush: js notranslate">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; -trees[3] = undefined; -if (3 in trees) { - // this gets executed -}</pre> - -<p>代わりに、配列の内容を変更して配列要素を削除する場合は、<code>{{jsxref("Array.splice", "splice")}}</code> メソッドを使用します。次の例では、{{jsxref("Array.splice", "splice")}} を使用して配列から <code>trees[3]</code> が削除されます:</p> - -<pre class="brush: js notranslate">var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; -trees.splice(3,1); -console.log(trees); // ["redwood", "bay", "cedar", "maple"] -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">ステータス</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-delete-operator', 'The delete Operator')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-delete-operator', 'The delete Operator')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.4.1', 'The delete Operator')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.4.1', 'The delete Operator')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>初期定義。JavaScript 1.2 で実装。</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - - - -<p>{{Compat("javascript.operators.delete")}}</p> - -<h2 id="クロスブラウザーの問題点">クロスブラウザーの問題点</h2> - -<p>ECMAScript はオブジェクトのイテレーション順を実装系依存であるとしているにもかかわらず、すべての主要なブラウザーはイテレーション順を、(少なくともプロトタイプ上にないプロパティについて) 最初に追加されたプロパティを最初に持ち出す方式に基づいてサポートしているように見受けられます。ところが Internet Explorer ではプロパティに対して <code>delete</code> を用いたときに、他のブラウザーが単純なオブジェクトを整列された連想配列のように用いることを妨げる、ややこしい動作になる場合があります。Internet Explorer では、プロパティの<em>値</em>が実際 undefined に設定されているとき、後から同じ名前で再びプロパティを追加すると、そのプロパティは<em>元の</em>場所でイテレートされるようになるでしょう。削除済みのプロパティを再度追加した場合に期待するであろう、イテレーション順の最後ではありません。</p> - -<p>クロスブラウザー環境で整列された連想配列をしたい場合は、可能であれば {{jsxref("Map")}} を使用してください。または、2 つに分けた配列 (片方はキー、もう片方は値) やプロパティをひとつ持つオブジェクトの配列などで構造をシミュレートしてください。</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="http://perfectionkills.com/understanding-delete/">In depth analysis on delete</a></li> - <li>{{jsxref("Reflect.deleteProperty()")}}</li> - <li>{{jsxref("Map.prototype.delete()")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/delete/index.md b/files/ja/web/javascript/reference/operators/delete/index.md new file mode 100644 index 0000000000..278ed43228 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/delete/index.md @@ -0,0 +1,274 @@ +--- +title: delete 演算子 +slug: Web/JavaScript/Reference/Operators/delete +tags: + - JavaScript + - 言語機能 + - メモリーー管理 + - Object + - Operator + - リファレンス + - 解放 + - Unary + - delete +browser-compat: javascript.operators.delete +translation_of: Web/JavaScript/Reference/Operators/delete +--- +{{jsSidebar("Operators")}} + +JavaScript の **`delete` 演算子**は、オブジェクトからプロパティを削除します。同じプロパティへの参照がそれ以上保持されていない場合は、自動的に解放されます。 + +{{EmbedInteractiveExample("pages/js/expressions-deleteoperator.html")}} + +## 構文 + +```js +delete expression +``` + +`expression` は下記のように、[プロパティ](/ja/docs/Glossary/property/JavaScript)への参照として評価されるべきものです。 + +```js +delete object.property +delete object['property'] +``` + +### 引数 + +- `object` + - : オブジェクト名、またはオブジェクトとして評価される式です。 +- `property` + - : 削除するプロパティです。 + +### 返値 + +プロパティが{{jsxref("Object.hasOwnProperty", "自分自身の", "", 1)}}{{jsxref("Errors/Cant_delete", + "構成不可", "", 1)}}のプロパティであった場合、 strict モードでなければ `false` を返します。それ以外の場合は `true` を返します。 + +### 例外 + +[strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)では、プロパティが編集不可の場合、{{jsxref("TypeError")}} が発生します。 + +## 解説 + +一般的に信じられていることとは異なり (おそらく [C++ における delete](https://docs.microsoft.com/en-us/cpp/cpp/delete-operator-cpp?view=vs-2019) のような他のプログラミング言語の影響ですが)、`delete` 演算子は、直接的にメモリーを解放することは**ありません**。メモリーの管理は参照が切れることで間接的に行われます。詳細は[メモリー管理](/ja/docs/Web/JavaScript/Memory_Management)を参照してください。 + +**`delete`** 演算子は指定したプロパティをオブジェクトから取り除きます。削除に成功すると `true` を返し、そうでなければ `false` を返します。 + +ただし、次のようなシナリオを考慮することが重要です。 + +- 削除しようとしたプロパティが存在しない場合、`delete` は何もせずに `true` を返します。 +- そのオブジェクトのプロトタイプチェーンに同名のプロパティが存在する場合、削除後はプロトタイプチェーンのプロパティをオブジェクトが使うようになります (つまり、`delete` は自身のプロパティにのみ効果があります)。 +- グローバルスコープや関数スコープから {{jsxref("Statements/var","var")}} で宣言されたプロパティは削除できません。 + + - そのため、`delete` はグローバルスコープ内の関数を削除できません (関数定義の一部であるか関数式の一部であるかにかかわらず)。 + - (グローバルスコープを除く) オブジェクトの一部である関数は `delete` で削除できます。 + +- {{jsxref("Statements/let","let")}} や {{jsxref("Statements/const","const")}} で宣言された任意のプロパティはそれらが宣言されたスコープから削除できません。 +- 編集不可能なプロパティは削除できません。これには {{jsxref("Math")}} や {{jsxref("Array")}}、{{jsxref("Object")}} のような組み込みオブジェクトのプロパティや {{jsxref("Object.defineProperty()")}} のようなメソッドで編集不可として生成されたプロパティが含まれます。 + +次のスニペットがシンプルな例です。 + +```js +var Employee = { + age: 28, + name: 'abc', + designation: 'developer' +} + +console.log(delete Employee.name); // true を返す +console.log(delete Employee.age); // true を返す + +// When trying to delete a property that does +// not exist, true is returned +console.log(delete Employee.salary); // true を返す +``` + +### 編集不可のプロパティ + +プロパティが編集不可に設定されているとき、`delete` は何もせずに `false` を返します。strict モードでは、これは `TypeError` を生成します。 + +```js +var Employee = {}; +Object.defineProperty(Employee, 'name', {configurable: false}); + +console.log(delete Employee.name); // false を返す +``` + +{{jsxref("Statements/var","var")}} や {{jsxref("Statements/let","let")}}、{{jsxref("Statements/const","const")}} は、`delete` 演算子で削除できない編集不可のプロパティを生成します: + +```js +var nameOther = 'XYZ'; + +// We can access this global property using: +Object.getOwnPropertyDescriptor(window, 'nameOther'); + +// output: Object {value: "XYZ", +// writable: true, +// enumerable: true, +// configurable: false} + +// Since "nameOther" is added using with the +// var keyword, it is marked as "non-configurable" + +delete nameOther; // return false +``` + +strict モードでは、例外が発生します。 + +### strict モードとそれ以外の違い + +strict モードのとき、`delete` が変数や関数の引数、関数名への直接参照に使われた場合、{{jsxref("SyntaxError")}} が発生します。したがって、 strict モードでエラーが発生することを防ぐためには、 `delete` 演算子を `delete object.property` または `delete object['property']` の形で使用する必要があります。 + +```js +Object.defineProperty(globalThis, 'variable1', { value: 10, configurable: true, }); +Object.defineProperty(globalThis, 'variable2', { value: 10, configurable: false, }); + +// strict モードでは SyntaxError +console.log(delete variable1); // true + +// strict モードでは SyntaxError +console.log(delete variable2); // false +``` + +```js +function func(param) { + // strict モードでは SyntaxError + console.log(delete param); // false +} + +// strict モードでは SyntaxError +console.log(delete func); // false +``` + +### ブラウザーの互換性の注意 + +ECMAScript はオブジェクトに対して反復処理を行った時の順序を実装系依存であるとしているにもかかわらず、主要なブラウザーはいずれも、(少なくともプロトタイプ上にないプロパティについては) 最初に追加されたプロパティを最初に処理する順序に対応しているようです。しかし Internet Explorer では、プロパティに対して `delete` を用いたときにややこしい結果になることがあり、これが他のブラウザーが単純なオブジェクトを整列された連想配列のように用いることの障害になります。Internet Explorer では、プロパティの*値*を `undefined` に設定しようとしたとき、後から同じ名前で再びプロパティを追加すると、そのプロパティは*元の*場所で処理されるようになります。削除済みのプロパティを再度追加した場合に予想されるような、最後の場所ではありません。 + +複数のブラウザーで同じ連想配列を使用したい場合は、可能であれば {{jsxref("Map")}} を使用してください。または、2 つに分けた配列 (片方はキー、もう片方は値) やプロパティを一つだけ持ったオブジェクトの配列を構築するなどの方法でこの構造をシミュレーションしてください。 + +## 例 + +```js +// adminName プロパティをグローバルスコープに生成 +adminName = 'xyz'; + +// empCount プロパティをグローバルスコープに生成 +// var を使用しているため、これは構成不可となります。 let や const でも同じことになります。 +var empCount = 43; + +EmployeeDetails = { + name: 'xyz', + age: 5, + designation: 'Developer' +}; + +// adminName はグローバルスコープのプロパティです。 +// var を使用せずに生成されたため、構成可能になっているので +// 削除することができます。 +delete adminName; // true を返す + +// 対照的に、 empCount は var が使用されたので +// 構成可能ではありません。 +delete empCount; // false を返す + +// delete を使用してオブジェクトからプロパティを削除することができます。 +delete EmployeeDetails.name; // true を返す + +// プロパティが存在しない場合であっても、 delete は "true" を返します。 +delete EmployeeDetails.salary; // true を返す + +// delete は組み込み静的プロパティには効果がありません。 +delete Math.PI; // false を返す + +// EmployeeDetails はグローバルスコープのプロパティです。 +// "var" を使用せずに定義されたため、構成可能となっています。 +delete EmployeeDetails; // true を返す + +function f() { + var z = 44; + + // delete はローカル変数名には効果がありません。 + delete z; // false を返す +} +``` + +### `delete` とプロトタイプチェーン + +次の例では、プロトタイプチェーン上に同じ名前を持つプロパティがある場合に、オブジェクトの自身のプロパティを削除しています。 + +```js +function Foo() { + this.bar = 10; +} + +Foo.prototype.bar = 42; + +var foo = new Foo(); + +// foo.bar は自身のプロパティに関連付けられて +// います。 +console.log(foo.bar); // 10 + +// foo オブジェクトにある自身のプロパティを +// 削除します。 +delete foo.bar; // true を返す + +// foo.bar がプロトタイプチェーン上でまだ +// 利用できます。 +console.log(foo.bar); // 42 + +// プロトタイプ上のプロパティを削除します。 +delete Foo.prototype.bar; // true を返す + +// "bar" プロパティは Foo 上で削除されたので +// 継承されなくなりました。 +console.log(foo.bar); // undefined +``` + +### 配列の要素の削除 + +配列の要素を削除したとき、配列の `length` は影響を受けません。これは配列の最後の要素を削除しても保持されます。 + +`delete` 演算子が配列の要素を削除すると、要素は配列からなくなります。 次の例では、`trees[3]` が `delete` で削除されます。 + +```js +var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; +delete trees[3]; +if (3 in trees) { + // これは実行されない +} +``` + +ある配列の要素を存在したまま未定義の値としたい場合は、`delete` 演算子の代わりに `undefined` 値を使用してください。次の例では、`trees[3]` に `undefined` を割り当てていますが、配列のその要素は存在したままです。 + +```js +var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; +trees[3] = undefined; +if (3 in trees) { + // これは実行される +} +``` + +代わりに、配列の内容を変更して配列要素を削除したい場合は、`{{jsxref("Array.splice()", "splice()")}}` メソッドを使用してください。次の例では、{{jsxref("Array.splice()", "splice()")}} を使用して配列から `trees[3]` を削除しています。 + +```js +var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple']; +trees.splice(3,1); +console.log(trees); // ["redwood", "bay", "cedar", "maple"] +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [In depth analysis on + delete](http://perfectionkills.com/understanding-delete/) +- {{jsxref("Reflect.deleteProperty()")}} +- {{jsxref("Map.prototype.delete()")}} diff --git a/files/ja/web/javascript/reference/operators/destructuring_assignment/index.html b/files/ja/web/javascript/reference/operators/destructuring_assignment/index.html deleted file mode 100644 index 13aade654e..0000000000 --- a/files/ja/web/javascript/reference/operators/destructuring_assignment/index.html +++ /dev/null @@ -1,442 +0,0 @@ ---- -title: 分割代入 -slug: Web/JavaScript/Reference/Operators/Destructuring_assignment -tags: - - Destructuring - - Destructuring_assignment - - ECMAScript 2015 - - ES6 - - JavaScript - - Language feature - - Nested object and array destructuring - - Operator - - 分割代入 - - 演算子 -translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>分割代入</strong> (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html", "taller")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="brush:js notranslate">let a, b, rest; -[a, b] = [10, 20]; -console.log(a); // 10 -console.log(b); // 20 - -[a, b, ...rest] = [10, 20, 30, 40, 50]; -console.log(a); // 10 -console.log(b); // 20 -console.log(rest); // [30, 40, 50] - -({ a, b } = { a: 10, b: 20 }); -console.log(a); // 10 -console.log(b); // 20 - - -// Stage 4(finished) proposal -({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); -console.log(a); // 10 -console.log(b); // 20 -console.log(rest); // {c: 30, d: 40} -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>オブジェクトリテラルと配列リテラルは、いくつかのデータを<em>アドホック</em>にまとめる簡単な方法を提供します。</p> - -<pre class="brush: js notranslate">const x = [1, 2, 3, 4, 5];</pre> - -<p>分割代入は似たような構文を使用しますが、代入の左辺が元の変数からどの値を受け取るかを定義します。</p> - -<pre class="brush: js notranslate">const x = [1, 2, 3, 4, 5]; -const [y, z] = x; -console.log(y); // 1 -console.log(z); // 2 -</pre> - -<p>この機能は、Perl や Python などの言語に存在する機能に似ています。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Array_destructuring" name="Array_destructuring">配列の分割代入</h3> - -<h4 id="Basic_variable_assignment" name="Basic_variable_assignment">簡単な例</h4> - -<pre class="brush: js notranslate">const foo = ['one', 'two', 'three']; - -const [red, yellow, green] = foo; -console.log(red); // "one" -console.log(yellow); // "two" -console.log(green); // "three" -</pre> - -<h4 id="Assignment_separate_from_declaration" name="Assignment_separate_from_declaration">宣言後の割り当て</h4> - -<p>変数は宣言とは別に、分割代入によって値を代入することができます。</p> - -<pre class="brush:js notranslate">let a, b; - -[a, b] = [1, 2]; -console.log(a); // 1 -console.log(b); // 2 -</pre> - -<h4 id="Default_values" name="Default_values">既定値</h4> - -<p>配列から取り出した値が <code>undefined</code> だった場合に使用される既定値を指定できます。</p> - -<pre class="brush: js notranslate">let a, b; - -[a=5, b=7] = [1]; -console.log(a); // 1 -console.log(b); // 7 -</pre> - -<h4 id="Swapping_variables" name="Swapping_variables">変数の入れ替え</h4> - -<p>分割代入を使用して、複数の変数の値を入れ替えることができます。</p> - -<p>分割代入を使用せずに 2 つの値を交換するには、一時変数 (または、一部の低水準言語においては <a href="https://ja.wikipedia.org/wiki/XOR%E4%BA%A4%E6%8F%9B%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0">XOR 交換アルゴリズム</a>) が必要です。</p> - -<pre class="brush:js notranslate">let a = 1; -let b = 3; - -[a, b] = [b, a]; -console.log(a); // 3 -console.log(b); // 1 - -const arr = [1,2,3]; -[arr[2], arr[1]] = [arr[1], arr[2]]; -console.log(arr); // [1,3,2] - -</pre> - -<h4 id="Parsing_an_array_returned_from_a_function" name="Parsing_an_array_returned_from_a_function">関数から返された配列の解析</h4> - -<p>関数は配列を返すことができます。分割代入によって、返された配列の使用をより簡潔に記述できます。</p> - -<p>この例では、<code>f()</code> は出力として値 <code>[1, 2]</code> を返しており、分割代入により 1行で解析できます。</p> - -<pre class="brush:js notranslate">function f() { - return [1, 2]; -} - -let a, b; -[a, b] = f(); -console.log(a); // 1 -console.log(b); // 2 -</pre> - -<h4 id="Ignoring_some_returned_values" name="Ignoring_some_returned_values">返値の無視</h4> - -<p>関心のない返値は無視することができます。</p> - -<pre class="brush:js notranslate">function f() { - return [1, 2, 3]; -} - -const [a, , b] = f(); -console.log(a); // 1 -console.log(b); // 3 - -const [c] = f(); -console.log(c); // 1 -</pre> - -<p>このようにすべての返値を無視することもできます。</p> - -<pre class="brush:js notranslate">[,,] = f(); -</pre> - -<h4 id="Assigning_the_rest_of_an_array_to_a_variable" name="Assigning_the_rest_of_an_array_to_a_variable">配列の残余部分への変数の代入</h4> - -<p>配列を分割するときに残余パターンを使用して、配列の残りの部分を取り出して変数に代入できます。</p> - -<pre class="brush: js notranslate">const [a, ...b] = [1, 2, 3]; -console.log(a); // 1 -console.log(b); // [2, 3]</pre> - -<p>左辺側で残余要素とともに末尾のカンマが使用されていると、{{jsxref("SyntaxError")}} が発生しますので注意してください。</p> - -<pre class="brush: js example-bad notranslate">const [a, ...b,] = [1, 2, 3]; - -// SyntaxError: rest 要素の末尾にカンマがあってはなりません -// 常に最後の要素として rest 演算子を使用してください。 -</pre> - -<h4 id="Unpacking_values_from_a_regular_expression_match" name="Unpacking_values_from_a_regular_expression_match">正規表現の一致からの値取得</h4> - -<p>正規表現オブジェクトの <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec"> exec()</a></code> メソッドは一致するものを見つけ、最初に一致した文字列全体の一部と、正規表現内の各括弧で囲まれたグループに一致した文字列の部分を含む配列を返します。分割代入によって、簡単にこの配列の一部分を取り出せます。また必要でない場合は、完全一致を無視できます。</p> - -<pre class="brush:js notranslate">function parseProtocol(url) { - const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); - if (!parsedURL) { - return false; - } - console.log(parsedURL); - // ["https://developer.mozilla.org/ja/Web/JavaScript", - "https", "developer.mozilla.org", "en-US/Web/JavaScript"] - - const [, protocol, fullhost, fullpath] = parsedURL; - return protocol; -} - -console.log(parseProtocol('https://developer.mozilla.org/ja/Web/JavaScript')); -// "https" -</pre> - -<h3 id="Object_destructuring" name="Object_destructuring">オブジェクトの分割代入</h3> - -<h4 id="Basic_assignment" name="Basic_assignment">簡単な例</h4> - -<pre class="brush: js notranslate">const user = { - id: 42, - is_verified: true -}; - -const {id, is_verified} = user; - -console.log(id); // 42 -console.log(is_verified); // true -</pre> - -<h4 id="Assignment_without_declaration" name="Assignment_without_declaration">宣言のない代入</h4> - -<p>分割代入は代入文で宣言することなく行うことができます。</p> - -<pre class="brush:js notranslate">let a, b; - -({a, b} = {a: 1, b: 2});</pre> - -<div class="note"> -<p><strong>メモ</strong>: 代入文の周りの <code>( ... )</code> は宣言のないオブジェクトリテラル分割代入を使用するときに必要な構文です。</p> - -<p><code>{a, b} = {a: 1, b: 2}</code> は有効なスタンドアロンの構文ではありません。というのも、左辺の <code>{a, b}</code> はブロックでありオブジェクトリテラルではないと考えられるからです。</p> - -<p>ですが、<code>({a, b} = {a: 1, b: 2})</code> 形式は有効です。<code>var {a, b} = {a: 1, b: 2}</code> と考えられるためです。</p> - -<p><code>( ... )</code> の式の前にセミコロンが必要です。そうしなければ、前の行の関数を実行に使用される可能性があります。</p> -</div> - -<h4 id="Assigning_to_new_variable_names" name="Assigning_to_new_variable_names">異なる名前を持つ変数への代入</h4> - -<p>オブジェクトから変数を取り出して、オブジェクトのプロパティとは異なる名前の変数に代入することができます。</p> - -<pre class="brush: js notranslate">const o = {p: 42, q: true}; -const {p: foo, q: bar} = o; - -console.log(foo); // 42 -console.log(bar); // true</pre> - -<p>ここで、例えば、<code>const {p: foo} = o</code> はオブジェクト <code>o</code> から <code>p</code> という名前のプロパティを取り、<code>foo</code> という名前のローカル変数へ代入します。</p> - -<h4 id="Default_values_2" name="Default_values_2">既定値</h4> - -<p>オブジェクトから取り出した値が <code>undefined</code> であるときの既定値を、変数に割り当てることができます。</p> - -<pre class="brush: js notranslate">var {a = 10, b = 5} = {a: 3}; - -console.log(a); // 3 -console.log(b); // 5</pre> - -<h4 id="Assigning_to_new_variables_names_and_providing_default_values" name="Assigning_to_new_variables_names_and_providing_default_values">新しい変数名の割り当てとデフォルト値の提供</h4> - -<p>両方ともプロパティにすることができます</p> - -<ul> - <li>オブジェクトから取り出して異なる名前の変数に代入します。</li> - <li>取り出した値が <code>undefined</code> である場合に備えて、デフォルト値を割り当てます。</li> -</ul> - -<pre class="brush: js notranslate">const {a: aa = 10, b: bb = 5} = {a: 3}; - -console.log(aa); // 3 -console.log(bb); // 5 -</pre> - -<h4 id="Unpacking_fields_from_objects_passed_as_function_parameter" name="Unpacking_fields_from_objects_passed_as_function_parameter">引数に指定されたオブジェクトの属性への参照</h4> - -<pre class="brush:js notranslate">const user = { - id: 42, - displayName: 'jdoe', - fullName: { - firstName: 'John', - lastName: 'Doe' - } -}; - -function userId({id}) { - return id; -} - -function whois({displayName, fullName: {firstName: name}}) { - return `${displayName} is ${name}`; -} - -console.log(userId(user)); // 42 -console.log(whois(user)); // "jdoe is John"</pre> - -<p>上記では <code>id</code>, <code>displayName</code>, <code>firstName</code> をオブジェクトから取得し、出力します。</p> - -<h4 id="Setting_a_function_parameters_default_value" name="Setting_a_function_parameters_default_value">関数の引数に対する既定値の設定</h4> - -<pre class="brush: js notranslate">function drawChart({size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}) { - console.log(size, coords, radius); - // グラフの描画 -} - -drawChart({ - coords: {x: 18, y: 30}, - radius: 30 -});</pre> - -<div class="note"> -<p>上記の <strong><code>drawChart</code></strong> の関数シグネチャの中で、<code>{size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}</code> として、分割代入の左辺に、右辺側で空のオブジェクトリテラルを代入しています。右辺の代入がない関数を記入することもできます。しかし、右辺の代入を取り除いた場合、関数は実行されたときに少なくともひとつの引数が提供されることを期待しますが、この形式では何も引数を指定せずに単純に <code><strong>drawChart()</strong></code> を呼び出すことができます。この設計は引数を指定せずに関数を呼び出せるようにしたい場合に役に立ちますし、もう一方の形式は、オブジェクトを確実に関数に渡したい場合に役に立ちます。</p> -</div> - -<h4 id="Nested_object_and_array_destructuring" name="Nested_object_and_array_destructuring">入れ子になったオブジェクトと配列の分割代入</h4> - -<pre class="brush:js notranslate">const metadata = { - title: 'Scratchpad', - translations: [ - { - locale: 'de', - localization_tags: [], - last_edit: '2014-04-14T08:43:37', - url: '/de/docs/Tools/Scratchpad', - title: 'JavaScript-Umgebung' - } - ], - url: '/en-US/docs/Tools/Scratchpad' -}; - -let { - title: englishTitle, // rename - translations: [ - { - title: localeTitle, // rename - }, - ], -} = metadata; - -console.log(englishTitle); // "Scratchpad" -console.log(localeTitle); // "JavaScript-Umgebung"</pre> - -<h4 id="For_of_iteration_and_destructuring" name="For_of_iteration_and_destructuring">イテレーターでの分割代入の利用</h4> - -<pre class="brush: js notranslate">const people = [ - { - name: 'Mike Smith', - family: { - mother: 'Jane Smith', - father: 'Harry Smith', - sister: 'Samantha Smith' - }, - age: 35 - }, - { - name: 'Tom Jones', - family: { - mother: 'Norah Jones', - father: 'Richard Jones', - brother: 'Howard Jones' - }, - age: 25 - } -]; - -for (const {name: n, family: {father: f}} of people) { - console.log('Name: ' + n + ', Father: ' + f); -} - -// "Name: Mike Smith, Father: Harry Smith" -// "Name: Tom Jones, Father: Richard Jones" -</pre> - -<h4 id="Computed_object_property_names_and_destructuring" name="Computed_object_property_names_and_destructuring">計算されたオブジェクトのプロパティの名前と分割代入</h4> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">オブジェクトリテラル</a>のような計算されたプロパティの名前も分割代入で使用できます。</p> - -<pre class="brush: js notranslate">let key = 'z'; -let {[key]: foo} = {z: 'bar'}; - -console.log(foo); // "bar" -</pre> - -<h4 id="Rest_in_Object_Destructuring" name="Rest_in_Object_Destructuring">オブジェクトの分割代入の残り</h4> - -<p><a class="external external-icon" href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> 提案 (ステージ 4) は、分割代入に <a href="/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a> 構文を追加しています。残余プロパティは、分割パターンによってすでに取り出されていない、残りの列挙可能なプロパティのキーを収集します。</p> - -<pre class="brush: js notranslate">let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} -a; // 10 -b; // 20 -rest; // { c: 30, d: 40 }</pre> - -<h4 id="Invalid_JavaScript_identifier_as_a_property_name" name="Invalid_JavaScript_identifier_as_a_property_name">無効な JavaScript 識別子をプロパティ名として使用する</h4> - -<p>JavaScript で有効な代替識別子を与えることにより、JavaScript で有効ではない{{glossary("Identifier", "識別子")}}であるプロパティ名を分割代入で使用できます。</p> - -<pre class="brush: js notranslate">const foo = { 'fizz-buzz': true }; -const { 'fizz-buzz': fizzBuzz } = foo; - -console.log(fizzBuzz); // "true" -</pre> - -<h4 id="Combined_Array_and_Object_Destructuring" name="Combined_Array_and_Object_Destructuring">配列とオブジェクトの分割代入の組み合わせ</h4> - -<p>配列とオブジェクトの分割代入は組み合わせることができます。配列 <code>props</code> の 3 番目の要素にあるオブジェクトの <code>name</code> プロパティが欲しい場合、次の操作ができます。</p> - -<pre class="brush: js notranslate">const props = [ - { id: 1, name: 'Fizz'}, - { id: 2, name: 'Buzz'}, - { id: 3, name: 'FizzBuzz'} -]; - -const [,, { name }] = props; - -console.log(name); // "FizzBuzz" -</pre> - -<h4 id="The_prototype_chain_is_looked_up_when_the_object_is_deconstructed" name="The_prototype_chain_is_looked_up_when_the_object_is_deconstructed">オブジェクトが分割されるときにはプロトタイプチェーンが参照される</h4> - -<p>オブジェクトが分割されるときで、自分自身のプロパティがアクセスされない場合は、プロトタイプチェーンを辿って参照が続けられます。</p> - -<pre class="brush: js notranslate">let obj = {self: '123'}; -obj.__proto__.prot = '456'; -const {self, prot} = obj; -// self "123" -// prot "456"（プロトタイプチェーンへのアクセス）</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.operators.destructuring")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">代入演算子</a></li> - <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" on hacks.mozilla.org</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/destructuring_assignment/index.md b/files/ja/web/javascript/reference/operators/destructuring_assignment/index.md new file mode 100644 index 0000000000..913c4c21bc --- /dev/null +++ b/files/ja/web/javascript/reference/operators/destructuring_assignment/index.md @@ -0,0 +1,474 @@ +--- +title: 分割代入 +slug: Web/JavaScript/Reference/Operators/Destructuring_assignment +tags: + - Destructuring + - 分割代入 + - ECMAScript 2015 + - ES6 + - JavaScript + - 言語機能 + - 階層オブジェクトと配列の分割代入 + - 演算子 +browser-compat: javascript.operators.destructuring +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +{{jsSidebar("Operators")}} + +**分割代入** (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。 + +{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html", "taller")}} + +## 構文 + +```js +let a, b, rest; +[a, b] = [10, 20]; +console.log(a); // 10 +console.log(b); // 20 + +[a, b, ...rest] = [10, 20, 30, 40, 50]; +console.log(a); // 10 +console.log(b); // 20 +console.log(rest); // [30, 40, 50] + +({ a, b } = { a: 10, b: 20 }); +console.log(a); // 10 +console.log(b); // 20 + +// Stage 4(finished) proposal +({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); +console.log(a); // 10 +console.log(b); // 20 +console.log(rest); // {c: 30, d: 40} +``` + +## 解説 + +オブジェクトリテラルと配列リテラルは、いくつかのデータを*アドホック*にまとめる簡単な方法を提供します。 + +```js +const x = [1, 2, 3, 4, 5]; +``` + +分割代入は似たような構文を使用しますが、代入の左辺が元の変数からどの値を受け取るかを定義します。 + +```js +const x = [1, 2, 3, 4, 5]; +const [y, z] = x; +console.log(y); // 1 +console.log(z); // 2 +``` + +同様に、配列を代入の左辺で分割することができます。 + +```js +const [firstElement, secondElement] = list; +// これは以下のものと同様です +// const firstElement = list[0]; +// const secondElement = list[1]; +``` + +この機能は、Perl や Python などの言語に存在する機能に似ています。 + +## 例 + +### 配列の分割代入 + +#### 簡単な例 + +```js +const foo = ['one', 'two', 'three']; + +const [red, yellow, green] = foo; +console.log(red); // "one" +console.log(yellow); // "two" +console.log(green); // "three" +``` + +#### 宣言後の割り当て + +変数は宣言とは別に、分割代入によって値を代入することができます。 + +```js +let a, b; + +[a, b] = [1, 2]; +console.log(a); // 1 +console.log(b); // 2 +``` + +代入の右辺に指定された長さ _N_ の配列からの配列分割では、代入の左辺に指定された変数の数が _N_ より大きい場合、最初の _N_ 個の変数にのみ値が割り当てられます。残りの変数の値は undefined となります。 + +```js +const foo = ['one', 'two']; + +const [red, yellow, green, blue] = foo; +console.log(red); // "one" +console.log(yellow); // "two" +console.log(green); // undefined +console.log(blue); //undefined +``` + +#### 既定値 + +配列から取り出した値が `undefined` だった場合に使用される既定値を指定できます。 + +```js +let a, b; + +[a=5, b=7] = [1]; +console.log(a); // 1 +console.log(b); // 7 +``` + +#### 変数の入れ替え + +分割代入を使用して、複数の変数の値を入れ替えることができます。 + +分割代入を使用せずに 2 つの値を交換するには、一時変数 (または、一部の低水準言語においては [XOR 交換アルゴリズム](https://ja.wikipedia.org/wiki/XOR%E4%BA%A4%E6%8F%9B%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0)) が必要です。 + +```js +let a = 1; +let b = 3; + +[a, b] = [b, a]; +console.log(a); // 3 +console.log(b); // 1 + +const arr = [1,2,3]; +[arr[2], arr[1]] = [arr[1], arr[2]]; +console.log(arr); // [1,3,2] +``` + +#### 関数から返された配列の解析 + +関数は配列を返すことができます。分割代入によって、返された配列の使用をより簡潔に記述できます。 + +この例では、`f()` は出力として値 `[1, 2]` を返しており、分割代入により 1 行で解析できます。 + +```js +function f() { + return [1, 2]; +} + +let a, b; +[a, b] = f(); +console.log(a); // 1 +console.log(b); // 2 +``` + +#### 返値の無視 + +関心のない返値は無視することができます。 + +```js +function f() { + return [1, 2, 3]; +} + +const [a, , b] = f(); +console.log(a); // 1 +console.log(b); // 3 + +const [c] = f(); +console.log(c); // 1 +``` + +このようにすべての返値を無視することもできます。 + +```js +[,,] = f(); +``` + +#### 配列の残余部分への変数の代入 + +配列を分割するときに残余パターンを使用して、配列の残りの部分を取り出して変数に代入できます。 + +```js +const [a, ...b] = [1, 2, 3]; +console.log(a); // 1 +console.log(b); // [2, 3] +``` + +左辺側で残余要素とともに末尾のカンマが使用されていると、{{jsxref("SyntaxError")}} が発生しますので注意してください。 + +```js example-bad +const [a, ...b,] = [1, 2, 3]; + +// SyntaxError: rest 要素の末尾にカンマがあってはなりません +// 常に最後の要素として rest 演算子を使用してください。 +``` + +#### 正規表現の一致からの値取得 + +正規表現オブジェクトの [`exec()`](/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec) メソッドは一致するものを見つけ、最初に一致した文字列全体の一部と、正規表現内の各括弧で囲まれたグループに一致した文字列の部分を含む配列を返します。分割代入によって、簡単にこの配列の一部分を取り出せます。また必要でない場合は、完全一致を無視できます。 + +```js +function parseProtocol(url) { + const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); + if (!parsedURL) { + return false; + } + console.log(parsedURL); + // ["https://developer.mozilla.org/en-US/docs/Web/JavaScript", + // "https", "developer.mozilla.org", "en-US/docs/Web/JavaScript"] + + const [, protocol, fullhost, fullpath] = parsedURL; + return protocol; +} + +console.log(parseProtocol('https://developer.mozilla.org/en-US/docs/Web/JavaScript')); +// "https" +``` + +### オブジェクトの分割代入 + +#### 基本的な例 + +```js +const user = { + id: 42, + isVerified: true +}; + +const {id, isVerified} = user; + +console.log(id); // 42 +console.log(isVerified); // true +``` + +#### 宣言のない代入 + +分割代入は代入文で宣言することなく行うことができます。 + +```js +let a, b; + +({a, b} = {a: 1, b: 2}); +``` + +> **Note:** 代入文の周りの `( ... )` は宣言のないオブジェクトリテラル分割代入を使用するときに必要な構文です。 +> +> `{a, b} = {a: 1, b: 2}` は有効なスタンドアロンの構文ではありません。というのも、左辺の `{a, b}` はブロックでありオブジェクトリテラルではないと考えられるからです。 +> +> ですが、`({a, b} = {a: 1, b: 2})` 形式は有効です。`const {a, b} = {a: 1, b: 2}` と考えられるためです。 +> +> `( ... )` の式の前にセミコロンが必要です。そうしなければ、前の行の関数を実行に使用される可能性があります。 + +#### 新しい変数名への代入 + +オブジェクトから変数を取り出して、オブジェクトのプロパティとは異なる名前の変数に代入することができます。 + +```js +const o = {p: 42, q: true}; +const {p: foo, q: bar} = o; + +console.log(foo); // 42 +console.log(bar); // true +``` + +ここで、例えば、`const {p: foo} = o` はオブジェクト `o` から `p` という名前のプロパティを取り、`foo` という名前のローカル変数へ代入します。 + +#### 既定値 + +オブジェクトから取り出した値が `undefined` であるときの既定値を、変数に割り当てることができます。 + +```js +const {a = 10, b = 5} = {a: 3}; + +console.log(a); // 3 +console.log(b); // 5 +``` + +#### 新しい変数名の割り当てと既定値の提供 + +両方ともプロパティにすることができます。 + +- オブジェクトから取り出して異なる名前の変数に代入します。 +- 取り出した値が `undefined` である場合に備えて、既定値を割り当てます。 + +```js +const {a: aa = 10, b: bb = 5} = {a: 3}; + +console.log(aa); // 3 +console.log(bb); // 5 +``` + +#### 引数に指定されたオブジェクトの属性への参照 + +```js +const user = { + id: 42, + displayName: 'jdoe', + fullName: { + firstName: 'John', + lastName: 'Doe' + } +}; + +function userId({id}) { + return id; +} + +function whois({displayName, fullName: {firstName: name}}) { + return `${displayName} is ${name}`; +} + +console.log(userId(user)); // 42 +console.log(whois(user)); // "jdoe is John" +``` + +上記では `id`、`displayName`、`firstName` をオブジェクトから取得し、出力します。 + +#### 関数の引数に対する既定値の設定 + +```js +function drawChart({size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}) { + console.log(size, coords, radius); + // グラフの描画 +} + +drawChart({ + coords: {x: 18, y: 30}, + radius: 30 +}); +``` + +> **Note:** 上記の **`drawChart`** の関数シグネチャの中で、`{size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}` として、分割代入の左辺に、右辺側で空のオブジェクトリテラルを代入しています。右辺の代入がない関数を記入することもできます。しかし、右辺の代入を取り除いた場合、関数は実行されたときに少なくともひとつの引数が提供されることを期待しますが、この形式では何も引数を指定せずに単純に **`drawChart()`** を呼び出すことができます。この設計は引数を指定せずに関数を呼び出せるようにしたい場合に役に立ちますし、もう一方の形式は、オブジェクトを確実に関数に渡したい場合に役に立ちます。 + +### 入れ子になったオブジェクトと配列の分割代入 + +```js +const metadata = { + title: 'Scratchpad', + translations: [ + { + locale: 'de', + localization_tags: [], + last_edit: '2014-04-14T08:43:37', + url: '/de/docs/Tools/Scratchpad', + title: 'JavaScript-Umgebung' + } + ], + url: '/ja/docs/Tools/Scratchpad' +}; + +let { + title: englishTitle, // rename + translations: [ + { + title: localeTitle, // rename + }, + ], +} = metadata; + +console.log(englishTitle); // "Scratchpad" +console.log(localeTitle); // "JavaScript-Umgebung" +``` + +#### イテレーターでの分割代入の利用 + +```js +const people = [ + { + name: 'Mike Smith', + family: { + mother: 'Jane Smith', + father: 'Harry Smith', + sister: 'Samantha Smith' + }, + age: 35 + }, + { + name: 'Tom Jones', + family: { + mother: 'Norah Jones', + father: 'Richard Jones', + brother: 'Howard Jones' + }, + age: 25 + } +]; + +for (const {name: n, family: {father: f}} of people) { + console.log('Name: ' + n + ', Father: ' + f); +} + +// "Name: Mike Smith, Father: Harry Smith" +// "Name: Tom Jones, Father: Richard Jones" +``` + +#### 計算されたオブジェクトのプロパティの名前と分割代入 + +[オブジェクトリテラル](/ja/docs/Web/JavaScript/Reference/Operators/Object_initializer#computed_property_names)のような計算されたプロパティの名前も分割代入で使用できます。 + +```js +let key = 'z'; +let {[key]: foo} = {z: 'bar'}; + +console.log(foo); // "bar" +``` + +#### オブジェクトの分割代入の残り + +[Rest/Spread Properties for ECMAScript](https://github.com/tc39/proposal-object-rest-spread) の提案 (ステージ 4) は、分割代入に [rest](/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters) 構文を追加しています。残余プロパティは、分割パターンによってすでに取り出されていない、残りの列挙可能なプロパティのキーを収集します。 + +```js +let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} +a; // 10 +b; // 20 +rest; // { c: 30, d: 40 } +``` + +#### 無効な JavaScript 識別子をプロパティ名として使用する + +JavaScript で有効な代替識別子を与えることにより、JavaScript で有効ではない{{glossary("Identifier", "識別子")}}であるプロパティ名を分割代入で使用できます。 + +```js +const foo = { 'fizz-buzz': true }; +const { 'fizz-buzz': fizzBuzz } = foo; + +console.log(fizzBuzz); // "true" +``` + +#### 配列とオブジェクトの分割代入の組み合わせ + +配列とオブジェクトの分割代入は組み合わせることができます。配列 `props` の 3 番目の要素にあるオブジェクトの `name` プロパティが欲しい場合、次の操作ができます。 + +```js +const props = [ + { id: 1, name: 'Fizz'}, + { id: 2, name: 'Buzz'}, + { id: 3, name: 'FizzBuzz'} +]; + +const [,, { name }] = props; + +console.log(name); // "FizzBuzz" +``` + +#### オブジェクトが分割されるときにはプロトタイプチェーンが参照される + +オブジェクトが分割されるときで、自分自身のプロパティがアクセスされない場合は、プロトタイプチェーンを辿って参照が続けられます。 + +```js +let obj = {self: '123'}; +obj.__proto__.prot = '456'; +const {self, prot} = obj; +// self "123" +// prot "456" (プロトタイプチェーンへのアクセス) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [代入演算子](/ja/docs/Web/JavaScript/Reference/Operators#assignment_operators) +- ["ES6 in Depth: Destructuring" on hacks.mozilla.org](https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/) diff --git a/files/ja/web/javascript/reference/operators/division/index.html b/files/ja/web/javascript/reference/operators/division/index.html deleted file mode 100644 index 3db6a5715d..0000000000 --- a/files/ja/web/javascript/reference/operators/division/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: 除算 (/) -slug: Web/JavaScript/Reference/Operators/Division -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Division ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>除算演算子 (<code>/</code>) は、左のオペランドを被除数とし右のオペランドを除数としたオペランド同士の商を生成します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-division.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> / <var>y</var> -</pre> - -<h2 id="例">例</h2> - -<h3 id="基本の除算">基本の除算</h3> - -<pre class="brush: js notranslate">1 / 2 // 0.5 - -Math.floor(3 / 2) // 1 - -1.0 / 2.0 // 0.5 -</pre> - -<h3 id="ゼロ除算">ゼロ除算</h3> - -<pre class="brush: js notranslate">2.0 / 0 // Infinity - -2.0 / 0.0 // Infinity, because 0.0 === 0 - -2.0 / -0.0 // -Infinity</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Division operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.division")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/division/index.md b/files/ja/web/javascript/reference/operators/division/index.md new file mode 100644 index 0000000000..d244af46b1 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/division/index.md @@ -0,0 +1,64 @@ +--- +title: 除算 (/) +slug: Web/JavaScript/Reference/Operators/Division +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.division +translation_of: Web/JavaScript/Reference/Operators/Division +--- +{{jsSidebar("Operators")}} + +除算演算子 (`/`) は、左のオペランドを被除数とし、右のオペランドを除数としたオペランド同士の除算結果を生成します。 + +{{EmbedInteractiveExample("pages/js/expressions-division.html")}} + +## 構文 + +```js +x / y +``` + +## 例 + +### 基本的な除算 + +```js +1 / 2 // 0.5 + +Math.floor(3 / 2) // 1 + +1.0 / 2.0 // 0.5 +``` + +### ゼロ除算 + +```js +2.0 / 0 // Infinity + +2.0 / 0.0 // Infinity。 0.0 === 0 であるため + +2.0 / -0.0 // -Infinity +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/ja/web/javascript/reference/operators/division_assignment/index.html b/files/ja/web/javascript/reference/operators/division_assignment/index.html deleted file mode 100644 index 3e4ea274cf..0000000000 --- a/files/ja/web/javascript/reference/operators/division_assignment/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 除算代入 (/=) -slug: Web/JavaScript/Reference/Operators/Division_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference - - 代入演算子 - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Division_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>除算代入演算子 (<code>/=</code>) は変数を右オペランドの値で除算し、結果をその変数に代入するものです。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-division-assignment.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリーに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><strong>演算子:</strong> x /= y -<strong>意味:</strong> x = x / y</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_division_assignment" name="Using_division_assignment">除算代入の使用</h3> - -<pre class="brush: js notranslate">// 以下の変数があると想定する -// bar = 5 - -bar /= 2 // 2.5 -bar /= 'foo' // NaN -bar /= 0 // Infinity</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.division_assignment")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">JavaScript ガイドの代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/division_assignment/index.md b/files/ja/web/javascript/reference/operators/division_assignment/index.md new file mode 100644 index 0000000000..2ff001bc38 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/division_assignment/index.md @@ -0,0 +1,50 @@ +--- +title: 除算代入 (/=) +slug: Web/JavaScript/Reference/Operators/Division_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.division_assignment +translation_of: Web/JavaScript/Reference/Operators/Division_assignment +--- +{{jsSidebar("Operators")}} + +除算代入演算子 (`/=`) は変数を右オペランドの値で除算し、結果をその変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-division-assignment.html")}} + +<h2 id="Syntax" name="Syntax">構文</h2> + +```js +x /= y // x = x / y +``` + +<h2 id="Examples" name="Examples">例</h2> + +### 除算代入の使用 + +```js +// 以下の変数があり、すべての演算がこの順に実行されると想定する +// bar = 5 + +bar /= 2 // 2.5 +bar /= 2 // 1.25 +bar /= 0 // Infinity +bar /= 'foo' // NaN +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) diff --git a/files/ja/web/javascript/reference/operators/equality/index.html b/files/ja/web/javascript/reference/operators/equality/index.html deleted file mode 100644 index 25a1e23347..0000000000 --- a/files/ja/web/javascript/reference/operators/equality/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: 等価 (==) -slug: Web/JavaScript/Reference/Operators/Equality -tags: - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Equality ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>等価演算子 (<code>==</code>) は、二つのオペランドが等しいことを検査し、論理値で結果を返します <a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価</a>演算子とは異なり、オペランドの型が異なる場合には型の変換を試みてから比較を行います。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-equality.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">x == y -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>等価演算子 (<code>==</code> および <code>!=</code>) は、<a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">抽象等価比較アルゴリズム</a>を使用して二つのオペランドを比較します。これは、およそ次のようにまとめることができます。</p> - -<ul> - <li>両方のオペランドがオブジェクトである場合、同じオブジェクトを指している場合に限り <code>true</code> を返します。</li> - <li>一方のオペランドが <code>null</code> で、もう一方が <code>undefined</code> であった場合は <code>true</code> を返します。</li> - <li>オペランドの型が異なる場合は、比較前に同じ型に変換を試みます。 - <ul> - <li>数値と文字列を比較する場合、文字列を数値に変換しようとします。</li> - <li>一方のオペランドが <code>Boolean</code> である場合、その Boolean のオペランドが <code>true</code> である場合は 1 に、 <code>false</code> である場合は +0 に変換します。</li> - <li>オペランドのうちの1つがオブジェクトで、もう一方が数値または文字列である場合は、そのオブジェクトの <code>valueOf()</code> および <code>toString()</code> メソッドを使用してプリミティブに変換しようとします。</li> - </ul> - </li> - <li>オペランドが同じ型である場合は、次のよう比較します。 - <ul> - <li><code>String</code>: 両方のオペランドが同じ文字を同じ順序で持っている場合のみ、 <code>true</code> を返します。</li> - <li><code>Number</code>: 数値型は同じ値の数値である場合のみ、 <code>true</code> を返します。 <code>+0</code> と <code>-0</code> は同じ値と見なされます。一方のオペランドが <code>NaN</code> である場合は <code>false</code> を返します。</li> - <li><code>Boolean</code>: 両方のオペランドが共に <code>true</code> であるか、共に <code>false</code> である場合のみ <code>true</code> になります。</li> - </ul> - </li> -</ul> - -<p>この演算子と<a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価</a> (<code>===</code>) 演算子の最も顕著な違いは、厳密等価演算子が型変換を試みない点です。厳密等価演算は、オペランドの型が異なる場合は常に異なるものと見なします。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Comparison_with_no_type_conversion" name="Comparison_with_no_type_conversion">型変換がない場合の比較</h3> - -<pre class="brush: js notranslate">1 == 1; // true -"hello" == "hello"; // true</pre> - -<h3 id="Comparison_with_type_conversion" name="Comparison_with_type_conversion">型変換がある場合の比較</h3> - -<pre class="brush: js notranslate">"1" == 1; // true -1 == "1"; // true -0 == false; // true -0 == null; // false -0 == undefined; // false -null == undefined; // true - -const number1 = new Number(3); -const number2 = new Number(3); -number1 == 3; // true -number1 == number2; // false</pre> - -<h3 id="オブジェクトの比較">オブジェクトの比較</h3> - -<pre class="brush: js notranslate">const object1 = {"key": "value"} -const object2 = {"key": "value"}; - -object1 == object2 // false -object2 == object2 // true</pre> - -<h3 id="Comparing_strings_and_String_objects" name="Comparing_strings_and_String_objects">文字列と String オブジェクトの比較</h3> - -<p><code>new String()</code> を使用して構築された文字列はオブジェクトであることに注意してください。文字列リテラルとの比較を行うと、 <code>String</code> オブジェクトは文字列リテラルに変換され、その中身が比較されます。ただし、両方のオペランドが <code>String</code> オブジェクトであった場合は、オブジェクトとして比較され、同じオブジェクトを参照している場合だけ比較に成功します。</p> - -<pre class="brush: js notranslate">const string1 = "hello"; -const string2 = String("hello"); -const string3 = new String("hello"); -const string4 = new String("hello"); - -console.log(string1 == string2); // true -console.log(string1 == string3); // true -console.log(string2 == string3); // true -console.log(string3 == string4); // false -console.log(string4 == string4); // true</pre> - -<h3 id="Comparing_Dates_and_strings" name="Comparing_Dates_and_strings">Date と文字列の比較</h3> - -<pre class="brush: js notranslate">const d = new Date('December 17, 1995 03:24:00'); -const s = d.toString(); // for example: "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)" -console.log(d == s); //true</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.strict_inequality")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Inequality">不等価演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality">厳密不等価演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/equality/index.md b/files/ja/web/javascript/reference/operators/equality/index.md new file mode 100644 index 0000000000..e68bb25863 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/equality/index.md @@ -0,0 +1,118 @@ +--- +title: 等価 (==) +slug: Web/JavaScript/Reference/Operators/Equality +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.equality +translation_of: Web/JavaScript/Reference/Operators/Equality +--- +{{jsSidebar("Operators")}} + +等価演算子 (`==`) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。[厳密等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)演算子とは異なり、オペランドの型が異なる場合には型の変換を試みてから比較を行います。 + +{{EmbedInteractiveExample("pages/js/expressions-equality.html")}} + +## 構文 + +```js +x == y +``` + +## 解説 + +等価演算子 (`==` および `!=`) は、[抽象等価比較アルゴリズム](https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3)を使用して 2 つのオペランドを比較します。これは、およそ次のようにまとめることができます。 + +- 両方のオペランドがオブジェクトである場合、同じオブジェクトを指している場合に限り `true` を返します。 +- 一方のオペランドが `null` で、もう一方が `undefined` であった場合は `true` を返します。 +- オペランドの型が異なる場合は、比較前に同じ型に変換を試みます。 + + - 数値と文字列を比較する場合、文字列を数値に変換しようとします。 + - 一方のオペランドが論理値である場合、その論理値のオペランドが `true` である場合は 1 に、 `false` である場合は +0 に変換します。 + - オペランドのうちの一方がオブジェクトで、もう一方が数値または文字列である場合は、そのオブジェクトの `valueOf()` および `toString()` メソッドを使用してプリミティブに変換を試みます。 + +- オペランドが同じ型である場合は、次のよう比較します。 + + - 文字列型: 両方のオペランドが同じ文字を同じ順序で持っている場合のみ、 `true` を返します。 + - 数値型: 両方のオペランドが同じ値を持っている場合のみ、 `true` を返します。 `+0` と `-0` は同じ値と見なされます。一方のオペランドが `NaN` である場合は `false` を返します。 + - 論理型: 両方のオペランドが共に `true` であるか、共に `false` である場合のみ `true` になります。 + +この演算子と[厳密等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality) (`===`) 演算子の最も顕著な違いは、厳密等価演算子が型変換を試みない点です。厳密等価演算は、オペランドの型が異なる場合は常に異なるものと見なします。 + +## 例 + +### 型変換がない場合の比較 + +```js +1 == 1; // true +"hello" == "hello"; // true +``` + +### 型変換がある場合の比較 + +```js +"1" == 1; // true +1 == "1"; // true +0 == false; // true +0 == null; // false +0 == undefined; // false +0 == !!null; // true (論理 NOT 演算子を参照) +0 == !!undefined; // true (論理 NOT 演算子を参照) +null == undefined; // true + +const number1 = new Number(3); +const number2 = new Number(3); +number1 == 3; // true +number1 == number2; // false +``` + +### オブジェクトの比較 + +```js +const object1 = {"key": "value"} +const object2 = {"key": "value"}; + +object1 == object2 // false +object2 == object2 // true +``` + +### 文字列と String オブジェクトの比較 + +`new String()` を使用して構築された文字列はオブジェクトであることに注意してください。文字列リテラルとの比較を行うと、 `String` オブジェクトは文字列リテラルに変換され、その中身が比較されます。ただし、両方のオペランドが `String` オブジェクトであった場合は、オブジェクトとして比較され、同じオブジェクトを参照している場合だけ比較に成功します。 + +```js +const string1 = "hello"; +const string2 = String("hello"); +const string3 = new String("hello"); +const string4 = new String("hello"); + +console.log(string1 == string2); // true +console.log(string1 == string3); // true +console.log(string2 == string3); // true +console.log(string3 == string4); // false +console.log(string4 == string4); // true +``` + +### Date と文字列の比較 + +```js +const d = new Date('December 17, 1995 03:24:00'); +const s = d.toString(); // for example: "Sun Dec 17 1995 03:24:00 GMT-0800 (Pacific Standard Time)" +console.log(d == s); //true +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [不等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Inequality) +- [厳密等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality) +- [厳密不等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality) diff --git a/files/ja/web/javascript/reference/operators/exponentiation/index.html b/files/ja/web/javascript/reference/operators/exponentiation/index.html deleted file mode 100644 index 40531f5a6c..0000000000 --- a/files/ja/web/javascript/reference/operators/exponentiation/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: べき乗 (**) -slug: Web/JavaScript/Reference/Operators/Exponentiation -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Exponentiation ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>べき乗演算子 (<code>**</code>) は、1番目のオペランドを2番目のオペランドの累乗まで上げた結果を返します。これは <code>Math.pow</code> と同等ですが、オペランドとして <a href="/ja/docs/Web/JavaScript/Data_structures#BigInt_%E5%9E%8B">BigInt</a> も受け入れます。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-exponentiation.html")}}</div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>var1</var> ** <var>var2</var> -</pre> - -<h2 id="説明">説明</h2> - -<p>べき乗演算子は右結合的です: <code><var>a</var> ** <var>b</var> ** <var>c</var></code> は <code><var>a</var> ** (<var>b</var> ** <var>c</var>)</code> と等しくなります。</p> - -<p>PHP や Python など、べき乗演算子 (<code>**</code>) を持つほとんどの言語では、べき乗演算子は単項演算子 (単項演算子 <code>+</code> や単項演算子 <code>-</code> など) よりも優先順位が高いと定義されていますが、いくつかの例外があります。例えば、Bash では <code>**</code> 演算子は単項演算子よりも優先順位が低いと定義されています。</p> - -<p>JavaScriptでは、あいまいなべき乗式を記述することはできません。 つまり、基数の直前に単項演算子 (<code>+/-/~/!/delete/void/typeof</code>) を置くことはできません。 これを行うと、SyntaxError が発生します。</p> - -<pre class="brush: js notranslate">-2 ** 2; -// Bashでは 4 他の言語では -4 -// JavaScriptでは意図があいまいなため無効 - - --(2 ** 2); -// JavaScriptでは意図が明白なため -4 -</pre> - -<p>注意: 一部のプログラミング言語ではべき乗計算にキャレット記号 <kbd>^</kbd> を使用していますが、JavaScript では<a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR">ビット排他的論理和</a>にこの記号を使用しています。</p> - -<h2 id="例">例</h2> - -<h3 id="基本的なべき乗">基本的なべき乗</h3> - -<pre class="brush: js notranslate">2 ** 3 // 8 -3 ** 2 // 9 -3 ** 2.5 // 15.588457268119896 -10 ** -1 // 0.1 -NaN ** 2 // NaN -</pre> - -<h3 id="結合">結合</h3> - -<pre class="brush: js notranslate">2 ** 3 ** 2 // 512 -2 ** (3 ** 2) // 512 -(2 ** 3) ** 2 // 64</pre> - -<h3 id="単項演算子との使用">単項演算子との使用</h3> - -<p>べき乗式の結果の符号を反転させる</p> - -<pre class="brush: js notranslate">-(2 ** 2) // -4 -</pre> - -<p>べき乗式の基底を強制的に負の数にする</p> - -<pre class="brush: js notranslate">(-2) ** 2 // 4 -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-exp-operator', 'Exponentiation operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザの互換性">ブラウザの互換性</h2> - - - -<p>{{Compat("javascript.operators.exponentiation")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/exponentiation/index.md b/files/ja/web/javascript/reference/operators/exponentiation/index.md new file mode 100644 index 0000000000..938125b0fa --- /dev/null +++ b/files/ja/web/javascript/reference/operators/exponentiation/index.md @@ -0,0 +1,96 @@ +--- +title: べき乗 (**) +slug: Web/JavaScript/Reference/Operators/Exponentiation +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.exponentiation +translation_of: Web/JavaScript/Reference/Operators/Exponentiation +--- +{{jsSidebar("Operators")}} + +べき乗演算子 (`**`) は、1 つ目のオペランドを2 つ目オペランドの累乗にした結果を返します。これは `Math.pow` と同等ですが、オペランドとして BigInt も受け入れます。 + +{{EmbedInteractiveExample("pages/js/expressions-exponentiation.html")}} + +## 構文 + +```js +x ** y +``` + +## 解説 + +べき乗演算子は右結合です。 `a ** b ** c` は `a ** (b ** c)` と等しくなります。 + +PHP や Python など、べき乗演算子 (`**`) を持つほとんどの言語では、べき乗演算子は単項演算子 (単項 `+` や単項 `-` など) よりも優先順位が高いと定義されていますが、いくつかの例外があります。例えば、Bash では `**` 演算子は単項演算子よりも優先順位が低いと定義されています。 + +JavaScript では、あいまいなべき乗式を記述することはできません。 つまり、基数の直前に単項演算子 (`+/-/~/!/delete/void/typeof`) を置くことはできません。 これを行うと、SyntaxError が発生します。 + +```js +-2 ** 2; +// Bashでは 4 他の言語では -4 +// JavaScript では演算があいまいなため無効 + + +-(2 ** 2); +// JavaScript では意図が明白なため -4 +``` + +注意: 一部のプログラミング言語ではべき乗計算にキャレット記号 <kbd>^</kbd> を使用していますが、JavaScript では[ビット排他的論理和](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR)にこの記号を使用しています。 + +## 例 + +### 基本的なべき乗 + +```js +2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN +``` + +### 結合性 + +```js +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64 +``` + +### 単項演算子との使用 + +べき乗式の結果の符号を反転させる例です。 + +```js +-(2 ** 2) // -4 +``` + +べき乗式の基底を強制的に負の数にする例です。 + +```js +(-2) ** 2 // 4 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/ja/web/javascript/reference/operators/exponentiation_assignment/index.html b/files/ja/web/javascript/reference/operators/exponentiation_assignment/index.html deleted file mode 100644 index 9a7faa7c49..0000000000 --- a/files/ja/web/javascript/reference/operators/exponentiation_assignment/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: べき乗代入 (**=) -slug: Web/JavaScript/Reference/Operators/Exponentiation_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Exponentiation_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>べき乗代入演算子 (<code>**=</code>) は、変数の値を右辺のオペランドでべき乗します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-exponentiation-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x **= y -<strong>Meaning:</strong> x = x ** y</pre> - -<h2 id="例">例</h2> - -<h3 id="べき乗代入の仕様">べき乗代入の仕様</h3> - -<pre class="brush: js notranslate">// 次の変数を想定 -// bar = 5 - -bar **= 2 // 25 -bar **= 'foo' // NaN</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - - - -<p>{{Compat("javascript.operators.exponentiation_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">Assignment operators in the JS guide</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">Exponentiation operator</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/exponentiation_assignment/index.md b/files/ja/web/javascript/reference/operators/exponentiation_assignment/index.md new file mode 100644 index 0000000000..c2675e3791 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/exponentiation_assignment/index.md @@ -0,0 +1,48 @@ +--- +title: べき乗代入 (**=) +slug: Web/JavaScript/Reference/Operators/Exponentiation_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.exponentiation_assignment +translation_of: Web/JavaScript/Reference/Operators/Exponentiation_assignment +--- +{{jsSidebar("Operators")}} + +べき乗代入演算子 (`**=`) は、変数の値を右オペランドでべき乗します。 + +{{EmbedInteractiveExample("pages/js/expressions-exponentiation-assignment.html")}} + +## 構文 + +```js +x **= y // x = x ** y +``` + +## 例 + +### べき乗代入の仕様 + +```js +// 次の変数を想定 +// bar = 5 + +bar **= 2 // 25 +bar **= 'foo' // NaN +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) diff --git a/files/ja/web/javascript/reference/operators/function/index.html b/files/ja/web/javascript/reference/operators/function/index.html deleted file mode 100644 index a39cecb627..0000000000 --- a/files/ja/web/javascript/reference/operators/function/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: 関数式 -slug: Web/JavaScript/Reference/Operators/function -tags: - - Function - - JavaScript - - Language feature - - Operator - - Primary Expressions - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/function ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong><code>function</code></strong> キーワードは、式の中で関数を定義するために使用されます。</p> - -<p>{{jsxref("Function/Function", "Function")}} コンストラクターや{{jsxref("Statements/function", "関数宣言", "", 1)}}を用いて関数を定義することもできます。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html", "shorter")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">let <var>myFunction</var> = function [<var>name</var>]([<var>param1</var>[, <var>param2[</var>, ..., <var>paramN</var>]]]) { - <var>statements</var> -};</pre> - -<p>ES2015 からは{{jsxref("Functions/Arrow_functions", "アロー関数", "", 1)}}も使えます。</p> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code><var>name</var></code> {{optional_inline}}</dt> - <dd>関数名。省略可能で、その場合は関数は<em>無名</em>になります。 name は関数本体のみのローカルです。</dd> - <dt><code><var>paramN</var></code> {{optional_inline}}</dt> - <dd>関数に渡される引数の名前です。</dd> - <dt><code><var>statements</var></code> {{optional_inline}}</dt> - <dd>関数の本体を構成する文です。</dd> -</dl> - -<h2 id="Description" name="Description">解説</h2> - -<p>関数式は関数宣言とよく似ており、ほとんど同じ書式でもあります (詳しくは {{jsxref("Statements/function", "function")}} 文を参照してください)。関数式と関数宣言の主な相違点は、<em>関数名</em>です。関数式では、<em>無名</em>関数を生成するために、関数名を省略できます。関数式は、定義するとすぐに実行する <strong>IIFE</strong> (即時実行関数)として使用できます。詳細については、{{jsxref("Functions", "関数", "", 1)}}の章を参照してください。</p> - -<h3 id="Function_expression_hoisting" name="Function_expression_hoisting">関数式の巻き上げ</h3> - -<p>JavaScript の関数式は、{{jsxref("Statements/function", "関数宣言", "#Function_declaration_hoisting", 1)}}と違って巻き上げられません。定義前に関数式を使用することはできません。</p> - -<pre class="brush: js">console.log(notHoisted) // undefined -// 変数名は巻き上げが行われますが、定義は行われません。そのため undefined になります。 -notHoisted(); // TypeError: notHoisted is not a function - -var notHoisted = function() { - console.log('bar'); -}; -</pre> - -<h3 id="Named_function_expression" name="Named_function_expression">名前付き関数式</h3> - -<p>関数内でその関数自身を参照する必要がある場合は、名前付き関数式を作成する必要があります。<u><strong>この名前は関数本体 (スコープ) に対してのみローカルです</strong></u>。これにより非標準の {{jsxref("Functions/arguments/callee", "arguments.callee")}} プロパティの使用も避けられます。</p> - -<pre class="brush: js">let math = { - 'factit': function factorial(n) { - console.log(n) - if (n <= 1) { - return 1; - } - return n * factorial(n - 1); - } -}; - -math.factit(3) //3;2;1; -</pre> - -<p>関数式が代入された変数は <code>name</code> プロパティを持ちます。別の変数に代入しても name は変わりません。関数名が省略された場合、変数名になります (暗黙的ｇな名前)。関数名が存在したら、それが関数名になります (明示的な名前)。これは{{jsxref("Functions/Arrow_functions", "アロー関数", "", 1)}}にもあてはまります (アローは名前がないので変数名を暗黙的な名前として与える)。</p> - -<pre class="brush: js">var foo = function() {} -foo.name // "foo" - -var foo2 = foo -foo2.name // "foo" - -var bar = function baz() {} -bar.name // "baz" - -console.log(foo === foo2); // true -console.log(typeof baz); // undefined -console.log(bar === baz); // false (errors because baz == undefined) -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Creating_an_unnamed_function" name="Creating_an_unnamed_function">無名関数の作成</h3> - -<p>次の例では、無名関数を定義してそれを <code>x</code> に割り当てます。 関数は引数の 2 乗を返します。</p> - -<pre class="brush: js">var x = function(y) { - return y * y; -}; -</pre> - -<h3 id="Using_a_function_as_a_callback" name="Using_a_function_as_a_callback">関数をコールバックとして使用</h3> - -<p>より一般的には{{Glossary("Callback_function", "コールバック")}}として使われます。</p> - -<pre class="brush: js">button.addEventListener('click', function(event) { - console.log('button is clicked!') -})</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.function")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Arrow_functions", "アロー関数", "", 1)}}</li> - <li>{{jsxref("Functions_and_function_scope", "関数と関数スコープ", "", 1)}}</li> - <li>{{jsxref("Function")}}</li> - <li>{{jsxref("Statements/function", "function")}} 文</li> - <li>{{jsxref("Statements/function*", "function*")}} 文</li> - <li>{{jsxref("Operators/function*", "function*")}} 式</li> - <li>{{jsxref("GeneratorFunction")}}</li> - <li>{{jsxref("Statements/async_function", "非同期関数", "", 1)}}</li> - <li>{{jsxref("Operators/async_function", "非同期関数式", "", 1)}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/function/index.md b/files/ja/web/javascript/reference/operators/function/index.md new file mode 100644 index 0000000000..4bd7d85ccd --- /dev/null +++ b/files/ja/web/javascript/reference/operators/function/index.md @@ -0,0 +1,151 @@ +--- +title: 関数式 +slug: Web/JavaScript/Reference/Operators/function +tags: + - Function + - JavaScript + - 言語機能 + - 演算子 + - Primary Expressions +browser-compat: javascript.operators.function +translation_of: Web/JavaScript/Reference/Operators/function +--- +{{jsSidebar("Operators")}} + +**`function`** キーワードは、式の中で関数を定義するために使用されます。 + +{{jsxref("Function/Function", "Function")}} コンストラクターや{{jsxref("Statements/function", "関数宣言", "", 1)}}を用いて関数を定義することもできます。 + +{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html", "shorter")}} + +## 構文 + +この式は文の先頭に置くことができません。 + +```js +function [name]([param1[, param2[, ..., paramN]]]) { + statements +} +``` + +ES2015 からは{{jsxref("Functions/Arrow_functions", "アロー関数", "", 1)}}も使えます。 + +### 引数 + +- `name` {{optional_inline}} + - : 関数名。省略可能で、その場合は関数は*無名*になります。 name は関数本体のみのローカルです。 +- `paramN` {{optional_inline}} + - : 関数に渡される引数の名前です。 +- `statements` {{optional_inline}} + - : 関数の本体を構成する文です。 + +## 解説 + +関数式は関数宣言とよく似ており、ほとんど同じ書式でもあります (詳しくは {{jsxref("Statements/function", "function")}} 文を参照してください)。関数式と関数宣言の主な相違点は、*関数名*です。関数式では、*無名*関数を生成するために、関数名を省略できます。関数式は、定義するとすぐに実行する **IIFE** (即時実行関数)として使用できます。詳細については、{{jsxref("Functions", "関数", "", 1)}}の章を参照してください。 + +### 関数式の巻き上げ + +JavaScript の関数式は、{{jsxref("Statements/function", "関数宣言", "#Function_declaration_hoisting", 1)}}と違って巻き上げられません。定義前に関数式を使用することはできません。 + +```js +console.log(notHoisted) // undefined +// 変数名は巻き上げが行われますが、定義は行われません。そのため undefined になります。 +notHoisted(); // TypeError: notHoisted is not a function + +var notHoisted = function() { + console.log('bar'); +}; +``` + +### 名前付き関数式 + +関数内でその関数自身を参照する必要がある場合は、名前付き関数式を作成する必要があります。**この名前は関数本体 (スコープ) に対してローカルです**。これにより標準外の {{jsxref("Functions/arguments/callee", "arguments.callee")}} プロパティの使用も避けられます。 + +```js +let math = { + 'factit': function factorial(n) { + console.log(n) + if (n <= 1) { + return 1; + } + return n * factorial(n - 1); + } +}; + +math.factit(3) //3;2;1; +``` + +関数式が代入された変数は `name` プロパティを持ちます。別の変数に代入しても name は変わりません。関数名が省略された場合、(暗黙的な名前が) 変数名になります。関数名が存在したら、それが関数名になります (明示的な名前)。これは{{jsxref("Functions/Arrow_functions", "アロー関数", "", 1)}}にもあてはまります (アロー関数は名前がないので変数名を暗黙的な名前として与えます)。 + +```js +var foo = function() {} +foo.name // "foo" + +var foo2 = foo +foo2.name // "foo" + +var bar = function baz() {} +bar.name // "baz" + +console.log(foo === foo2); // true +console.log(typeof baz); // undefined +console.log(bar === baz); // false (errors because baz == undefined) +``` + +## 例 + +### 無名関数の作成 + +次の例では、無名関数を定義してそれを `x` に割り当てます。 関数は引数の 2 乗を返します。 + +```js +var x = function(y) { + return y * y; +}; +``` + +### 関数をコールバックとして使用 + +{{Glossary("Callback_function", "コールバック")}}としてより頻繁に使われます。 + +```js +button.addEventListener('click', function(event) { + console.log('button is clicked!') +}) +``` + +### 即時実行関数式 (IIFE) の使用 + +無名の関数が生成され、呼び出されます。 + +```js +(function() { + console.log('Code runs!') +})(); + +// または + +!function() { + console.log('Code runs!') +}(); +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Functions/Arrow_functions", "アロー関数", "", 1)}} +- {{jsxref("Functions", "関数", "", 1)}} +- {{jsxref("Function")}} +- {{jsxref("Statements/function", "function")}} 文 +- {{jsxref("Statements/function*", "function*")}} 文 +- {{jsxref("Operators/function*", "function*")}} 式 +- {{jsxref("GeneratorFunction")}} +- {{jsxref("Statements/async_function", "非同期関数", "", 1)}} +- {{jsxref("Operators/async_function", "非同期関数式", "", 1)}} diff --git a/files/ja/web/javascript/reference/operators/greater_than/index.html b/files/ja/web/javascript/reference/operators/greater_than/index.html deleted file mode 100644 index e5a05c3bbb..0000000000 --- a/files/ja/web/javascript/reference/operators/greater_than/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: 大なり (>) -slug: Web/JavaScript/Reference/Operators/Greater_than -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Greater_than ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>大なり演算子 (<code>></code>) は、左辺のオペランドが右辺のオペランドより大きい場合は <code>true</code> を返し、それ以外の場合は <code>false</code> を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-greater-than.html")}}</div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate">x > y</pre> - -<h2 id="解説">解説</h2> - -<p>オペランドは、 <a class="external external-icon" href="https://tc39.es/ecma262/#sec-abstract-relational-comparison" rel="noopener">抽象関係比較</a> アルゴリズムを使用して比較されます。このアルゴリズムの概要については、 <a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than">小なり</a> 演算子のドキュメントを参照して下さい。</p> - -<h2 id="例">例</h2> - -<h3 id="文字列と文字列の比較">文字列と文字列の比較</h3> - -<pre class="brush: js notranslate">console.log("a" > "b"); // false -console.log("a" > "a"); // false -console.log("a" > "3"); // true</pre> - -<h3 id="文字列と数値の比較">文字列と数値の比較</h3> - -<pre class="brush: js notranslate">console.log("5" > 3); // true -console.log("3" > 3); // false -console.log("3" > 5); // false - -console.log("hello" > 5); // false -console.log(5 > "hello"); // false - -console.log("5" > 3n); // true -console.log("3" > 5n); // false</pre> - -<h3 id="数値と数値の比較">数値と数値の比較</h3> - -<pre class="brush: js notranslate">console.log(5 > 3); // true -console.log(3 > 3); // false -console.log(3 > 5); // false</pre> - -<h3 id="数値と_BigInt_の比較">数値と BigInt の比較</h3> - -<pre class="brush: js notranslate">console.log(5n > 3); // true -console.log(3 > 5n); // false</pre> - -<h3 id="ブール値、_null_、_undefined_、_NaN_の比較">ブール値、 null 、 undefined 、 NaN の比較</h3> - -<pre class="brush: js notranslate">console.log(true > false); // true -console.log(false > true); // false - -console.log(true > 0); // true -console.log(true > 1); // false - -console.log(null > 0); // false -console.log(1 > null); // true - -console.log(undefined > 3); // false -console.log(3 > undefined); // false - -console.log(3 > NaN); // false -console.log(NaN > 3); // false</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.greater_than")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">Greater than or equal operator</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than">Less than operator</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Less than or equal operator</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/greater_than/index.md b/files/ja/web/javascript/reference/operators/greater_than/index.md new file mode 100644 index 0000000000..c6da0b0667 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/greater_than/index.md @@ -0,0 +1,98 @@ +--- +title: 大なり (>) +slug: Web/JavaScript/Reference/Operators/Greater_than +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.greater_than +translation_of: Web/JavaScript/Reference/Operators/Greater_than +--- +{{jsSidebar("Operators")}} + +大なり演算子 (`>`) は、左辺のオペランドが右辺のオペランドより大きい場合は `true` を返し、それ以外の場合は `false` を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-greater-than.html")}} + +## 構文 + +```js +x > y +``` + +## 解説 + +オペランドは、[抽象関係比較](https://tc39.es/ecma262/#sec-abstract-relational-comparison)アルゴリズムを使用して比較されます。このアルゴリズムの概要については、[小なり](/ja/docs/Web/JavaScript/Reference/Operators/Less_than)演算子のドキュメントを参照して下さい。 + +## 例 + +### 文字列と文字列の比較 + +```js +console.log("a" > "b"); // false +console.log("a" > "a"); // false +console.log("a" > "3"); // true +``` + +### 文字列と数値の比較 + +```js +console.log("5" > 3); // true +console.log("3" > 3); // false +console.log("3" > 5); // false + +console.log("hello" > 5); // false +console.log(5 > "hello"); // false + +console.log("5" > 3n); // true +console.log("3" > 5n); // false +``` + +### 数値と数値の比較 + +```js +console.log(5 > 3); // true +console.log(3 > 3); // false +console.log(3 > 5); // false +``` + +### Number と BigInt の比較 + +```js +console.log(5n > 3); // true +console.log(3 > 5n); // false +``` + +### 論理値、null、undefined、NaN の比較 + +```js +console.log(true > false); // true +console.log(false > true); // false + +console.log(true > 0); // true +console.log(true > 1); // false + +console.log(null > 0); // false +console.log(1 > null); // true + +console.log(undefined > 3); // false +console.log(3 > undefined); // false + +console.log(3 > NaN); // false +console.log(NaN > 3); // false +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [大なりイコール演算子](/ja/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal) +- [小なり演算子](/ja/docs/Web/JavaScript/Reference/Operators/Less_than) +- [小なりイコール演算子](/ja/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal) diff --git a/files/ja/web/javascript/reference/operators/greater_than_or_equal/index.html b/files/ja/web/javascript/reference/operators/greater_than_or_equal/index.html deleted file mode 100644 index 12800994b8..0000000000 --- a/files/ja/web/javascript/reference/operators/greater_than_or_equal/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: 大なりイコール (>=) -slug: Web/JavaScript/Reference/Operators/Greater_than_or_equal -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Greater_than_or_equal ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>大なりイコール演算子 (<code>>=</code>) は、左辺のオペランドが右辺のオペランド以上の場合は <code>true</code> を返し、それ以外の場合は <code>false</code> を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-greater-than-or-equal.html")}}</div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"> x >= y</pre> - -<h2 id="解説">解説</h2> - -<p>オペランドは、<a class="external external-icon" href="https://tc39.es/ecma262/#sec-abstract-relational-comparison" rel="noopener">抽象関係比較</a>アルゴリズムを使用して比較されます。 このアルゴリズムの概要は<a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than">小なり</a>演算子のドキュメントを参照して下さい。</p> - -<h2 id="例">例</h2> - -<h3 id="文字列と文字列の比較">文字列と文字列の比較</h3> - -<pre class="brush: js notranslate">console.log("a" >= "b"); // false -console.log("a" >= "a"); // true -console.log("a" >= "3"); // true -</pre> - -<h3 id="文字列と数値の比較">文字列と数値の比較</h3> - -<pre class="brush: js notranslate">console.log("5" >= 3); // true -console.log("3" >= 3); // true -console.log("3" >= 5); // false - -console.log("hello" >= 5); // false -console.log(5 >= "hello"); // false</pre> - -<h3 id="数値と数値の比較">数値と数値の比較</h3> - -<pre class="brush: js notranslate">console.log(5 >= 3); // true -console.log(3 >= 3); // true -console.log(3 >= 5); // false</pre> - -<h3 id="数値と_BigInt_の比較">数値と BigInt の比較</h3> - -<pre class="brush: js notranslate">console.log(5n >= 3); // true -console.log(3 >= 3n); // true -console.log(3 >= 5n); // false</pre> - -<h3 id="ブール値、_null_、_undefined_、_NaN_の比較">ブール値、 null 、 undefined 、 NaN の比較</h3> - -<pre class="brush: js notranslate">console.log(true >= false); // true -console.log(true >= true); // true -console.log(false >= true); // false - -console.log(true >= 0); // true -console.log(true >= 1); // true - -console.log(null >= 0); // true -console.log(1 >= null); // true - -console.log(undefined >= 3); // false -console.log(3 >= undefined); // false - -console.log(3 >= NaN); // false -console.log(NaN >= 3); // false</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.greater_than_or_equal")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than">Greater than operator</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than">Less than operator</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Less than or equal operator</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/greater_than_or_equal/index.md b/files/ja/web/javascript/reference/operators/greater_than_or_equal/index.md new file mode 100644 index 0000000000..db06364474 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/greater_than_or_equal/index.md @@ -0,0 +1,97 @@ +--- +title: 大なりイコール (>=) +slug: Web/JavaScript/Reference/Operators/Greater_than_or_equal +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.greater_than_or_equal +translation_of: Web/JavaScript/Reference/Operators/Greater_than_or_equal +--- +{{jsSidebar("Operators")}} + +大なりイコール演算子 (`>=`) は、左辺のオペランドが右辺のオペランド以上の場合は `true` を返し、それ以外の場合は `false` を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-greater-than-or-equal.html")}} + +## 構文 + +```js +x >= y +``` + +## 解説 + +オペランドは、[抽象関係比較](https://tc39.es/ecma262/#sec-abstract-relational-comparison)アルゴリズムを使用して比較されます。 このアルゴリズムの概要については、[小なり](/ja/docs/Web/JavaScript/Reference/Operators/Less_than)演算子のドキュメントを参照して下さい。 + +## 例 + +### 文字列と文字列の比較 + +```js +console.log("a" >= "b"); // false +console.log("a" >= "a"); // true +console.log("a" >= "3"); // true +``` + +### 文字列と数値の比較 + +```js +console.log("5" >= 3); // true +console.log("3" >= 3); // true +console.log("3" >= 5); // false + +console.log("hello" >= 5); // false +console.log(5 >= "hello"); // false +``` + +### 数値と数値の比較 + +```js +console.log(5 >= 3); // true +console.log(3 >= 3); // true +console.log(3 >= 5); // false +``` + +### Number と BigInt の比較 + +```js +console.log(5n >= 3); // true +console.log(3 >= 3n); // true +console.log(3 >= 5n); // false +``` + +### 論理値、null、undefined、NaN の比較 + +```js +console.log(true >= false); // true +console.log(true >= true); // true +console.log(false >= true); // false + +console.log(true >= 0); // true +console.log(true >= 1); // true + +console.log(null >= 0); // true +console.log(1 >= null); // true + +console.log(undefined >= 3); // false +console.log(3 >= undefined); // false + +console.log(3 >= NaN); // false +console.log(NaN >= 3); // false +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [大なり演算子](/ja/docs/Web/JavaScript/Reference/Operators/Greater_than) +- [小なり演算子](/ja/docs/Web/JavaScript/Reference/Operators/Less_than) +- [小なりイコール演算子](/ja/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal) diff --git a/files/ja/web/javascript/reference/operators/increment/index.html b/files/ja/web/javascript/reference/operators/increment/index.html deleted file mode 100644 index 8cbb2486a8..0000000000 --- a/files/ja/web/javascript/reference/operators/increment/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: インクリメント (++) -slug: Web/JavaScript/Reference/Operators/Increment -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Increment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>インクリメント演算子 (<code>++</code>) は、オペランドをインクリメント (1を加算) して値を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-increment.html")}}</div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var>++ or ++<var>x</var> -</pre> - -<h2 id="解説">解説</h2> - -<p>オペランドに後置で演算子を付けると (例えば、 <code><var>x</var>++</code>) 、インクリメント演算子はインクリメントしますが、インクリメント前の値を返します。</p> - -<p>オペランドに前置で演算子を付けると (例えば、 <code>++<var>x</var></code>) 、インクリメント演算子はインクリメントし、インクリメント後の値を返します。</p> - -<h2 id="例">例</h2> - -<h3 id="後置インクリメント">後置インクリメント</h3> - -<pre class="brush: js notranslate">let x = 3; -y = x++; - -// y = 3 -// x = 4 -</pre> - -<h3 id="前置インクリメント">前置インクリメント</h3> - -<pre class="brush: js notranslate">let a = 2; -b = ++a; - -// a = 3 -// b = 3 -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-postfix-increment-operator', 'Increment operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.increment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/increment/index.md b/files/ja/web/javascript/reference/operators/increment/index.md new file mode 100644 index 0000000000..3c3c712463 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/increment/index.md @@ -0,0 +1,71 @@ +--- +title: インクリメント (++) +slug: Web/JavaScript/Reference/Operators/Increment +tags: + - JavaScript + - Language feature + - Operator + - Reference +browser-compat: javascript.operators.increment +translation_of: Web/JavaScript/Reference/Operators/Increment +--- +{{jsSidebar("Operators")}} + +インクリメント演算子 (`++`) は、オペランドをインクリメント (1 を加算) して値を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-increment.html")}} + +## 構文 + +```js +x++ +++x +``` + +## 解説 + +オペランドに後置で演算子を付けると (例えば、 `x++`) 、インクリメント演算子はインクリメントしますが、インクリメント前の値を返します。 + +オペランドに前置で演算子を付けると (例えば、 `++x`) 、インクリメント演算子はインクリメントし、インクリメント後の値を返します。 + +## 例 + +### 後置インクリメント + +```js +let x = 3; +y = x++; + +// y = 3 +// x = 4 +``` + +### 前置インクリメント + +```js +let a = 2; +b = ++a; + +// a = 3 +// b = 3 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/ja/web/javascript/reference/operators/index.html b/files/ja/web/javascript/reference/operators/index.html deleted file mode 100644 index aa1fde203b..0000000000 --- a/files/ja/web/javascript/reference/operators/index.html +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: 式と演算子 -slug: Web/JavaScript/Reference/Operators -tags: - - JavaScript - - Landing page - - Operators - - Overview - - Reference - - 概要 - - 演算子 -translation_of: Web/JavaScript/Reference/Operators ---- -<div>{{JSSidebar("Operators")}}</div> - -<p class="summary">この節では、JavaScript 言語のすべての演算子、式、キーワードについて記述しています。</p> - -<h2 id="Expressions_and_operators_by_category">式と演算子 (カテゴリー別)</h2> - -<p>アルファベット順の一覧は左側のサイドバーをご覧ください。</p> - -<h3 id="Primary_expressions">基本式</h3> - -<p>JavaScript の基本的なキーワードと一般的な式です。</p> - -<dl> - <dt>{{JSxRef("Operators/this", "this")}}</dt> - <dd><code>this</code> キーワードは関数の実行コンテキストを参照します。</dd> - <dt>{{JSxRef("Operators/function", "function")}}</dt> - <dd><code>function</code> キーワードは関数式を定義します。</dd> - <dt>{{JSxRef("Operators/class", "class")}}</dt> - <dd><code>class</code> キーワードはクラス式を定義します。</dd> - <dt>{{JSxRef("Operators/function*", "function*")}}</dt> - <dd><code>function*</code> キーワードはジェネレーター関数式を定義します。</dd> - <dt>{{JSxRef("Operators/yield", "yield")}}</dt> - <dd>ジェネレーター関数の一時停止と再開を行います。</dd> - <dt>{{JSxRef("Operators/yield*", "yield*")}}</dt> - <dd>別のジェネレーター関数または反復可能オブジェクトを代行します。</dd> - <dt>{{JSxRef("Operators/async_function", "async function")}}</dt> - <dd><code>async function</code> は非同期の関数式を定義します。</dd> - <dt>{{JSxRef("Operators/await", "await")}}</dt> - <dd>非同期関数式の停止/再開と、プロミスの解決/拒否を待ちます。</dd> - <dt>{{JSxRef("Global_Objects/Array", "[]")}}</dt> - <dd>配列初期化子またはリテラル構文です。</dd> - <dt>{{JSxRef("Operators/Object_initializer", "{}")}}</dt> - <dd>オブジェクト初期化子またはリテラル構文です。</dd> - <dt>{{JSxRef("Global_Objects/RegExp", "/ab+c/i")}}</dt> - <dd>正規表現式のリテラル構文です。</dd> - <dt>{{JSxRef("Operators/Grouping", "( )")}}</dt> - <dd>グループ化演算子です。</dd> -</dl> - -<h3 id="Left-hand-side_expressions">左辺式</h3> - -<p>左辺値は、代入の対象になります。</p> - -<dl> - <dt>{{JSxRef("Operators/Property_accessors", "プロパティアクセサー", "", 1)}}</dt> - <dd>プロパティアクセス演算子はオブジェクトのプロパティやメソッドへのアクセスを提供します<br> - (<code>object.property</code> や <code>object["property"]</code>)。</dd> - <dt>{{JSxRef("Operators/new", "new")}}</dt> - <dd><code>new</code> 演算子はコンストラクターのインスタンスを作成します。</dd> - <dt>{{JSxRef("Operators/new%2Etarget", "new.target")}}</dt> - <dd>コンストラクター内で <code>new.target</code> を使うことで、{{jsxref("Operators/new", "new")}} によって呼び出されるコンストラクターを参照できます。</dd> - <dt>{{JSxRef("Statements/import%2Emeta", "import.meta")}}</dt> - <dd>コンテキストに依存したメタデータを JavaScript モジュールへ公開するオブジェクトです。</dd> - <dt>{{JSxRef("Operators/super", "super")}}</dt> - <dd><code>super</code> キーワードは親コンストラクターを呼び出します。</dd> - <dt>{{JSxRef("Operators/Spread_syntax", "...obj")}}</dt> - <dd>展開記法 (スプレッド記法) は、式を複数の引数または複数の要素に展開して、それぞれ関数呼び出しまたは配列リテラルに渡します。</dd> -</dl> - -<h3 id="Increment_and_decrement">インクリメントとデクリメント</h3> - -<p>接尾/接頭辞のインクリメント演算子と接尾/接頭辞のデクリメント演算子です。</p> - -<dl> - <dt>{{JSxRef("Operators/Increment", "A++")}}</dt> - <dd>後置型インクリメント演算子。</dd> - <dt>{{JSxRef("Operators/Decrement", "A--")}}</dt> - <dd>後置型デクリメント演算子。</dd> - <dt>{{JSxRef("Operators/Increment", "++A")}}</dt> - <dd>前置型インクリメント演算子。</dd> - <dt>{{JSxRef("Operators/Decrement", "--A")}}</dt> - <dd>前置型デクリメント演算子。</dd> -</dl> - -<h3 id="Unary_operators">単項演算子</h3> - -<p>単項演算は、1 個のオペランドによる演算です。</p> - -<dl> - <dt>{{JSxRef("Operators/delete", "delete")}}</dt> - <dd><code>delete</code> 演算子は、オブジェクトからプロパティを削除します。</dd> - <dt>{{JSxRef("Operators/void", "void")}}</dt> - <dd><code>void</code> 演算子は、式の戻り値を破棄します。</dd> - <dt>{{JSxRef("Operators/typeof", "typeof")}}</dt> - <dd><code>typeof</code> 演算子は、与えられたオブジェクトの型を判別します。</dd> - <dt>{{JSxRef("Operators/Unary_plus", "+")}}</dt> - <dd>単項正値演算子は、そのオペランドを Number 型に変換します。</dd> - <dt>{{JSxRef("Operators/Unary_negation", "-")}}</dt> - <dd>単項負値演算子は、そのオペランドを Number 型に変換して正負を反転します。</dd> - <dt>{{JSxRef("Operators/Bitwise_NOT", "~")}}</dt> - <dd>ビット否定演算子です。</dd> - <dt>{{JSxRef("Operators/Logical_NOT", "!")}}</dt> - <dd>論理否定演算子です。</dd> -</dl> - -<h3 id="Arithmetic_operators">算術演算子</h3> - -<p>算術演算子は、数値 (リテラルまたは値) をオペランドとして取り、1 個の数値を返します。</p> - -<dl> - <dt>{{JSxRef("Operators/Addition", "+")}}</dt> - <dd>加算演算子です。</dd> - <dt>{{JSxRef("Operators/Subtraction", "-")}}</dt> - <dd>減算演算子です。</dd> - <dt>{{JSxRef("Operators/Division", "/")}}</dt> - <dd>除算演算子です。</dd> - <dt>{{JSxRef("Operators/Multiplication", "*")}}</dt> - <dd>乗算演算子です。</dd> - <dt>{{JSxRef("Operators/Remainder", "%")}}</dt> - <dd>剰余演算子です。</dd> - <dt>{{JSxRef("Operators/Exponentiation", "**")}}</dt> - <dd>べき乗演算子です。</dd> -</dl> - -<h3 id="Relational_operators">関係演算子</h3> - -<p>比較演算子は、そのオペランドを比較し、その比較が真かどうかに基づいて <code>Boolean</code> 値を返します。</p> - -<dl> - <dt>{{JSxRef("Operators/in", "in")}}</dt> - <dd><code>in</code> 演算子は、与えられたプロパティをオブジェクトが持っているかどうかを判別します。</dd> - <dt>{{JSxRef("Operators/instanceof", "instanceof")}}</dt> - <dd><code>instanceof</code> 演算子は、オブジェクトが別のオブジェクトのインスタンスかどうかを判別します。</dd> - <dt>{{JSxRef("Operators/Less_than", "<")}}</dt> - <dd>小なり演算子です。</dd> - <dt>{{JSxRef("Operators/Greater_than", ">")}}</dt> - <dd>大なり演算子です。</dd> - <dt>{{JSxRef("Operators/Less_than_or_equal", "<=")}}</dt> - <dd>小なりイコール演算子です。</dd> - <dt>{{JSxRef("Operators/Greater_than_or_equal", ">=")}}</dt> - <dd>大なりイコール演算子です。</dd> -</dl> - -<div class="notecard note"> -<p><strong>注: =></strong> は演算子ではなく、<a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a> のための記法です。</p> -</div> - -<h3 id="Equality_operators">等値演算子</h3> - -<p>等値演算子の評価結果は常に、比較が真かどうかに基づいて <code>Boolean</code> 型の値になります。</p> - -<dl> - <dt>{{JSxRef("Operators/Equality", "==")}}</dt> - <dd>等値演算子です。</dd> - <dt>{{JSxRef("Operators/Inequality", "!=")}}</dt> - <dd>不等値演算子です。</dd> - <dt>{{JSxRef("Operators/Strict_equality", "===")}}</dt> - <dd>同値演算子です。</dd> - <dt>{{JSxRef("Operators/Strict_inequality", "!==")}}</dt> - <dd>非同値演算子です。</dd> -</dl> - -<h3 id="Bitwise_shift_operators">ビットシフト演算子</h3> - -<p>オペランドのすべてのビットをシフト演算します。</p> - -<dl> - <dt>{{JSxRef("Operators/Left_shift", "<<")}}</dt> - <dd>ビット左シフト演算子です。</dd> - <dt>{{JSxRef("Operators/Right_shift", ">>")}}</dt> - <dd>ビット右シフト演算子です。</dd> - <dt>{{JSxRef("Operators/Unsigned_right_shift", ">>>")}}</dt> - <dd>ビット符号なし右シフト演算子です。</dd> -</dl> - -<h3 id="Binary_bitwise_operators">バイナリービット演算子</h3> - -<p>ビット演算子は、そのオペランドを 32 ビット (0 と 1) の並びとして扱い、標準の JavaScript 数値を返します。</p> - -<dl> - <dt>{{JSxRef("Operators/Bitwise_AND", "&")}}</dt> - <dd>ビット論理積 (AND) です。</dd> - <dt>{{JSxRef("Operators/Bitwise_OR", "|")}}</dt> - <dd>ビット論理和 (OR) です。</dd> - <dt>{{JSxRef("Operators/Bitwise_XOR", "^")}}</dt> - <dd>ビット排他的論理和 (XOR) です。</dd> -</dl> - -<h3 id="Binary_logical_operators">バイナリー論理演算子</h3> - -<p>論理演算には、一般的に (論理) 真偽値が使用され、それが置かれた時に真偽値を返します。</p> - -<dl> - <dt>{{JSxRef("Operators/Logical_AND", "&&")}}</dt> - <dd>論理積 (AND) です。</dd> - <dt>{{JSxRef("Operators/Logical_OR", "||")}}</dt> - <dd>論理和 (OR) です。</dd> - <dt>{{JSxRef("Operators/Nullish_coalescing_operator", "??")}}</dt> - <dd>Null 合体演算子です。</dd> -</dl> - -<h3 id="Conditional_ternary_operator">条件 (三項) 演算子</h3> - -<dl> - <dt>{{JSxRef("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> - <dd> - <p>この条件演算子は、条件の論理値を基に、2 つの値のいずれか一方を返します。</p> - </dd> -</dl> - -<h3 id="Optional_Chaining_operator">オプショナルチェイニング演算子</h3> - -<dl> - <dt>{{JSxRef("Operators/Optional_chaining", "?.")}}</dt> - <dd> - <p>オプショナルチェイニング演算子は、参照が <a href="/ja/docs/Glossary/Nullish">nullish</a>（<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a> または <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>）の場合にエラーを発生させるのではなく、<code>undefined</code> を返します。</p> - </dd> -</dl> - -<h3 id="Assignment_operators">代入演算子</h3> - -<p>代入演算子は、右辺のオペランドに基づいて、値を左辺のオペランドに代入します。</p> - -<dl> - <dt>{{JSxRef("Operators/Assignment", "=")}}</dt> - <dd>代入演算子です。</dd> - <dt>{{JSxRef("Operators/Multiplication_assignment", "*=")}}</dt> - <dd>乗算値を代入します。</dd> - <dt>{{JSxRef("Operators/Exponentiation_assignment", "**=")}}</dt> - <dd>べき乗値を代入します。</dd> - <dt>{{JSxRef("Operators/Division_assignment", "/=")}}</dt> - <dd>除算値を代入します。</dd> - <dt>{{JSxRef("Operators/Remainder_assignment", "%=")}}</dt> - <dd>剰余値を代入します。</dd> - <dt>{{JSxRef("Operators/Addition_assignment", "+=")}}</dt> - <dd>加算値を代入します。</dd> - <dt>{{JSxRef("Operators/Subtraction_assignment", "-=")}}</dt> - <dd>減算値を代入します。</dd> - <dt>{{JSxRef("Operators/Left_shift_assignment", "<<=")}}</dt> - <dd>左シフトした値を代入します。</dd> - <dt>{{JSxRef("Operators/Right_shift_assignment", ">>=")}}</dt> - <dd>右シフトした値を代入します。</dd> - <dt>{{JSxRef("Operators/Unsigned_right_shift_assignment", ">>>=")}}</dt> - <dd>符号なしの右シフトした値を代入します。</dd> - <dt>{{JSxRef("Operators/Bitwise_AND_assignment", "&=")}}</dt> - <dd>ビット論理積 (AND) の値を代入します。</dd> - <dt>{{JSxRef("Operators/Bitwise_XOR_assignment", "^=")}}</dt> - <dd>ビット排他的論理和 (XOR) の値を代入します。</dd> - <dt>{{JSxRef("Operators/Bitwise_OR_assignment", "|=")}}</dt> - <dd>ビット論理和 (OR) の値を代入します。</dd> - <dt>{{JSxRef("Operators/Logical_AND_assignment", "&&=")}}</dt> - <dd>論理積代入です。</dd> - <dt>{{JSxRef("Operators/Logical_OR_assignment", "||=")}}</dt> - <dd>論理和代入です。</dd> - <dt>{{JSxRef("Operators/Logical_nullish_assignment", "??=")}}</dt> - <dd>論理 Null 代入です。</dd> - <dt>{{JSxRef("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> - {{JSxRef("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> - <dd> - <p>分割代入は、配列やオブジェクトのプロパティを、配列やオブジェクトリテラルに似た構文を使用して変数に代入します。</p> - </dd> -</dl> - -<h3 id="Comma_operator">カンマ演算子</h3> - -<dl> - <dt>{{JSxRef("Operators/Comma_Operator", ",")}}</dt> - <dd>カンマ演算子は、複数の式を単一の文で評価し、その最後の式の結果を返します。</dd> -</dl> - -<h2 id="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators")}}</p> - -<h2 id="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">演算子の優先順位</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/index.md b/files/ja/web/javascript/reference/operators/index.md new file mode 100644 index 0000000000..c5b135ee13 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/index.md @@ -0,0 +1,248 @@ +--- +title: 式と演算子 +slug: Web/JavaScript/Reference/Operators +tags: + - JavaScript + - Landing page + - 演算子 + - 概要 + - Reference +browser-compat: javascript.operators +translation_of: Web/JavaScript/Reference/Operators +--- +{{JSSidebar("Operators")}} + +この節では、JavaScript 言語のすべての演算子、式、キーワードについて記述しています。 + +## 式と演算子 (カテゴリー別) + +アルファベット順の一覧は左側のサイドバーをご覧ください。 + +### 基本式 + +JavaScript の基本的なキーワードと一般的な式です。 + +- {{JSxRef("Operators/this", "this")}} + - : `this` キーワードは関数の実行コンテキストを参照します。 +- {{JSxRef("Operators/function", "function")}} + - : `function` キーワードは関数式を定義します。 +- {{JSxRef("Operators/class", "class")}} + - : `class` キーワードはクラス式を定義します。 +- {{JSxRef("Operators/function*", "function*")}} + - : `function*` キーワードはジェネレーター関数式を定義します。 +- {{JSxRef("Operators/yield", "yield")}} + - : ジェネレーター関数の一時停止と再開を行います。 +- {{JSxRef("Operators/yield*", "yield*")}} + - : 別のジェネレーター関数または反復可能オブジェクトを代行します。 +- {{JSxRef("Operators/async_function", "async function")}} + - : `async function` は非同期の関数式を定義します。 +- {{JSxRef("Operators/await", "await")}} + - : 非同期関数式の停止/再開と、プロミスの解決/拒否を待ちます。 +- {{JSxRef("Global_Objects/Array", "[]")}} + - : 配列初期化子またはリテラル構文です。 +- {{JSxRef("Operators/Object_initializer", "{}")}} + - : オブジェクト初期化子またはリテラル構文です。 +- {{JSxRef("Global_Objects/RegExp", "/ab+c/i")}} + - : 正規表現式のリテラル構文です。 +- {{JSxRef("Operators/Grouping", "( )")}} + - : グループ化演算子です。 + +### 左辺式 + +左辺値は、代入の対象になります。 + +- {{JSxRef("Operators/Property_accessors", "プロパティアクセサー", "", 1)}} + - : プロパティアクセス演算子はオブジェクトのプロパティやメソッドへのアクセス (`object.property` や `object["property"]`) を提供します。 +- {{JSxRef("Operators/new", "new")}} + - : `new` 演算子はコンストラクターのインスタンスを作成します。 +- {{JSxRef("Operators/new%2Etarget", "new.target")}} + - : コンストラクター内で `new.target` を使うことで、{{JSxRef("Operators/new", "new")}} によって呼び出されるコンストラクターを参照できます。 +- {{JSxRef("Statements/import%2Emeta", "import.meta")}} + - : コンテキストに依存したメタデータを JavaScript モジュールへ公開するオブジェクトです。 +- {{JSxRef("Operators/super", "super")}} + - : `super` キーワードは親コンストラクターを呼び出します。 +- {{JSxRef("Operators/Spread_syntax", "...obj")}} + - : 展開記法 (スプレッド記法) は、式を複数の引数または複数の要素に展開して、それぞれ関数呼び出しまたは配列リテラルに渡します。 + +### インクリメントとデクリメント + +接尾/接頭辞のインクリメント演算子と接尾/接頭辞のデクリメント演算子です。 + +- {{JSxRef("Operators/Increment", "A++")}} + - : 後置型インクリメント演算子。 +- {{JSxRef("Operators/Decrement", "A--")}} + - : 後置型デクリメント演算子。 +- {{JSxRef("Operators/Increment", "++A")}} + - : 前置型インクリメント演算子。 +- {{JSxRef("Operators/Decrement", "--A")}} + - : 前置型デクリメント演算子。 + +### 単項演算子 + +単項演算は、1 個のオペランドによる演算です。 + +- {{JSxRef("Operators/delete", "delete")}} + - : `delete` 演算子は、オブジェクトからプロパティを削除します。 +- {{JSxRef("Operators/void", "void")}} + - : `void` 演算子は、式の戻り値を破棄します。 +- {{JSxRef("Operators/typeof", "typeof")}} + - : `typeof` 演算子は、与えられたオブジェクトの型を判別します。 +- {{JSxRef("Operators/Unary_plus", "+")}} + - : 単項正値演算子は、そのオペランドを Number 型に変換します。 +- {{JSxRef("Operators/Unary_negation", "-")}} + - : 単項負値演算子は、そのオペランドを Number 型に変換して正負を反転します。 +- {{JSxRef("Operators/Bitwise_NOT", "~")}} + - : ビット否定演算子です。 +- {{JSxRef("Operators/Logical_NOT", "!")}} + - : 論理否定演算子です。 + +<h3 id="Arithmetic_operators">算術演算子</h3> + +算術演算子は、数値 (リテラルまたは値) をオペランドとして取り、1 個の数値を返します。 + +- {{JSxRef("Operators/Addition", "+")}} + - : 加算演算子です。 +- {{JSxRef("Operators/Subtraction", "-")}} + - : 減算演算子です。 +- {{JSxRef("Operators/Division", "/")}} + - : 除算演算子です。 +- {{JSxRef("Operators/Multiplication", "*")}} + - : 乗算演算子です。 +- {{JSxRef("Operators/Remainder", "%")}} + - : 剰余演算子です。 +- {{JSxRef("Operators/Exponentiation", "**")}} + - : べき乗演算子です。 + +### 関係演算子 + +比較演算子は、そのオペランドを比較し、その比較が真かどうかに基づいて `Boolean` 値を返します。 + +- {{JSxRef("Operators/in", "in")}} + - : `in` 演算子は、与えられたプロパティをオブジェクトが持っているかどうかを判別します。 +- {{JSxRef("Operators/instanceof", "instanceof")}} + - : `instanceof` 演算子は、オブジェクトが別のオブジェクトのインスタンスかどうかを判別します。 +- {{JSxRef("Operators/Less_than", "<")}} + - : 小なり演算子です。 +- {{JSxRef("Operators/Greater_than", ">")}} + - : 大なり演算子です。 +- {{JSxRef("Operators/Less_than_or_equal", "<=")}} + - : 小なりイコール演算子です。 +- {{JSxRef("Operators/Greater_than_or_equal", ">=")}} + - : 大なりイコール演算子です。 + +> **Note:** `=>` は演算子ではなく、[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)のための記法です。 + +<h3 id="Equality_operators">等値演算子</h3> + +等値演算子の評価結果は常に、比較が真かどうかに基づいて `Boolean` 型の値になります。 + +- {{JSxRef("Operators/Equality", "==")}} + - : 等値演算子です。 +- {{JSxRef("Operators/Inequality", "!=")}} + - : 不等値演算子です。 +- {{JSxRef("Operators/Strict_equality", "===")}} + - : 同値演算子です。 +- {{JSxRef("Operators/Strict_inequality", "!==")}} + - : 非同値演算子です。 + +<h3 id="Bitwise_shift_operators">ビットシフト演算子</h3> + +オペランドのすべてのビットをシフト演算します。 + +- {{JSxRef("Operators/Left_shift", "<<")}} + - : ビット左シフト演算子です。 +- {{JSxRef("Operators/Right_shift", ">>")}} + - : ビット右シフト演算子です。 +- {{JSxRef("Operators/Unsigned_right_shift", ">>>")}} + - : ビット符号なし右シフト演算子です。 + +### バイナリービット演算子 + +ビット演算子は、そのオペランドを 32 ビット (0 と 1) の並びとして扱い、標準の JavaScript 数値を返します。 + +- {{JSxRef("Operators/Bitwise_AND", "&")}} + - : ビット論理積 (AND) です。 +- {{JSxRef("Operators/Bitwise_OR", "|")}} + - : ビット論理和 (OR) です。 +- {{JSxRef("Operators/Bitwise_XOR", "^")}} + - : ビット排他的論理和 (XOR) です。 + +### バイナリー論理演算子 + +論理演算には、一般的に (論理) 真偽値が使用され、それが置かれた時に真偽値を返します。 + +- {{JSxRef("Operators/Logical_AND", "&&")}} + - : 論理積 (AND) です。 +- {{JSxRef("Operators/Logical_OR", "||")}} + - : 論理和 (OR) です。 +- {{JSxRef("Operators/Nullish_coalescing_operator", "??")}} + - : Null 合体演算子です。 + +### 条件 (三項) 演算子 + +- {{JSxRef("Operators/Conditional_Operator", "(条件 ? 真の場合 : 負の場合)")}} + - : この条件演算子は、条件の論理値を基に、2 つの値のいずれか一方を返します。 + +<h3 id="Optional_Chaining_operator">オプショナルチェーン演算子</h3> + +- {{JSxRef("Operators/Optional_chaining", "?.")}} + - : オプショナルチェーン演算子は、参照が [nullish](/ja/docs/Glossary/Nullish) ([`null`](/ja/docs/Web/JavaScript/Reference/Global_Objects/null) または [`undefined`](/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined)) の場合にエラーを発生させるのではなく、`undefined` を返します。 + + +<h3 id="Assignment_operators">代入演算子</h3> + +代入演算子は、右辺のオペランドに基づいて、値を左辺のオペランドに代入します。 + +- {{JSxRef("Operators/Assignment", "=")}} + - : 代入演算子です。 +- {{JSxRef("Operators/Multiplication_assignment", "*=")}} + - : 乗算値を代入します。 +- {{JSxRef("Operators/Exponentiation_assignment", "**=")}} + - : べき乗値を代入します。 +- {{JSxRef("Operators/Division_assignment", "/=")}} + - : 除算値を代入します。 +- {{JSxRef("Operators/Remainder_assignment", "%=")}} + - : 剰余値を代入します。 +- {{JSxRef("Operators/Addition_assignment", "+=")}} + - : 加算値を代入します。 +- {{JSxRef("Operators/Subtraction_assignment", "-=")}} + - : 減算値を代入します。 +- {{JSxRef("Operators/Left_shift_assignment", "<<=")}} + - : 左シフトした値を代入します。 +- {{JSxRef("Operators/Right_shift_assignment", ">>=")}} + - : 右シフトした値を代入します。 +- {{JSxRef("Operators/Unsigned_right_shift_assignment", ">>>=")}} + - : 符号なしの右シフトした値を代入します。 +- {{JSxRef("Operators/Bitwise_AND_assignment", "&=")}} + - : ビット論理積 (AND) の値を代入します。 +- {{JSxRef("Operators/Bitwise_XOR_assignment", "^=")}} + - : ビット排他的論理和 (XOR) の値を代入します。 +- {{JSxRef("Operators/Bitwise_OR_assignment", "|=")}} + - : ビット論理和 (OR) の値を代入します。 +- {{JSxRef("Operators/Logical_AND_assignment", "&&=")}} + - : 論理積代入です。 +- {{JSxRef("Operators/Logical_OR_assignment", "||=")}} + - : 論理和代入です。 +- {{JSxRef("Operators/Logical_nullish_assignment", "??=")}} + - : 論理 Null 代入です。 +- {{JSxRef("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}} + {{JSxRef("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}} + - : 分割代入は、配列やオブジェクトのプロパティを、配列やオブジェクトリテラルに似た構文を使用して変数に代入します。 + + +<h3 id="Comma_operator">カンマ演算子</h3> + +- {{JSxRef("Operators/Comma_Operator", ",")}} + - : カンマ演算子は、複数の式を単一の文で評価し、その最後の式の結果を返します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [演算子の優先順位](/ja/docs/Web/JavaScript/Reference/Operators/Operator_Precedence) diff --git a/files/ja/web/javascript/reference/operators/inequality/index.html b/files/ja/web/javascript/reference/operators/inequality/index.html deleted file mode 100644 index aab622a884..0000000000 --- a/files/ja/web/javascript/reference/operators/inequality/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: 不等価 (!=) -slug: Web/JavaScript/Reference/Operators/Inequality -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Inequality ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>不等価演算子 (<code>!=</code>) は、2つのオペランドが等しくないかをチェックし、ブール値の結果を返します。<a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality">厳密不等価</a>演算子とは異なり、異なる型のオペランドを変換して比較を行おうとします。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-inequality.html")}}</div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate">x != y</pre> - -<h2 id="説明">説明</h2> - -<p>不等価演算子は、そのオペランドが等しくないかどうかをチェックします。これは<a href="/ja/docs/Web/JavaScript/Reference/Operators/Equality">等価</a>演算子の否定なので、次の2行は常に同じ結果になります。</p> - -<pre class="brush: js notranslate">x != y - -!(x == y)</pre> - -<p>比較アルゴリズムの詳細については、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Equality">等価</a>演算子のページを参照して下さい。</p> - -<p>等価演算子と同様に、不等価演算子は異なる型のオペランドを変換して比較しようとします。</p> - -<pre class="brush: js notranslate">3 != "3"; // false</pre> - -<p>これを防止し、異なる型が異なる結果を返すようにするには、代わりに<a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality">厳密不等価</a>演算子を使用します:</p> - -<pre class="brush: js notranslate">3 !== "3"; // true</pre> - -<h2 id="例">例</h2> - -<h3 id="型変換なしの比較">型変換なしの比較</h3> - -<pre class="brush: js notranslate">1 != 2; // true -"hello" != "hola"; // true - -1 != 1; // false -"hello" != "hello"; // false</pre> - -<h3 id="型変換ありの比較">型変換ありの比較</h3> - -<pre class="brush: js notranslate">"1" != 1; // false -1 != "1"; // false -0 != false; // false -0 != null; // true -0 != undefined; // true -null != undefined; // false - -const number1 = new Number(3); -const number2 = new Number(3); -number1 != 3; // false -number1 != number2; // true</pre> - -<h3 id="オブジェクトの比較">オブジェクトの比較</h3> - -<pre class="brush: js notranslate">const object1 = {"key": "value"} -const object2 = {"key": "value"}; - -object1 != object2 // true -object2 != object2 // false</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - - - -<p>{{Compat("javascript.operators.inequality")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Equality">等価演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality">厳密不等価演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/inequality/index.md b/files/ja/web/javascript/reference/operators/inequality/index.md new file mode 100644 index 0000000000..29e40f7b29 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/inequality/index.md @@ -0,0 +1,100 @@ +--- +title: 不等価 (!=) +slug: Web/JavaScript/Reference/Operators/Inequality +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.inequality +translation_of: Web/JavaScript/Reference/Operators/Inequality +--- +{{jsSidebar("Operators")}} + +不等価演算子 (`!=`) は、2 つのオペランドが等しくないことを検査し、論理値で結果を返します。[厳密不等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality)演算子とは異なり、異なる型のオペランドを変換して比較を行おうとします。 + +{{EmbedInteractiveExample("pages/js/expressions-inequality.html")}} + +## 構文 + +```js +x != y +``` + +## 解説 + +不等価演算子は、そのオペランドが等しくないことを検査します。これは[等価](/ja/docs/Web/JavaScript/Reference/Operators/Equality)演算子の逆に当たるので、以下の 2 行は常に同じ結果になります。 + +```js +x != y + +!(x == y) +``` + +比較アルゴリズムの詳細については、[等価](/ja/docs/Web/JavaScript/Reference/Operators/Equality)演算子のページを参照して下さい。 + +等価演算子と同様に、不等価演算子は異なる型のオペランドを変換して比較しようとします。 + +```js +3 != "3"; // false +``` + +これを防止し、異なる型が異なる結果を返すようにするには、代わりに[厳密不等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality)演算子を使用してください。 + +```js +3 !== "3"; // true +``` + +## 例 + +### 型変換がない場合の比較 + +```js +1 != 2; // true +"hello" != "hola"; // true + +1 != 1; // false +"hello" != "hello"; // false +``` + +### 型変換がある場合の比較 + +```js +"1" != 1; // false +1 != "1"; // false +0 != false; // false +0 != null; // true +0 != undefined; // true +0 != !!null; // false (論理 NOT 演算子を参照) +0 != !!undefined; // false (論理 NOT 演算子を参照) +null != undefined; // false + +const number1 = new Number(3); +const number2 = new Number(3); +number1 != 3; // false +number1 != number2; // true +``` + +### オブジェクトの比較 + +```js +const object1 = {"key": "value"} +const object2 = {"key": "value"}; + +object1 != object2 // true +object2 != object2 // false +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Equality) +- [厳密等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality) +- [厳密不等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality) diff --git a/files/ja/web/javascript/reference/operators/left_shift/index.html b/files/ja/web/javascript/reference/operators/left_shift/index.html deleted file mode 100644 index e0f494ba5a..0000000000 --- a/files/ja/web/javascript/reference/operators/left_shift/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: 左シフト (<<) -slug: Web/JavaScript/Reference/Operators/Left_shift -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference - - ビット演算子 - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Left_shift ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>左シフト演算子 (<code><<</code>)</strong>は、1つ目のオペランドを指定されたビット数だけ左にずらします。左にずらしてあふれたビットは廃棄されます。0のビットが右からずれて入ります。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-left-shift.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><code><var>a</var> << <var>b</var></code> -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>この演算子は、1つ目のオペランドを指定されたビット数だけ左にずらします。左にずらしてあふれたビットは廃棄されます。0のビットが右からずれて入ります。</p> - -<p>例えば <code>9 << 2</code> は 36 になります。</p> - -<pre class="brush: js notranslate">. 9 (10進数): 00000000000000000000000000001001 (2進数) - -------------------------------- -9 << 2 (10進数): 00000000000000000000000000100100 (2進数) = 36 (10進数) -</pre> - -<p>任意の数 <code>x</code> を <code>y</code> ビット分だけ左にビット単位にずらすと、 <code>x * 2 ** y</code> になります。<br> - ですから、例えば <code>9 << 3</code> は <code>9 * (2 ** 3) = 9 * (8) = 72</code> になります。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_left_shift" name="Using_left_shift">左シフトの使用</h3> - -<pre class="brush: js notranslate">9 << 3; // 72 - -// 9 * (2 ** 3) = 9 * (8) = 72 -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.left_shift")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise">JavaScript ガイドのビット毎演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment">左シフト代入演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/left_shift/index.md b/files/ja/web/javascript/reference/operators/left_shift/index.md new file mode 100644 index 0000000000..0e8b1420a8 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/left_shift/index.md @@ -0,0 +1,61 @@ +--- +title: 左シフト (<<) +slug: Web/JavaScript/Reference/Operators/Left_shift +tags: + - ビット演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.left_shift +translation_of: Web/JavaScript/Reference/Operators/Left_shift +--- +{{jsSidebar("Operators")}} + +**左シフト演算子 (`<<`)** は、1 つ目のオペランドを指定されたビット数だけ左にずらします。左にずらしてあふれたビットは廃棄されます。0 のビットが右からずれて入ります。 + +{{EmbedInteractiveExample("pages/js/expressions-left-shift.html")}} + +## 構文 + +```js +a << b +``` + +## 解説 + +この演算子は、1 つ目のオペランドを指定されたビット数だけ左にずらします。左にずらしてあふれたビットは廃棄されます。 0 のビットが右からずれて入ります。 + +例えば `9 << 2` は 36 になります。 + +```js +. 9 (10 進数): 00000000000000000000000000001001 (2 進数) + -------------------------------- +9 << 2 (10 進数): 00000000000000000000000000100100 (2 進数) = 36 (10 進数) +``` + +任意の数 `x` を `y` ビット分だけ左にビット単位にずらすと、 `x * 2 ** y` になります。 + ですから、例えば `9 << 3` は `9 * (2 ** 3) = 9 * (8) = 72` になります。 + +## 例 + +### 左シフトの使用 + +```js +9 << 3; // 72 + +// 9 * (2 ** 3) = 9 * (8) = 72 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビット演算子 (JavaScript ガイド)](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [左シフト代入演算子](/ja/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment) diff --git a/files/ja/web/javascript/reference/operators/left_shift_assignment/index.html b/files/ja/web/javascript/reference/operators/left_shift_assignment/index.html deleted file mode 100644 index be51e08dda..0000000000 --- a/files/ja/web/javascript/reference/operators/left_shift_assignment/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 左シフト代入 (<<=) -slug: Web/JavaScript/Reference/Operators/Left_shift_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Left_shift_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>左シフト代入演算子 (<code><<=</code>) は、指定された量のビットを左に移動し、結果を変数に代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-left-shift-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x <<= y -<strong>Meaning:</strong> x = x << y</pre> - -<h2 id="例">例</h2> - -<h3 id="左シフト代入の使用">左シフト代入の使用</h3> - -<pre class="brush: js notranslate">let a = 5; -// 00000000000000000000000000000101 - -bar <<= 2; // 20 -// 00000000000000000000000000010100</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - - - -<p>{{Compat("javascript.operators.left_shift_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Left_shift">左シフト演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/left_shift_assignment/index.md b/files/ja/web/javascript/reference/operators/left_shift_assignment/index.md new file mode 100644 index 0000000000..66f59bc046 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/left_shift_assignment/index.md @@ -0,0 +1,48 @@ +--- +title: 左シフト代入 (<<=) +slug: Web/JavaScript/Reference/Operators/Left_shift_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.left_shift_assignment +translation_of: Web/JavaScript/Reference/Operators/Left_shift_assignment +--- +{{jsSidebar("Operators")}} + +左シフト代入演算子 (`<<=`) は、指定された数だけビットを左に移動し、結果を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-left-shift-assignment.html")}} + +## 構文 + +```js +x <<= y // x = x << y +``` + +## 例 + +### 左シフト代入の使用 + +```js +let a = 5; +// 00000000000000000000000000000101 + +a <<= 2; // 20 +// 00000000000000000000000000010100 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [左シフト演算子](/ja/docs/Web/JavaScript/Reference/Operators/Left_shift) diff --git a/files/ja/web/javascript/reference/operators/less_than/index.html b/files/ja/web/javascript/reference/operators/less_than/index.html deleted file mode 100644 index e3d838febc..0000000000 --- a/files/ja/web/javascript/reference/operators/less_than/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: 小なり (<) -slug: Web/JavaScript/Reference/Operators/Less_than -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Less_than ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>小なり演算子 (<code><</code>) は、左辺のオペランドが右辺のオペランドより小さい場合は <code>true</code> を返し、それ以外の場合は <code>false</code> を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-less-than.html")}}</div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"> x < y</pre> - -<h2 id="説明">説明</h2> - -<p>オペランドは、以下に大まかに要約されている<a href="https://tc39.es/ecma262/#sec-abstract-relational-comparison">抽象関係比較</a>アルゴリズムを使用して比較されます:</p> - -<ul> - <li>最初に、オブジェクトは <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive">Symbol.ToPrimitive</a></code> を使用してプリミティブに変換されます。</li> - <li>両方の値が文字列である場合、それらに含まれる Unicode コードポイントの値に基づいて、文字列として比較されます。</li> - <li>それ以外の場合、 JavaScript は非数値型を数値に変換しようとします: - <ul> - <li>ブール値 <code>true</code> および <code>false</code> は、それぞれ 1 および 0 に変換されます。</li> - <li><code>null</code> は 0 に変換されます。</li> - <li><code>undefined</code> は <code>NaN</code> に変換されます。</li> - <li>文字列は、含まれている値に基づいて変換され、数値が含まれていない場合は <code>NaN</code> として変換されます。</li> - </ul> - </li> - <li>いずれかの値が <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a></code> の場合、演算子は <code>false</code> を返します。</li> - <li>それ以外の場合、値は数値として比較されます。</li> -</ul> - -<h2 id="例">例</h2> - -<h3 id="文字列と文字列の比較">文字列と文字列の比較</h3> - -<pre class="brush: js notranslate">console.log("a" < "b"); // true -console.log("a" < "a"); // false -console.log("a" < "3"); // false</pre> - -<h3 id="文字列と数値の比較">文字列と数値の比較</h3> - -<pre class="brush: js notranslate">console.log("5" < 3); // false -console.log("3" < 3); // false -console.log("3" < 5); // true - -console.log("hello" < 5); // false -console.log(5 < "hello"); // false - -console.log("5" < 3n); // false -console.log("3" < 5n); // true</pre> - -<h3 id="数値と数値の比較">数値と数値の比較</h3> - -<pre class="brush: js notranslate">console.log(5 < 3); // false -console.log(3 < 3); // false -console.log(3 < 5); // true</pre> - -<h3 id="数値と_BigInt_の比較">数値と BigInt の比較</h3> - -<pre class="brush: js notranslate">console.log(5n < 3); // false -console.log(3 < 5n); // true</pre> - -<h3 id="ブール値_null_undefined_NaN_の比較">ブール値, null, undefined, NaN の比較</h3> - -<pre class="brush: js notranslate">console.log(true < false); // false -console.log(false < true); // true - -console.log(0 < true); // true -console.log(true < 1); // false - -console.log(null < 0); // false -console.log(null < 1); // true - -console.log(undefined < 3); // false -console.log(3 < undefined); // false - -console.log(3 < NaN); // false -console.log(NaN < 3); // false</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - - - -<p>{{Compat("javascript.operators.less_than")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than">Greater than operator</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">Greater than or equal operator</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Less than or equal operator</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/less_than/index.md b/files/ja/web/javascript/reference/operators/less_than/index.md new file mode 100644 index 0000000000..c685d6d433 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/less_than/index.md @@ -0,0 +1,110 @@ +--- +title: 小なり (<) +slug: Web/JavaScript/Reference/Operators/Less_than +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.less_than +translation_of: Web/JavaScript/Reference/Operators/Less_than +--- +{{jsSidebar("Operators")}} + +小なり演算子 (`<`) は、左辺のオペランドが右辺のオペランドより小さい場合は `true` を返し、それ以外の場合は `false` を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-less-than.html")}} + +## 構文 + +```js +x < y +``` + +## 解説 + +オペランドは、[抽象関係比較](https://tc39.es/ecma262/#sec-abstract-relational-comparison)アルゴリズムを使用して比較されます。以下に大まかに要約します。 + +- 最初に、オブジェクトは [`Symbol.ToPrimitive`](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive) の `hint` 引数を `'number'` として使用してプリミティブに変換されます。 +- 両方の値が文字列である場合、それらに含まれる Unicode コードポイントの値に基づいて、文字列として比較されます。 +- それ以外の場合、 JavaScript は非数値型を数値に変換しようとします。 + + - 論理値 `true` および `false` は、それぞれ 1 および 0 に変換されます。 + - `null` は 0 に変換されます。 + - `undefined` は `NaN` に変換されます。 + - 文字列は、含まれている値に基づいて変換され、数値が含まれていない場合は `NaN` として変換されます。 + +- いずれかの値が [`NaN`](/ja/docs/Web/JavaScript/Reference/Global_Objects/NaN) の場合、演算子は `false` を返します。 +- それ以外の場合、値は数値として比較されます。 + +## 例 + +### 文字列と文字列の比較 + +```js +console.log("a" < "b"); // true +console.log("a" < "a"); // false +console.log("a" < "3"); // false +``` + +### 文字列と数値の比較 + +```js +console.log("5" < 3); // false +console.log("3" < 3); // false +console.log("3" < 5); // true + +console.log("hello" < 5); // false +console.log(5 < "hello"); // false + +console.log("5" < 3n); // false +console.log("3" < 5n); // true +``` + +### 数値と数値の比較 + +```js +console.log(5 < 3); // false +console.log(3 < 3); // false +console.log(3 < 5); // true +``` + +### Number と BigInt の比較 + +```js +console.log(5n < 3); // false +console.log(3 < 5n); // true +``` + +### 論理値、null、undefined、NaN の比較 + +```js +console.log(true < false); // false +console.log(false < true); // true + +console.log(0 < true); // true +console.log(true < 1); // false + +console.log(null < 0); // false +console.log(null < 1); // true + +console.log(undefined < 3); // false +console.log(3 < undefined); // false + +console.log(3 < NaN); // false +console.log(NaN < 3); // false +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [大なり演算子](/ja/docs/Web/JavaScript/Reference/Operators/Greater_than) +- [大なりイコール演算子](/ja/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal) +- [小なりイコール演算子](/ja/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal) diff --git a/files/ja/web/javascript/reference/operators/less_than_or_equal/index.html b/files/ja/web/javascript/reference/operators/less_than_or_equal/index.html deleted file mode 100644 index dce2c02d1b..0000000000 --- a/files/ja/web/javascript/reference/operators/less_than_or_equal/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: 小なりイコール (<=) -slug: Web/JavaScript/Reference/Operators/Less_than_or_equal -tags: - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Less_than_or_equal ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>小なりイコール演算子 (<code><=</code>) は、左のオペランドが右のオペランドより小さいか等しい場合に <code>true</code> を返し、それ以外の場合は <code>false</code> を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-less-than-or-equal.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"> x <= y</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>オペランドは<a class="external external-icon" href="https://tc39.es/ecma262/#sec-abstract-relational-comparison" rel="noopener">抽象関係比較</a>アルゴリズムを使用して比較されます。このアルゴリズムの概要は<a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than">大なり</a>演算子のドキュメントをご覧ください。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="String_to_string_comparison" name="String_to_string_comparison">文字列と文字列の比較</h3> - -<pre class="brush: js notranslate">console.log("a" <= "b"); // true -console.log("a" <= "a"); // true -console.log("a" <= "3"); // false -</pre> - -<h3 id="String_to_number_comparison" name="String_to_number_comparison">文字列と数値の比較</h3> - -<pre class="brush: js notranslate">console.log("5" <= 3); // false -console.log("3" <= 3); // true -console.log("3" <= 5); // true - -console.log("hello" <= 5); // false -console.log(5 <= "hello"); // false</pre> - -<h3 id="Number_to_Number_comparison" name="Number_to_Number_comparison">数値と数値の比較</h3> - -<pre class="brush: js notranslate">console.log(5 <= 3); // false -console.log(3 <= 3); // true -console.log(3 <= 5); // true</pre> - -<h3 id="Number_to_BigInt_comparison" name="Number_to_BigInt_comparison">数値と BigInt の比較</h3> - -<pre class="brush: js notranslate">console.log(5n <= 3); // false -console.log(3 <= 3n); // true -console.log(3 <= 5n); // true</pre> - -<h3 id="Comparing_Boolean_null_undefined_NaN" name="Comparing_Boolean_null_undefined_NaN">論理型, null, undefined, NaN の比較</h3> - -<pre class="brush: js notranslate">console.log(true <= false); // false -console.log(true <= true); // true -console.log(false <= true); // true - -console.log(true <= 0); // false -console.log(true <= 1); // true - -console.log(null <= 0); // true -console.log(1 <= null); // false - -console.log(undefined <= 3); // false -console.log(3 <= undefined); // false - -console.log(3 <= NaN); // false -console.log(NaN <= 3); // false</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators', 'Relational operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.less_than_or_equal")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than">大なり演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">大なりイコール演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Less_than">小なり演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/less_than_or_equal/index.md b/files/ja/web/javascript/reference/operators/less_than_or_equal/index.md new file mode 100644 index 0000000000..53a5e53eb9 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/less_than_or_equal/index.md @@ -0,0 +1,97 @@ +--- +title: 小なりイコール (<=) +slug: Web/JavaScript/Reference/Operators/Less_than_or_equal +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.less_than_or_equal +translation_of: Web/JavaScript/Reference/Operators/Less_than_or_equal +--- +{{jsSidebar("Operators")}} + +小なりイコール演算子 (`<=`) は、左のオペランドが右のオペランドより小さいか等しい場合に `true` を返し、それ以外の場合は `false` を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-less-than-or-equal.html")}} + +## 構文 + +```js +x <= y +``` + +## 解説 + +オペランドは、[抽象関係比較](https://tc39.es/ecma262/#sec-abstract-relational-comparison)アルゴリズムを使用して比較されます。 このアルゴリズムの概要については、[小なり](/ja/docs/Web/JavaScript/Reference/Operators/Less_than)演算子のドキュメントを参照して下さい。 + +## 例 + +### 文字列と文字列の比較 + +```js +console.log("a" <= "b"); // true +console.log("a" <= "a"); // true +console.log("a" <= "3"); // false +``` + +### 文字列と数値の比較 + +```js +console.log("5" <= 3); // false +console.log("3" <= 3); // true +console.log("3" <= 5); // true + +console.log("hello" <= 5); // false +console.log(5 <= "hello"); // false +``` + +### 数値と数値の比較 + +```js +console.log(5 <= 3); // false +console.log(3 <= 3); // true +console.log(3 <= 5); // true +``` + +### Number と BigInt の比較 + +```js +console.log(5n <= 3); // false +console.log(3 <= 3n); // true +console.log(3 <= 5n); // true +``` + +### 論理値、null、undefined、NaN の比較 + +```js +console.log(true <= false); // false +console.log(true <= true); // true +console.log(false <= true); // true + +console.log(true <= 0); // false +console.log(true <= 1); // true + +console.log(null <= 0); // true +console.log(1 <= null); // false + +console.log(undefined <= 3); // false +console.log(3 <= undefined); // false + +console.log(3 <= NaN); // false +console.log(NaN <= 3); // false +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [大なり演算子](/ja/docs/Web/JavaScript/Reference/Operators/Greater_than) +- [大なりイコール演算子](/ja/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal) +- [小なり演算子](/ja/docs/Web/JavaScript/Reference/Operators/Less_than) diff --git a/files/ja/web/javascript/reference/operators/logical_and_assignment/index.html b/files/ja/web/javascript/reference/operators/logical_and_assignment/index.html deleted file mode 100644 index 95ac42b650..0000000000 --- a/files/ja/web/javascript/reference/operators/logical_and_assignment/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: 論理積代入 (&&=) -slug: Web/JavaScript/Reference/Operators/Logical_AND_assignment -tags: - - JavaScript - - Language feature - - Logical assignment - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Logical_AND_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>論理積代入 (<code>x &&= y</code>) 演算子は、<code>x</code> が {{Glossary("truthy")}} である場合にのみ代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-logical-and-assignment.html")}}</div> - -<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><em>expr1</em> &&= <em>expr2</em> -</pre> - -<h2 id="説明">説明</h2> - -<h3 id="短絡評価（ショートサーキット）">短絡評価（ショートサーキット）</h3> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND">論理積演算子</a>は左から右に評価され、次のルールを使って短絡評価の可能性があるかどうかテストされます。</p> - -<p><code>(偽値の式) && expr</code> は、偽値の式が短絡評価されます。</p> - -<p>短絡評価とは、上記の <code><em>expr</em></code> 部分が<strong>評価されない</strong>ことを意味します。したがって、評価された場合の副作用は発生しません。（例えば、<code><em>expr</em></code> が関数呼び出しである場合、呼び出しは行われません。）</p> - -<p>論理積代入も短絡評価されます。これは、<code>x &&= y</code> が以下と等価であることを意味します。</p> - -<pre class="brush: js notranslate">x && (x = y);</pre> - -<p>そして、常に代入が行われる以下と等価ではありません。</p> - -<pre class="brush: js notranslate example-bad">x = x && y; -</pre> - -<h2 id="例">例</h2> - -<h3 id="論理積代入演算子の使用">論理積代入演算子の使用</h3> - -<pre class="brush: js notranslate">let x = 0; -let y = 1; - -x &&= 0; // 0 -x &&= 1; // 0 -y &&= 1; // 1 -y &&= 0; // 0 -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - </tr> - <tr> - <td>{{SpecName('Logical Assignment', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザの互換性">ブラウザの互換性</h2> - - - -<p>{{Compat("javascript.operators.logical_and_assignment")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND">論理積 (&&)</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Null合体 (<code>??</code>)</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">ビット論理積代入 (<code>&=</code>)</a></li> - <li>{{jsxref("Boolean")}}</li> - <li>{{Glossary("Truthy")}}</li> - <li>{{Glossary("Falsy")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/logical_and_assignment/index.md b/files/ja/web/javascript/reference/operators/logical_and_assignment/index.md new file mode 100644 index 0000000000..d185cedff8 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/logical_and_assignment/index.md @@ -0,0 +1,75 @@ +--- +title: 論理積代入 (&&=) +slug: Web/JavaScript/Reference/Operators/Logical_AND_assignment +tags: + - JavaScript + - 言語機能 + - 論理代入 + - 演算子 + - Reference +browser-compat: javascript.operators.logical_and_assignment +translation_of: Web/JavaScript/Reference/Operators/Logical_AND_assignment +--- +{{jsSidebar("Operators")}} + +論理積代入 (`x &&= y`) 演算子は、`x` が{{Glossary("truthy", "真値")}}である場合にのみ代入を行います。 + +{{EmbedInteractiveExample("pages/js/expressions-logical-and-assignment.html")}} + +## 構文 + +```js +expr1 &&= expr2 +``` + +## 解説 + +### 短絡評価 (ショートサーキット) + +[論理積演算子](/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND)は左から右に評価され、次のルールを使って短絡評価の可能性があるかどうかテストされます。 + +`(偽値の式) && expr` は、偽値の式が短絡評価されます。 + +短絡評価とは、上記の `expr` 部分が**評価されない**ことを意味します。したがって、評価された場合の副作用は発生しません (例えば、`expr` が関数呼び出しである場合、呼び出しは行われません)。 + +論理積代入も短絡評価されます。これは、`x &&= y` が以下と等価であることを意味します。 + +```js +x && (x = y); +``` + +そして、常に代入が行われる以下とは等価ではありません。 + +```js example-bad +x = x && y; +``` + +## 例 + +### 論理積代入演算子の使用 + +```js +let x = 0; +let y = 1; + +x &&= 0; // 0 +x &&= 1; // 0 +y &&= 1; // 1 +y &&= 0; // 0 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [論理積演算子 (&&)](/ja/docs/Web/JavaScript/Reference/Operators/Logical_AND) +- [Null 合体演算子 (`??`)](/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) +- [ビット論理積代入 (`&=`)](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment) +- {{Glossary("Truthy", "真値")}} +- {{Glossary("Falsy", "偽値")}} diff --git a/files/ja/web/javascript/reference/operators/logical_nullish_assignment/index.html b/files/ja/web/javascript/reference/operators/logical_nullish_assignment/index.html deleted file mode 100644 index ba7ebab53d..0000000000 --- a/files/ja/web/javascript/reference/operators/logical_nullish_assignment/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Null 合体代入 (??=) -slug: Web/JavaScript/Reference/Operators/Logical_nullish_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Logical Operator - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Logical_nullish_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Null 合体代入 (<code>x ??= y</code>) 演算子は、<code>x</code> が {{Glossary("nullish")}} (<code>null</code> または <code>undefined</code>) である場合にのみ代入を行います。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-logical-nullish-assignment.html")}}</div> - -<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><em>expr1</em> ??= <em>expr2</em> -</pre> - -<h2 id="説明">説明</h2> - -<h3 id="短絡評価（ショートサーキット）">短絡評価（ショートサーキット）</h3> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Null 合体演算子</a>は左から右に評価され、次のルールを使って短絡評価の可能性があるかどうかテストされます。</p> - -<p><code>(null や undefined ではない式) ?? expr</code> は、左辺が <code>null</code> でも <code>undefined</code> でもないことが証明されたら、左辺の式が短絡評価されます。</p> - -<p>短絡評価とは、上記の <code><em>expr</em></code> 部分が<strong>評価されない</strong>ことを意味します。したがって、評価された場合の副作用は発生しません。（例えば、<code><em>expr</em></code> が関数呼び出しである場合、呼び出しは行われません。）</p> - -<p>Null 合体代入も短絡評価されます。これは、<code>x ??= y</code> が以下と等価であることを意味します。</p> - -<pre class="brush: js notranslate">x ?? (x = y);</pre> - -<p>そして、常に代入が行われる以下と等価ではありません。</p> - -<pre class="brush: js notranslate example-bad">x = x ?? y; -</pre> - -<h2 id="例">例</h2> - -<h3 id="Null_合体代入演算子の使用">Null 合体代入演算子の使用</h3> - -<pre class="brush: js notranslate">function config(options) { - options.duration ??= 100; - options.speed ??= 25; - return options; -} - -config({ duration: 125 }); // { duration: 125, speed: 25 } -config({}); // { duration: 100, speed: 25 } -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - </tr> - <tr> - <td>{{SpecName('Logical Assignment', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザの互換性">ブラウザの互換性</h2> - - - -<p>{{Compat("javascript.operators.logical_nullish_assignment")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Null 合体演算子 (<code>??</code>)</a></li> - <li>{{Glossary("Nullish")}}</li> - <li>{{Glossary("Truthy")}}</li> - <li>{{Glossary("Falsy")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/logical_nullish_assignment/index.md b/files/ja/web/javascript/reference/operators/logical_nullish_assignment/index.md new file mode 100644 index 0000000000..cf42315146 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/logical_nullish_assignment/index.md @@ -0,0 +1,76 @@ +--- +title: Null 合体代入 (??=) +slug: Web/JavaScript/Reference/Operators/Logical_nullish_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 論理演算子 + - 演算子 + - Reference +browser-compat: javascript.operators.logical_nullish_assignment +translation_of: Web/JavaScript/Reference/Operators/Logical_nullish_assignment +--- +{{jsSidebar("Operators")}} + +Null 合体代入 (`x ??= y`) 演算子は、`x` が {{Glossary("nullish")}} (`null` または `undefined`) である場合にのみ代入を行います。 + +{{EmbedInteractiveExample("pages/js/expressions-logical-nullish-assignment.html")}} + +## 構文 + +```js +expr1 ??= expr2 +``` + +## 解説 + +### 短絡評価 (ショートサーキット) + +[Null 合体演算子](/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator)は左から右に評価され、次のルールを使って短絡評価の可能性があるかどうかテストされます。 + +`(null や undefined ではない式) ?? expr` は、左辺が `null` でも `undefined` でもないことが証明されたら、左辺の式が短絡評価されます。 + +短絡評価とは、上記の `expr` 部分が**評価されない**ことを意味します。したがって、評価された場合の副作用は発生しません (例えば、`expr` が関数呼び出しである場合、呼び出しは行われません)。 + +Null 合体代入も短絡評価されます。これは、`x ??= y` が以下と等価であることを意味します。 + +```js +x ?? (x = y); +``` + +そして、常に代入が行われる以下と等価ではありません。 + +```js example-bad +x = x ?? y; +``` + +## 例 + +### Null 合体代入演算子の使用 + +```js +function config(options) { + options.duration ??= 100; + options.speed ??= 25; + return options; +} + +config({ duration: 125 }); // { duration: 125, speed: 25 } +config({}); // { duration: 100, speed: 25 } +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Noll 合体演算子 (`??`)](/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) +- {{Glossary("Nullish")}} +- {{Glossary("Truthy", "真値")}} +- {{Glossary("Falsy", "偽値")}} diff --git a/files/ja/web/javascript/reference/operators/logical_or_assignment/index.html b/files/ja/web/javascript/reference/operators/logical_or_assignment/index.html deleted file mode 100644 index 96de814889..0000000000 --- a/files/ja/web/javascript/reference/operators/logical_or_assignment/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: 論理和代入 (||=) -slug: Web/JavaScript/Reference/Operators/Logical_OR_assignment -tags: - - JavaScript - - Language feature - - Logical Operator - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Logical_OR_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>論理和代入演算子 (<code>x ||= y</code>) は、<code>x</code> が {{Glossary("falsy")}} である場合にのみ代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-logical-or-assignment.html")}}</div> - -<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><em>expr1</em> ||= <em>expr2</em> -</pre> - -<h2 id="説明">説明</h2> - -<h3 id="短絡評価（ショートサーキット）">短絡評価（ショートサーキット）</h3> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR">論理和</a>演算子は次のように動作します。</p> - -<pre class="brush: js notranslate">x || y; -// x が truthy の場合 x を返します -// x が truthy ではない場合 y を返します</pre> - -<p>論理和演算子は、1番目のオペランドが既に結果を決定していない場合にのみ、2番目のオペランドの評価を行う短絡評価をします。</p> - -<p>論理和代入も短絡評価されます。これは、<code>x ||= y</code> が以下と等価であることを意味します。</p> - -<pre class="brush: js notranslate">x || (x = y); -</pre> - -<p>そして、常に代入が行われる以下と等価ではありません。</p> - -<pre class="brush: js notranslate example-bad">x = x || y; -</pre> - -<p>注意: この動作は、数学的な代入演算子やビット代入演算子とは異なることに注意してください。</p> - -<h2 id="例">例</h2> - -<h3 id="デフォルトの内容を設定する">デフォルトの内容を設定する</h3> - -<p>"lyrics" 要素が空の場合は、<code><a href="/ja/docs/Web/API/Element/innerHTML">innerHTML</a></code> をデフォルト値に設定します。</p> - -<pre class="brush: js notranslate">document.getElementById('lyrics').innerHTML ||= '<i>No lyrics.</i>'</pre> - -<p>ここでの短絡評価は、要素が不必要に更新されることがなく、追加のパースやレンダリング作業、フォーカスの損失などの望ましくない副作用を引き起こすことがないので、特に有益です。</p> - -<p>注意: チェック対象の API が返す値に注意してください。空の文字列（{{Glossary("falsy")}} な値）が返される場合は、<code>||=</code> を使用する必要があります。それ以外の場合（戻り値が {{jsxref("null")}} または {{jsxref("undefined")}} の場合）は <code>??=</code> 演算子を使用します。</p> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - </tr> - <tr> - <td>{{SpecName('Logical Assignment', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザの互換性">ブラウザの互換性</h2> - - - -<p>{{Compat("javascript.operators.logical_or_assignment")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR">論理和演算子 (||)</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Null合体演算子 (<code>??</code>)</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment">ビット論理和代入 (<code>|=</code>)</a></li> - <li>{{jsxref("Boolean")}}</li> - <li>{{Glossary("Truthy")}}</li> - <li>{{Glossary("Falsy")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/logical_or_assignment/index.md b/files/ja/web/javascript/reference/operators/logical_or_assignment/index.md new file mode 100644 index 0000000000..3b04602f07 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/logical_or_assignment/index.md @@ -0,0 +1,81 @@ +--- +title: 論理和代入 (||=) +slug: Web/JavaScript/Reference/Operators/Logical_OR_assignment +tags: + - JavaScript + - 言語機能 + - 論理代入 + - 演算子 + - Reference +browser-compat: javascript.operators.logical_or_assignment +translation_of: Web/JavaScript/Reference/Operators/Logical_OR_assignment +--- +{{jsSidebar("Operators")}} + +論理和代入演算子 (`x ||= y`) は、`x` が{{Glossary("falsy", "偽値")}}である場合にのみ代入を行います。 + +{{EmbedInteractiveExample("pages/js/expressions-logical-or-assignment.html")}} + +## 構文 + +```js +expr1 ||= expr2 +``` + +## 解説 + +### 短絡評価 (ショートサーキット) + +[論理和](/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR)演算子は次のように動作します。 + +```js +x || y; +// x が真値の場合 x を返します +// x が真値ではない場合 y を返します +``` + +論理和演算子は、1 つ目のオペランドがまだ結果を決定していない場合にのみ、2 つ目のオペランドの評価を行う短絡評価をします。 + +論理和代入も同様に短絡評価され、右辺の評価が行われる論理演算の場合にのみ代入が行われます。言い替えれば、`x ||= y` は以下と等価です。 + +```js +x || (x = y); +``` + +そして、常に代入が行われる以下と等価ではありません。 + +```js example-bad +x = x || y; +``` + +なお、この動作は、数学的な代入演算子やビット代入演算子とは異なることに注意してください。 + +## 例 + +### 既定の内容を設定する + +"lyrics" 要素が空の場合は、既定値を表示します。 + +```js +document.getElementById('lyrics').textContent ||= 'No lyrics.' +``` + +ここでの短絡評価は、要素が不必要に更新されることがなく、追加のパースやレンダリング作業、フォーカスの損失などの望ましくない副作用を引き起こすことがないので、特に有益です。 + +注意: チェック対象の API が返す値に注意してください。空の文字列 ({{Glossary("falsy", "偽値")}}) が返される場合は、`||=` を使用する必要があります。それ以外の場合 (返値が {{jsxref("null")}} または {{jsxref("undefined")}} の場合) は `??=` 演算子を使用してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [論理和演算子 (||)](/ja/docs/Web/JavaScript/Reference/Operators/Logical_OR) +- [Null 合体演算子 (`??`)](/ja/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) +- [ビット論理和代入演算子 (`|=`)](/ja/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment) +- {{Glossary("Truthy", "真値")}} +- {{Glossary("Falsy", "偽値")}} diff --git a/files/ja/web/javascript/reference/operators/multiplication/index.html b/files/ja/web/javascript/reference/operators/multiplication/index.html deleted file mode 100644 index 4aed5ac7f6..0000000000 --- a/files/ja/web/javascript/reference/operators/multiplication/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: 乗算 (*) -slug: Web/JavaScript/Reference/Operators/Multiplication -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Multiplication ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>乗算演算子 (<code>*</code>) はオペランドの積を生成します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-multiplication.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> * <var>y</var> -</pre> - -<h2 id="例">例</h2> - -<h3 id="数値を使用した乗算">数値を使用した乗算</h3> - -<pre class="brush: js notranslate"> 2 * 2 // 4 --2 * 2 // -4 -</pre> - -<h3 id="無限大との乗算">無限大との乗算</h3> - -<pre class="brush: js notranslate">Infinity * 0 // NaN -Infinity * Infinity // Infinity</pre> - -<h3 id="非数との乗算">非数との乗算</h3> - -<pre class="brush: js notranslate">'foo' * 2 // NaN</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Multiplication operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.multiplication")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/multiplication/index.md b/files/ja/web/javascript/reference/operators/multiplication/index.md new file mode 100644 index 0000000000..2dd23d0093 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/multiplication/index.md @@ -0,0 +1,64 @@ +--- +title: 乗算 (*) +slug: Web/JavaScript/Reference/Operators/Multiplication +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.multiplication +translation_of: Web/JavaScript/Reference/Operators/Multiplication +--- +{{jsSidebar("Operators")}} + +乗算演算子 (`*`) はオペランドの積を生成します。 + +{{EmbedInteractiveExample("pages/js/expressions-multiplication.html")}} + +## 構文 + +```js +x * y +``` + +## 例 + +### 数値を用いた乗算 + +```js + 2 * 2 // 4 +-2 * 2 // -4 +``` + +### 無限大との乗算 + +```js +Infinity * 0 // NaN +Infinity * Infinity // Infinity +``` + +### 非数との乗算 + +```js +'foo' * 2 // NaN +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/ja/web/javascript/reference/operators/multiplication_assignment/index.html b/files/ja/web/javascript/reference/operators/multiplication_assignment/index.html deleted file mode 100644 index 557ce809ee..0000000000 --- a/files/ja/web/javascript/reference/operators/multiplication_assignment/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 乗算代入 (*=) -slug: Web/JavaScript/Reference/Operators/Multiplication_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Multiplication_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>乗算代入演算子 (<code>*=</code>) は、変数に右のオペランドの値を乗算し、結果を変数に代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-multiplication-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x *= y -<strong>Meaning:</strong> x = x * y</pre> - -<h2 id="例">例</h2> - -<h3 id="乗算代入の使用">乗算代入の使用</h3> - -<pre class="brush: js notranslate">// 次の変数を想定 -// bar = 5 - -bar *= 2 // 10 -bar *= 'foo' // NaN</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.multiplication_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/multiplication_assignment/index.md b/files/ja/web/javascript/reference/operators/multiplication_assignment/index.md new file mode 100644 index 0000000000..2824916583 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/multiplication_assignment/index.md @@ -0,0 +1,48 @@ +--- +title: 乗算代入 (*=) +slug: Web/JavaScript/Reference/Operators/Multiplication_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.multiplication_assignment +translation_of: Web/JavaScript/Reference/Operators/Multiplication_assignment +--- +{{jsSidebar("Operators")}} + +乗算代入演算子 (`*=`) は、変数に右のオペランドの値を乗算し、結果を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-multiplication-assignment.html")}} + +## 構文 + +```js +x *= y // x = x * y +``` + +## 例 + +### 乗算代入の使用 + +```js +// 次の変数を想定 +// bar = 5 + +bar *= 2 // 10 +bar *= 'foo' // NaN +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) diff --git a/files/ja/web/javascript/reference/operators/remainder/index.html b/files/ja/web/javascript/reference/operators/remainder/index.html deleted file mode 100644 index 0d757f4d3c..0000000000 --- a/files/ja/web/javascript/reference/operators/remainder/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: 剰余 (%) -slug: Web/JavaScript/Reference/Operators/Remainder -tags: -- JavaScript -- Language feature -- Operator -- Reference -translation_of: Web/JavaScript/Reference/Operators/Remainder ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>剰余演算子 (<code>%</code>) は、 1 つ目のオペランドが 2 つ目のオペランドで除算されたときに残った剰余を返します。これは常に被除数の符号を取ります。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}}</div> - -<p>なお、多くの言語では ‘%’ はリマインダー演算子ですが、言語によっては (例えば <a href="https://en.wikipedia.org/wiki/Modulo_operation#In_programming_languages">Python や Perl</a> では) モジュロ演算子になります。正の数同士の場合は、この 2 つの値は等価ですが、被除数と除数が異なる符号の場合は結果が異なります。 JavaScript でモジュロを得るには、 <code>a % n</code> の代わりに <code>((a % n ) + n ) % n</code> を使用してください。</p> - -<h2 id="Syntax">構文</h2> - -<pre class="brush: js notranslate"><strong>演算子:</strong> <var>var1</var> % <var>var2</var> -</pre> - -<h2 id="Examples">例</h2> - -<h3 id="Remainder_with_positive_dividend">正の値の剰余</h3> - -<pre class="brush: js notranslate"> 12 % 5 // 2 - 1 % -2 // 1 - 1 % 2 // 1 - 2 % 3 // 2 -5.5 % 2 // 1.5 -</pre> - -<h3 id="Remainder_with_negative_dividend">負の値の剰余</h3> - -<pre class="brush: js notranslate">-12 % 5 // -2 --1 % 2 // -1 --4 % 2 // -0</pre> - -<h3 id="Remainder_with_NaN">NaN の剰余</h3> - -<pre class="brush: js notranslate">NaN % 2 // NaN</pre> - -<h3 id="Remainder_with_Infinity">無限大の剰余</h3> - -<pre class="brush: js notranslate">Infinity % 2 // NaN -Infinity % 0 // NaN -Infinity % Infinity // NaN -</pre> - -<h2 id="Specifications">仕様書</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-multiplicative-operators', 'Remainder operator')}} - </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.remainder")}}</p> - -<h2 id="See_also">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/remainder/index.md b/files/ja/web/javascript/reference/operators/remainder/index.md new file mode 100644 index 0000000000..9ca1a6046a --- /dev/null +++ b/files/ja/web/javascript/reference/operators/remainder/index.md @@ -0,0 +1,80 @@ +--- +title: 剰余 (%) +slug: Web/JavaScript/Reference/Operators/Remainder +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.remainder +translation_of: Web/JavaScript/Reference/Operators/Remainder +--- +{{jsSidebar("Operators")}} + +剰余演算子 (`%`) は、1 つ目のオペランドが 2 つ目のオペランドで除算されたときに残った剰余を返します。これは常に被除数の符号を取ります。 + +{{EmbedInteractiveExample("pages/js/expressions-remainder.html")}} + +なお、多くの言語では ‘%’ はリマインダー演算子ですが、言語によっては (例えば [Python や Perl](https://en.wikipedia.org/wiki/Modulo_operation#In_programming_languages) では) モジュロ演算子になります。正の数同士の場合は、この 2 つの値は等価ですが、被除数と除数が異なる符号の場合は結果が異なります。 JavaScript でモジュロを得るには、 `a % n` の代わりに `((a % n ) + n ) % n` を使用してください。 + +## 構文 + +```js +x % y +``` + +## 例 + +### 正の値の剰余 + +```js + 12 % 5 // 2 + 1 % -2 // 1 + 1 % 2 // 1 + 2 % 3 // 2 +5.5 % 2 // 1.5 +``` + +### 負の値の剰余 + +```js +-12 % 5 // -2 +-1 % 2 // -1 +-4 % 2 // -0 +``` + +### NaN の剰余 + +```js +NaN % 2 // NaN +``` + +### 無限大の剰余 + +```js +Infinity % 2 // NaN +Infinity % 0 // NaN +Infinity % Infinity // NaN +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) +- [Remainder operator vs. modulo operator](https://2ality.com/2019/08/remainder-vs-modulo.html) +- [Mod and Remainder are not the Same](https://rob.conery.io/2018/08/21/mod-and-remainder-are-not-the-same/) diff --git a/files/ja/web/javascript/reference/operators/remainder_assignment/index.html b/files/ja/web/javascript/reference/operators/remainder_assignment/index.html deleted file mode 100644 index c70fc20598..0000000000 --- a/files/ja/web/javascript/reference/operators/remainder_assignment/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 剰余代入 (%=) -slug: Web/JavaScript/Reference/Operators/Remainder_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Remainder_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>剰余代入演算子 (<code>%=</code>) は、変数を右辺のオペランドの値で除算し、剰余を変数に代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-remainder-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x %= y -<strong>Meaning:</strong> x = x % y</pre> - -<h2 id="例">例</h2> - -<h3 id="剰余代入の使用">剰余代入の使用</h3> - -<pre class="brush: js notranslate">// 以下の変数を想定 -// bar = 5 - -bar %= 2 // 1 -bar %= 'foo' // NaN -bar %= 0 // NaN</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.remainder_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/remainder_assignment/index.md b/files/ja/web/javascript/reference/operators/remainder_assignment/index.md new file mode 100644 index 0000000000..c518fd7989 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/remainder_assignment/index.md @@ -0,0 +1,49 @@ +--- +title: 剰余代入 (%=) +slug: Web/JavaScript/Reference/Operators/Remainder_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.remainder_assignment +translation_of: Web/JavaScript/Reference/Operators/Remainder_assignment +--- +{{jsSidebar("Operators")}} + +剰余代入演算子 (`%=`) は、変数を右辺のオペランドの値で除算し、剰余を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-remainder-assignment.html")}} + +## 構文 + +```js +x %= y // x = x % y +``` + +## 例 + +### 剰余代入の使用 + +```js +// 以下の変数を想定 +// bar = 5 + +bar %= 2 // 1 +bar %= 'foo' // NaN +bar %= 0 // NaN +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) diff --git a/files/ja/web/javascript/reference/operators/right_shift/index.html b/files/ja/web/javascript/reference/operators/right_shift/index.html deleted file mode 100644 index fa01116c74..0000000000 --- a/files/ja/web/javascript/reference/operators/right_shift/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 右シフト (>>) -slug: Web/JavaScript/Reference/Operators/Right_shift -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Right_shift ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>右シフト演算子 (<code>>></code>)</strong> (ゼロ埋め右シフト) は、1つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。最も左のビットをコピーしながらずれて入ります。最も左のビットが以前の最も左のビットと同じになるため、符号ビット (最も左のビット) は変化しません。よって「符号維持」という名前です。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-right-shift.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><code><var>a</var> >> <var>b</var></code> -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>この演算子は、1つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。最も左のビットをコピーしながらずれて入ります。最も左のビットが以前の最も左のビットと同じになるため、符号ビット (最も左のビット) は変化しません。よって「符号維持」という名前です。</p> - -<p>例えば、 <code>9 >>> 2</code> は 2 となります。</p> - -<pre class="brush: js notranslate">. 9 (10進数): 00000000000000000000000000001001 (2進数) - -------------------------------- -9 >>> 2 (10進数): 00000000000000000000000000000010 (2進数) = 2 (10進数) -</pre> - -<p>同様に、 <code>-9 >> 2</code> は符号が保存されるため、 <code>-3</code> になります。</p> - -<pre class="brush: js notranslate">. -9 (10進数): 11111111111111111111111111110111 (2進数) - -------------------------------- --9 >> 2 (10進数): 11111111111111111111111111111101 (2進数) = -3 (10進数) -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_right_shift" name="Using_right_shift">右シフトの使用</h3> - -<pre class="brush: js notranslate"> 9 >> 2; // 2 --9 >> 2; // -3 -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.right_shift")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise">JavaScript ガイドのビット毎演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment">右シフト代入演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/right_shift/index.md b/files/ja/web/javascript/reference/operators/right_shift/index.md new file mode 100644 index 0000000000..ced5e93c2b --- /dev/null +++ b/files/ja/web/javascript/reference/operators/right_shift/index.md @@ -0,0 +1,65 @@ +--- +title: 右シフト (>>) +slug: Web/JavaScript/Reference/Operators/Right_shift +tags: + - ビット演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.right_shift +translation_of: Web/JavaScript/Reference/Operators/Right_shift +--- +{{jsSidebar("Operators")}} + +**右シフト演算子 (`>>`)** は、1つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。最も左のビットをコピーしながらずれて入ります。最も左のビットが以前の最も左のビットと同じになるため、符号ビット (最も左のビット) は変化しません。よって「符号維持」という名前です。 + +{{EmbedInteractiveExample("pages/js/expressions-right-shift.html")}} + +## 構文 + +```js +a >> b +``` + +## 解説 + +この演算子は、1 つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。最も左のビットをコピーしながらずれて入ります。最も左のビットが以前の最も左のビットと同じになるため、符号ビット (最も左のビット) は変化しません。よって「符号維持」という名前です。 + +例えば、 `9 >> 2` は 2 となります。 + +```js +. 9 (10 進数): 00000000000000000000000000001001 (2 進数) + -------------------------------- +9 >> 2 (10 進数): 00000000000000000000000000000010 (2 進数) = 2 (10 進数) +``` + +同様に、 `-9 >> 2` は符号が保存されるため、 `-3` になります。 + +```js +. -9 (10 進数): 11111111111111111111111111110111 (2 進数) + -------------------------------- +-9 >> 2 (10 進数): 11111111111111111111111111111101 (2 進数) = -3 (10 進数) +``` + +## 例 + +### 右シフトの使用 + +```js + 9 >> 2; // 2 +-9 >> 2; // -3 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビット演算子 (JavaScript ガイド)](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [右シフト代入演算子](/ja/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment) diff --git a/files/ja/web/javascript/reference/operators/right_shift_assignment/index.html b/files/ja/web/javascript/reference/operators/right_shift_assignment/index.html deleted file mode 100644 index ba48bb625b..0000000000 --- a/files/ja/web/javascript/reference/operators/right_shift_assignment/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 右シフト代入 (>>=) -slug: Web/JavaScript/Reference/Operators/Right_shift_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Right_shift_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>右シフト代入演算子 (<code>>>=</code>) は、指定された量のビットを右に移動し、結果を変数に代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-right-shift-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x >>= y -<strong>Meaning:</strong> x = x >> y</pre> - -<h2 id="例">例</h2> - -<h3 id="右シフト代入の使用">右シフト代入の使用</h3> - -<pre class="brush: js notranslate">let a = 5; // (00000000000000000000000000000101) -a >>= 2; // 1 (00000000000000000000000000000001) - -let b = -5; // (-00000000000000000000000000000101) -b >>= 2; // -2 (-00000000000000000000000000000010)</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> - - - -<p>{{Compat("javascript.operators.right_shift_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Right_shift">右シフト演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/right_shift_assignment/index.md b/files/ja/web/javascript/reference/operators/right_shift_assignment/index.md new file mode 100644 index 0000000000..fb30c2d912 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/right_shift_assignment/index.md @@ -0,0 +1,48 @@ +--- +title: 右シフト代入 (>>=) +slug: Web/JavaScript/Reference/Operators/Right_shift_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.right_shift_assignment +translation_of: Web/JavaScript/Reference/Operators/Right_shift_assignment +--- +{{jsSidebar("Operators")}} + +右シフト代入演算子 (`>>=`) は、指定された数だけビットを右に移動し、結果を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-right-shift-assignment.html")}} + +## 構文 + +```js +x >>= y // x = x >> y +``` + +## 例 + +### 右シフト代入の使用 + +```js +let a = 5; // (00000000000000000000000000000101) +a >>= 2; // 1 (00000000000000000000000000000001) + +let b = -5; // (-00000000000000000000000000000101) +b >>= 2; // -2 (-00000000000000000000000000000010) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [右シフト演算子](/ja/docs/Web/JavaScript/Reference/Operators/Right_shift) diff --git a/files/ja/web/javascript/reference/operators/spread_syntax/index.html b/files/ja/web/javascript/reference/operators/spread_syntax/index.html deleted file mode 100644 index 4de5455ce3..0000000000 --- a/files/ja/web/javascript/reference/operators/spread_syntax/index.html +++ /dev/null @@ -1,256 +0,0 @@ ---- -title: スプレッド構文 -slug: Web/JavaScript/Reference/Operators/Spread_syntax -tags: - - ECMAScript 2015 - - Iterator - - JavaScript - - Language feature - - Reference - - イテレーター - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Spread_syntax ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>スプレッド構文</strong> (<code>...</code>) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値のペア (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<p>関数呼び出しの場合:</p> - -<pre class="syntaxbox notranslate"><var>myFunction</var>(...<var>iterableObj</var>); -</pre> - -<p>配列リテラルや文字列の場合:</p> - -<pre class="syntaxbox notranslate">[...<var>iterableObj</var>, '4', 'five', 6];</pre> - -<p>オブジェクトリテラルの場合 (ECMAScript 2018 の新機能)</p> - -<pre class="syntaxbox notranslate">let <var>objClone</var> = { ...<var>obj</var> };</pre> - -<h2 id="Rest_syntax_parameters" name="Rest_syntax_parameters">残余構文 (引数)</h2> - -<p>残余構文はスプレッド構文と外見がよく似ていますが、配列やオブジェクトの<em>分割代入</em>に使われます。</p> - -<p>こちらはスプレッド構文とは逆の働きといえます。スプレッド構文が要素を展開するのに対して、残余構文は複数の要素を集約して 1 つのオブジェクトに「濃縮」します。{{jsxref("Functions/rest_parameters", "残余引数", "", 1)}}を参照してください。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Spread_in_function_calls" name="Spread_in_function_calls">関数呼び出しでの展開</h3> - -<h4 id="Replace_apply" name="Replace_apply">apply() を置き換える</h4> - -<p>配列の要素を引数にして関数を呼び出すには {{jsxref("Function.prototype.apply()")}} を使うのが一般的です。</p> - -<pre class="brush: js notranslate">function myFunction(x, y, z) { } -let args = [0, 1, 2]; -myFunction.apply(null, args);</pre> - -<p>スプレッド構文を使うと、上のコードは次のように書くことができます。</p> - -<pre class="brush: js notranslate">function myFunction(x, y, z) { } -let args = [0, 1, 2]; -myFunction(...args);</pre> - -<p>スプレッド構文は、引数の何番目でも使えます。また、複数回使えます。</p> - -<pre class="brush: js notranslate">function myFunction(v, w, x, y, z) { } -let args = [0, 1]; -myFunction(-1, ...args, 2, ...[3]);</pre> - -<h4 id="Apply_for_new" name="Apply_for_new">new 演算子の適用</h4> - -<p>{{jsxref("Operators/new", "new")}} によってコンストラクターを呼び出すとき、配列と <code>apply()</code> を<strong>直接</strong>使用することはできません (<code>apply()</code> は <code>[[Call]]</code> を実行するのであり <code>[[Construct]]</code> ではない)。ただし、配列はスプレッド構文のおかげで簡単に <code>new</code> を使用することができます。</p> - -<pre class="brush: js notranslate">let dateFields = [1970, 0, 1]; // 1 Jan 1970 -let d = new Date(...dateFields); -</pre> - -<p>スプレッド構文を使わずに同じ結果を得るには、専用の関数を使う<strong>間接的</strong>な手段を取らざるをえません。</p> - -<pre class="brush: js notranslate">function applyAndNew(constructor, args) { - function partial () { - return constructor.apply(this, args); - }; - if (typeof constructor.prototype === "object") { - partial.prototype = Object.create(constructor.prototype); - } - return partial; -} - - -function myConstructor () { - console.log("arguments.length: " + arguments.length); - console.log(arguments); - this.prop1="val1"; - this.prop2="val2"; -}; - -let myArguments = ["hi", "how", "are", "you", "mr", null]; -let myConstructorWithArguments = applyAndNew(myConstructor, myArguments); - -console.log(new myConstructorWithArguments); -// (internal log of myConstructor): arguments.length: 6 -// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null] -// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre> - -<h3 id="Spread_in_array_literals" name="Spread_in_array_literals">配列リテラルでのスプレッド構文</h3> - -<h4 id="A_more_powerful_array_literal" name="A_more_powerful_array_literal">より強力な配列リテラル</h4> - -<p>スプレッド構文を使用しない場合、既存の配列を一部として使用して新しい配列を作成するには、配列リテラル構文は十分ではなく、{{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}} などを組み合わせて使う高圧的なコードを使用しなければなりません。</p> - -<pre class="brush: js notranslate">let parts = ['shoulders', 'knees']; -let lyrics = ['head', ...parts, 'and', 'toes']; -// ["head", "shoulders", "knees", "and", "toes"] -</pre> - -<p>関数の引数と同様に、<code>...</code> は配列リテラルのどこでも、何回でも使えます。</p> - -<h4 id="Copy_an_array" name="Copy_an_array">配列を複製する</h4> - -<pre class="brush: js notranslate">let arr = [1, 2, 3]; -let arr2 = [...arr]; // arr.slice() のような動きです - -arr2.push(4); -// arr2 は [1, 2, 3, 4] になります -// arr は変更されません -</pre> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> コピーは 1 段階の深さで行われます。そのため、次の例のような多次元配列のようなオブジェクトをコピーする場合には適さないでしょう。({{jsxref("Object.assign()")}} についても同じことが言えます。)</p> - -<pre class="brush: js example-bad notranslate">let a = [[1], [2], [3]]; -let b = [...a]; - -b.shift().shift(); -// 1 - -// あらら、配列 'a' も影響を受けちゃった。 -a -// [[], [2], [3]] -</pre> -</div> - -<h4 id="A_better_way_to_concatenate_arrays" name="A_better_way_to_concatenate_arrays">配列を連結するより良い方法</h4> - -<p>ある配列を既存の配列の末尾に連結するには、{{jsxref("Array.prototype.concat()")}} がよく使われます。スプレッド構文を使用しないと、これは次のように行われます。</p> - -<pre class="brush: js notranslate">let arr1 = [0, 1, 2]; -let arr2 = [3, 4, 5]; - -// arr2 のすべての要素を arr1 に追加する -arr1 = arr1.concat(arr2);</pre> - -<p>スプレッド構文を使うと、次のように書けます。</p> - -<pre class="brush: js notranslate">let arr1 = [0, 1, 2]; -let arr2 = [3, 4, 5]; - -arr1 = [...arr1, ...arr2]; -// arr1 は [0, 1, 2, 3, 4, 5] となる -// 注: これ以外に const を使用すると、TypeError (invalid assignment) が発生します -</pre> - -<p>{{jsxref("Array.prototype.unshift()")}} は、値の配列を既存の配列の先頭に挿入するためによく使われます。スプレッド構文を使用しないと、これは次のように行われます。</p> - -<pre class="brush: js notranslate">let arr1 = [0, 1, 2]; -let arr2 = [3, 4, 5]; - -// arr2 のすべての要素を arr1 へ移植します -Array.prototype.unshift.apply(arr1, arr2) - -// arr1 is now [3, 4, 5, 0, 1, 2]</pre> - -<p>スプレッド構文を使うと、次のようになります。</p> - -<pre class="brush: js notranslate">let arr1 = [0, 1, 2]; -let arr2 = [3, 4, 5]; - -arr1 = [...arr2, ...arr1]; -// arr1 is now [3, 4, 5, 0, 1, 2] -</pre> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> <code>unshift()</code> とは異なり、これは新しい <code>arr1</code> を生成しており、その場では元の <code>arr1</code> を変更しません</p> -</div> - -<h3 id="Spread_in_object_literals" name="Spread_in_object_literals">Object リテラルで使う</h3> - -<p><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> proposal (ES2018) では、{{jsxref("Operators/Object_initializer", "オブジェクトリテラル", 1)}}でのスプレッド構文が追加されています。スプレッド構文の対象となるオブジェクトの列挙可能なプロパティを、新しいオブジェクトにコピーします。</p> - -<p>浅いコピー (プロトタイプを除く) の作成や、マージしたオブジェクトの作成が {{jsxref("Object.assign()")}} を使うよりも短いコードで書けます。</p> - -<pre class="brush: js notranslate">let obj1 = { foo: 'bar', x: 42 }; -let obj2 = { foo: 'baz', y: 13 }; - -let clonedObj = { ...obj1 }; -// Object { foo: "bar", x: 42 } - -let mergedObj = { ...obj1, ...obj2 }; -// Object { foo: "baz", x: 42, y: 13 }</pre> - -<p>{{jsxref("Object.assign()")}} は{{jsxref("Functions/set", "セッター")}}を起動しますが、スプレッド構文は起動しないことに注意してください。</p> - -<p>スプレッド構文は {{jsxref("Object.assign()")}} 関数を置き換えたり模倣することはできないことに注意してください。</p> - -<pre class="brush: js notranslate">let obj1 = { foo: 'bar', x: 42 }; -let obj2 = { foo: 'baz', y: 13 }; -const merge = ( ...objects ) => ( { ...objects } ); - -let mergedObj1 = merge (obj1, obj2); -// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } - -let mergedObj2 = merge ({}, obj1, obj2); -// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre> - -<p>上記の例では、スプレッド構文は期待通りに動作しません。残りの引数があるため、引数の<em>配列</em>がオブジェクトリテラルにとして展開されます。</p> - -<h3 id="Only_for_iterables" name="Only_for_iterables">反復可能オブジェクトにのみ利用可能</h3> - -<p>オブジェクト自体は反復可能ではありませんが、配列の中で使用したり、<code>map()</code>, <code>reduce()</code>, <code>assign()</code> などの反復関数と共に使用したりすることで反復可能になります。2 つのオブジェクトをスプレッド演算子で結合する場合は、結合時に別の反復処理関数を使用することを前提としています。</p> - -<p>スプレッド構文 (スプレッドプロパティの場合を除く) は、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator">反復可能</a>オブジェクトにのみ適用できます。</p> - -<pre class="brush: js notranslate">let obj = {'key1': 'value1'}; -let array = [...obj]; // TypeError: obj is not iterable -</pre> - -<h3 id="Spread_with_many_values" name="Spread_with_many_values">大量の値を展開する場合</h3> - -<p>JavaScript エンジンには、引数の個数に上限があります。関数呼び出しでのスプレッド構文では、引数の個数がその上限を超えてしまう可能性に留意してください。詳細は {{jsxref("Function.prototype.apply", "apply()")}} のページを参照してください。</p> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-array-initializer', 'Array initializer')}}</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object initializer')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.spread")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{jsxref("Functions/rest_parameters", "残余引数", "", 1)}} (also ‘<code>...</code>’)</li> - <li>{{jsxref("Function.prototype.apply()")}} (also ‘<code>...</code>’)</li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/spread_syntax/index.md b/files/ja/web/javascript/reference/operators/spread_syntax/index.md new file mode 100644 index 0000000000..c8a2a5f71a --- /dev/null +++ b/files/ja/web/javascript/reference/operators/spread_syntax/index.md @@ -0,0 +1,286 @@ +--- +title: スプレッド構文 +slug: Web/JavaScript/Reference/Operators/Spread_syntax +tags: + - ECMAScript 2015 + - イテレーター + - JavaScript + - 言語機能 + - Reference +browser-compat: javascript.operators.spread +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +{{jsSidebar("Operators")}} + +**スプレッド構文** (`...`) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値の組 (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。 + +{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}} + +## 解説 + +スプレッド構文は、オブジェクトや配列のすべての要素を何らかのリストに入れる必要がある場合に使用することができます。 + +上記の例では、定義された関数は、引数として `x`、`y`、`z` を受け取り、これらの値の合計を返します。配列の値も定義されています。 + +この関数を呼び出す際には、スプレッド構文と配列名 — `...numbers` を使って、配列内のすべての値を渡します。 + +配列に 3 つ以上の数値が含まれていた場合 (`[1, 2, 3, 4]` など)、4 つすべてが渡されることを除けば、それでも問題なく動作しますが、次のように関数にさらに引数を追加しない限り、最初の 3 つだけが使用されます。 + +```js +function sum(x, y, z, n) { + return x + y + z + n; +} +``` + +上記の例はやや柔軟性に欠けます。スプレッド構文の真価は、オブジェクトや配列などに含まれる要素の数に関係なく、同じ値で動作することにあります。 + +一般的には、ローカルデータストアに新しいアイテムを追加したり、保存されているすべてのアイテムに新しく追加されたアイテムを加えて表示したりする場合に使用されます。この種の操作を非常にシンプルに表すと、次のようになります。 + +```js +let numberStore = [0, 1, 2]; +let newNumber = 12; +numberStore = [...numberStore, newNumber]; +``` + +上記の例では、最後の行を何度でも再実行して、配列の最後に 12 を追加し続けることができます。 + +## 構文 + +関数呼び出しの場合: + +```js +myFunction(...iterableObj); // iterableObj のすべての要素を関数 myFunction の引数として渡す +``` + +配列リテラルや文字列の場合: + +```js +[...iterableObj, '4', 'five', 6]; // iterableObj のすべての要素を挿入することで、2 つの配列を組み合わせる +``` + +オブジェクトリテラルの場合 (ECMAScript 2018 の新機能) + +```js +let objClone = { ...obj }; // オブジェクトのすべてのキーと値の組を渡す +``` + +## 残余構文 (引数) + +残余構文はスプレッド構文と外見がよく似ていますが、こちらはスプレッド構文とは逆の働きといえます。スプレッド構文が要素を展開するのに対して、残余構文は複数の要素を集約して 1 つのオブジェクトに「濃縮」します。{{jsxref("Functions/rest_parameters", "残余引数", "", 1)}}を参照してください。 + +## 例 + +### 関数呼び出しでの展開 + +#### apply() を置き換える + +配列の要素を引数にして関数を呼び出すには {{jsxref("Function.prototype.apply()")}} を使うのが一般的です。 + +```js +function myFunction(x, y, z) { } +let args = [0, 1, 2]; +myFunction.apply(null, args); +``` + +スプレッド構文を使うと、上のコードは次のように書くことができます。 + +```js +function myFunction(x, y, z) { } +let args = [0, 1, 2]; +myFunction(...args); +``` + +スプレッド構文は、引数リストのどの引数でも使用でき、またスプレッド構文は複数回使用することもできます。 + +```js +function myFunction(v, w, x, y, z) { } +let args = [0, 1]; +myFunction(-1, ...args, 2, ...[3]); +``` + +#### new 演算子の適用 + +{{jsxref("Operators/new", "new")}} によってコンストラクターを呼び出すとき、配列と `apply()` を**直接**使用することはできません (`apply()` は `[[Call]]` を実行するのであり `[[Construct]]` ではない)。ただし、配列はスプレッド構文のおかげで簡単に `new` を使用することができます。 + +```js +let dateFields = [1970, 0, 1]; // 1 Jan 1970 +let d = new Date(...dateFields); +``` + +スプレッド構文を使わずに同じ結果を得るには、専用の関数を使う**間接的**な手段を取らざるをえません。 + +```js +function applyAndNew(constructor, args) { + function partial () { + return constructor.apply(this, args); + }; + if (typeof constructor.prototype === "object") { + partial.prototype = Object.create(constructor.prototype); + } + return partial; +} + +function myConstructor () { + console.log("arguments.length: " + arguments.length); + console.log(arguments); + this.prop1="val1"; + this.prop2="val2"; +}; + +let myArguments = ["hi", "how", "are", "you", "mr", null]; +let myConstructorWithArguments = applyAndNew(myConstructor, myArguments); + +console.log(new myConstructorWithArguments); +// (internal log of myConstructor): arguments.length: 6 +// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null] +// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"} +``` + +### 配列リテラルでのスプレッド構文 + +#### より強力な配列リテラル + +スプレッド構文を使用しない場合、既存の配列を一部として使用して新しい配列を作成するには、配列リテラル構文は十分ではなく、{{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}} などを組み合わせて使う高圧的なコードを使用しなければなりません。 + +```js +let parts = ['shoulders', 'knees']; +let lyrics = ['head', ...parts, 'and', 'toes']; +// ["head", "shoulders", "knees", "and", "toes"] +``` + +関数の引数と同様に、`...` は配列リテラルのどこでも、何回でも使えます。 + +#### 配列を複製する + +```js +let arr = [1, 2, 3]; +let arr2 = [...arr]; // arr.slice() のような動きです + +arr2.push(4); +// arr2 は [1, 2, 3, 4] になります +// arr は変更されません +``` + +> **Note:** コピーは 1 段階の深さで行われます。そのため、次の例のような多次元配列のようなオブジェクトをコピーする場合には適さないでしょう。({{jsxref("Object.assign()")}} についても同じことが言えます。) +> +> ```js example-bad +> let a = [[1], [2], [3]]; +> let b = [...a]; +> +> b.shift().shift(); +> // 1 +> +> // しまった。 'a' も影響を受けてしまった。 +> a +> // [[], [2], [3]] +> ``` + +#### 配列を連結するより良い方法 + +ある配列を既存の配列の末尾に連結するには、{{jsxref("Array.prototype.concat()")}} がよく使われます。スプレッド構文を使用しないと、これは次のように行われます。 + +```js +let arr1 = [0, 1, 2]; +let arr2 = [3, 4, 5]; + +// arr2 のすべての要素を arr1 に追加する +arr1 = arr1.concat(arr2); +``` + +スプレッド構文を使うと、次のように書けます。 + +```js +let arr1 = [0, 1, 2]; +let arr2 = [3, 4, 5]; + +arr1 = [...arr1, ...arr2]; +// arr1 は [0, 1, 2, 3, 4, 5] となる +// 注: これ以外に const を使用すると、TypeError (invalid assignment) が発生します +``` + +{{jsxref("Array.prototype.unshift()")}} は、値の配列を既存の配列の先頭に挿入するためによく使われます。スプレッド構文を使用しないと、これは次のように行われます。 + +```js +let arr1 = [0, 1, 2]; +let arr2 = [3, 4, 5]; + +// arr2 のすべての要素を arr1 へ移植します +Array.prototype.unshift.apply(arr1, arr2) + +// arr1 is now [3, 4, 5, 0, 1, 2]</pre> +``` + +スプレッド構文を使うと、次のようになります。 + +```js +let arr1 = [0, 1, 2]; +let arr2 = [3, 4, 5]; + +arr1 = [...arr2, ...arr1]; +// arr1 is now [3, 4, 5, 0, 1, 2] +``` + +> **Note:** `unshift()` とは異なり、これは新しい `arr1` を生成しており、その場では元の `arr1` を変更しません。 + +### オブジェクトリテラルでのスプレッド構文 + +[Rest/Spread Properties for ECMAScript](https://github.com/tc39/proposal-object-rest-spread) proposal (ES2018) では、{{jsxref("Operators/Object_initializer", "オブジェクトリテラル", 1)}}でのスプレッド構文が追加されています。スプレッド構文の対象となるオブジェクトの列挙可能なプロパティを、新しいオブジェクトにコピーします。 + +浅いコピー (プロトタイプを除く) の作成や、マージしたオブジェクトの作成が {{jsxref("Object.assign()")}} を使うよりも短いコードで書けます。 + +```js +let obj1 = { foo: 'bar', x: 42 }; +let obj2 = { foo: 'baz', y: 13 }; + +let clonedObj = { ...obj1 }; +// Object { foo: "bar", x: 42 } + +let mergedObj = { ...obj1, ...obj2 }; +// Object { foo: "baz", x: 42, y: 13 } +``` + +{{jsxref("Object.assign()")}} は{{jsxref("Functions/set", "セッター")}}を起動しますが、スプレッド構文は起動しないことに注意してください。 + +スプレッド構文は {{jsxref("Object.assign()")}} 関数を置き換えたり模倣することはできないことに注意してください。 + +```js +let obj1 = { foo: 'bar', x: 42 }; +let obj2 = { foo: 'baz', y: 13 }; +const merge = ( ...objects ) => ( { ...objects } ); + +let mergedObj1 = merge (obj1, obj2); +// Object { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } + +let mergedObj2 = merge ({}, obj1, obj2); +// Object { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } } +``` + +上記の例では、スプレッド構文は期待通りに動作しません。残りの引数があるため、引数の*配列*がオブジェクトリテラルにとして展開されます。 + +### 反復可能オブジェクトにのみ利用可能 + +オブジェクト自体は反復可能ではありませんが、配列の中で使用したり、`map()`, `reduce()`, `assign()` などの反復関数と共に使用したりすることで反復可能になります。2 つのオブジェクトをスプレッド演算子で結合する場合は、結合時に別の反復処理関数を使用することを前提としています。 + +スプレッド構文 (スプレッドプロパティの場合を除く) は、[反復可能](/ja/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator)オブジェクトにのみ適用できます。 + +```js +let obj = {'key1': 'value1'}; +let array = [...obj]; // TypeError: obj is not iterable +``` + +### 大量の値を展開する場合 + +JavaScript エンジンには、引数の個数に上限があります。関数呼び出しでのスプレッド構文では、引数の個数がその上限を超えてしまう可能性に留意してください。詳細は {{jsxref("Function.prototype.apply", "apply()")}} のページを参照してください。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Functions/rest_parameters", "残余引数", "", 1)}} (こちらも ‘`...`’) +- {{jsxref("Function.prototype.apply()")}} (こちらも ‘`...`’) diff --git a/files/ja/web/javascript/reference/operators/strict_equality/index.html b/files/ja/web/javascript/reference/operators/strict_equality/index.html deleted file mode 100644 index 436a6d0899..0000000000 --- a/files/ja/web/javascript/reference/operators/strict_equality/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: 厳密等価 (===) -slug: Web/JavaScript/Reference/Operators/Strict_equality -tags: - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Strict_equality ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>厳密等価演算子 (<code>===</code>) は、二つのオペランドが等しいことを検査し、論理値で結果を返します <a href="/ja/docs/Web/JavaScript/Reference/Operators/Equality">等価</a>演算子とは異なり、厳密等価演算子はオペランドの型が異なる場合、常に異なるものと判断します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">x === y</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>厳密等価演算子 (<code>===</code> および <code>!==</code>) は、<a class="external external-icon" href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6" rel="noopener">厳密等価比較アルゴリズム</a>を使用して二つのオペランドを比較します。</p> - -<ul> - <li>オペランドの型が異なる場合は、 <code>false</code> を返します。</li> - <li>両方のオペランドがオブジェクトである場合、同じオブジェクトを指している場合に限り <code>true</code> を返します。</li> - <li>両方のオペランドが <code>null</code> または両方のオペランドが <code>undefined</code> であった場合は <code>true</code> を返します。</li> - <li>どちらかのオペランドが <code>NaN</code> であった場合は <code>false</code> を返します。</li> - <li>それ以外の場合は、二つのオペランドの値を比較します。 - <ul> - <li>数値型は同じ値の数値である必要があります。 <code>+0</code> と <code>-0</code> は同じ値と見なされます。</li> - <li>文字列型は同じ文字が同じ順序で並んでいる必要があります。</li> - <li>論理型は両方が <code>true</code> であるか両方が <code>false</code> である必要があります。</li> - </ul> - </li> -</ul> - -<p>この演算子と<a href="/ja/docs/Web/JavaScript/Reference/Operators/Equality">等価</a> (<code>==</code>) 演算子の最も顕著な違いは、オペランドの型が異なる場合、 <code>==</code> 演算子は比較前に同じ型に変換しようとすることです。</p> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Comparing_operands_of_the_same_type" name="Comparing_operands_of_the_same_type">オペランドが同じ型である場合の比較</h3> - -<pre class="brush: js notranslate">console.log("hello" === "hello"); // true -console.log("hello" === "hola"); // false - -console.log(3 === 3); // true -console.log(3 === 4); // false - -console.log(true === true); // true -console.log(true === false); // false - -console.log(null === null); // true</pre> - -<h3 id="Comparing_operands_of_different_types" name="Comparing_operands_of_different_types">オペランドが異なる方である場合の比較</h3> - -<pre class="brush: js notranslate">console.log("3" === 3); // false - -console.log(true === 1); // false - -console.log(null === undefined); // false</pre> - -<h3 id="オブジェクトの比較">オブジェクトの比較</h3> - -<pre class="brush: js notranslate">const object1 = { - name: "hello" -} - -const object2 = { - name: "hello" -} - -console.log(object1 === object2); // false -console.log(object1 === object1); // true</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.strict_inequality")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Equality">等価演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Inequality">不等価演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/strict_equality/index.md b/files/ja/web/javascript/reference/operators/strict_equality/index.md new file mode 100644 index 0000000000..81ed20e794 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/strict_equality/index.md @@ -0,0 +1,94 @@ +--- +title: 厳密等価 (===) +slug: Web/JavaScript/Reference/Operators/Strict_equality +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.strict_equality +translation_of: Web/JavaScript/Reference/Operators/Strict_equality +--- +{{jsSidebar("Operators")}} + +厳密等価演算子 (`===`) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。[等価](/ja/docs/Web/JavaScript/Reference/Operators/Equality)演算子とは異なり、厳密等価演算子はオペランドの型が異なる場合、常に異なるものと判断します。 + +{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}} + +## 構文 + +```js +x === y +``` + +## 解説 + +厳密等価演算子 (`===` および `!==`) は、[厳密等価比較アルゴリズム](https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6)を使用して 2 つのオペランドを比較します。 + +- オペランドの型が異なる場合は、 `false` を返します。 +- 両方のオペランドがオブジェクトである場合、同じオブジェクトを指している場合に限り `true` を返します。 +- 両方のオペランドが `null` または両方のオペランドが `undefined` であった場合は `true` を返します。 +- どちらかのオペランドが `NaN` であった場合は `false` を返します。 +- それ以外の場合は、2 つのオペランドの値を比較します。 + + - 数値型は同じ値の数値である必要があります。 `+0` と `-0` は同じ値と見なされます。 + - 文字列型は同じ文字が同じ順序で並んでいる必要があります。 + - 論理型は両方が `true` であるか両方が `false` である必要があります。 + +この演算子と[等価](/ja/docs/Web/JavaScript/Reference/Operators/Equality) (`==`) 演算子の最も顕著な違いは、オペランドの型が異なる場合、 `==` 演算子は比較前に同じ型に変換しようとすることです。 + +## 例 + +### オペランドが同じ型である場合の比較 + +```js +console.log("hello" === "hello"); // true +console.log("hello" === "hola"); // false + +console.log(3 === 3); // true +console.log(3 === 4); // false + +console.log(true === true); // true +console.log(true === false); // false + +console.log(null === null); // true +``` + +### オペランドが異なる型である場合の比較 + +```js +console.log("3" === 3); // false + +console.log(true === 1); // false + +console.log(null === undefined); // false +``` + +### オブジェクトの比較 + +```js +const object1 = { + name: "hello" +} + +const object2 = { + name: "hello" +} + +console.log(object1 === object2); // false +console.log(object1 === object1); // true +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Equality) +- [不等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Inequality) +- [厳密不等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Strict_inequality) diff --git a/files/ja/web/javascript/reference/operators/strict_inequality/index.html b/files/ja/web/javascript/reference/operators/strict_inequality/index.html deleted file mode 100644 index c74ae24677..0000000000 --- a/files/ja/web/javascript/reference/operators/strict_inequality/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: 厳密不等価 (!==) -slug: Web/JavaScript/Reference/Operators/Strict_inequality -tags: - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Strict_inequality ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>厳密不等価演算子 (<code>!==</code>) は、二つのオペランドが等しくないことを検査し、論理値で結果を返します <a href="/ja/docs/Web/JavaScript/Reference/Operators/Inequality">不等価</a>演算子とは異なり、厳密不等価演算子はオペランドの型が異なる場合、常に異なると判断します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-strict-equality.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">x !== y</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>厳密不等価演算子は、オペランドが等しくないことを検査します。これは<a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価</a>演算子の逆に当たるので、以下の2行は常に同じ結果を生み出します。</p> - -<pre class="brush: js notranslate">x !== y - -!(x === y)</pre> - -<p>比較アルゴリズムの詳細については、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価</a>演算子のページをご覧ください。</p> - -<p>厳密等価演算子とと同様に、厳密不等価演算子はオペランドの型が異なると、常に異なるものと見なします。</p> - -<pre class="brush: js notranslate">3 !== "3"; // true</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Comparing_operands_of_the_same_type" name="Comparing_operands_of_the_same_type">オペランドが同じ型である場合の比較</h3> - -<pre class="brush: js notranslate">console.log("hello" !== "hello"); // false -console.log("hello" !== "hola"); // true - -console.log(3 !== 3); // false -console.log(3 !== 4); // true - -console.log(true !== true); // false -console.log(true !== false); // true - -console.log(null !== null); // false</pre> - -<h3 id="Comparing_operands_of_different_types" name="Comparing_operands_of_different_types">オペランドが異なる方である場合の比較</h3> - -<pre class="brush: js notranslate">console.log("3" !== 3); // true - -console.log(true !== 1); // true - -console.log(null !== undefined); // true</pre> - -<h3 id="オブジェクトの比較">オブジェクトの比較</h3> - -<pre class="brush: js notranslate">const object1 = { - name: "hello" -} - -const object2 = { - name: "hello" -} - -console.log(object1 !== object2); // true -console.log(object1 !== object1); // false</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-equality-operators', 'Equality operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.strict_inequality")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Equality">等価演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Inequality">不等価演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality">厳密等価演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/strict_inequality/index.md b/files/ja/web/javascript/reference/operators/strict_inequality/index.md new file mode 100644 index 0000000000..0044e1161b --- /dev/null +++ b/files/ja/web/javascript/reference/operators/strict_inequality/index.md @@ -0,0 +1,96 @@ +--- +title: 厳密不等価 (!==) +slug: Web/JavaScript/Reference/Operators/Strict_inequality +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.strict_inequality +translation_of: Web/JavaScript/Reference/Operators/Strict_inequality +--- +{{jsSidebar("Operators")}} + +厳密不等価演算子 (`!==`) は、2 つのオペランドが等しくないことを検査し、論理値で結果を返します。[不等価](/ja/docs/Web/JavaScript/Reference/Operators/Inequality)演算子とは異なり、厳密不等価演算子はオペランドの型が異なる場合、常に異なると判断します。 + +{{EmbedInteractiveExample("pages/js/expressions-strict-inequality.html")}} + +## 構文 + +```js +x !== y +``` + +## 解説 + +厳密不等価演算子は、オペランドが等しくないことを検査します。これは[厳密等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)演算子の逆に当たるので、以下の 2 行は常に同じ結果になります。 + +```js +x !== y + +!(x === y) +``` + +比較アルゴリズムの詳細については、[厳密等価](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality)演算子のページを参照して下さい。 + +厳密等価演算子と同様に、厳密不等価演算子はオペランドの型が異なると、常に異なるものと見なします。 + +```js +3 !== "3"; // true +``` + +## 例 + +### オペランドが同じ型である場合の比較 + +```js +console.log("hello" !== "hello"); // false +console.log("hello" !== "hola"); // true + +console.log(3 !== 3); // false +console.log(3 !== 4); // true + +console.log(true !== true); // false +console.log(true !== false); // true + +console.log(null !== null); // false +``` + +### オペランドが異なる型である場合の比較 + +```js +console.log("3" !== 3); // true + +console.log(true !== 1); // true + +console.log(null !== undefined); // true +``` + +### オブジェクトの比較 + +```js +const object1 = { + name: "hello" +} + +const object2 = { + name: "hello" +} + +console.log(object1 !== object2); // true +console.log(object1 !== object1); // false +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Equality) +- [不等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Inequality) +- [厳密等価演算子](/ja/docs/Web/JavaScript/Reference/Operators/Strict_equality) diff --git a/files/ja/web/javascript/reference/operators/subtraction/index.html b/files/ja/web/javascript/reference/operators/subtraction/index.html deleted file mode 100644 index 1a02506128..0000000000 --- a/files/ja/web/javascript/reference/operators/subtraction/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: 減算 (-) -slug: Web/JavaScript/Reference/Operators/Subtraction -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Subtraction ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>減算演算子 (<code>-</code>) は2つのオペランドを減算し、それらの差を生成します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-subtraction.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> <var>x</var> - <var>y</var> -</pre> - -<h2 id="例">例</h2> - -<h3 id="数値による減算">数値による減算</h3> - -<pre class="brush: js notranslate">5 - 3 // 2 -3 - 5 // -2</pre> - -<h3 id="非数による減算">非数による減算</h3> - -<pre class="brush: js notranslate">'foo' - 3 // NaN</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-subtraction-operator-minus', 'Subtraction operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.subtraction")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/subtraction/index.md b/files/ja/web/javascript/reference/operators/subtraction/index.md new file mode 100644 index 0000000000..5e074c174c --- /dev/null +++ b/files/ja/web/javascript/reference/operators/subtraction/index.md @@ -0,0 +1,57 @@ +--- +title: 減算 (-) +slug: Web/JavaScript/Reference/Operators/Subtraction +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.subtraction +translation_of: Web/JavaScript/Reference/Operators/Subtraction +--- +{{jsSidebar("Operators")}} + +減算演算子 (`-`) は 2 つのオペランドの間で減算し、それらの差を生成します。 + +{{EmbedInteractiveExample("pages/js/expressions-subtraction.html")}} + +## 構文 + +```js +x - y +``` + +## 例 + +### 数値の減算 + +```js +5 - 3 // 2 +3 - 5 // -2 +``` + +### 非数の減算 + +```js +'foo' - 3 // NaN +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/ja/web/javascript/reference/operators/subtraction_assignment/index.html b/files/ja/web/javascript/reference/operators/subtraction_assignment/index.html deleted file mode 100644 index f44dbc8232..0000000000 --- a/files/ja/web/javascript/reference/operators/subtraction_assignment/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 減算代入 (-=) -slug: Web/JavaScript/Reference/Operators/Subtraction_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Subtraction_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>減算代入演算子 (<code>-=</code>) は、変数から右辺のオペランドの値を減算し、結果を変数に代入します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-subtraction-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x -= y -<strong>Meaning:</strong> x = x - y</pre> - -<h2 id="例">例</h2> - -<h3 id="減算代入の使用">減算代入の使用</h3> - -<pre class="brush: js notranslate">// 次の変数を想定 -// bar = 5 - -bar -= 2 // 3 -bar -= 'foo' // NaN</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.subtraction_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/subtraction_assignment/index.md b/files/ja/web/javascript/reference/operators/subtraction_assignment/index.md new file mode 100644 index 0000000000..5a0f431797 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/subtraction_assignment/index.md @@ -0,0 +1,48 @@ +--- +title: 減算代入 (-=) +slug: Web/JavaScript/Reference/Operators/Subtraction_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.subtraction_assignment +translation_of: Web/JavaScript/Reference/Operators/Subtraction_assignment +--- +{{jsSidebar("Operators")}} + +減算代入演算子 (`-=`) は、変数から右辺のオペランドの値を減算し、結果を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-subtraction-assignment.html")}} + +## 構文 + +```js +x -= y // x = x - y +``` + +## 例 + +### 減算代入の使用 + +```js +// 次の変数を想定 +// bar = 5 + +bar -= 2 // 3 +bar -= 'foo' // NaN +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) diff --git a/files/ja/web/javascript/reference/operators/this/index.html b/files/ja/web/javascript/reference/operators/this/index.html deleted file mode 100644 index 1d466424d4..0000000000 --- a/files/ja/web/javascript/reference/operators/this/index.html +++ /dev/null @@ -1,486 +0,0 @@ ---- -title: this -slug: Web/JavaScript/Reference/Operators/this -tags: - - JavaScript - - Language feature - - Operator - - Primary Expressions - - Reference - - this - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/this ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>関数の <code>this</code> キーワード</strong> は、JavaScript ではほかの言語と少々異なる動作をします。また、<a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">厳格モード</a>と非厳格モードでも違いがあります。</p> - -<p>ほとんどの場合、<code>this</code> の値はどのように関数が呼ばれたかによって決定されます（実行時結合）。これは実行時に割り当てできず、関数が呼び出されるたびに異なる可能性があります。ES5 では、関数が{{jsxref('Operators/this', "どのように呼ばれたかに関係なく <code>this</code> の値を設定する", 'The_bind_method', 1)}} {{jsxref("Function.prototype.bind()", "bind()")}} メソッドが導入され、ES2015 では、独自の <code>this</code> バインディングを行わない<a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a>が導入されました（これは包含するレキシカルコンテキストの <code>this</code> の値を保持します）。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-this.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">this</pre> - -<h3 id="Value" name="Value">値</h3> - -<p>非厳格モードでは、実行コンテキスト (グローバル、関数、eval) のプロパティで、常にオブジェクトへの参照です。厳格モードではどのような値でも取り得ます。</p> - -<h2 id="解説">解説</h2> - -<h3 id="Global_context" name="Global_context">グローバルコンテキスト</h3> - -<p>グローバル実行コンテキスト (すべての関数の外側) では、厳格モードであるかどうかにかかわらず、<code>this</code> はグローバルオブジェクトを参照します。</p> - -<pre class="brush:js notranslate">// ウェブブラウザーでは window オブジェクトもグローバルオブジェクトです。 -console.log(this === window); // true - -a = 37; -console.log(window.a); // 37 - -this.b = "MDN"; -console.log(window.b) // "MDN" -console.log(b) // "MDN" -</pre> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> コードが実行されている現在のコンテキストに関係なく、グローバルの {{jsxref("globalThis")}} プロパティを使用していつでも簡単にグローバルオブジェクトを取得できます。</p> -</div> - -<h3 id="Function_context" name="Function_context">関数コンテキスト</h3> - -<p>関数内での <code>this</code> の値は、関数の呼び出され方によって異なります。</p> - -<p>下記のコードは<a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">厳格モード</a>ではないため、また呼び出し時に <code>this</code> の値が設定されないため、<code>this</code> は既定でグローバルオブジェクトとなり、これはブラウザーでは {{domxref("Window", "window")}} です。</p> - -<pre class="brush:js notranslate">function f1() { - return this; -} - -// ブラウザー上で -f1() === window; // true - -// Node 上で -f1() === global; // true</pre> - -<p>ただし厳格モードでは、実行コンテキストに入るときに <code>this</code> 値が設定されていないと、以下の例のように <code>undefined</code> のままになります。</p> - -<pre class="brush:js notranslate">function f2() { - 'use strict'; // 厳格モードにする - return this; -} - -f2() === undefined; // true -</pre> - -<div class="note">二番目の例において、<code>this</code> が {{jsxref("undefined")}} となるのは <code>f2</code> が直接呼び出されており、オブジェクトのメソッドやプロパティ (例えば <code>window.f2()</code>) ではないためです。この機能は初めて<a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">厳格モード</a>への対応が始まったとき、一部のブラウザーが実装していませんでした。その結果、これらのブラウザーは不正確に <code>window</code> オブジェクトを返していました。</div> - -<p>関数の呼び出し時に <code>this</code> の値を特定の値に設定するには、以下の例のように {{jsxref("Function.prototype.call()", "call()")}} または {{jsxref("Function.prototype.apply()", "apply()")}} を使用します。</p> - -<h3 id="クラスコンテキスト">クラスコンテキスト</h3> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Classes">クラス</a>は関数の機能であるため、クラスと関数の <code>this</code> の動作は似ています。ただし、いくつかの違いと注意点があります。</p> - -<p>クラスのコンストラクター内では、<code>this</code> は通常のオブジェクトです。クラス内のすべての非静的メソッドは <code>this</code> のプロトタイプに追加されます。</p> - -<pre class="brush: js notranslate">class Example { - constructor() { - const proto = Object.getPrototypeOf(this); - console.log(Object.getOwnPropertyNames(proto)); - } - first(){} - second(){} - static third(){} -} - -new Example(); // ['constructor', 'first', 'second'] -</pre> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> 静的メソッドは <code>this</code> のプロパティではありません。それらはクラス自体のプロパティです。</p> -</div> - -<h3 id="派生クラス">派生クラス</h3> - -<p>基本クラスのコンストラクターとは異なり、派生コンストラクターには初期の <code>this</code> バインディングがありません。{{jsxref("Operators/super", "super()")}} を呼び出すとコンストラクター内に <code>this</code> バインディングが作成され、基本的に以下のコードを評価する効果があります。ここで、Base は継承されたクラスです。</p> - -<pre class="brush: js notranslate">this = new Base();</pre> - -<div class="blockIndicator warning"> -<p><strong>警告:</strong> super() を呼び出す前に <code>this</code> を参照するとエラーが発生します。</p> -</div> - -<p>派生クラスは、<code>オブジェクト</code>を return するか、コンストラクターを持たない場合を除き、<code>super()</code> を呼び出す前に return することはできません。</p> - -<pre class="brush: js notranslate">class Base {} -class Good extends Base {} -class AlsoGood extends Base { - constructor() { - return {a: 5}; - } -} -class Bad extends Base { - constructor() {} -} - -new Good(); -new AlsoGood(); -new Bad(); // 参照エラー</pre> - -<h2 id="例">例</h2> - -<h3 id="関数コンテキスト内の_this">関数コンテキスト内の this</h3> - -<pre class="brush:js notranslate">// オブジェクトを call や apply の最初の引数として渡すと、this がそれに結び付けられます -var obj = {a: 'Custom'}; - -// このプロパティはグローバルオブジェクトに設定されます -var a = 'Global'; - -function whatsThis() { - return this.a; // this の値は関数の呼び出し方によって変わります -function is called -} - -whatsThis(); // 関数内の this として 'Global' は設定されていないので、デフォルトではグローバル/ウィンドウオブジェクトになります。 -whatsThis.call(obj); // 関数内の this として 'Custom' が obj に設定されています -whatsThis.apply(obj); // 関数内の this として 'Custom' が obj に設定されています -</pre> - -<h3 id="this_とオブジェクト変換">this とオブジェクト変換</h3> - -<pre class="brush:js notranslate">function add(c, d) { - return this.a + this.b + c + d; -} - -var o = {a: 1, b: 3}; - -// 最初の引数は 'this' として使用する -// オブジェクトで、続く引数は関数呼び出しの -// 引数として使用されます。 -add.call(o, 5, 7); // 16 - -// 最初の引数は 'this' として使用する -// オブジェクトで、二番目の引数は関数呼び出しの -// 引数として使用される配列です。 -add.apply(o, [10, 20]); // 34 -</pre> - -<p>なお、非厳格モードにおいて、<code>call</code> と <code>apply</code> は、<code>this</code> として渡された値がオブジェクトではない場合、内部の <code>ToObject</code> 操作を利用してオブジェクトに変換しようします。<code>7</code> や <code>'foo'</code> のようなプリミティブが渡された場合、関連するコンストラクターを使用してオブジェクトに変換されます。たとえば、プリミティブの数値である <code>7</code> は <code>new Number(7)</code> であるかのようにオブジェクトに変換され、文字列の <code>'foo'</code> は <code>new String('foo')</code> であるかのようにオブジェクトに変換されます。</p> - -<pre class="brush:js notranslate">function bar() { - console.log(Object.prototype.toString.call(this)); -} - -bar.call(7); // [object Number] -bar.call('foo'); // [object String] -bar.call(undefined); // [object global] -</pre> - -<h3 id="The_bind_method" name="The_bind_method"><code>bind</code> メソッド</h3> - -<p>ECMAScript 5 で {{jsxref("Function.prototype.bind")}} が導入されました。<code>f.bind(someObject)</code> の呼び出しは、<code>f</code> と同じ内部とスコープを持つ新しい関数を生成し、ここが <code>this</code> が発生するオリジナルの関数ですが、関数がどのように使われるかにかかわらず、新しい関数では <code>bind</code> の最初の引数に永続的にバインドされます。</p> - -<pre class="brush:js notranslate">function f() { - return this.a; -} - -var g = f.bind({a: 'azerty'}); -console.log(g()); // azerty - -var h = g.bind({a: 'yoo'}); // bind は一度しか機能しない -console.log(h()); // azerty - -var o = {a: 37, f: f, g: g, h: h}; -console.log(o.a, o.f(), o.g(), o.h()); // 37,37, azerty, azerty -</pre> - -<h3 id="Arrow_functions" name="Arrow_functions">アロー関数</h3> - -<p><a href="/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions">アロー関数</a>では、<code>this</code> はそれを囲むレキシカルコンテキストの <code>this</code> の値が設定されます。グローバルコードでは、グローバルオブジェクトが設定されます。</p> - -<pre class="brush: js notranslate">var globalObject = this; -var foo = (() => this); -console.log(foo() === globalObject); // true</pre> - -<div class="note"> -<p>メモ: アロー関数の呼び出し時に <code>this</code> 引数が <code>call</code>, <code>bind</code>, <code>apply</code> に渡されても無視されます。呼び出しに引数を加えることはできますが、最初の引数 (<code>thisArg</code>) は <code>null</code> を設定してください</p> -</div> - -<pre class="brush: js notranslate">// オブジェクトのメソッドとして呼び出す。 -var obj = {func: foo}; -console.log(obj.func() === globalObject); // true - -// call を使用して this の設定を試みる -console.log(foo.call(obj) === globalObject); // true - -// bind を使用して this の設定を試みる -foo = foo.bind(obj); -console.log(foo() === globalObject); // true</pre> - -<p>何があっても、<code>foo</code> の <code>this</code> は生成されたときの値が設定されています (上記の例ではグローバルオブジェクトです)。同様のことが、ほかの関数内で生成したアロー関数にも適用されます。それらの <code>this</code> には、それを包含するレキシカルコンテキストのものになります。</p> - -<pre class="brush:js notranslate">// this を返す関数を返す bar メソッドを持つ -// obj を生成します。返された関数はアロー関数 -// として生成されているため、その this は -// それを包含する関数の this に永続的に拘束 -// されます。bar の値は呼び出し時に設定でき、 -// 返値の関数の値に順に設定します。 -var obj = { - bar: function() { - var x = (() => this); - return x; - } -}; - -// bar を obj のメソッドとして呼び出す際、その this を obj に設定します -// 返値の関数への参照を fn に割り当てます。 -var fn = obj.bar(); - -// 厳格モードでは、this を設定せずに fn を呼び出すと -// 通常はグローバルオブジェクトか undefined が既定値となります。 -console.log(fn() === obj); // true - -// しかし obj のメソッドを call することなく参照するのは要注意です。 -var fn2 = obj.bar; -// するとアロー関数の呼び出しで this は bar の -// this に従うため window と同じになります。 -console.log(fn2()() == window); // true -</pre> - -<p>上記では、関数 (この無名関数を A と呼びます) に <code>obj.bar</code> が返すアロー関数として生成されたほかの関数 (この無名関数を B と呼びます) を割り当てています。結果として、呼び出されたときに関数 B の <code>this</code> は、永続的に <code>obj.bar</code> (関数 A) の <code>this</code> が設定されます。返された関数 (関数 B) が呼びされるとき、その <code>this</code> は常に最初に設定されたものになります。上記のコード例では、関数 B の <code>this</code> は <code>obj</code> である関数 A の <code>this</code> が設定されているため、通常はその <code>this</code> に <code>undefined</code> かグローバルオブジェクト (または、以前の例のグローバルコンテキストのように、いずれかのメソッド) が設定されますが、<code>obj</code> の設定が残ります。</p> - -<h3 id="As_an_object_method" name="As_an_object_method">オブジェクトのメソッドとして</h3> - -<p>関数がオブジェクトのメソッドとして呼び出されるとき、その <code>this</code> にはメソッドが呼び出されたオブジェクトが設定されます。</p> - -<p>次の例では、<code>o.f()</code> が起動したとき、関数内の <code>this</code> には、<code>o</code> オブジェクトが関連付けられます。</p> - -<pre class="brush:js notranslate">var o = { - prop: 37, - f: function() { - return this.prop; - } -}; - -console.log(o.f()); // 37 -</pre> - -<p>この振る舞いは、関数定義の方法や場所に全く影響を受けないことに注意してください。前述の例では、<code>o</code> の定義中に <code>f</code> メンバーとして関数をインラインに定義しています。しかし、関数を最初に定義して、後から <code>o.f</code> に付け足すことができます。その結果は同じ振る舞いになります。</p> - -<pre class="brush:js notranslate">var o = {prop: 37}; - -function independent() { - return this.prop; -} - -o.f = independent; - -console.log(o.f()); // 37 -</pre> - -<p>これは、関数が <code>o</code> の <code>f</code> のメンバーとして呼び出されることだけが重要なことを示しています。</p> - -<p>同様に、<code>this</code> の関連付けは、最も直近のメンバー参照にのみ影響を受けます。次の例では、関数が呼び出すとき、オブジェクト <code>o.b</code> の <code>g</code> メソッドとして呼び出しています。実行時に、関数内の <code>this</code> は <code>o.b</code> を参照します。オブジェクト自体が <code>o</code> のメンバーであるという事実は何の意味もありません。最も直近の参照のみが重要なのです。</p> - -<pre class="brush:js notranslate">o.b = {g: independent, prop: 42}; -console.log(o.b.g()); // 42 -</pre> - -<h4 id="this_on_the_objects_prototype_chain" name="this_on_the_objects_prototype_chain">オブジェクトのプロトタイプチェーン上の <code>this</code></h4> - -<p>同じ概念が、オブジェクトのプロトタイプチェーンのどこかに定義されたメソッドにも当てはまります。メソッドがオブジェクトのプロトタイプチェーン上にあった場合、メソッドがオブジェクト上にあるかのように、<code>this</code> はメソッドを呼び出したオブジェクトを参照します。</p> - -<pre class="brush:js notranslate">var o = {f: function() { return this.a + this.b; }}; -var p = Object.create(o); -p.a = 1; -p.b = 4; - -console.log(p.f()); // 5 -</pre> - -<p>この例では、変数 <code>p</code> に割り当てられたオブジェクト自身は <code>f</code> プロパティを持たず、プロトタイプから継承しています。しかし、<code>f</code> に対する検索が、最終的に <code>o</code> でその名前を持つメンバーを見つけることは重要ではありません。検索は <code>p.f</code> への参照から開始されるため、関数内の <code>this</code> は <code>p</code> として参照されるオブジェクトの値を取ります。<code>f</code> は <code>p</code> のメソッドとして呼ばれたため、その <code>this</code> は <code>p</code> を参照します。これは、JavaScript のプロトタイプ継承の興味深い機能です。</p> - -<h4 id="this_with_a_getter_or_setter" name="this_with_a_getter_or_setter">ゲッター/セッターと <code>this</code></h4> - -<p>再度、同じ概念が、ゲッターやセッターから呼ばれる関数にも当てはまります。ゲッターやセッターとして使用される関数は、このプロパティを設定するか、または得られている元のオブジェクトに関連付けられている <code>this</code> を持ちます。</p> - -<pre class="brush:js notranslate">function sum() { - return this.a + this.b + this.c; -} - -var o = { - a: 1, - b: 2, - c: 3, - get average() { - return (this.a + this.b + this.c) / 3; - } -}; - -Object.defineProperty(o, 'sum', { - get: sum, enumerable: true, configurable: true}); - -console.log(o.average, o.sum); // 2, 6 -</pre> - -<h3 id="As_a_constructor" name="As_a_constructor">コンストラクターとして</h3> - -<p>関数がコンストラクターとして ({{jsxref("Operators/new", "new")}} キーワードとともに) 使用されたとき、その <code>this</code> は生成された新しいオブジェクトに関連付けられます。</p> - -<div class="note"> -<p>コンストラクターの既定では、<code>this</code> で参照されるオブジェクトを返しますが、代わりにほかのオブジェクトを返すことができます (返値がオブジェクトではない場合、<code>this</code> オブジェクトが返されます)。</p> -</div> - -<pre class="brush:js notranslate">/* - * Constructors work like this: - * - * function MyConstructor(){ - * // Actual function body code goes here. - * // Create properties on |this| as - * // desired by assigning to them. E.g., - * this.fum = "nom"; - * // et cetera... - * - * // If the function has a return statement that - * // returns an object, that object will be the - * // result of the |new| expression. Otherwise, - * // the result of the expression is the object - * // currently bound to |this| - * // (i.e., the common case most usually seen). - * } - */ - -function C() { - this.a = 37; -} - -var o = new C(); -console.log(o.a); // 37 - - -function C2() { - this.a = 37; - return {a: 38}; -} - -o = new C2(); -console.log(o.a); // 38 -</pre> - -<p>最後の例 (<code>C2</code>) では、構築中にオブジェクトを返しているので、<code>this</code> が結び付けられている新しいオブジェクトは単に破棄されています。(これは根本的に "<code>this.a = 37;</code>" ステートメントを死んだコードにしてしまっています。これは実行されるので、正確には死んだコードではありませんが、外部への影響がありません。)</p> - -<h3 id="As_a_DOM_event_handler" name="As_a_DOM_event_handler">DOM イベントハンドラーとして</h3> - -<p>関数がイベントハンドラとして使用された場合、その <code>this</code> はリスナーが配置されている要素に設定されます ({{domxref("EventTarget/addEventListener", "addEventListener()")}} 以外のメソッドで動的に追加されたリスナーについては、この規約に従わないブラウザー－もあります)。</p> - -<pre class="brush:js notranslate">// リスナーとして呼び出された場合は、関連づけられた要素を青にする -function bluify(e) { - // 常に true - console.log(this === e.currentTarget); - // currentTarget と target が同じオブジェクトであれば true - console.log(this === e.target); - this.style.backgroundColor = '#A5D9F3'; -} - -// 文書内の各要素の一覧を取得 -var elements = document.getElementsByTagName('*'); - -// クリックリスナーとして bluify を追加することで、 -// 要素をクリックすると青くなるようになる -for(var i = 0 ; i < elements.length; i++){ - elements[i].addEventListener('click', bluify, false); -}</pre> - -<h3 id="In_an_inline_event_handler" name="In_an_inline_event_handler">インラインイベントハンドラー内</h3> - -<p>コードがインラインの <a href="/ja/docs/Web/Guide/Events/Event_handlers">on-イベントハンドラー</a>から呼び出されたとき、その <code>this</code> にはリスナーが配置されている DOM 要素が設定されます。</p> - -<pre class="brush:js notranslate"><button onclick="alert(this.tagName.toLowerCase());"> - Show this -</button> -</pre> - -<p>上記のアラートは <code>button</code> と表示します。ただし、外側のコードがこのように設定された <code>this</code> を持っているだけだということに注意してください。</p> - -<pre class="brush:js notranslate"><button onclick="alert((function() { return this; })());"> - Show inner this -</button> -</pre> - -<p>この場合、内側の関数の <code>this</code> は設定されていないので、グローバルの window オブジェクトを返します (つまり、<code>this</code> が呼び出しによって設定されていないので、非厳格モードの既定オブジェクトです)。</p> - -<h3 id="クラスの中の_this">クラスの中の this</h3> - -<div class="blockIndicator note"></div> - -<p>通常の関数と同様に、メソッド内の <code>this</code> の値は、どのように呼び出されるかによって異なります。クラス内の <code>this</code> が常にクラスのインスタンスを参照するように、この動作をオーバーライドしておくと便利な場合もあります。これを実現するには、コンストラクターでクラスのメソッドをバインドします。</p> - -<pre class="brush: js notranslate">class Car { - constructor() { - // 違いを示すために sayHi ではなく sayBye をバインドする - this.sayBye = this.sayBye.bind(this); - } - sayHi() { - console.log(`Hello from ${this.name}`); - } - sayBye() { - console.log(`Bye from ${this.name}`); - } - get name() { - return 'Ferrari'; - } -} - -class Bird { - get name() { - return 'Tweety'; - } -} - -const car = new Car(); -const bird = new Bird(); - -// メソッドの 'this' の値は呼び出し元に依存します -car.sayHi(); // Hello from Ferrari -bird.sayHi = car.sayHi; -bird.sayHi(); // Hello from Tweety - -// バインドされたメソッドの場合、'this' は呼び出し元に依存しません -bird.sayBye = car.sayBye; -bird.sayBye(); // Bye from Ferrari</pre> - -<div class="blockIndicator note"> -<p><strong>メモ:</strong> クラスは常に厳格モードのコードです。これを定義せずに <code>this</code> でメソッドを呼び出すとエラーが発生します。</p> -</div> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-this-keyword', 'The this keyword')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.this")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">厳格モード</a></li> - <li><a href="https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/">Gentle explanation of 'this' keyword in JavaScript</a></li> - <li>Getting the global context: {{jsxref("globalThis")}}</li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/this/index.md b/files/ja/web/javascript/reference/operators/this/index.md new file mode 100644 index 0000000000..3595fcaaee --- /dev/null +++ b/files/ja/web/javascript/reference/operators/this/index.md @@ -0,0 +1,487 @@ +--- +title: this +slug: Web/JavaScript/Reference/Operators/this +tags: + - JavaScript + - 言語機能 + - 演算子 + - Primary Expressions + - リファレンス + - this +browser-compat: javascript.operators.this +translation_of: Web/JavaScript/Reference/Operators/this +--- +{{jsSidebar("Operators")}} + +**関数の `this` キーワード** は、JavaScript ではほかの言語と少々異なる動作をします。また、[strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)であるかどうかでも違いがあります。 + +ほとんどの場合、`this` の値はどのように関数が呼ばれたかによって決定されます (実行時結合)。これは実行時に代入によって設定することはできず、関数が呼び出されるたびに異なる可能性があります。ES5 では {{jsxref("Function.prototype.bind()", "bind()")}} メソッドが導入され、関数が{{jsxref('Operators/this', "どのように呼ばれたかに関係なく `this` の値を設定する", 'The_bind_method', 1)}}することができるようになり、ES2015 では、自身では `this` の結び付けを行わない[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)が導入されました (これは包含する構文上のコンテキストの `this` の値を保持します)。 + +{{EmbedInteractiveExample("pages/js/expressions-this.html")}} + +## 構文 + +``` +this +``` + +### 値 + +strict モードでない場合は、実行コンテキスト (グローバル、関数、eval) のプロパティで、常にオブジェクトへの参照です。 strict モードではどのような値でも取り得ます。 + +## 解説 + +### グローバルコンテキスト + +グローバル実行コンテキスト (すべての関数の外側) では、strict モードであるかどうかにかかわらず、`this` はグローバルオブジェクトを参照します。 + +``` js +// ウェブブラウザーでは window オブジェクトもグローバルオブジェクトです。 +console.log(this === window); // true + +a = 37; +console.log(window.a); // 37 + +this.b = "MDN"; +console.log(window.b) // "MDN" +console.log(b) // "MDN" +``` + +> **Note:** コードが実行されている現在のコンテキストに関係なく、グローバルの {{jsxref("globalThis")}} プロパティを使用していつでも簡単にグローバルオブジェクトを取得できます。 + +### 関数コンテキスト + +関数内での `this` の値は、関数の呼び出し方によって異なります。 + +下記のコードは [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)ではないため、また呼び出し時に `this` の値が設定されないため、`this` は既定でグローバルオブジェクトとなり、これはブラウザーでは {{domxref("Window", "window")}} です。 + +```js +function f1() { + return this; +} + +// ブラウザー上で +f1() === window; // true + +// Node 上で +f1() === global; // true +``` + +ただし strict モードでは、実行コンテキストに入るときに `this` 値が設定されていないと、以下の例のように `undefined` のままになります。 + +```js +function f2() { + 'use strict'; // strict モードにする + return this; +} + +f2() === undefined; // true +``` + +> **Note:** 二番目の例において、`this` が {{jsxref("undefined")}} となるのは `f2` が直接呼び出されており、オブジェクトのメソッドやプロパティ (例えば `window.f2()`) ではないためです。この機能は初めて [strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode)への対応が始まったとき、一部のブラウザーが実装していませんでした。結果的に、これらのブラウザーは不正確に `window` オブジェクトを返していました。 + +関数の呼び出し時に `this` の値を特定の値に設定するには、以下の例のように {{jsxref("Function.prototype.call()", "call()")}} または {{jsxref("Function.prototype.apply()", "apply()")}} を使用します。 + +### クラスコンテキスト + +[クラス](/ja/docs/Web/JavaScript/Reference/Classes)は関数の機能であるため、クラスと関数の `this` の動作は似ています。ただし、いくつかの違いと注意点があります。 + +クラスのコンストラクター内では、`this` は通常のオブジェクトです。クラス内のすべて静的でないメソッドは `this` のプロトタイプに追加されます。 + +```js +class Example { + constructor() { + const proto = Object.getPrototypeOf(this); + console.log(Object.getOwnPropertyNames(proto)); + } + first(){} + second(){} + static third(){} +} + +new Example(); // ['constructor', 'first', 'second'] +``` + +> **Note:** 静的メソッドは `this` のプロパティではありません。クラス自身のプロパティです。 + +### 派生クラス + +基本クラスのコンストラクターとは異なり、派生コンストラクターには初期の `this` の結び付けがありません。{{jsxref("Operators/super", "super()")}} を呼び出すとコンストラクター内に `this` の結び付けが作成され、基本的に以下のコードを評価する効果があります。ここで、Base は継承されたクラスです。 + +```js +this = new Base(); +``` + +> **Warning:** `this` を `super()` の呼び出しの前に参照すると、エラーが発生します。 + +派生クラスはでは `super()` を呼び出す前に return をしてはいけません。ただし、 `Object` を返す場合やコンストラクターがない場合を除きます。 + +```js +class Base {} +class Good extends Base {} +class AlsoGood extends Base { + constructor() { + return {a: 5}; + } +} +class Bad extends Base { + constructor() {} +} + +new Good(); +new AlsoGood(); +new Bad(); // 参照エラー +``` + +## 例 + +### 関数コンテキスト内の this + +```js +// オブジェクトを call や apply の最初の引数として渡すと、this がそれに結び付けられます。 +var obj = {a: 'Custom'}; + +// 変数を定義すると、その変数がグローバルの window のプロパティとして割り当てられます。 +var a = 'Global'; + +function whatsThis() { + return this.a; // this の値は関数の呼び出し方によって変わります +} + +whatsThis(); // 'Global' はこの関数では関 this として設定されていないので、既定でグローバルの window オブジェクトになります +whatsThis.call(obj); // 'Custom' が関数内の this として obj に設定されています +whatsThis.apply(obj); // 'Custom' が関数内の this として obj に設定されています +``` + +### this とオブジェクト変換 + +```js +function add(c, d) { + return this.a + this.b + c + d; +} + +var o = {a: 1, b: 3}; + +// 最初の引数は 'this' として使用する +// オブジェクトで、続く引数は関数呼び出しの +// 引数として使用されます。 +add.call(o, 5, 7); // 16 + +// 最初の引数は 'this' として使用する +// オブジェクトで、二番目の引数は関数呼び出しの +// 引数として使用される配列です。 +add.apply(o, [10, 20]); // 34 +``` + +なお、 strict モードでない場合、`call` と `apply` は、`this` として渡された値がオブジェクトではないと、内部の `ToObject` 操作を利用してオブジェクトに変換しようします。`7` や `'foo'` のようなプリミティブが渡された場合、関連するコンストラクターを使用してオブジェクトに変換されます。たとえば、プリミティブの数値である `7` は `new Number(7)` であるかのようにオブジェクトに変換され、文字列の `'foo'` は `new String('foo')` であるかのようにオブジェクトに変換されます。 + +```js +function bar() { + console.log(Object.prototype.toString.call(this)); +} + +bar.call(7); // [object Number] +bar.call('foo'); // [object String] +bar.call(undefined); // [object global] +``` + +### `bind` メソッド + +ECMAScript 5 で {{jsxref("Function.prototype.bind()")}} が導入されました。`f.bind(someObject)` の呼び出しは、`f` と同じ内部とスコープを持つ新しい関数を生成し、ここが `this` が発生するオリジナルの関数ですが、関数がどのように使われるかにかかわらず、新しい関数では `bind` の最初の引数に永続的にバインドされます。 + +```js +function f() { + return this.a; +} + +var g = f.bind({a: 'azerty'}); +console.log(g()); // azerty + +var h = g.bind({a: 'yoo'}); // bind は一度しか機能しない +console.log(h()); // azerty + +var o = {a: 37, f: f, g: g, h: h}; +console.log(o.a, o.f(), o.g(), o.h()); // 37,37, azerty, azerty +``` + +### アロー関数 + +[アロー関数](/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)では、`this` はそれを囲む構文上のコンテキストの `this` の値が設定されます。グローバルコードでは、グローバルオブジェクトが設定されます。 + +```js +var globalObject = this; +var foo = (() => this); +console.log(foo() === globalObject); // true +``` + +> **Note:** アロー関数の呼び出し時に `this` 引数が `call`, `bind`, `apply` に渡されても無視されます。呼び出しに引数を加えることはできますが、最初の引数 (`thisArg`) は `null` を設定してください。 + + +```js +// オブジェクトのメソッドとして呼び出す。 +var obj = {func: foo}; +console.log(obj.func() === globalObject); // true + +// call を使用して this の設定を試みる +console.log(foo.call(obj) === globalObject); // true + +// bind を使用して this の設定を試みる +foo = foo.bind(obj); +console.log(foo() === globalObject); // true +``` + +何があっても、`foo` の `this` は生成されたときの値が設定されています (上記の例ではグローバルオブジェクトです)。同様のことが、ほかの関数内で生成したアロー関数にも適用されます。それらの `this` には、それを包含する構文上のコンテキストのものになります。 + +```js +// this を返す関数を返す bar メソッドを持つ +// obj を生成します。返された関数はアロー関数 +// として生成されているため、その this は +// それを包含する関数の this に永続的に拘束 +// されます。bar の値は呼び出し時に設定でき、 +// 返値の関数の値に順に設定します。 +var obj = { + bar: function() { + var x = (() => this); + return x; + } +}; + +// bar を obj のメソッドとして呼び出す際、その this を obj に設定します +// 返値の関数への参照を fn に割り当てます。 +var fn = obj.bar(); + +// strict モードでは、this を設定せずに fn を呼び出すと +// 通常はグローバルオブジェクトか undefined が既定値となります。 +console.log(fn() === obj); // true + +// しかし obj のメソッドを call することなく参照するのは要注意です。 +var fn2 = obj.bar; +// するとアロー関数の呼び出しで this は bar の +// this に従うため window と同じになります。 +console.log(fn2()() == window); // true +``` + +上記では、関数 (この無名関数を A と呼びます) に `obj.bar` が返すアロー関数として生成されたほかの関数 (この無名関数を B と呼びます) を割り当てています。結果として、呼び出されたときに関数 B の `this` は、永続的に `obj.bar` (関数 A) の `this` が設定されます。返された関数 (関数 B) が呼びされるとき、その `this` は常に最初に設定されたものになります。上記のコード例では、関数 B の `this` は `obj` である関数 A の `this` が設定されているため、通常はその `this` に `undefined` かグローバルオブジェクト (または、以前の例のグローバルコンテキストのように、いずれかのメソッド) が設定されますが、`obj` の設定が残ります。 + +### オブジェクトのメソッドとして + +関数がオブジェクトのメソッドとして呼び出されるとき、その `this` にはメソッドが呼び出されたオブジェクトが設定されます。 + +次の例では、`o.f()` が起動したとき、関数内の `this` には、`o` オブジェクトが関連付けられます。 + +```js +var o = { + prop: 37, + f: function() { + return this.prop; + } +}; + +console.log(o.f()); // 37 +``` + +この動作は、関数定義の方法や場所に全く影響を受けないことに注意してください。前述の例では、`o` の定義中に `f` メンバーとして関数をインラインに定義しています。しかし、関数を最初に定義して、後から `o.f` に付け足すことができます。その結果は同じ動作になります。 + +```js +var o = {prop: 37}; + +function independent() { + return this.prop; +} + +o.f = independent; + +console.log(o.f()); // 37 +``` + +これは、関数が `o` の `f` のメンバーとして呼び出されることだけが重要なことを示しています。 + +同様に、`this` の関連付けは、最も直近のメンバー参照にのみ影響を受けます。次の例では、関数が呼び出すとき、オブジェクト `o.b` の `g` メソッドとして呼び出しています。実行時に、関数内の `this` は `o.b` を参照します。オブジェクト自体が `o` のメンバーであるという事実は何の意味もありません。最も直近の参照のみが重要なのです。 + +```js +o.b = {g: independent, prop: 42}; +console.log(o.b.g()); // 42 +``` + +#### オブジェクトのプロトタイプチェーン上の `this` + +同じ概念が、オブジェクトのプロトタイプチェーンのどこかに定義されたメソッドにも当てはまります。メソッドがオブジェクトのプロトタイプチェーン上にあった場合、メソッドがオブジェクト上にあるかのように、`this` はメソッドを呼び出したオブジェクトを参照します。 + +```js +var o = {f: function() { return this.a + this.b; }}; +var p = Object.create(o); +p.a = 1; +p.b = 4; + +console.log(p.f()); // 5 +``` + +この例では、変数 `p` に割り当てられたオブジェクト自身は `f` プロパティを持たず、プロトタイプから継承しています。しかし、`f` に対する検索が、最終的に `o` でその名前を持つメンバーを見つけることは重要ではありません。検索は `p.f` への参照から開始されるため、関数内の `this` は `p` として参照されるオブジェクトの値を取ります。`f` は `p` のメソッドとして呼ばれたため、その `this` は `p` を参照します。これは、JavaScript のプロトタイプ継承の興味深い機能です。 + +#### ゲッター/セッターと `this` + +再度、同じ概念が、ゲッターやセッターから呼ばれる関数にも当てはまります。ゲッターやセッターとして使用される関数は、このプロパティを設定するか、または得られている元のオブジェクトに関連付けられている `this` を持ちます。 + +```js +function sum() { + return this.a + this.b + this.c; +} + +var o = { + a: 1, + b: 2, + c: 3, + get average() { + return (this.a + this.b + this.c) / 3; + } +}; + +Object.defineProperty(o, 'sum', { + get: sum, enumerable: true, configurable: true}); + +console.log(o.average, o.sum); // 2, 6 +``` + +### コンストラクターとして + +関数がコンストラクターとして ({{jsxref("Operators/new", "new")}} キーワードとともに) 使用されたとき、その `this` は生成された新しいオブジェクトに関連付けられます。 + +> **Note:** コンストラクターの既定では、`this` で参照されるオブジェクトを返しますが、代わりにほかのオブジェクトを返すことができます (返値がオブジェクトではない場合、`this` オブジェクトが返されます)。 + +```js +/* + * コンストラクターは下記のように動作します。 + * + * function MyConstructor(){ + * // 実際の関数本体のコードはこちらになります。 + * // プロパティに代入することで、 |this| に必要な + * // プロパティを作成します。例えば、 + * this.fum = "nom"; + * // など... + * + * // 関数にオブジェクトを返す return 文があれば、 + * // そのオブジェクトが |new| 式の結果になります。 + * // そうでなければ、式の結果は現在 |this| に + * // バインドされているオブジェクトになります + * // (つまり、最もよく見られる一般的なケースです)。 + * } + */ + +function C() { + this.a = 37; +} + +var o = new C(); +console.log(o.a); // 37 + +function C2() { + this.a = 37; + return {a: 38}; +} + +o = new C2(); +console.log(o.a); // 38 +``` + +最後の例 (`C2`) では、構築中にオブジェクトを返しているので、`this` が結び付けられている新しいオブジェクトは単に破棄されています。(これは根本的に "`this.a = 37;`" 文を死んだコードにしてしまっています。これは実行されるので、正確には死んだコードではありませんが、外部への影響がありません。) + +### DOM イベントハンドラーとして + +関数がイベントハンドラとして使用された場合、その `this` はリスナーが配置されている要素に設定されます ({{domxref("EventTarget/addEventListener", "addEventListener()")}} 以外のメソッドで動的に追加されたリスナーについては、この規約に従わないブラウザーもあります)。 + +```js +// リスナーとして呼び出された場合は、関連づけられた要素を青にする +function bluify(e) { + // 常に true + console.log(this === e.currentTarget); + // currentTarget と target が同じオブジェクトであれば true + console.log(this === e.target); + this.style.backgroundColor = '#A5D9F3'; +} + +// 文書内の各要素の一覧を取得 +var elements = document.getElementsByTagName('*'); + +// クリックリスナーとして bluify を追加することで、 +// 要素をクリックすると青くなるようになる +for (var i = 0; i < elements.length; i++) { + elements[i].addEventListener('click', bluify, false); +} +``` + +### インラインイベントハンドラー内 + +コードがインラインの [on-イベントハンドラー](/ja/docs/Web/Events/Event_handlers)から呼び出されたとき、その `this` にはリスナーが配置されている DOM 要素が設定されます。 + +```html +<button onclick="alert(this.tagName.toLowerCase());"> + Show this +</button> +``` + +上記のアラートは `button` と表示します。ただし、外側のコードがこのように設定された `this` を持っているだけだということに注意してください。 + +```html +<button onclick="alert((function() { return this; })());"> + Show inner this +</button> +``` + +この場合、内側の関数の `this` は設定されていないので、グローバルの window オブジェクトを返します (つまり、`this` が呼び出しによって設定されていないので、非 strict モードの既定オブジェクトです)。 + +### クラス内の this + +通常の関数と同様に、メソッド内の `this` の値は、どのように呼び出されるかによって異なります。クラス内の `this` が常にクラスのインスタンスを参照するように、この動作をオーバーライドしておくと便利な場合もあります。これを実現するには、コンストラクターでクラスのメソッドをバインドします。 + +```js +class Car { + constructor() { + // 違いを示すために sayHi ではなく sayBye をバインドする + this.sayBye = this.sayBye.bind(this); + } + sayHi() { + console.log(`Hello from ${this.name}`); + } + sayBye() { + console.log(`Bye from ${this.name}`); + } + get name() { + return 'Ferrari'; + } +} + +class Bird { + get name() { + return 'Tweety'; + } +} + +const car = new Car(); +const bird = new Bird(); + +// メソッドの 'this' の値は呼び出し元に依存します +car.sayHi(); // Hello from Ferrari +bird.sayHi = car.sayHi; +bird.sayHi(); // Hello from Tweety + +// バインドされたメソッドの場合、'this' は呼び出し元に依存しません +bird.sayBye = car.sayBye; +bird.sayBye(); // Bye from Ferrari +``` + +> **Note:** クラスは常に strict モードのコードです。これを定義せずに `this` でメソッドを呼び出すとエラーが発生します。 + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [Strict モード](/ja/docs/Web/JavaScript/Reference/Strict_mode) +- [Gentle + explanation of 'this' keyword in JavaScript](https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/) +- グローバルコンテキストの取得: {{jsxref("globalThis")}} diff --git a/files/ja/web/javascript/reference/operators/unary_negation/index.html b/files/ja/web/javascript/reference/operators/unary_negation/index.html deleted file mode 100644 index 0a7fe27e04..0000000000 --- a/files/ja/web/javascript/reference/operators/unary_negation/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: 単項マイナス (-) -slug: Web/JavaScript/Reference/Operators/Unary_negation -tags: - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Unary_negation ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>単項マイナス演算子 (<code>-</code>) はオペランドの前に置かれ、符号を反転します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-unary-negation.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><strong>演算子:</strong> -<var>x</var> -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Negating_numbers" name="Negating_numbers">数値の符号を反転</h3> - -<pre class="brush: js notranslate">const x = 3; -const y = -x; - -// y = -3 -// x = 3 -</pre> - -<h3 id="Negating_non-numbers" name="Negating_non-numbers">数値以外の符号を反転</h3> - -<p>単項マイナス演算子は、数値でないものを数値に変換することができます。</p> - -<pre class="brush: js notranslate">const x = "4"; -const y = -x; - -// y = -4 -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-unary-minus-operator', 'Unary negation operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.unary_negation")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus">単項プラス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/unary_negation/index.md b/files/ja/web/javascript/reference/operators/unary_negation/index.md new file mode 100644 index 0000000000..562ee6dc0f --- /dev/null +++ b/files/ja/web/javascript/reference/operators/unary_negation/index.md @@ -0,0 +1,65 @@ +--- +title: 単項マイナス (-) +slug: Web/JavaScript/Reference/Operators/Unary_negation +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.unary_negation +translation_of: Web/JavaScript/Reference/Operators/Unary_negation +--- +{{jsSidebar("Operators")}} + +単項マイナス演算子 (`-`) はオペランドの前に置かれ、符号を反転します。 + +{{EmbedInteractiveExample("pages/js/expressions-unary-negation.html")}} + +## 構文 + +```js +-x +``` + +## 例 + +### 数値の符号を反転 + +```js +const x = 3; +const y = -x; + +// y = -3 +// x = 3 +``` + +### 数値以外の符号を反転 + +単項マイナス演算子は、数値でないものを数値に変換することができます。 + +```js +const x = "4"; +const y = -x; + +// y = -4 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項プラス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_plus) diff --git a/files/ja/web/javascript/reference/operators/unary_plus/index.html b/files/ja/web/javascript/reference/operators/unary_plus/index.html deleted file mode 100644 index 418686a5c1..0000000000 --- a/files/ja/web/javascript/reference/operators/unary_plus/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: 単項プラス (+) -slug: Web/JavaScript/Reference/Operators/Unary_plus -tags: - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Unary_plus ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>単項プラス演算子 (<code>+</code>) は、オペランドの前に置かれ、そのオペランドを評価し、それが数値以外の場合は数値に変換します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-unary-plus.html", "taller")}}</div> - - - -<h2 id="例">例</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> +<var>x</var> -</pre> - -<h2 id="説明">説明</h2> - -<p>単項マイナス (<code>-</code>) も非数値を数値に変換できますが、単項プラスは数値に対して他の演算を行わないため、非数値を数値に変換する最も高速で好ましい方法です。これは、整数や浮動小数点の文字列表現や、非文字列値である <code>true</code>、<code>false</code>、<code>null</code> を変換することができます。10進数と16進数（接頭辞 0x）の両形式の整数と負の数（16進数の負の数はサポートされていません）がサポートされています。BigInt 値に対してこの演算子を使用すると TypeError がスローされます。特定の値を解析できない場合は、{{jsxref("NaN")}} と評価されます。</p> - -<h2 id="例_2">例</h2> - -<h3 id="数値での使い方">数値での使い方</h3> - -<pre class="brush: js notranslate">const x = 1; -const y = -1; - -console.log(+x); -// 1 -console.log(+y); -// -1</pre> - -<h3 id="数値以外での使い方">数値以外での使い方</h3> - -<pre class="brush: js notranslate">+true // 1 -+false // 0 -+null // 0 -+function(val){ return val } // NaN -+1n // BigInt 値は数値に変換できないためエラーになります -</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-unary-plus-operator', 'Unary plus operator')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザの互換性">ブラウザの互換性</h2> - - - -<p>{{Compat("javascript.operators.unary_plus")}}</p> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Addition">加算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Subtraction">減算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Division">除算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Multiplication">乗算演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Remainder">剰余演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation">べき乗演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Increment">インクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Decrement">デクリメント演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation">単項マイナス演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/unary_plus/index.md b/files/ja/web/javascript/reference/operators/unary_plus/index.md new file mode 100644 index 0000000000..58fe221e94 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/unary_plus/index.md @@ -0,0 +1,70 @@ +--- +title: 単項プラス (+) +slug: Web/JavaScript/Reference/Operators/Unary_plus +tags: + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.unary_plus +translation_of: Web/JavaScript/Reference/Operators/Unary_plus +--- +{{jsSidebar("Operators")}} + +<p>単項プラス演算子 (`+`) は、オペランドの前に置かれ、そのオペランドを評価し、それが数値以外の場合は数値に変換します。</p> + +{{EmbedInteractiveExample("pages/js/expressions-unary-plus.html", "taller")}} + +## 構文 + +```js ++x +``` + +## 解説 + +単項マイナス (`-`) も非数値を数値に変換できますが、単項プラスは数値に対して他の演算を行わないため、非数値を数値に変換する最も高速で好ましい方法です。これは、整数や浮動小数点の文字列表現や、非文字列値である `true`、`false`、`null` を変換することができます。10 進数と 16 進数 (接頭辞 0x) の両形式の整数と負の数 (ただし 16 進数を除く) に対応しています。BigInt 値に対してこの演算子を使用すると TypeError が発生します。特定の値を解析できない場合は、{{jsxref("NaN")}} と評価されます。</p> + +## 例 + +### 数値での使い方 + +```js +const x = 1; +const y = -1; + +console.log(+x); +// 1 +console.log(+y); +// -1 +``` + +### 数値以外での使い方 + +```js ++true // 1 ++false // 0 ++null // 0 ++function(val){ return val } // NaN ++1n // BigInt 値は数値に変換できないためエラーになります +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [加算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Addition) +- [減算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Subtraction) +- [除算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Division) +- [乗算演算子](/ja/docs/Web/JavaScript/Reference/Operators/Multiplication) +- [剰余演算子](/ja/docs/Web/JavaScript/Reference/Operators/Remainder) +- [べき乗演算子](/ja/docs/Web/JavaScript/Reference/Operators/Exponentiation) +- [インクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Increment) +- [デクリメント演算子](/ja/docs/Web/JavaScript/Reference/Operators/Decrement) +- [単項マイナス演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unary_negation) diff --git a/files/ja/web/javascript/reference/operators/unsigned_right_shift/index.html b/files/ja/web/javascript/reference/operators/unsigned_right_shift/index.html deleted file mode 100644 index 7e0c7aa258..0000000000 --- a/files/ja/web/javascript/reference/operators/unsigned_right_shift/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 符号なし右シフト (>>>) -slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift -tags: - - Bitwise operator - - JavaScript - - Language feature - - Operator - - Reference - - 演算子 - - 言語機能 -translation_of: Web/JavaScript/Reference/Operators/Unsigned_right_shift ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>符号なし右シフト演算子 (<code>>>></code>)</strong> (ゼロ埋め右シフト) は、1つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。0のビットが左からずれて入ります。符号ビットは <code>0</code> になりますので、結果は負の数にはなりません。他のビット毎演算子とは異なり、ゼロ埋め右シフトは符号なし32ビット整数を返します。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift.html")}}</div> - -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><code><var>a</var> >>> <var>b</var></code> -</pre> - -<h2 id="Description" name="Description">解説</h2> - -<p>この演算子は、1つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。0のビットが左からずれて入ります。符号ビットは <code>0</code> になりますので、結果は負の数にはなりません。他のビット毎演算子とは異なり、ゼロ埋め右シフトは符号なし32ビット整数を返します。</p> - -<p>負の数ではない場合、ゼロ埋め右シフトと符号保存右シフトは同じ結果をになります。例えば、 <code>9 >>> 2</code> は 2 となり、 <code>9 >> 2</code> と同じになります。</p> - -<pre class="brush: js notranslate">. 9 (10進数): 00000000000000000000000000001001 (2進数) - -------------------------------- -9 >>> 2 (10進数): 00000000000000000000000000000010 (2進数) = 2 (10進数) -</pre> - -<p>しかし、これは負の数の場合は当てはまりません。例えば、 <code>-9 >>> 2</code> は 1073741821 になり、 <code>-9 >> 2</code> (<code>-3</code> になる) とは異なります。</p> - -<pre class="brush: js notranslate">. -9 (10進数): 11111111111111111111111111110111 (2進数) - -------------------------------- --9 >>> 2 (10進数): 00111111111111111111111111111101 (2進数) = 1073741821 (10進数) -</pre> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Using_unsigned_right_shift" name="Using_unsigned_right_shift">符号なし右シフトの使用</h3> - -<pre class="brush: js notranslate"> 9 >>> 2; // 2 --9 >>> 2; // 1073741821 -</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("javascript.operators.unsigned_right_shift")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise">代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment">符号なし右シフト代入演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/unsigned_right_shift/index.md b/files/ja/web/javascript/reference/operators/unsigned_right_shift/index.md new file mode 100644 index 0000000000..564f0c257d --- /dev/null +++ b/files/ja/web/javascript/reference/operators/unsigned_right_shift/index.md @@ -0,0 +1,65 @@ +--- +title: 符号なし右シフト (>>>) +slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift +tags: + - ビット演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.unsigned_right_shift +translation_of: Web/JavaScript/Reference/Operators/Unsigned_right_shift +--- +{{jsSidebar("Operators")}} + +**符号なし右シフト演算子 (`>>>`)** (ゼロ埋め右シフト) は、1つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。0 のビットが左からずれて入ります。符号ビットは `0` になりますので、結果は負の数にはなりません。他のビット毎演算子とは異なり、ゼロ埋め右シフトは符号なし 32 ビット整数を返します。 + +{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift.html")}} + +## 構文 + +```js +a >>> b +``` + +## 解説 + +この演算子は、1 つ目のオペランドを指定されたビット数だけ右にずらします。右にずらしてあふれたビットは廃棄されます。0 のビットが左からずれて入ります。符号ビットは `0` になりますので、結果は負の数にはなりません。他のビット毎演算子とは異なり、ゼロ埋め右シフトは符号なし 32 ビット整数を返します。 + +負の数ではない場合、ゼロ埋め右シフトと符号保存右シフトは同じ結果をになります。例えば、 `9 >>> 2` は 2 となり、 `9 >> 2` と同じになります。 + +```js +. 9 (10 進数): 00000000000000000000000000001001 (2 進数) + -------------------------------- +9 >>> 2 (10 進数): 00000000000000000000000000000010 (2 進数) = 2 (10 進数) +``` + +しかし、これは負の数の場合は当てはまりません。例えば、 `-9 >>> 2` は 1073741821 になり、 `-9 >> 2` とは異なります (`-3` になる)。 + +```js +. -9 (10 進数): 11111111111111111111111111110111 (2 進数) + -------------------------------- +-9 >>> 2 (10 進数): 00111111111111111111111111111101 (2 進数) = 1073741821 (10 進数) +``` + +## 例 + +### 符号なし右シフトの使用 + +```js + 9 >>> 2; // 2 +-9 >>> 2; // 1073741821 +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [ビット演算子 (JavaScript ガイド)](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#bitwise) +- [符号なし右シフト代入演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment) diff --git a/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html b/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html deleted file mode 100644 index 4e23558b27..0000000000 --- a/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 符号なし右シフト代入 (>>>=) -slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment -tags: - - Assignment operator - - JavaScript - - Language feature - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>符号なし右シフト代入演算子 (<em><code>>>>=</code></em>) は、指定された量のビットを右に移動し、結果を変数に割り当てます。</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift-assignment.html")}}</div> - -<div></div> - - - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox notranslate"><strong>Operator:</strong> x >>>= y -<strong>Meaning:</strong> x = x >>> y</pre> - -<h2 id="例">例</h2> - -<h3 id="符号なし右シフト代入の使用">符号なし右シフト代入の使用</h3> - -<pre class="brush: js notranslate">let a = 5; // (00000000000000000000000000000101) -a >>>= 2; // 1 (00000000000000000000000000000001) - -let b = -5; // (-00000000000000000000000000000101) -b >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> - - - -<p>{{Compat("javascript.operators.unsigned_right_shift_assignment")}}</p> - -<h2 id="関連項目">関連項目</h2> - -<ul> - <li><a href="/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment">代入演算子</a></li> - <li><a href="/ja/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift">符号なし右シフト演算子</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md b/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md new file mode 100644 index 0000000000..4d8cccb022 --- /dev/null +++ b/files/ja/web/javascript/reference/operators/unsigned_right_shift_assignment/index.md @@ -0,0 +1,48 @@ +--- +title: 符号なし右シフト代入 (>>>=) +slug: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment +tags: + - 代入演算子 + - JavaScript + - 言語機能 + - 演算子 + - Reference +browser-compat: javascript.operators.unsigned_right_shift_assignment +translation_of: Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment +--- +{{jsSidebar("Operators")}} + +符号なし右シフト代入演算子 (_`>>>=`_) は、指定された数だけビットを右に移動し、結果を変数に代入します。 + +{{EmbedInteractiveExample("pages/js/expressions-unsigned-right-shift-assignment.html")}} + +## 構文 + +```js +x >>>= y // x = x >>> y +``` + +## 例 + +### 符号なし右シフト代入の使用 + +```js +let a = 5; // (00000000000000000000000000000101) +a >>>= 2; // 1 (00000000000000000000000000000001) + +let b = -5; // (-00000000000000000000000000000101) +b >>>= 2; // 1073741822 (00111111111111111111111111111110) +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [JavaScript ガイドの代入演算子](/ja/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment) +- [符号なし右シフト演算子](/ja/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift) |