JavaScriptに限った話ではありませんが、式の途中で改行するとき、演算子の後で改行する書き方と、演算子の前で改行する書き方があります。
var a = 1 +
2 +
3 +
4 ;
var a = 1
+ 2
+ 3
+ 4
;
最後のセミコロンの位置にも流派があるかもしれませんが、ひとまず、便宜的に演算子後置スタイル、演算子前置スタイルとそれぞれ呼ぶことにします。
いや、別にどちらのスタイルで書いてもいいのですよ。ここで宗教論争をする気はありません。しかし個人的に昔、前置スタイルの書き方に抵抗があった時期がありまして、「前置は怖くない、使っても大丈夫なんだ」ということを説明してみます。
前置恐怖症
初心者向けの解説でも、「JavaScriptは文末のセミコロンを省略できる」ということが大抵は書いてあります。が、それしか書いてないことが多いのです。
昔の私は、これだけを読んで「JavaScriptは式の途中で改行すると勝手に文がぶった切られる恐ろしい言語なんだ」とインプットしてしまいました。前置が怖いのはそのせいです。
前置恐怖症の思考はこうです。
//前置で書くと
var a = 1
+ 2;
//こう認識されるんじゃないか。文法的にもおかしくないし
var a = 1;
+ 2;
//後置で書いておけば安心だ
var a = 1 +
2 ;
//これは文法エラーなのでこんな解釈はされないだろう
//var a = 1 +;
// 2;
もちろんこれは杞憂であり、前置スタイルで書こうが後置スタイルで書こうが同じ解釈がされるんですが、それを理解するためにはECMAScriptの「Automatic Semicolon Insertion」の項を理解しなくてはなりません。
迷ったら言語の仕様書を読め
幸い、JavaScriptの仕様書であるStandard ECMA-262はWeb上でPDF形式で公開されていて、誰でも無料で読むことができます。言語仕様について悩んだら言語の仕様書を読むのが一番です。
Standard ECMA-262
7.9 Automatic Semicolon Insertionにすべての真実が！！
…煽ってみましたが、英語だし普通のJSerはここまでやらなくてもいい気がしてきました。いい感じの意訳はこちらの記事などに任せるとして、
自動セミコロン挿入の謎 〜ECMAScriptの奇妙な仕様 その２〜 My life as an APE
普通のJSerなら、この一節さえ理解しておけばだいたいOKでしょう。
The resulting practical advice to ECMAScript programmers is:
A postfix ++ or -- operator should appear on the same line as its operand.
An Expression in a return or throw statement should start on the same line as the return or throw token.
A Identifier in a break or continue statement should be on the same line as the break or continue token.
適当な意訳
後置の「++」「--」の前で改行するべからず
「return」「throw」の後ろで改行するべからず
「break」「continue」の後ろで改行するべからず
これらは安易に改行するとそこで強制的に文がぶった切られます。なんでこんな仕様なんだろうと思わなくもない。。（throwの後ろで改行するとthrow;になって強制SyntaxErrorってどうなの…）
逆に言えば、この6つの例外を除けば、可能な限り後続行と連結されるということなのです。
そう、気にしなければならないのはたった６つだけなんです。あとはどこで改行しようが連結されるので、前置スタイルだって安心して使えます。
var a = 1 + 2; //これを
//後置でもいい
var a = 1 +
2;
//前置だって大丈夫
var a = 1
+ 2;
//どこで改行しようが
var a =
1
+
2
;
//何個改行をはさもうが
var a
=
1
+
2;
//大丈夫なんだ！！！
というわけで、好きな方を使えばいいと思います、ハイ。
もしかすると、「そもそも後置で統一しとけばいいだろうが、このザコめ！」みたいな意見があるかもしれないので、主観で前置と後置の特徴をまとめてみます。
演算子後置スタイルのメリット・デメリット
var a = 1 +
2 +
3 +
4 ;
- メリット
- たぶん世の中の多数派。なのでたぶん誰でも見慣れていて読みやすい。
- 言語的なサポートがあるケースも。(もっともIEとの互換性のために避けるのが美徳とされていますけど）
var a = [ 1, 2, 3, //カンマをいちいち取らなくてもいい ];
- デメリット
- 項目の追加が少し面倒。
var a = 1 + 2 ; // +3を追加しようとすると var a = 1 + 2 + //一つ前の行を+に書き換えて 3 ; //追加 - 前行との関係が分かりにくくなりがち。特にメソッドチェーンで顕著。
// こんな風に書いてしまうと、 $("#target"). css("background", "#000"). css("color", "#fff"); //メソッドなのかcssという名前の関数を呼んでいるのか //わかりにくい
- 項目の追加が少し面倒。
演算子前置スタイルのメリット・デメリット
後置と逆になります。
var a = 1
+ 2
+ 3
+ 4
;
- メリット
- 項目の追加がしやすい。
var a = 1 + 2 ; //+3を追加する場合は var a = 1 + 2 + 3 //どこも書き換える必要はなく、追加するだけ ; - 前行との関係性が一覧しやすい。
$("#target") .css("background-color", "#000") .css("color", "#fff") ; css("hogehoge"); //もし"css"という関数とメソッドが混在していても //見分けが付きやすい
- 項目の追加がしやすい。
- デメリット
- 少数派のため慣れてない人が多そう
- もちろん言語のサポートもない
- メリットを活かすにはセミコロンを次行に書く必要があり、それが美しくないかも
個人的には、基本は後置スタイルで書いて、メソッドチェーンだけ前置スタイルで書くようにしています。まあプロジェクトでコーディングルールを決めて、やりたいようにやればいいんじゃないですかね。
keyword: javascript