【STEP.11】
if命令の使い方をマスターしよう!

if命令とは

if命令は、名前の通り、「もし~だったら・・・、さもなくば・・・」という構造を表現するためのものです。

与えられた条件式がtruefalseいずれであるかによって、対応する命令(群)を実行します。

if命令の構文は次の通りです。

if命令

if (condition) {
  ...statements1...
} else {
  ...statements2...
}
condition     条件式
statements1   条件式がtrueの場合に実行する処理
statements2   条件式がfalseの場合に実行する処理

if命令の具体例

具体的なサンプルコードを見てみましょう。

let x = 15;
if (x >= 10) {
  console.log('変数xは10以上です。');	
} else {
  console.log('変数xは10未満です。');
}
//結果:変数xは10以上です

この例では、以下のようにメッセージを表示します。

  • 変数xの値が10以上の場合 「変数xは10以上です。」
  • 変数xの値が10未満の場合 「変数xは10未満です。」

このように、if命令では指定された条件式がtrue(真)である場合はその直後のブロックを、false(偽)である場合にはelse以降のブロックを、それぞれ実行します。

ブロックとは、中カッコ({…})で囲まれた部分のことです。

ここではelseブロックを指定していますが、もしも変数xが10以上の場合にだけ処理を実施したい場合には、次のようにelseブロックを省略しても構いません。

let x = 15;
if (x >= 10) {
  console.log('変数xは10以上です。');	
} 
//結果:変数xは10以上です。

if…else if…else命令で複数の分岐を表現する

if…else if…else命令を利用することで、「変数xが10以上の場合は~、変数xが20以上の場合は~」のような、複数の分岐を表現することができます。

if…else if…else命令の構文は次の通りです。

if…else if…else命令

if (condition1) {
  ...statements1...
} else if (condition2) {
  ...statements2...
} else {
  ...statementsN...
}
condition1,2     条件式
statements1,2    条件式1,2がtrueの場合に実行する処理
statementsN      いずれの条件式もfalseの場合に実行する処理

else ifブロックは、必要となる分岐の数だけ列記できます。

具体的なサンプルも見てみましょう。

let x = 30;
if (x >= 20) {
  console.log('変数xは20以上です。');
} else if (x >= 10) {
  console.log('変数xは10以上です。');		  
} else  {
  console.log('変数xは10未満です。');
}
//結果:変数xは20以上です。

もっとも、この結果に疑問を感じる方もいるかもしれません。

変数x(値は30)は、条件式「x >= 20」にも「x >= 10」にも合致しているのに、表示されるメッセージは「変数xは20以上です。」だけ。「変数xは10以上です。」は表示されないのだろうか?と

しかし、これは正しい挙動です。

というのも、if命令では、複数の条件に合致する場合にも、実行されるブロックは最初の1つだけであるからです。

この場合ならば、最初の条件式「x >= 20」に合致して、1番目のブロックが実行されているので、2番目のブロックが実行されることはありません。

したがって、以下のようなスクリプトは、意図したように動作しません。

let x = 30;
if (x >= 10) {
  console.log('変数xは10以上です。');
} else if (x >= 20) {
  console.log('変数xは20以上です。');		  
} else  {
  console.log('変数xは10未満です。');
}
//結果:変数xは10以上です。

この場合、最初の条件式「x >= 10」に合致してしまうため、2番目の条件式「x >= 20」は無視されてしまうからです。

if…else if…elseを利用する場合には、条件式を記述する順番に要注意です。

if...elseif...else命令

if命令を入れ子にしてより複雑な条件分岐を表現する

if命令は互いに入れ子にすることで、より複雑な条件分岐を表現することも可能です。

たとえば、以下の図のような条件分岐をif命令で表現したのが次のサンプルコードです。

if命令のネスト

let x = 30;
if (x >= 10) {
  if (x >= 20) {
    console.log('変数xは20以上です。');
  } else {
    console.log('変数xは10以上20未満です。');	
  }
} else {
console.log('変数xは10未満です。');
}
//結果:変数xは20以上です

このように、制御命令を入れ子にすることを、ネストするともいいます。

コードの可読性の観点から、あまりに深いネスト構造を採るのは避けるべきですが、上のサンプルコードのようにネストの深さに応じてインデント(段落)をつけることで、視覚的にコードを読みやすくすることができます。

中カッコは省略可能だが省略しないほうがよい

ブロックの中の命令が1文である場合には、中カッコ({…})を省略することもできます。

具体例を見てみましょう。

let x = 15;
if (x >= 10) 
  console.log('変数xは10以上です。');	
else 
  console.log('変数xは10未満です。');
//結果:変数xは10以上です。

ただし、このような記法は、「ブロックの範囲が不明確となり、バグの温床にもなりやすい」という理由から、あまりお勧めできません。

たとえば、以下のようなコードはバグの温床となります。

let math = 100;
let science = 90;
	
if (math === 100) 
 if (science === 100)
  console.log('どちらも100点です');	
else
  console.log('数学は100点ではありません。');

インデントからは「変数mathscienceがどちらも100である場合」「変数math100でない場合」いずれかの条件に合致する際に、メッセージを表示するという意図のコードに見えます。

よって、この場合であれば「何も表示しない」が期待の結果です。

しかし、結果は「数学は100点ではありません。」となります。

elseブロックが条件式「math === 100」ではなく、直近の条件式「science === 100」に対応しているためです。

つまり、JavaScriptでは、

中カッコを省略した場合、elseブロックは直近のifブロックに対応している

と見なします。

もっとも、これは一見してわかりにくい挙動であり、望ましい状態ではありませんので避けるべきです。

以下に、意図したように改めたコードを示します。

let math = 100;
let science = 90;
	
if (math === 100) {
  if (science === 100) {
    console.log('どちらも100点です');	
  }
} else {
    console.log('数学は100点ではありません。');
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です