セミコロン自動挿入と改行/JavaScript

JavaScriptのセミコロンは省略可能で、適切な改行があれば正しく動作します。

本項では、セミコロン自動挿入と改行について説明します。

セミコロンの自動挿入とは

 JavaScriptでは、行末のセミコロン「;」は自動的に補完してくれます。つまり、省略しても動作する事が殆どです。

セミコロン自動挿入

 又、セミコロンは必ずしも改行部分に挿入される訳ではありません。以下は、var x = 1;と解釈されます。

【処理の途中で改行を入れる例】
<script>
var
 x
 =
 1
</script>

 このように、1つの処理と見なせる場合は、最後にだけセミコロンを挿入します。

セミコロン自動挿入のルール

 セミコロンは、改行や}の前だけに挿入されます。

 JavaScriptでは、改行は必須ではありません。改行は、人が見た時に分かり易くするために必要ですが、ブラウザが解釈するためには不要です。

セミコロン自動補完と改行

 但し、セミコロンを自動挿入させたい場合、必要な改行がないとセミコロンが挿入されず、エラーになります。

【セミコロンを使わずに改行もしない例】
<script>
var x = 1var y = 2
</script>

 上記では、x = 1の後にセミコロンか改行のどちらかが必要です。

 又、}の前に自動挿入されるため、以下はvar x = 1の後にセミコロンが挿入されます。

【}の前にセミコロンが挿入される例】
<script>
function func1() { var x = 1 }
</script>

強制的なセミコロン挿入

 改行すると、強制的にセミコロンが挿入される事があります。以下は、例です。

・[no LineTerminator here] ++
 例:x 改行 ++ 改行 y → x;++y
・[no LineTerminator here] --
 例:x 改行 -- 改行 y → x;--y
・continue [no LineTerminator here] 識別子 ;
 例:continue 改行 test1; → continue;test1;
・break [no LineTerminator here] 識別子 ;
 例:break 改行 test1; → break;test1;
・return [no LineTerminator here] 式や値 ;
 例:return 改行 1; → return;1;
・throw [no LineTerminator here] 式や値 ;
 例:throw 改行 1; → shrow;1;

 ルールとして、[no LineTerminator here]部分には改行があってはいけない事になっています。あると強制的にセミコロンが挿入されます。上記例の部分では、改行があるとどのように扱われるかを→の右側に示しています。

 [no LineTerminator here] ++を例に、もう少し説明します。

【[no LineTerminator here] ++の例】
<script>
var x = 1
var y = 2
var z = x
 ++
  y
document.write(z)
</script>

 赤字部分は、++の後だけセミコロンを挿入するとx++と解釈出来、++の前だけセミコロンを挿入すると++yと解釈出来ます。2つの解釈は、結果が異なります。

 しかし、++の前に改行があると++の前にセミコロンが挿入されるため、var z = x;++y;と解釈されます。

 次は、return [no LineTerminator here] 式や値の場合です。

【return [no LineTerminator here] 式や値の例】
<script>
function func1() {
    var x = 1
    return
     x + 1
}

document.write(func1());
</script>

 上記は、returnの後にセミコロンを挿入するとreturn;x + 1;になり、挿入しないとreturn x + 1;となります。しかし、ruturnとx + 1の間に改行があるとセミコロンが挿入されるため、前者が採用されます。

 結果として、returnで値を返せずundefinedになります。従って、値を返したい場合は赤字部分を改行せずに書く必要があります。

セミコロンが必須な例

 セミコロンは、記述が必須な時もあります。以下は、例です。

【先頭に左括弧がある場合】
<script>
var a = 1
(function addition1(x) {
    document.write(x);
})(a);
</script>

 これは、赤字の最後か青字の最初にセミコロンを入れないと、エラーになります。青字部分は即時関数ですが、前の行の引数として扱われ(つまり、1つの処理と見なされ)、セミコロンが挿入されないためです。

 又、for文のセミコロンも自動挿入されないため、以下のように明示的な記述が必要です。

【for文でのセミコロン】
<script>
for ( var i = 1 ;
 i <= 3 ;
 i++ ) { document.write(i); }
</script>

 赤字のセミコロンを省略すると、改行があってもエラーになります。

Closure Compiler

 セミコロンの自動挿入は、途中で余計な改行をしなければ、なるべく正常動作するよう補完してくれます。どのように自動挿入されるかチェックする時は、「Closure Compiler」が役に立ちます。スクリプトを張り付けて、「Compile」ボタンをクリックするだけで、結果を表示してくれます。

 又、「 Whitespace only」にチェックを入れると、無駄な空白や改行を削除してくれます。これは、minifyと言ってファイルサイズを小さくするのに役立ちます。ファイルサイズを小さくするとデータ転送が速く終わるため、ブラウザの表示を少し高速化出来る可能性があります。

 このため、スクリプトの作成時は分かり易いように改行を使い、公開する時はClosure Compilerを使ってファイルサイズを小さくするという事が出来ます。

セミコロンの記述は必要か?

 セミコロンの補完にはルールがありますが、直感的に分かる範囲であり、1処理の途中で改行等しなければ殆ど問題になりません。

 このため、セミコロンを使っても使わなくても良いとは思いますが、どちらでも動作するというのは理解しておいた方が良いと言えます。例えば、人が作ったスクリプトを書き直す時、セミコロンの自動挿入で意外なエラーになった時等に役立つからです。

 尚、見た目としてセミコロン有り、無しはスクリプト内で統一しておいた方が良いとは言えます。又、改行を取り除くだけのツール(セミコロンは補完しない)を使う場合は、セミコロンを記述しておく必要があります。

  • このエントリーをはてなブックマークに追加