このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
末尾カンマ
Baseline
広く利用可能
*
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
* この機能の一部は、対応レベルが異なる場合があります。
末尾カンマ (「最後のカンマ」と呼ばれることもあります) は、JavaScript のコードに新しい要素や引数、プロパティを追加するときに役立ちます。新しいプロパティを追加するとき、最終行ですでに末尾カンマを使用していれば、最終行を修正することなく新しい行を追加できます。これによって、バージョン管理の差分がより洗練され、コード編集の煩雑さを軽減できます。
JavaScript は、当初から配列リテラルで末尾カンマを使用できました。オブジェクトリテラル、関数の引数、名前付きインポート、名前付きエクスポートなどにおいても、末尾カンマを同時に使用することができるようになりました。
しかし、JSON では末尾カンマをすべて許容していません。
解説
JavaScript で、カンマ区切りの値のリストが受け入れられ、最後のアイテムの後にさらに値が続くことがある場合、末尾カンマを使用することができます。次のようなものがあります。
これらすべての場合において、末尾のカンマは完全に任意であり、プログラムの意味づけに何ら影響を与えません。
特に、複数行にわたるリストのアイテムを追加・除去・並べ替えを行う際に有用です。これは、変更が必要な行数を減らすことができるため、編集作業や差分レビューの両方に役立ちます。
[
"foo",
+ "baz",
"bar",
- "baz",
]
例
リテラルの末尾カンマ
配列
JavaScript は配列の末尾カンマを無視します。
const arr = [
1,
2,
3,
];
arr; // [1, 2, 3]
arr.length; // 3
2 つ以上の末尾カンマがある場合、省略(または穴)が作られます。穴がある配列は疎配列と呼ばれます (密配列は穴がありません)。配列を、たとえば Array.prototype.forEach() や Array.prototype.map() で反復処理するとき、穴はスキップされます。疎配列は一般的に好ましくないため、末尾に複数のカンマを持つことは避けるべきです。
const arr = [1, 2, 3, , ,];
arr.length; // 5
オブジェクト
オブジェクトリテラルでも末尾カンマを使用できます。
const object = {
foo: "bar",
baz: "qwerty",
age: 42,
};
関数の末尾カンマ
関数の引数リストでも、末尾カンマが使用できます。
引数定義
次の 2 つの関数定義はともに有効で等しいものです。末尾カンマは、関数の length プロパティや arguments オブジェクトに影響を与えません。
function f(p) {}
function f(p,) {}
(p) => {};
(p,) => {};
末尾カンマは、クラスやオブジェクトのメソッド定義でも使用できます。
class C {
one(a,) {}
two(a, b,) {}
}
const obj = {
one(a,) {},
two(a, b,) {},
};
関数呼び出し
次の 2 つの関数呼び出しはともに有効で等しいものです。
f(p);
f(p,);
Math.max(10, 20);
Math.max(10, 20,);
不正な末尾カンマ
関数の定義や呼び出しにおいて引数がカンマしかないと、SyntaxError が発生します。さらに、残余引数を使用しているときは、末尾カンマは使用できません。
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 ','
構造分解での末尾カンマ
末尾カンマは、構造分解パターンの中でも使用できます。
// 末尾カンマ付きで配列を構造分解
[a, b,] = [1, 2];
// 末尾カンマ付きでオブジェクトを構造分解
const o = {
p: 42,
q: true,
};
const { p, q, } = o;
ただし、残余要素が存在する場合、その後にカンマを付けることはできません。
const [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma
JSON の末尾カンマ
JSON は JavaScript の構文のとても限られたサブセットに基づいているため、JSON では末尾カンマは使用することができません。
どちらの行も 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 }');
名前付きインポートおよび名前付きエクスポートの末尾カンマ
末尾カンマは名前付きインポートや名前付きエクスポートでも有効です。
名前付きインポート
import {
A,
B,
C,
} from "D";
import { X, Y, Z, } from "W";
import { A as B, C as D, E as F, } from "Z";
名前付きエクスポート
export {
A,
B,
C,
};
export { A, B, C, };
export { A as B, C as D, E as F, };
動的インポートの末尾カンマ
末尾カンマは、実行環境が 2 つ目の options 引数も実装している場合に限り、動的インポートで使用することができます。
import("D",);
import(
"D",
{ with: { type: "json" } },
);
数量接頭辞
メモ:
量化子の末尾カンマは、実際にはその意味づけを「正確に n」に一致させるものから、「少なくとも n」に一致させるものへと変更します。
/x{2}/; // Exactly 2 occurrences of "x"; equivalent to /xx/
/x{2,}/; // At least 2 occurrences of "x"; equivalent to /xx+/
/x{2,4}/; // 2 to 4 occurrences of "x"; equivalent to /xxx?x?/
仕様書
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。
関連情報
- 文法とデータ型ガイド