JavaScriptの「ケツカンマ問題」まとめ

2012/05/04

実際の挙動を調べてみた

テストコードを実行して、各環境でどうなるか見てみました。

テスト結果

〇：ケツカンマがあってもなくても挙動が変わらない
Ｘ：ケツカンマをつけると挙動が変わる

ブラウザ	配列リテラル	オブジェクトリテラル
IE6	×	×
IE7	×	×
IE8	×	○
IE9	○	○
Google Chrome 18	○	○
Firefox12	○	○
Safari(iPhone4S)	○	○
Node.js 0.6	○	○

なぜIE6,7(とIE8の配列)ではケツカンマが正しく動かないのか

結論からいうと、「それがJScriptの仕様である」ということになるかと思います。
後述のとおりECMAScript3の仕様書はケツカンマなしなので、IE(=Jscript)がそのような仕様になっていても間違いではないということになります。

ひとつだけ納得がいかないのは、IE(=Jscript)は配列ケツカンマとオブジェクトケツカンマで挙動が異なるのです。

var list = ['a' , 'b', ]; // →　要素３個のarrayが生成される。
var obj  = { a : 1, b : 2, };  // → 文法エラー

この仕様はなんか中途半端な気がします。

ECMAScriptの仕様はどうなっているのか

ECMAScript3

Standard ECMA-262 3rd Edition-December1999
「11.1.5 Object Initialiser」という章に記載があります。

Syntax
ObjectLiteral :
{ }
{ PropertyNameAndValueList }
PropertyNameAndValueList :
PropertyName : AssignmentExpression
PropertyNameAndValueList , PropertyName : AssignmentExpression

ケツカンマなしスタイルで書かれています。

結論としては「ECMAScript3の世界ではケツカンマを書かないほうがよい」と言えるかと思います。

ECMAScript5

Standard ESMA 262 5.1 Edition

「11.1.5 Object Initialiser」という章に記載があります。

Syntax
ObjectLiteral :
{ }
{ PropertyNameAndValueList }
{ PropertyNameAndValueList , }

ケツカンマが明示的に記載されています。
「ECMAScript5の世界ではオブジェクトケツカンマは堂々と書いてよい」という結論になります。
(余談：ECMAScript5の配列ケツカンマについては、仕様書を見ても扱いがよくわかりませんでした。)

Node.js

Node.jsは経験がないのですが、npmモジュールの中にはケツカンマ有スタイルと無スタイル両方あると聞きました。

nodeguide.comのコーディングスタイルガイドを見ると、オブジェクトケツカンマ有りが推奨されています。

Felix's Node.js Style Guide

var a = ['hello', 'world'];
var b = {
  good: 'code',
  'is generally': 'pretty',
};

結論

ケツカンマがあるとIE6,7,8では正しく動きませんので、IE6,7,8で使われる場合はケツカンマは書くべきではありません。
一方、スマホサイトやサーバサイドJSでは、ケツカンマは書いてもよいです。
実際に書くかどうかは個人・組織・コミュニティのポリシーにゆだねられると思います。

私個人の意見は、今回は控えさせていただきます。(Perl,PHPを書くときはケツカンマ書く派です)
ツイッター、はてぶコメントなどでご意見いただければ幸いです。

参考：他の言語ではどうなのか

連想配列ケツカンマについて調べてみました。

Perl

Perlはケツカンマつけるのが主流のようです。

「初めてのPerl」第５章ハッシュ
my %last_name = {
  "barney" => "rubble",
  "betty"  => "rubble",
}
リストの末尾によぶんなコンマが置かれていることに注目してください。
これは無害であり便利なものです。
このハッシュに行を追加する必要が生じた場合、その行には、キーと値のペアがあり、末尾にコンマがあることを確認するだけで済みます。

Plackのソースコードなどを見てみるとケツカンマついてます。
http://cpansearch.perl.org/src/MIYAGAWA/Plack-0.9986/lib/Plack/MIME.pm
http://cpansearch.perl.org/src/MIYAGAWA/Plack-0.9986/lib/Plack/Runner.pm

PHP

PHPも「ケツカンマ」つける文化な気がします。

Ethnaは「ケツカンマ」つける文化です。
https://github.com/ethna/ethna/blob/master/class/Controller.php

    /** @protected    array   デフォルトのforward定義 */
    protected $forward_default = array(
        '403' => array( 'view_name' => 'Ethna_View_403',),
        '404' => array( 'view_name' => 'Ethna_View_404',),
        '500' => array( 'view_name' => 'Ethna_View_500',),
        'json' => array( 'view_name' => 'Ethna_View_Json',),
        'redirect' => array( 'view_name' => 'Ethna_View_Redirect',),
    );

CakePHPは触ったことありませんが、これを見る限り「ケツカンマ」つける文化のように見えます。 https://github.com/cakephp/cakephp/blob/master/app/Config/database.php.default

	public $default = array(
		'datasource' => 'Database/Mysql',
		'persistent' => false,
		'host' => 'localhost',
		'login' => 'user',
		'password' => 'password',
		'database' => 'database_name',
		'prefix' => '',
		//'encoding' => 'utf8',
	);

最後のコメントアウトされた1行が、「ケツカンマ」の利便性を雄弁に語っています。

Ruby

Railsのチュートリアルを見てみました。

http://guides.rubyonrails.org/active_record_validations_callbacks.html

class Person < ActiveRecord::Base
  validates :email, :uniqueness => true, :on => :create
  validates :age, :numericality => true, :on => :update
  validates :name, :presence => true, :on => :save
end

ケツカンマ書いてないですね。
Rubyではケツカンマなしが主流なのでしょうか？
(Ruby初心者なのでよくわかりませんでした。詳しい人がいたら教えてください。)

まとめ

JavaScriptのケツカンマは過渡期
Perl,PHPではケツカンマがわりと普通

JavaScriptで、もう連想配列の最後のカンマに悩まない！(※追記あり)

追記

IE8,9のテスト結果に間違いがあったので修正しました。
Rubyのケースを書きなおしました。
ECMAScript3の仕様の解釈についての記述を修正しました。

#ケツカンマ

カテゴリ: JavaScript

DQNEO日記