まとめ（3）if文

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

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

分岐処理とは

  • ある条件に応じてその後おこなわれる処理を振り分けること
プログラムの流れを変える if文
  • ある条件が成りたったときに、指定した処理を行うために用意されている制御文です
  • 日本語にすると「もし〜ならば」という意味になります
  • if文全体で、「もし〜ならば〜を行う」というイメージで捉えておきます
if文を記述する前に
  • そもそも「条件」とは
  • 目の前に起こっている事象を客観的に言葉に置き換えることが必要です


条件を考える

  • 信号が青なら横断歩道を渡る、そうでなければ渡らない
  • きょうが平日なら朝７時に起きる、そうでなければ朝10時に起きる
  • きょうが月曜日なら燃えないゴミをだす、そうでなければゴミをださない

など


条件分岐

  • 「分岐」とは、処理が多方向にわかれること
  • 条件が一致していれば「Aの選択肢」、一致していなければ「Bの選択肢」という２つの結果に枝分かれすることを「条件分岐」と呼びます
  • 「条件がtrue」とは、条件が一致したとき（真である）を指します
  • 「条件がfalse」とは、条件が一致したとき以外のすべて（偽である）を指します
  • 条件式は比較演算子を使って記述され、結果が論理値となる

if文

  • if文でスクリプトの分岐構造をつくることができる
  • 条件分岐を作成するための「if文」です



　if（条件式）｛
　　　　条件が満たされたときに行う処理
　　　　　…
　｝

　

  • if文を複数重ねて、いろいろな条件に一致するかを判別できますが、判別する対象が常に「すべて」になってしまいます
  • つまり、条件が「true」である結果に対しての処理のみになります
条件式の書き方
  • 条件式は、比較演算子を使って記述します


演算子 説明 使用例 結果
== 左辺と右辺が等しい場合は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文の利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>if文の利用</title>
<script>
  var color = '青';
  if (color == '青') {
    console.log('進む');
  } else {
    console.log('止まる');
  }
</script>
</head>
<body>
</body>
</html>


《実行結果》

  1. 「var color = '青';」で、変数colorには「青」が代入されています
  2. 「color == '青'」で、一致しているので条件式の結果は「true」となります
注意
  • 「=」と「==」は別の役割
  if( x == 10 )  //変数x の中身と10を「比較」
  if( x = 10 )  //10を変数x に「代入」

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

  • 条件が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>
<script>
  var color = '青';
  if (color == '青' || color == '緑') {
    console.log('進む');
  } else {
    console.log('止まる');
  }
</script>
</head>
<body>
</body>
</html>


《実行結果》

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


《!演算子の利用》

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


《実行結果》

  1. 宣言だけして初期化されていない変数には「undefined」という特殊な値が規定値（初期値）として入ります
  2. 「undefined」は「false」と同じ扱いなので、これを反転させると「true」となり、if文のブロック内が実行されます

if〜else文

  • 条件に一致したときの処理と、それ以外の処理を同時に処理する効率的な書き方
  • 条件が「true」である処理と、条件が「false」である処理を同時に記述する
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>
<script>
var score;	//点数
var refValue = 80; //基準値
var compValue = 100; //満点

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

if (score == compValue) {
  document.write('<h1>百点満点!</h1>');
}
if (score >= refValue) {
  document.write('<h1>合格です</h1>');
  document.write('<p>よくがんばりました</p>');
} 
else {
  document.write('<h1>不合格です</h1>');
  document.write('<p>もう少しがんばりましょう</p>');
}
</script>
</head>
<body>
</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文を続けて書く

  • 複数の条件のどれにあてはまるかによって、それぞれ違う処理を行いたいときは、else 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」を返す