diff options
Diffstat (limited to 'files/ja/web/javascript/reference/trailing_commas')
| -rw-r--r-- | files/ja/web/javascript/reference/trailing_commas/index.html | 172 |
1 files changed, 172 insertions, 0 deletions
diff --git a/files/ja/web/javascript/reference/trailing_commas/index.html b/files/ja/web/javascript/reference/trailing_commas/index.html new file mode 100644 index 0000000000..124dd12c22 --- /dev/null +++ b/files/ja/web/javascript/reference/trailing_commas/index.html @@ -0,0 +1,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> |