JavaScript セミコロン『 ; 』
JavaScript の セミコロン
JavaScrip において、「;(セミコロン)」 は、文(=ステートメント)の区切りを意味します。JavaScript は「;(セミコロン)」を見つけると、セミコロンの前の文が終了し、次の文は異なる新しい文として認識します。
- JavaScript
- ブラウザ
- html
1 2 3 | document.write("a"); document.write("b"); document.write("c"); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>JavaScript | WEPICKS!</title> </head> <body> <!-- // ============ JavaScript ============ --> <script type="text/javascript"> document.write("a"); document.write("b"); document.write("c"); </script> <!-- ============ JavaScript ============ // --> </body> </html> |
この記述方法は C言語 や Java言語 Ruby などと同様の記述方法です。JavaScript のライブラリなどで、頭に セミコロン が記述されているのはこのためで、前述の文が終了し、ライブラリのコードが始まることを明示的にしています。
ECMAScript の仕様(2016年版 ECMA-262 7.0 Edition の11.9)
Most ECMAScript statements and declarations must be terminated with a semicolon. Such semicolons may always appear explicitly in the source text. For convenience, however, such semicolons may be omitted from the source text in certain situations. These situations are described by saying that semicolons are automatically inserted into the source code token stream in those situations.
ほとんどのECMAScriptステートメントと宣言は、「;(セミコロン)」で終了する必要があります。 このような「;(セミコロン)」は、常にソーステキストに明示的に表示されます。 ただし、便宜上、特定の状況では、ソーステキストから「;(セミコロン)」を省略することができます。 このような状況では、「;(セミコロン)」は自動的にソースコードトークンストリームに挿入されます。
※ECMAScriptステートメント
(空文、レット、定数、インポート、エクスポート宣言、変数ステートメント、式ステートメント、デバッガーステートメント、継続ステートメント、ブレークステートメント、リターンステートメント、スローステートメント、など)
セミコロンの省略
「;(セミコロン)」の省略
上述したように、通常、文の最後には「;(セミコロン)」を挿入しますが、JavaScript では、行末 が 文末 を意味し、行末 に「;(セミコロン)」を挿入しなくても文が終了したことになります。つまり、「\n(行末)」と「;(セミコロン)」は同じ意味になるのです。その結果、「\n(行末)」では「;(セミコロン)」を省略することが可能です。文と文 が 改行 で区切られていれば、文末 に「;(セミコロン)」を挿入しなくてもエラーになりません。これは、 JavaScript の 自動セミコロン挿入(ASI=Automatic Semicolon Insertion) 機能です。
- JavaScript
- ブラウザ
- html
1 2 3 | document.write("d") document.write("e") document.write("f") |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>JavaScript | WEPICKS!</title> </head> <body> <!-- // ============ JavaScript ============ --> <script type="text/javascript"> document.write("d") document.write("e") document.write("f") </script> <!-- ============ JavaScript ============ // --> </body> </html> |
同一行に複数文の場合は省略不可
同じ行に複数の文を記述する場合は、「;(セミコロン)」を省略することは出来ません。
- JavaScript
- ブラウザ
- html
1 | document.write("g"); document.write("h"); document.write("i"); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>JavaScript | WEPICKS!</title> <?php require_once('../../google_analytics.php'); ?> </head> <body> <!-- // ============ JavaScript ============ --> <script type="text/javascript"> document.write("g"); document.write("h"); document.write("i"); </script> <!-- ============ JavaScript ============ // --> </body> </html> |
セミコロン を省略した場合の予期せぬエラー
常にセミコロンを使います.
コードのセミコロンを省き, セミコロンの挿入を処理系に任せた場合, 非常にデバッグが困難な問題が起こります. 決してセミコロンを省くべきではありません.
return文での誤った解釈
例えば以下のコードを見てみて下さい。
1 2 | return true; |
上記コードは、JavaScript の自動セミコロン挿入(ASI=Automatic Semicolon Insertion) 機能によって return の後に セミコロン が挿入され、
1 2 | return; true; |
のように解釈されます。記述者の意図が
1 | return true; |
であれば、誤った解釈であり、誤動作に繋がります。
後置演算子の ++ や — での誤った解釈
後置演算子の ++ や — は、演算子の対象と同じ行に記述する必要があります。以下のコードを見てみましょう。「++(インクリメント演算子)」は、 b に対して加算することになります。
- JavaScript
- ブラウザ
- html
1 2 3 4 5 6 7 | a = 1, b = 1 a ++ b document.write(a+"<br>") document.write(b+"<br>") |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="robots" content="all"> <title>JavaScript | WEPICKS!</title> </head> <body> <!-- // ============ JavaScript ============ --> <script type="text/javascript"> a = 1, b = 1 a ++ b document.write(a+"<br>") document.write(b+"<br>") </script> <!-- ============ JavaScript ============ // --> </body> </html> |
1 2 | a; ++;b |
このように解釈あれてしまうのです。
まとめ
タグ(=記事関連ワード)
日付
最終更新日:2018年06月12日