条件分岐 - if文

スクリプトには３通りの進み方がある（実行する流れ）

  1. 順次
  2. 分岐
  3. 反復

if文

  • 条件によって、ある処理を実行するかしないか選択して、処理の流れを分岐させたいときに使う構文
  • 条件がtrueのときは処理を実行する
  • 条件が成り立たないとき（falseのとき）は、処理を実行せずスキップします



if（条件式）｛
　　条件を満たす場合に実行する処理
｝else｛
　　条件を満たさない場合に実行する処理
｝

条件式の書き方
  • 条件式は、比較演算子を使って記述します


演算子 説明 使用例 結果
== 左辺と右辺が等しい場合はtrue 1 == 1 true
!= 左辺と右辺が等しくない場合はtrue 1 != 2 true
< 左辺が右辺より小さい場合はtrue 1 < 1 false
<= 左辺が右辺以下の場合はtrue 1 <= 1 true
> 左辺が右辺より大きい場合はtrue 1 > 1 false
>= 左辺が右辺以上の場合はtrue 1 >= 1 true
=== 左辺と右辺が等しく、かつ

データ型も等しい場合はtrue		 1 === '1' false
!== 左辺と右辺が等しくない、もしくは

データ型が等しくない場合はtrue		 1 !== '1' true

if文のサンプル
  • ｛と｝で囲まれた部分を「ブロック」と呼びます
  • ブロックの中は、複数の文を処理として書くことができます
<script>
  //if文
  var n = prompt('半角数字１桁を入力してください', '3');
  if (n == 3) {
    alert('入力した数値は3ですね');
  }
</script>
  • 入力された数値が「3」のときのみ alert が表示され、それ以外ではプログラムは終了します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>if文の利用</title>
</head>
<body>
<script>
  var color = '青';
  if (color === '青') {
    console.log('進む');
  } else {
    console.log('止まる');
  }
</script>
</body>
</html>


《実行結果》

  1. 「var color = '青';」で、変数colorには「青」が代入されています
  2. 「color === '青'」で、一致しているので条件式の結果は「true」となります
注意
  • 「=」と「===」は別の役割
文字列を数値に変換するNumber関数
  • 入力ダイアログボックスを表示する promptメソッドの戻り値は文字列です
  • 戻り値を数値として扱うには、文字列を数値に変換する必要があります
  • 通常は「Number関数（Numberはオブジェクトですが、関数として扱うことができます）」を使用します
  • 関数は、ひとまとまりの処理を名前（関数名）で呼び出せるよにしたもの
  • 関数は、メソッドと同じ様に引数を処理して値を返します

if 〜 else文

  • elseは「それ以外の場合は」の意味です
<script>
  //if else文
  var n = prompt('数値を1つ入力してください');
  n = Number(n);
  if (n === 3) {
    alert('入力した数値は3ですね');
  } else {
    alert('入力したのは3以外ですね');
  }
</script>
  • Number関数を使うことにより、型の一致まで判別する「===」を利用できます

より複雑な条件式の書き方

  • 条件が1つでは表しきれない場合、論理演算子を使って複数の条件を記述できます
論理演算子

演算子 説明 使用例 結果
&& 左辺と右辺のどちらも

trueの場合はtrue		 1 == 1 && 2 == 2 true
||

左辺と右辺のどちらかが

trueの場合はtrue

 1 == 2 || 2 == 2 true
! 真偽値を反転させる !a aがfalseの場合はtrue、

aがtrueの場合はfalse


《複雑な条件式》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>複雑な条件式</title>
</head>
<body>
<script>
  var color = '青';
  if (color == '青' || color == '緑') {
    console.log('進む');
  } else {
    console.log('止まる');
  }
</script>
</body>
</html>

《実行結果》

!演算子
  • 論理値を反転する働き
  • JavaScriptでは、nullやundefinedなど値がないことを表す特殊なものは「false」と等しい値として扱われます
  • この特徴を活かし、変数の中に値が代入されているかどうか、という判断を行う場合に「!演算子」を使う方法が用いられます


《!演算子の利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>!演算子の利用</title>
</head>
<body>
<script>
  var a;
  if (!a) {
    console.log('aは空です');
  }
</script>
</body>
</html>

《実行結果》

  1. 宣言だけして初期化されていない変数には「undefined」という特殊な値が規定値（初期値）として入ります
  2. 「undefined」は「false」と同じ扱いなので、これを反転させると「true」となり、if文のブロック内が実行されます
偶数・奇数の判別
var a = 5;
if(a % 2 === 0) {
　document.write(a, 'は偶数です。');
} else {
　document.write(a, 'は奇数です。');
}
  • if(a % 2 == 0) ：a÷2の余りが0のとき
  • else：a÷2の余りが0ではないとき


※5÷2のあまりは1なので、else以下の処理をします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>if文</title>
<script>
var num;

function guki() {
  num = prompt('数値を入力してください。', '半角数字で入力');

if(num % 2 == 0) {
　alert(num + 'は偶数です。');
} else {
　alert(num + 'は奇数です。');
}

}
</script>
</head>
<body>
<h1>偶数か奇数かの判別します</h1>
<p>ボタンをクリックすると数値を入力するウインドウが表示されます。</p>
<p><button onclick="guki()">判別する</button></p>
</body>
</html>
  • if(num % 2 == 0) ：num÷2の余りが0のとき
  • else：num÷2の余りが0ではないとき
基準値に対しての判別
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset='UTF-8'>
<title>if文のテスト</title>
</head>
<body>
<script>
var num;

function guki() {
  num = prompt('数値を入力してください。', '半角数字で入力');

if(num % 2 == 0) {
　alert(num + 'は偶数です。');
} else {
　alert(num + 'は奇数です。');
}

}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset='UTF-8'>
<title>if文のテスト</title>
<script>
var score;	//点数
var refValue = 80;	//基準値
var compValue = 100; //満点

function point() {
  score = prompt('点数を入力してください。', '半角数字で入力');	

if (score >= refValue) {
	
  if (score == compValue) {
    document.write('<h1>百点満点!</h1>');
    document.write('<p>よくがんばりました。</p>');
  } else {
    document.write('<h1>合格です。</h1>');
    document.write('<p>よくがんばりました。</p>');
  }
} else {
  document.write('<h1>不合格です。</h1>');
  document.write('<p>もう少しがんばりましょう。</p>');
}

}
</script>
</head>
<body>
<h1>基準値をもとに評価します</h1>
<p>ボタンをクリックすると点数を入力するウインドウが表示されます。</p>
<p><button onclick="point()">基準値をもとに評価する</button></p>
</body>
</html>
if 〜 else if 〜 else文
  • 複数の条件のどれにあてはまるかによって、それぞれ違う処理を行いたいときは、else ifを使います
<script>
  //if else if else文
  var n = prompt('数値を1つ入力してください');
  if (n == 3) {
    alert('入力した数値は3ですね');
  } else if (n > 3) {
    alert('入力した数値は3より大きいですね');
  } else {
    alert('入力した数値は3より小さいですね');
  }
</script>


else if 〜はいくつでも重ねられる

<script>
  //if else if else文
  var n = prompt('数値を1つ入力してください');
  if (n == 3) {
    alert('入力した数値は3ですね');
  } else if (n > 3) {
    alert('入力した数値は3より大きいですね');
  } else if (n < 3) {
    alert('入力した数値は3より小さいですね');
  } else {
    alert('数値を入力してください');
  }
</script>

多方向分岐

  • if文に「else if」ブロックを追加します


if（条件式1）｛
　　条件式1の条件を満たす場合に実行する処理
｝else if（条件式2）｛
　　条件式2の条件を満たさない場合に実行する処理
｝else if（条件式3）｛
　　条件式3の条件を満たさない場合に実行する処理
｝else｛
　　すべての条件式の条件を満たさない場合に実行する処理
｝


《if文による多方向分岐》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>if文による多方向分岐</title>
</head>
<body>
<script>
  var color = '黒';
  if (color == '青' || color=='緑') {
    console.log('進む');
  } else if (color == '黄') {
    console.log('急いで進む');
  } else if (color == '赤') {
    console.log('止まる');
  } else {
    console.log('信号機の故障');
  }
</script>
</body>
</html>

《実行結果》

  1. 条件式1（信号の色が青か緑）がfalse
  2. 条件式2（信号の色が黃）がfalse
  3. 条件式3（信号の色が赤）がfalse
  4. それ以外の選択（信号機の故障）を表示

  • 「分岐」とは、処理が多方向にわかれること
  • if文でスクリプトの分岐構造をつくることができる
  • 条件式は比較演算子を使って記述され、結果が論理値となる


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>if文</title>
<script>
var num;

function dgt() {
num = prompt('0から1000までの数値を入力して下さい。','半角数字で入力');
  document.write(num + 'は');

if (0 <= num && num <= 9) {
  document.write('1桁の数です。');
} else if (10 <= num && num <= 99) {
  document.write('2桁の数です。');
} else if (100 <= num && num <= 999) {
  document.write('3桁の数です。');
} else {
  document.write('4桁の数です。');
}

}
</script>
</head>
<body>
<h1>0から1000までの数値の桁数を判別します</h1>
<p>ボタンをクリックすると数値を入力するウインドウが表示されます。</p>
<p><button onclick="dgt()">判別する</button></p>
</body>
</html>
  • if (0 <= num && num <= 9) ：numが0以上9以下のとき
  • else if (10 <= num && num <= 99) ：numが10以上99以下のとき
  • else if (100 <= num && num <= 999) ：numが100以上999以下のとき
  • else：numが上記以外の数字のとき

※実行する処理はどれかひとつです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset='UTF-8'>
<title>if文で春夏秋冬を判断する</title>
<script>
var month;

function season() {
month = prompt('月を入力してください', '1から12の値を半角数字を入力');

if ((month == 12) || (month == 1) || (month == 2)) {
  document.write('<h1>冬です。</h1>');
} else if ((month >= 3) && (month <= 5)) {
  document.write('<h1>春です。</h1>');
} else if ((month >= 6) && (month <= 8)) {
  document.write('<h1>夏です。</h1>');
} else if ((month >=9) && (month <=11)) {
  document.write('<h1>秋です。</h1>');
}

}
</script>
</head>
<body>
<h1>月別に季節を判別</h1>
<p>ボタンをクリックすると月を入力するウインドウが表示されます。</p>
<p><button onclick='season()'>月別に季節を判別する</button></p>
</body>
</html>
if文のネスト
  • if文をはじめとする制御文では、処理の中にさらに制御文を含めることができます
  • このような入れ子のことを「ネスト」と呼びます
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>if文のネスト</title>
<script>
var score;
var refValue = 80;
var compValue = 100;


function point() {
  score = prompt('点数を入力して下さい。', '半角数字で入力');

if(score >= refValue) {
	
  if(score == compValue) {
    alert('満点です。');
  } else {
    alert('もう少しです。');
  }
	
} else {
    alert('頑張りましょう。')
}

}
</script>
</head>
<body>
<h1>点数を評価</h1>
<p>ボタンをクリックすると点数を入力するウインドウが表示されます。</p>
<p><button onclick="point()">評価する</button></p>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>if文のネスト</title>
<script>
var score;
var refValue = 70;

function point() {
  score = prompt('点数を入力して下さい。','半角数字で入力');
  document.write('あなたの点数は', score, '点です。<br>');

if (score >= refValue) {
		
  if (score == refValue) {
    document.write('平均点です。<br>');
    document.write('次もがんばりましょう！');
  } else {
    document.write('平均点以上です。<br>');
    document.write('よくできました！');
  }

} else {
  document.write('平均まであと', (refValue - score), '点<br>');
  document.write('もっとがんばりましょう！');
}

}
</script>
</head>
<body>
<h1>平均点数を基準に評価します</h1>
<p>ボタンをクリックすると点数を入力するウインドウが表示されます。</p>
<p><button onclick="point()">平均点数と比べて評価する</button></p>
</body>
</html>

まとめ

  • 「もし〜ならば〜を行う」という処理を行う「if文」
  • 「そうでなければ〜を行う」という処理を行う「if else文」
  • 比較演算子は、「true」もしくは「false」を戻す演算子
  • 複数のステートメントをまとめるブロック
  • 「if else文」を組み合わせることで、２つ以上の細かな条件を設定できる
  • 「||」演算子は、どれかひとつが「true」のときに「true」を返す
  • 「&&」演算子は、どれも「true」のときだけ「true」を返す