JavaScript - if文の入れ子（ネスト）の注意点

JavaScript では if 文を入れ子（ネスト）にすることができます。

ただし、書き方によっては可読性やメンテナンス性が悪くなり、 デバックもしにくくなります。

ここでは if 文を入れ子（ネスト）にする方法と注意点を紹介します。

入れ子（ネスト）のサンプル

次のサンプルコードは赤字の部分が入れ子になっている if 文です。

if (a > 10){
	if (b > 1){
		c = a;
	} else {
		c = b;
	}
	i++;
} else {
	c = a - 1;
}

次のコードは、先程と全く同じロジックなのですが、 入れ子部分の『波括弧（中括弧）{}』を記述していません。

上のコードと下のコード、どちらが読みやすいか比べてみてください。

下のコードは「i++;」の部分と、上の if 文の関係がわかりにくいですよね。

もし「i++;」の部分が字下げされていると、else句の処理と誤解する可能性もあります。

if (a > 10){
	if (b > 1)
		c = a;
	else 
		c = b;
	i++;
} else {
	c = a - 1;
}

このように、if 文を入れ子にする場合、 『波括弧（中括弧）』がないと可読性が悪くなります。

さらに、インデントを適切にしていない場合は、 処理と if 文の関係がわからなくなってしまいます。

入れ子（ネスト）にする際の注意点

if 文を入れ子（ネスト）にする場合は次の点に注意してください。

• 処理が1文でも必ず「波括弧（中括弧）」をつける。
• インデントを適切に行う

この点を守らないと、可読性・メンテナンス性が悪くなり、 デバッグの際に苦労することになります。

if 文が3層以上になるようなら、ロジックを見直す

入れ子（ネスト）が多くなればなる程、プログラムは読みにくくなります。

上のサンプルコードはif 文が2層のコードですが、 もしif 文が3層以上になるようなら、根本的にロジックを見直して、 入れ子が少なくなるようにしましょう。

フローチャート等でいったんロジックを整理すると、 根本的な解決策が見つかる場合が多いです。