Web/JavaScript/Reference/Trailing_commas を更新

- Markdown に変換
- 2021/07/21 時点の英語版に同期

2 files changed, 216 insertions, 172 deletions

diff --git a/files/ja/web/javascript/reference/trailing_commas/index.html b/files/ja/web/javascript/reference/trailing_commas/index.html
deleted file mode 100644
index 124dd12c22..0000000000
--- a/files/ja/web/javascript/reference/trailing_commas/index.html
+++ /dev/null
@@ -1,172 +0,0 @@
----
-title: 末尾のカンマ
-slug: Web/JavaScript/Reference/Trailing_commas
-tags:
-  - Comma
-  - ECMAScript2017
-  - ECMAScript5
-  - JavaScript
-  - Language feature
-  - Syntax
-  - Trailing comma
-translation_of: Web/JavaScript/Reference/Trailing_commas
----
-<div>{{JsSidebar("More")}}</div>
-
-<p><strong>末尾のカンマ</strong> ("最後のカンマ" と呼ばれることもあります) は、JavaScript のコードに新しい要素や引数、プロパティを追加するときに役立ちます。新しいプロパティを追加するとき、最終行ですでに末尾のカンマを使用していれば、最終行を修正することなく新しい行を追加できます。これによって、バージョン管理の差分がより洗練され、コード編集の煩雑さを軽減できます。</p>
-
-<p>JavaScript は、当初から配列リテラルで末尾のカンマを使用できました。そして、ECMAScript 5 でオブジェクトリテラルの、ECMAScript 2017 で関数の引数の末尾のカンマが使用できるようになりました。</p>
-
-<p>しかし、<a href="/ja/docs/Glossary/JSON">JSON</a> では末尾のカンマを使用できません。</p>
-
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="syntaxbox notranslate">,</pre>
-
-<h2 id="Examples" name="Examples">例</h2>
-
-<h3 id="Trailing_commas_in_literals" name="Trailing_commas_in_literals">リテラルの末尾のカンマ</h3>
-
-<h4 id="Arrays" name="Arrays">配列</h4>
-
-<p>JavaScript は配列の末尾のカンマを無視します。</p>
-
-<pre class="brush: js notranslate">var arr = [
-  1,
-  2,
-  3,
-];
-
-arr; // [1, 2, 3]
-arr.length; // 3</pre>
-
-<p>1 つ以上の末尾のカンマがある場合、省略 (または穴) が作られます。穴がある配列は<em>希薄な</em> (<em>密集した</em>配列は穴がありません) 配列と呼ばれます。たとえば、{{jsxref("Array.prototype.forEach()")}} や {{jsxref("Array.prototype.map()")}} で配列をイテレートするとき、穴はスキップされます。</p>
-
-<pre class="brush: js notranslate">var arr = [1, 2, 3,,,];
-arr.length; // 5
-</pre>
-
-<h4 id="Objects" name="Objects">オブジェクト</h4>
-
-<p>ECMAScript 5 から、オブジェクトリテラルの末尾のカンマも使用できるようになりました:</p>
-
-<pre class="brush: js notranslate">var object = {
-  foo: "bar",
-  baz: "qwerty",
-  age: 42,
-};</pre>
-
-<h3 id="Trailing_commas_in_functions" name="Trailing_commas_in_functions">関数の末尾のカンマ</h3>
-
-<p>ECMAScript 2017 では、関数の引数リストで末尾のカンマが使用できるようになりました。</p>
-
-<h4 id="Parameter_definitions" name="Parameter_definitions">引数定義</h4>
-
-<p>次の 2 つの関数定義はともに有効で等しいものです。末尾のカンマは、関数の <code>length</code> プロパティや <code>arguments</code> オブジェクトに影響を与えません。</p>
-
-<pre class="brush: js notranslate">function f(p) {}
-function f(p,) {}
-
-(p) =&gt; {};
-(p,) =&gt; {};
-</pre>
-
-<p>末尾のカンマは 、クラスやオブジェクトの<a href="/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions">メソッド定義</a>でも使用できます。</p>
-
-<pre class="brush: js notranslate">class C {
-  one(a,) {}
-  two(a, b,) {}
-}
-
-var obj = {
-  one(a,) {},
-  two(a, b,) {},
-};
-</pre>
-
-<h4 id="Function_calls" name="Function_calls">関数呼び出し</h4>
-
-<p>次の 2 つの関数呼び出しはともに有効で等しいものです。</p>
-
-<pre class="brush: js notranslate">f(p);
-f(p,);
-
-Math.max(10, 20);
-Math.max(10, 20,);
-</pre>
-
-<h4 id="Illegal_trailing_commas" name="Illegal_trailing_commas">不正な末尾のカンマ</h4>
-
-<p>カンマしか含まない関数の引数定義や関数呼び出しは、{{Jsxref("SyntaxError")}} を投げます。さらに、<a href="/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a> を使用しているときは、末尾のカンマは許可されません。</p>
-
-<pre class="brush: js example-bad notranslate">function f(,) {} // SyntaxError: missing formal parameter
-(,) =&gt; {};       // SyntaxError: expected expression, got ','
-f(,)             // SyntaxError: expected expression, got ','
-
-function f(...p,) {} // SyntaxError: parameter after rest parameter
-(...p,) =&gt; {}        // SyntaxError: expected closing parenthesis, got ','
-</pre>
-
-<h3 id="Trailing_commas_in_destructuring" name="Trailing_commas_in_destructuring">分割代入での末尾のカンマ</h3>
-
-<p>末尾のカンマは、<a href="/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">分割代入</a>の左辺でも使用できます。</p>
-
-<pre class="brush: js notranslate">// array destructuring with trailing comma
-[a, b,] = [1, 2];
-
-// object destructuring with trailing comma
-var o = {
-  p: 42,
-  q: true,
-};
-var {p, q,} = o;
-</pre>
-
-<p>また、rest element で使用すると、{{jsxref("SyntaxError")}} を投げます。</p>
-
-<pre class="brush: js example-bad notranslate">var [a, ...b,] = [1, 2, 3];
-// SyntaxError: rest element may not have a trailing comma</pre>
-
-<h3 id="Trailing_commas_in_JSON" name="Trailing_commas_in_JSON">JSON の末尾のカンマ</h3>
-
-<p>オブジェクトリテラルの末尾のカンマは、ECMAScript 5 でのみ導入されました。JSON は ES5 以前の JavaScript 構文に基づいているため、<strong>末尾のカンマを使用できません</strong>。</p>
-
-<p>次の行は <code>SyntaxError</code> を投げます。</p>
-
-<pre class="brush: js example-bad notranslate">JSON.parse('[1, 2, 3, 4, ]');
-JSON.parse('{"foo" : 1, }');
-// SyntaxError JSON.parse: unexpected character
-// at line 1 column 14 of the JSON data
-</pre>
-
-<p>正しく JSON をパースするには、カンマを省略します。</p>
-
-<pre class="brush: js example-good notranslate">JSON.parse('[1, 2, 3, 4 ]');
-JSON.parse('{"foo" : 1 }');</pre>
-
-<h2 id="Specifications" name="Specifications">仕様</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様書</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('ESDraft')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
-
-<div>
-
-
-<p>{{Compat("javascript.grammar.trailing_commas")}}</p>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>Initial ECMAScript proposal: <a href="https://github.com/tc39/proposal-trailing-function-commas">trailing function commas</a> by Jeff Morrison</li>
-</ul>
diff --git a/files/ja/web/javascript/reference/trailing_commas/index.md b/files/ja/web/javascript/reference/trailing_commas/index.md
new file mode 100644
index 0000000000..53f8b40afe
--- /dev/null
+++ b/files/ja/web/javascript/reference/trailing_commas/index.md
@@ -0,0 +1,216 @@
+---
+title: 末尾のカンマ
+slug: Web/JavaScript/Reference/Trailing_commas
+tags:
+  - Comma
+  - ECMAScript2017
+  - ECMAScript5
+  - JavaScript
+  - Language feature
+  - Syntax
+  - Trailing comma
+browser-compat: javascript.grammar.trailing_commas
+translation_of: Web/JavaScript/Reference/Trailing_commas
+---
+{{JsSidebar("More")}}
+
+**末尾のカンマ** (「最後のカンマ」と呼ばれることもあります) は、JavaScript のコードに新しい要素や引数、プロパティを追加するときに役立ちます。新しいプロパティを追加するとき、最終行ですでに末尾のカンマを使用していれば、最終行を修正することなく新しい行を追加できます。これによって、バージョン管理の差分がより洗練され、コード編集の煩雑さを軽減できます。
+
+JavaScript は、当初から配列リテラルで末尾のカンマを使用できました。その後でオブジェクトリテラルで、さらに最近では、関数の引数の末尾のカンマが使用できるようになりました。
+
+しかし、[JSON](/ja/docs/Glossary/JSON) では末尾のカンマを許容していません。
+
+## 構文
+
+```js
+,
+```
+
+## 例
+
+### リテラルの末尾のカンマ
+
+#### 配列
+
+JavaScript は配列の末尾のカンマを無視します。
+
+```js
+var arr = [
+  1,
+  2,
+  3,
+];
+
+arr; // [1, 2, 3]
+arr.length; // 3
+```
+
+2 つ以上の末尾のカンマがある場合、省略 (または穴) が作られます。穴がある配列は*疎らな*配列と呼ばれます (*密集した*配列は穴がありません)。たとえば、{{jsxref("Array.prototype.forEach()")}} や {{jsxref("Array.prototype.map()")}} で配列を反復処理するとき、穴はスキップされます。
+
+```js
+var arr = [1, 2, 3,,,];
+arr.length; // 5
+```
+
+#### オブジェクト
+
+ECMAScript 5 から、オブジェクトリテラルでも末尾のカンマを使用できるようになりました。
+
+```js
+var object = {
+  foo: "bar",
+  baz: "qwerty",
+  age: 42,
+};
+```
+
+### 関数の末尾のカンマ
+
+ECMAScript 2017 では、関数の引数リストで末尾のカンマが使用できるようになりました。
+
+#### 引数定義
+
+次の 2 つの関数定義はともに有効で等しいものです。末尾のカンマは、関数の `length` プロパティや `arguments` オブジェクトに影響を与えません。
+
+```js
+function f(p) {}
+function f(p,) {}
+
+(p) => {};
+(p,) => {};
+```
+
+末尾のカンマは、クラスやオブジェクトの[メソッド定義](/ja/docs/Web/JavaScript/Reference/Functions/Method_definitions)でも使用できます。</p>
+
+```js
+class C {
+  one(a,) {}
+  two(a, b,) {}
+}
+
+var obj = {
+  one(a,) {},
+  two(a, b,) {},
+};
+```
+
+#### 関数呼び出し
+
+次の 2 つの関数呼び出しはともに有効で等しいものです。
+
+```js
+f(p);
+f(p,);
+
+Math.max(10, 20);
+Math.max(10, 20,);
+```
+
+#### 不正な末尾のカンマ
+
+関数の定義や呼び出しにおいて引数がカンマしかないと、{{Jsxref("SyntaxError")}} が発生します。さらに、[残余引数](/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters)を使用しているときは、末尾のカンマは許可されません。
+
+```js example-bad
+function f(,) {} // SyntaxError: missing formal parameter
+(,) => {};       // SyntaxError: expected expression, got ','
+f(,)             // SyntaxError: expected expression, got ','
+
+function f(...p,) {} // SyntaxError: parameter after rest parameter
+(...p,) => {}        // SyntaxError: expected closing parenthesis, got ','
+```
+
+### 分割代入での末尾のカンマ
+
+末尾のカンマは、[分割代入](/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)の左辺でも使用できます。
+
+```js
+// 末尾のカンマ付きで配列を分割代入
+[a, b,] = [1, 2];
+
+// 末尾のカンマ付きでオブジェクトを分割代入
+var o = {
+  p: 42,
+  q: true,
+};
+var {p, q,} = o;
+```
+
+また、残余要素で使用すると、{{jsxref("SyntaxError")}} が発生します。
+
+```js example-bad
+var [a, ...b,] = [1, 2, 3];
+// SyntaxError: rest element may not have a trailing comma
+```
+
+### JSON の末尾のカンマ
+
+オブジェクトリテラルの末尾のカンマは、ECMAScript 5 から導入されました。JSON は ES5 以前の JavaScript 構文に基づいているため、**末尾のカンマを使用できません**。
+
+どちらの行も `SyntaxError` が発生します。
+
+```js example-bad
+JSON.parse('[1, 2, 3, 4, ]');
+JSON.parse('{"foo" : 1, }');
+// SyntaxError JSON.parse: unexpected character
+// at line 1 column 14 of the JSON data
+```
+
+正しく JSON を解釈するには、カンマを省略してください。
+
+```js example-good
+JSON.parse('[1, 2, 3, 4 ]');
+JSON.parse('{"foo" : 1 }');
+```
+
+### 名前付きインポートおよび名前付きエクスポートの末尾のカンマ
+
+末尾のカンマは名前付きインポートや名前付きエクスポートでも有効です。
+
+#### 名前付きインポート
+
+```js
+  import {
+    A,
+    B,
+    C,
+  } from 'D'
+
+  import { X, Y, Z } from 'W'
+
+  import { A as B, C as D, E as F } from 'Z'; // インポートの名前を変更
+```
+
+#### 名前付きエクスポート
+
+```js
+  export {
+    A,
+    B,
+    C
+  }
+
+  export { A, B, C };
+
+  export { A as B, C as D, E as F }; // エクスポートの名前を変更
+```
+
+### 数量接頭辞
+
+```js
+  //{ DecimalDigits[~Sep], DecimalDigits[~Sep] }
+  x{n,}
+  x{n,m}
+  x{n,m}?
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- 初期の ECMAScript の提案: [trailing function commas](https://github.com/tc39/proposal-trailing-function-commas) by Jeff Morrison