1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
---
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) => {};
(p,) => {};
</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
(,) => {}; // SyntaxError: expected expression, got ','
f(,) // SyntaxError: expected expression, got ','
function f(...p,) {} // SyntaxError: parameter after rest parameter
(...p,) => {} // 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>
|
