最適なJavaScriptコード規約とは何でしょうか?これは人によって意見が分かれる問題かもしれません。では、別の質問に変えましょう。どのコード規約が最も人気があるのでしょうか?

sideeffect.krはGitHubでホストされているオープンソースコードを分析することで、いくつかの興味深い結果を得ました。見てみましょう。

ccode

行末カンマ vs 行頭カンマ

行末カンマ:

var foo = 1,
    bar = 2,
    baz = 3;

var obj = {
    foo: 1,
    bar: 2,
    baz: 3
};

行頭カンマ:

var foo = 1
  , bar = 2
  , baz = 3;

var obj = {
    foo: 1
  , bar: 2
  , baz: 3
};

行末、92.345%;行頭、7.655%。(1,100,251回のコミットに基づく統計。)

スペースとタブ

最近はみんなスペースを使うのが好きです。スペースインデントを使用すると、異なる開発者や異なるエディタ設定でも同じ結果が見えることが保証されます。

スペース、81.1%;タブ、18.9%。(2,019,550回のコミットに基づく統計。)

関数名の後にスペースを追加するか

スペースなし

function foo() {
  return "bar";
}

スペースあり

function foo () {
  return "bar";
}

スペースなし、67.424%;スペースあり、32.576%。(1,212,488回のコミットに基づく統計。)

引数と括弧の間にスペースを入れるか

スペースなし

function fn(arg1, arg2) {
//or
if (true) {

スペースあり

function fn( arg1, arg2 ) {
  // ...
}

if ( true ) {
  // ...
}

スペースなし、94.31%;スペースあり、5.69%。(1,514,971回のコミットに基づく統計。)

オブジェクトリテラルのコロンの周囲にスペースを入れるか

コロンの後にスペース

{
  foo: 1,
  bar: 2,
  baz: 3
}

コロンの後にスペースなし

{
  foo:1,
  bar:2,
  baz:3
}

コロンの前後にスペース

{
  foo : 1,
  bar : 2,
  baz : 3
}

後ろにスペース、62.955%;スペースなし、22.891%;前後にスペース、14.154%。(1,300,035回のコミットに基づく統計。)

個人的には、スペースなしは窮屈すぎて、keyとvalueを素早く見分けるのに不利です。前後にスペースを入れる場合は、コロンを揃えないと美しく見えないでしょう。統計データから見ると、ほとんどのプログラマーはコロンを揃えるのを面倒くさがっています(それとも、ほとんどのプログラマーのIDEやエディタが十分にスマートではないのでしょうか?)

条件文

スペースあり

if (true) {
  //...
}

while (true) {
  //...
}

switch (v) {
  //...
}

スペースなし

if(true) {
  //...
}

while(true) {
  //...
}

switch(v) {
  //...
}

スペースあり、78.276%;スペースなし、21.724%。(1,163,316回のコミットに基づく。)

シングルクォート、ダブルクォート

シングルクォート、56.791%;ダブルクォート、43.209%。(1,705,910回のコミットに基づく。)

まとめ

つまり、最も人気のあるコード規約は次のとおりです:

  • 行末カンマ
  • スペースインデント
  • 関数名の後にスペースなし
  • 関数の引数と括弧の間にスペースなし
  • オブジェクトリテラルのコロンの後ろにスペースを入れ、コロンの前には入れない
  • 条件文のキーワードの後にスペースを入れる

人気があるものが必ずしも良いとは限りません(例えばインフルエンザのように)。しかし、コミュニケーションの観点から言えば、人気のあるスタイルに従ってコードを書くことで、あなたのコードはほとんどの人にとってより見慣れたものになります。