…またややこしいタイトルにしてしまった。
予め伝えておきますが、この記事は「JavaScript訳わかんねえんだよ何がvarだスクリプト言語ならもっと気軽に変数を使わせろスコープややこしいわファッキュー」みたいなものではありません。
JS（色んな意味で）を愛する人が書いています。
いやー、にしても、JavaScriptの変数の宣言って難しいですよねー。何がって？
インデントが、ですよ奥さん。
var というキーワードを先頭に置かなきゃならないという厄介な規則のせいで、綺麗なインデントにするのに四苦八苦するわけですよ。var による明示的な変数の宣言によって、JavaScriptのクロージャが真価を発揮するわけですが、それにしても邪魔くさい…。
まあ普通はコーディングスタイルをきちんと決めるべきなんですけど、個人でちゃちゃっと小さいプログラムを組むときにこの変数宣言のインデントで結構悩んだりします（僕は）。
なので、この記事がプロジェクトのコーディング規約を決める際やなんか綺麗なJavaScriptが書けないというときに役に立てばいいと思います。
それでは（僕が知る限りの）変数宣言のコーディングスタイルを解説していきます。
あと、名前とメリット・デメリットに関しては僕の独断と偏見で決めています。
1. 二行目以降改行型
恐らく世界で一番使われているスタイル。
こんな感じです。
//宣言だけで代入を行わない場合や
var foo, bar, baz;
//宣言して代入する変数が一つだけの場合は
//varのあとに続けて一行にする
var foo = 'hoge';
//代入もする変数が二つ以上ある場合は
//二行目以降、一文字分インデントする
var foo = 'hoge',
bar = 'fuga',
baz = 'fuge';
//宣言のみの変数を一行目にまとめることが多い
var foo, bar,
baz = 'hoge';
メリット
- jQuery等でも使われていて、ある意味世界標準。
- エディタが優秀ならこのスタイルでインデントしてくれることが多い。
ぶっちゃけこれしか無い気がします。これって一種のバッドノウハウなんじゃ…。
デメリット
- 変数の追加がしにくい（セミコロンのあとにカーソルを合わせてコンマを入れて改行しないといけない）。
- 微妙なエディタだとインデントがちょっとずれる。
- 一行目と二行目以降で変数名の始まる位置がずれて綺麗じゃない（雑感）。
明らかにメリットよりデメリットの方が多いです。
特にデメリットの1は重要なことだと思います。
2はどういうことかというと、セミコロンを打って文が終わったあとも、一文字上がったままのインデントが継続されたり、そもそも一文字インデントしてくれなかったりすることがあったりします。
少なくとも、わざわざ他人に薦めるほどのものじゃないかな、と。エディタが自動でこうしてくれるならラッキーとか。
2. 二行目以降改行型（改）
前のやつのインデント違い。
とりあえずこんな感じ。
//二行目以降は一行目と位置が揃うよう四つインデントする。
var foo, bar,
baz = 'hoge',
buz = 'fuga';
メリット
- これも世界中で使われている（YUI等）。
- 二行目以降改行型よりインデントがいい（と個人的に思う）。
デメリット
- 相変わらず変数の追加がしにくい。
- 等幅フォントじゃないとせっかくインデントを揃えた意味がない。
最後のは私怨です。普通等幅フォントが使えない環境でコーディングしないよね…。
3. 毎行var型
先のデメリット1のもっとも単純な解決策。
こんな感じです。
//宣言のみの変数は一行にまとめる
var foo, bar, baz;
//代入もする変数は必ず一行のvar文にする
var foo = 'hoge';
var bar = 'fuga';
var baz = 'fuge';
メリット
- 変数の追加がしやすい。
- インデントじゃないからエディタに振り回されない。
-
varというキーワードが同じ位置に並んで綺麗 Java/C#などと比較的似ているため、それらに親しんでいる人に受け入れやすい。
ドキュメント生成ツール（JSDoc等）と相性がいい。
変数の追加がしやすいので、この方法はNode.jsの先頭部分のrequireが並べられるところで使われることが多いです。requireするモジュールが増えても対応しやすいように。
四つ目五つ目はコメントから追加したものです。詳しくはコメントをご覧ください。（maroyaka@github様、ありがとうございます）
デメリット
- タイプ数が増加する。
主だったデメリットはこれぐらいでしょうか。
なかなか悪くないスタイルです。
4. 先頭コンマ型
メソッドチェインのために . 演算子を各行の先頭に持ってくるとかそういう類いの発想。
これ考えた人怖い。
//終わりにコンマを打たないで、次の行に持っていく方式。
//二つインデントすることでいい感じになる。
var foo, bar
, baz = 'hoge'
, buz = 'fuge'
;
メリット
- 変数の追加がしやすい。
- 変数名の始まる位置も揃って綺麗。
- 恐らくこれが変数宣言の完成形。（←そんなことないかもしれない）
これまで掲げられてきた問題点を全て解決しています。
この形式は「Node.js入門」という本で見たものでした。初めて見たときはちょっと感動。
あとnpmのコーディングスタイルにも用いられているようです。（hden@github 様ありがとうございます）
デメリット
- あまり広まっていない。
- エディタのインデントが二行目以降改行型と同じようになることがある。
- 生理的に受け付けない人がいるかもしれない…。（←結構いるようです。ぐぬぬ）
1も2もメリットの前には取るに足らない気がします。
3については先鋭的なものだからどうしようもない気が…。
5. 直後改行型
自分が個人的に使ってるスタイル。毎行var型の正反対を行く。
自分のQiitaの記事は全てこれになっているはずです。
//varのあとは必ず改行する
var
foo, bar,
baz = 'hoge';
メリット
- エディタに左右されない。
- 等幅フォントじゃなくてもコードが綺麗。
2については完全に個人的な理由です。そもそも等幅フォントが使えない環境でコーディングする方が間違っています。
デメリット
- コードが縦に長くなってしまう。
- 変数の追加がしにくい。
- こんなスタイル使ってる人滅多にいない。
たとえ変数が一つでも二行使うのでコードが縦に長くなります。
3は滅多にいないというか自分以外知りません。誰かいたら教えてください。
なんか、書けば書くほどあまり上手い方法ではない気がしてきました。なぜだ…。
ただ、それでも自分は当分はこのスタイルでいくつもりです。
結論
今から新しいことをやるなら万能型か毎行 var 型がいいんじゃないかと思います。
Twitterやらコメントやらを総合的にかんがみると毎行 var 型やたら人気ですし。
ついでに言えば、特にコーディング規約の定められていない環境なら自分のやりたいようにやるのが一番いいです。当然の話ですが。
最後に、こんなスタイルもあるよー、とかこんなメリット・デメリットもあるんじゃないの？とか、他にもツッコミ等ありましたらコメントお願いします。
- 追記(13/04/26)コメント欄で指摘された、毎行var型・万能型の話を追加。_