A Web Design Community curated by Chris Coyier.

Commas Before - CSS-TricksにおいてJavaScriptコーディングにおけるちょっとしたティップスが紹介されている。一般的に採用されているコーディングスタイルとは異なっているのでトリッキーな表記に見えるが、こういう発想でコーディングすることもあるということで参考になる。似たようなコードに出会ったときに、なぜこのようなコーディングが実施されているのか理解する上で役に立つ。

JSON表記をする場合、次のような記述を採用するのが一般的だ。区切りのコンマは各行の最後に記述する。

var article = {
    channel:     'enterprise', 
    subchannel:  'javascript',
    type:        'news'
}

この記述方法で犯しがちなミスは、次のように最後の行をコメントアウトしてから

var article = {
    channel:     'enterprise', 
    subchannel:  'javascript',
//  type:        'news'
}

次のように最後の行に新しい値を追加。

var article = {
    channel:     'enterprise', 
    subchannel:  'javascript',
//  type:        'news'
    subbype:     'css'
}

追加したコメントを削除して実行するとシンタックスエラーになる。行の最後にコンマを入れていないからだ。

var article = {
    channel:     'enterprise', 
    subchannel:  'javascript',
    type:        'news'          ここで文法エラー発生
    subbype:     'css'
}

Commas Beforeで紹介されている「コンマビフォア」はこれを回避するコーディング方法を指しており、次のように表記する。見慣れたコーディングスタイルからみるとちょっとばかりトリッキーな感じだ。

var article = {
    channel:     'enterprise'
  , subchannel:  'javascript'
  , type:        'news'
}

この表記であれば、次のようにコメントアウトして新しく値を追加しても

var article = {
    channel:     'enterprise'
  , subchannel:  'javascript'
//, type:        'news'
  , subbype:     'css'
}

コメントをとっても次のようになって問題なく動作する。

var article = {
    channel:     'enterprise'
  , subchannel:  'javascript'
  , type:        'news'
  , subbype:     'css'
}

この方法は複数行にまたがる値の宣言でも利用できる。通常の表記は次のようになるが

var channel = 'enterprise', 
    subchannel = 'javascript',
    type = 'news';

コンマビフォアの書き方だと次のようになる。セミコロンが最後の行に飛び出ているところがポイントとなる。

var channel = 'enterprise'
  , subchannel = 'javascript'
  , type = 'news'
  ;

Commas Beforeはコメントに寄せられている意見も興味深い。次のような意見が掲載されている。

  • 参考になるティップスだ。
  • 古いパーサはこの表記を正しく解釈してくれるのか。
  • 可読性を考えると、コンマビフォアよりもコンマアフターの方がよい。
  • 同じ発想のコーディングスタイルはSQL命令のANDなどですでに知られている。この発想をコンマにも適用するとは気がつかなかった。
  • タブを使うとスタイルが崩れる。スタイルを揃えようとすれば余分なコーディングが必要になるので、結果的に手間は変わらないのではないか。
  • 1行目だけスペースを入れるようにすれば、コンマを入れても表記は揃うようになる。
  • コンマビフォアで末行のデータ追加の問題は解消されるかもしれないが、逆に先頭行の追加で問題が発生するだけじゃないか。
  • データの追加は末尾の行に実施することが多いで問題ないのではないか。

コーディングは好みがでやすい部分なので、こうした細かい点を追い求めてもあまり意味がないことが多い。しかし、コンマビフォアで表記されたソースコードを読んだ時に、こうした発想でコーディングするプログラマもいるということを知っておくと、知らない場合よりもすんなりとコードが読めるようにはなりそうだ。