JavaScript - if 文のセミコロンをどこにつけるか迷っている方へ

JavaScript の if 文を書くときに、「どこにセミコロン(;)をつけるのか迷う！」という意見を聞きます。確かに最初のうちは迷うかもしれません。

ここでは、今後迷わなくて済むように、if 文中のセミコロン(;)を付けるルールを紹介します。

文の終わりにはセミコロン(;)をつける

次のような if 文があるとします。


if (a == b) {
	c = 0;
	d = 1;
}

この場合、「c = 0」と「d = 1」の２つが文です。

ルールとして、文の終わりにはセミコロン(;)をつけますので、「c = 0;」、「d = 0;」となります。

正確に言うと、JavaScript の仕様として、セミコロン(;)が無くても、改行コードまでを1文とみなして実行します。

ですが、セミコロン(;)を付けない記述方法は可読性が悪くなり、バグの原因となります。

文の終わりには、セミコロン(;)を付けることを習慣としてください。

もう一度先程の if 文を見てみます。


if (a == b) {
	c = 0;
	d = 1;
}

if 文などの「制御構文」において、波括弧で囲まれた部分を「文ブロック」といいます。

人によっては「ブロック」や「コードブロック」、「複合文」とも言います。

要は「文の固まり」です。

処理が1文の場合は波括弧はなくても構いませんが、処理が2文以上の場合は波括弧でくくり、文ブロックとします。

そしてルールとして、 文ブロックの波括弧の後にセミコロン(;)はつけません。

上で２つのルールを挙げました。

この２つのルールに従って、if 文をいくつか具体的に見ていきます。


if (a == b) c = 0;

処理部分は1文なので、波括弧を省略することができます。

文の終わりにセミコロンを付けます。


if (a == b) { c = 0; }

処理部分は1文ですが、波括弧をつけているケースです。

文の終わりにはセミコロンを付け、波括弧の後にはセミコロンは付けません。


if (a == b) {
	c = 0;
	d = 1;
}

それぞれの文の終わりにはセミコロンを付け、波括弧の後にはセミコロンは付けません。


if (a == b) {
	c = 0;
} else {
	d = 0;
}

else 句があっても考え方は同じです。

それぞれの文の終わりにはセミコロンを付け、波括弧の後にはセミコロンは付けません。

この２つのルールを把握していれば、 if 文を書くときに「どこにセミコロン(;)をつけるのか迷う」ことがなくなります。

ぜひ参考にしてください。