From 182fb881c9b7b2634d6be44e29f32a58a717f6c8 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 11 Aug 2021 23:52:11 +0900 Subject: Web/JavaScript/Reference/Trailing_commas を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Markdown に変換 - 2021/07/21 時点の英語版に同期 --- .../reference/trailing_commas/index.html | 172 ---------------- .../javascript/reference/trailing_commas/index.md | 216 +++++++++++++++++++++ 2 files changed, 216 insertions(+), 172 deletions(-) delete mode 100644 files/ja/web/javascript/reference/trailing_commas/index.html create mode 100644 files/ja/web/javascript/reference/trailing_commas/index.md 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 ---- -
{{JsSidebar("More")}}
- -

末尾のカンマ ("最後のカンマ" と呼ばれることもあります) は、JavaScript のコードに新しい要素や引数、プロパティを追加するときに役立ちます。新しいプロパティを追加するとき、最終行ですでに末尾のカンマを使用していれば、最終行を修正することなく新しい行を追加できます。これによって、バージョン管理の差分がより洗練され、コード編集の煩雑さを軽減できます。

- -

JavaScript は、当初から配列リテラルで末尾のカンマを使用できました。そして、ECMAScript 5 でオブジェクトリテラルの、ECMAScript 2017 で関数の引数の末尾のカンマが使用できるようになりました。

- -

しかし、JSON では末尾のカンマを使用できません。

- -

構文

- -
,
- -

例

- -

リテラルの末尾のカンマ

- -

配列

- -

JavaScript は配列の末尾のカンマを無視します。

- -
var arr = [
-  1,
-  2,
-  3,
-];
-
-arr; // [1, 2, 3]
-arr.length; // 3
- -

1 つ以上の末尾のカンマがある場合、省略 (または穴) が作られます。穴がある配列は希薄な (密集した配列は穴がありません) 配列と呼ばれます。たとえば、{{jsxref("Array.prototype.forEach()")}} や {{jsxref("Array.prototype.map()")}} で配列をイテレートするとき、穴はスキップされます。

- -
var arr = [1, 2, 3,,,];
-arr.length; // 5
-
- -

オブジェクト

- -

ECMAScript 5 から、オブジェクトリテラルの末尾のカンマも使用できるようになりました:

- -
var object = {
-  foo: "bar",
-  baz: "qwerty",
-  age: 42,
-};
- -

関数の末尾のカンマ

- -

ECMAScript 2017 では、関数の引数リストで末尾のカンマが使用できるようになりました。

- -

引数定義

- -

次の 2 つの関数定義はともに有効で等しいものです。末尾のカンマは、関数の length プロパティや arguments オブジェクトに影響を与えません。

- -
function f(p) {}
-function f(p,) {}
-
-(p) => {};
-(p,) => {};
-
- -

末尾のカンマは 、クラスやオブジェクトのメソッド定義でも使用できます。

- -
class C {
-  one(a,) {}
-  two(a, b,) {}
-}
-
-var obj = {
-  one(a,) {},
-  two(a, b,) {},
-};
-
- -

関数呼び出し

- -

次の 2 つの関数呼び出しはともに有効で等しいものです。

- -
f(p);
-f(p,);
-
-Math.max(10, 20);
-Math.max(10, 20,);
-
- -

不正な末尾のカンマ

- -

カンマしか含まない関数の引数定義や関数呼び出しは、{{Jsxref("SyntaxError")}} を投げます。さらに、rest parameters を使用しているときは、末尾のカンマは許可されません。

- -
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 ','
-
- -

分割代入での末尾のカンマ

- -

末尾のカンマは、分割代入の左辺でも使用できます。

- -
// array destructuring with trailing comma
-[a, b,] = [1, 2];
-
-// object destructuring with trailing comma
-var o = {
-  p: 42,
-  q: true,
-};
-var {p, q,} = o;
-
- -

また、rest element で使用すると、{{jsxref("SyntaxError")}} を投げます。

- -
var [a, ...b,] = [1, 2, 3];
-// SyntaxError: rest element may not have a trailing comma
- -

JSON の末尾のカンマ

- -

オブジェクトリテラルの末尾のカンマは、ECMAScript 5 でのみ導入されました。JSON は ES5 以前の JavaScript 構文に基づいているため、末尾のカンマを使用できません。

- -

次の行は SyntaxError を投げます。

- -
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 をパースするには、カンマを省略します。

- -
JSON.parse('[1, 2, 3, 4 ]');
-JSON.parse('{"foo" : 1 }');
- -

仕様

- - - - - - - - - - -
仕様書
{{SpecName('ESDraft')}}
- -

ブラウザー実装状況

- -
- - -

{{Compat("javascript.grammar.trailing_commas")}}

-
- -

関連情報

- - 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)でも使用できます。

+ +```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 -- cgit v1.2.3-54-g00ecf