末尾カンマ - JavaScript | MDN

サイドバーを切り替え

配色

OS のデフォルト
ライト
ダーク

日本語

言語を記憶もっと知る

末尾カンマ

Baseline 広く利用可能 *

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

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

JavaScript は、当初から配列リテラルで末尾カンマを使用できました。オブジェクトリテラル、関数の引数、名前付きインポート、名前付きエクスポートなどにおいても、末尾カンマを同時に使用することができるようになりました。

しかし、JSON では末尾カンマをすべて許容していません。

解説

JavaScript で、カンマ区切りの値のリストが受け入れられ、最後のアイテムの後にさらに値が続くことがある場合、末尾カンマを使用することができます。次のようなものがあります。

これらすべての場合において、末尾のカンマは完全に任意であり、プログラムの意味づけに何ら影響を与えません。

特に、複数行にわたるリストのアイテムを追加・除去・並べ替えを行う際に有用です。これは、変更が必要な行数を減らすことができるため、編集作業や差分レビューの両方に役立ちます。

diff
  [
    "foo",
+   "baz",
    "bar",
-   "baz",
  ]

例

リテラルの末尾カンマ

配列

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

js
const arr = [
  1,
  2,
  3,
];

arr; // [1, 2, 3]
arr.length; // 3

2 つ以上の末尾カンマがある場合、省略（または穴）が作られます。穴がある配列は疎配列と呼ばれます (密配列は穴がありません)。配列を、たとえば Array.prototype.forEach() や Array.prototype.map() で反復処理するとき、穴はスキップされます。疎配列は一般的に好ましくないため、末尾に複数のカンマを持つことは避けるべきです。

js
const arr = [1, 2, 3, , ,];
arr.length; // 5

オブジェクト

オブジェクトリテラルでも末尾カンマを使用できます。

js
const object = {
  foo: "bar",
  baz: "qwerty",
  age: 42,
};

関数の末尾カンマ

関数の引数リストでも、末尾カンマが使用できます。

引数定義

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

js
function f(p) {}
function f(p,) {}

(p) => {};
(p,) => {};

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

js
class C {
  one(a,) {}
  two(a, b,) {}
}

const obj = {
  one(a,) {},
  two(a, b,) {},
};

関数呼び出し

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

js
f(p);
f(p,);

Math.max(10, 20);
Math.max(10, 20,);

不正な末尾カンマ

関数の定義や呼び出しにおいて引数がカンマしかないと、SyntaxError が発生します。さらに、残余引数を使用しているときは、末尾カンマは使用できません。

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

構造分解での末尾カンマ

末尾カンマは、構造分解パターンの中でも使用できます。

js
// 末尾カンマ付きで配列を構造分解
[a, b,] = [1, 2];

// 末尾カンマ付きでオブジェクトを構造分解
const o = {
  p: 42,
  q: true,
};
const { p, q, } = o;

ただし、残余要素が存在する場合、その後にカンマを付けることはできません。

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

JSON の末尾カンマ

JSON は JavaScript の構文のとても限られたサブセットに基づいているため、JSON では末尾カンマは使用することができません。

どちらの行も SyntaxError が発生します。

js
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
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, };

動的インポートの末尾カンマ

末尾カンマは、実行環境が 2 つ目の options 引数も実装している場合に限り、動的インポートで使用することができます。

js
import("D",);
import(
  "D",
  { with: { type: "json" } },
);

数量接頭辞

メモ: 量化子の末尾カンマは、実際にはその意味づけを「正確に n」に一致させるものから、「少なくとも n」に一致させるものへと変更します。

js
/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?/