Javascriptの文末の；（セミコロン）について

Question

概要

はじめてJavascriptを勉強しています。
；（セミコロン）を文末につけるとのことですが、；の付く場合・付かない場合がどういうときかが分かりません。

素朴な疑問で大変恐れ入りますが、ご回答いただけると助かります。
よろしくお願いいたします。

コード例

（九九を1×1～99×99まで計算して表にして表示させる）

let html = '<tr>';
for(let x = 1; x <= 99; x += 1){
    html += '<th>' + x + '</th>';
}
html += '</tr>';

for(let y = 1; y <= 99; y += 1){
    html += '<tr><th>' + y + '</th>';
    for(let x = 1; x <= 99; x += 1){
        html += '<td>' + x * y + '</td>';
    }
    html += '</tr>';
}
let elem = document.querySelector('table');
elem.innerHTML = html;

具体的な不明点

2行目

for(let x = 1; x <= 99; x += 1){

let x = 1; x <= 99; はセミコロンが付いて
x += 1　はつかないのはなぜでしょうか？

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください

[m.ts10806]

あと、そこ、「文末」ではないはずです。

[miyabi_pudding]

ASI（オートマティック・セミコロン・インサーション）がどうなのか？という質問でしょうか？
それとも、ASIを効かせた上で、それでもセミコロンが必要な場合と必要ない場合がわからない、ということでしょうか？？

[7_7shi]

>m.ts10806様
すみません、code機能というものがあったのですね。修正いたしました。
確かに「文末」ではない…のですね。他の方も拝見し、納得しました。
ありがとうございます。

[7_7shi]

>miyabi_takatsuk様
まずASIがなにか、分かっておりませんでした。
調べたところ、常にセミコロンを文末に打つことができる？ような機能のようですね。
そちらは使っておらず、セミコロンが必要な場合と必要ない場合がわからないという質問でした。

Answer 1

文 (Statement)

JavaScriptではコードは文の単位で文法が定義されており、「文末にセミコロンを付ける文」と「文末にセミコロンを付けない文」の二種類存在します。

for 文

for 文は「文末にセミコロンを付けない文」です。
そして、ご質問の「() 内の最後」は文末ではありません。

for (let i = 1; i < 100; i++) {

}

上記コードが「for文」で文末は } です。
for 文は () に後続して「任意の文(Statement)」を記述することが出来ます。

• 13.7.4 The for Statement - ECMAScript® 2019 Language Specification

for (LexicalDeclaration Expression; Expression) Statement

一般に、ブロック文({})が使われる事が多いですが、ブロック文は「文末にセミコロンを付けない文」です。

• ブロック - JavaScript | MDN

逆にいえば、「文末にセミコロンを付ける文」を後続させれば、for 文の文末にセミコロンが付きます。

const array = [];
for (let i = 1; array.push(i), i < 100; i++);
console.log(array); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]

; は空文といい、「何も実行しません」

• 空文 - JavaScript | MDN

上述のコードでは、() 内のみで処理が完結している為、空文を置いて処理を実行しています。
for 文は任意の Statement で終わる文法であり、Statement を省略することは出来ません。

Re: 7_7shi さん

Comments

[7_7shi]

大変詳しく、ありがとうございます。

>for 文は「文末にセミコロンを付けない文」です
>そして、ご質問の「() 内の最後」は文末ではありません。

ここがそもそも分かっていませんでした…。
無知のまま質問してしまいお恥ずかしい限りです。

>; は空文といい、「何も実行しません」
>上述のコードでは、() 内のみで処理が完結している為、空文を置いて処理を実行しています。

空文について、こちらの意味がよくわからず…
コンソールにいれて「;（空文）」有り無しで試してみたのですが、処理が繰り返されるかどうかの違いでしょうか？
空文を入れると、そこで処理が完結する…ということでしょうか？
（完結させたいから空文をいれる…？）

Answer 2

let x = 1; x <= 99; はセミコロンが付いて

x += 1　はつかないのはなぜでしょうか？

forのカッコの中身については、セミコロン2つで式を区切ると明確に決まっています。ここについては、改行がセミコロンとみなされることもありませんし、逆に余計なセミコロンを書くとエラーとなります。

Comments

[maisumakun]

無限ループさせたいときはfor(;;)とセミコロン2つだけ書くことになります。

[think49]

> forのカッコの中身については、セミコロン2つで式を区切ると明確に決まっています。

細かいですが、LexicalDeclaration は式ではないですね。
LexicalDeclaration にセミコロンは含まれているので、式をセミコロンで区切っているのは「2つ目のセミコロン」だけになります。
http://www.ecma-international.org/ecma-262/10.0/#sec-for-statement

[7_7shi]

forの構文で「セミコロン2つで式を区切ると明確に決まっている」のですね。
覚えておきます。
大変無知な質問に、ご丁寧にありがとうございました。

Answer 3

すごくざっくり言うと「そういう構文だから」です。

MDN：JavaScript リファレンス/文と宣言/for

for ([initialization]; [condition]; [final-expression]) statement

[]は「省略可能」を現しています。;については何も表記がないので「必須」です。
基本的にはいずれも「式」が入ります。
これはforの構文なのでこの()の中には「文末」という概念はないと思って良いと思います。
「こういう構文だ」ということで覚えてください。

存在する考え方は「付けてはいけない」か「付けなくても良い」のどちらかです。

let html = '<tr>' // 付けなくても良い
for(let x = 1; x <= 99; x ++ /*付けてはいけない*/){ 
    html += '<th>' + x + '</th>' // 付けなくても良い
}

console.log(html) // 付けなくても良い

ただ、「付けなくても良い」と覚えてしまうとコードの統一性がなくなるので「必ず付ける」と認識しておいた方が方が迷わなくて良いと思います。

Comments

[7_7shi]

なるほど…初心者のわたしに大変分かりやすかったです。
forは「そういう構文」なんですね。

そして「付けてはいけない」以外は「必ず付ける」と認識しておいたほうがいいとのこと、助言ありがとうございます。
大変助かりました。覚えておきます。

Answer 4

forの中身は(aaa;bbb;ccc)のような形にする必要があります

その他は基本的にはifやforのようなもの以外にはつけてもいいです

つけなくても動くので別に問題はありません。

↓にコードを貼り付けて出てきたコードのようなセミコロンの付け方にすると一般的にいいコードになると思います
https://prettier.io/playground/

Comments

[m.ts10806]

>その他は基本的にはifやforのようなもの以外

ここをちゃんとフォローしてあげないとこの質問者さんに限らず後から見る人が迷うと思います（私は低評価つけていませんが）

[7_7shi]

>forの中身は(aaa;bbb;ccc)のような形にする必要があります
なるほど、そうだったのですね。
他の回答者様のご回答とも合わせて、納得いたしました。

>その他は基本的にはifやforのようなもの以外にはつけてもいいです
この辺りは確かに迷いますが…
今回いかに自分が構文を理解していないか実感したので勉強いたします。

>↓にコードを貼り付けて出てきたコードのようなセミコロンの付け方にすると一般的にいいコードになると思います
こういうサイトもあるのですね。
活用させていただきます。ありがとうございます。