セミコロン書いて良いのはデザイナまでだよね~

久々の JavaScript のセミコロンについてです

私はセミコロンいらない派ですが 書けと強要されないなら書きたい人は書けばいいよ というスタイルです

ただ 突っ込まざるを得ないコードを見かけたので書いてみます
そのままだと長い というかわかりづらいし 書いた人に気づかれたくないので 重要なところだけとりだしてデフォルメしてます
var a = 1;
var b = "text";

function f1(){
    var x = 1;
    var y = 2;
    return x + y;
}

var f2 = function(){
    var x = 1;
    var y = 2;
    return x * y;
}

[1, 2, 3].forEach(function(n){
    console.log(n);
});

一見何の変哲もない セミコロンがある JavaScript ですよね
やってる内容については意味ないものです


では これ動くと思いますか?

変数と関数宣言したあとで それらは使わずに 1,2,3 の配列を forEach で console.log 出力してるだけなので 動くと思うかもしれません


ですが エラーになります


ここまでに セミコロンセミコロン言ってるのでわかった人が多いかもですけど
ここです
    return x * y;
}

[1, 2, 3].forEach(function(n){

この 2 行目の 「}」 のあとはセミコロンが必要です
ないと次の 「[」 と結合されます

関数の宣言
function a(){

}

ならいらないのですが
var f = function(){

}

のような式の場合は 必要です

右辺が関数というだけで
var a = "aaa"
というのと一緒です


関数の場合は 「;」 書かないものだと思っている人もいるみたいです
宣言なのか関数式なのかの違いすらわかってない人はけっこういるようですし 仕方ないような気もします

構文をちゃんと理解してないのに セミコロンが必要な文にセミコロンつけましょう と言われても無理でしょう

完璧にセミコロンを書けないなら 文末セミコロンじゃなくて 「[」「(」「`」 で始まる時にセミコロンつけるシンプルなルールのほうがミスも少ないと思います

チェッカー系では

Lint や IDE ではどうなるんだろうと試してみました

Lint

http://www.jslint.com/


Unexpected '['.

構文的に 「}」 のあとに 「[」 は来れないようです

JavaScript としては問題ないので Lint 側でエラーにしてるようです

セミコロンありのスタイルでは 「}」 と 「[」 の間に改行ある場合は 禁止にしてしまうのも安全のためにいいのかも と思いましたが 改行なしでもダメみたいです

めったにないですが 使いたいケースも 0 ではないのでこれはどうなんだろう と思います


個人的に Lint は厳しすぎ というか 「オレに合わせろ」感が強くて嫌いです
昔 何かのエディタにデフォルトでついていたので 結果を見てみたら エラー多すぎて省略されました とかでていました
そのプラグインは即オフにされました

IDE

前に使ってみた JetBrains 系の IDE ではセミコロンがないってかなーりうるさく言われました
内部では Lint なのか独自なのかわからなかったのですが IDE の設定ですごく細かく調整できて もちろんすぐにオフにされました


もう一度オンにして試してみたら

Image

短くまとめると

var a = 1 // エラー
var b = 2 // エラー
var c = function(){

} // エラーなし
[1,2,3].forEach(e => console.log(e))

という結果に

上の 2 行はセミコロン書くように言われましたが 重要な 5 行目は言われませんでした

JavaScript 構文からすると 間違ってはいないものなので仕方ないのかもしれません


でも セミコロン忘れてるよ って注意が必要なのってこういう時じゃないんでしょうか?

1 行目や 2 行目は完全にセミコロン不要です
いわゆるよく「わからない動き」 のしようもないです

ここにセミコロン忘れてると言われて セミコロン書いてもなんの意味もないです

必要なのは セミコロンないことで 式が結合される 5 行目で 結合されるよ って注意書きです


1 行目などでもセミコロンつけておけば 一応コピペしたときに 5 行目のような状態をなくすことはできますけど セミコロンチェックがそれだけというのはなんか違う気がします