第10回　if文を理解しよう。

制御文（if）とは、、、いざプログラミングの本丸へ

制御文とは、「もし、期末テストで学年で10番以内に入ったらあれ買ってもらう！」というやつです。
プログラミングの世界で説明すると、何か条件を達成した時に処理をさせるようにすることです。
イメージしづらいので、まずは書き方とサンプルを書いた上で説明して行きます。
ちなみに、英語の授業で「もし〜は」ifと習いますが、あのifです。
javascript上での書き方は下記になります。

ちょっとわかりにくいですね。実際に書いてみます。
お題は「もし10位以内なら旅行に行く」にします。

//Rankは順位です
var Rank = 1;	//順位が1番ということ
if(Rank < 11){	//もし Rankが<11より小さい場合
	alert("ハワイに行くぞ！");
}

//Rankは順位です

var Rank = 1; //順位が1番ということ

if(Rank < 11){ //もし Rankが<11より小さい場合

alert("ハワイに行くぞ！");

}

Chromeのコンソールから実行してみましょう
ハワイに行けましたか？
次に順位を11位にして実行してみてください。何も表示されなくなります。
11は条件「Rank<11」に当てはまらないからです。
ちなみにRankが1つまり、１位の場合のみ何かをさせたい場合は次のように書きます。

//Rankは順位です
var Rank = 1;	//順位が1番ということ
if(Rank == 1){	//Rankが1の場合のみif内の処理を実行
	alert("ハワイに行くぞ！");
}

//Rankは順位です

var Rank = 1; //順位が1番ということ

if(Rank == 1){ //Rankが1の場合のみif内の処理を実行

alert("ハワイに行くぞ！");

}

変数の時に説明しましたが、イコールが一つの場合は「代入」です。
イコールが２つ重なる場合は、左右の値が同じか比較します。
比較した結果、正しい場合は（真:true)。正しくない場合は(偽:false)を返します。
今は「==」で「左右の値が一致するか調べることができる」ということを覚えて
もらえればOKです。

ちなみに==以外には次のような比較演算子があります。

!=	右辺と左辺が等しくない場合はtrue
<	左辺が右辺より小さい場合はtrue
<=	左辺が右辺以下の場合はtrue
>	左辺が右辺より大きい場合はtrue
>=	左辺が右辺以上の場合はtrue
===	左辺と右辺の値が等しくてデータ型も同じ場合はtrue
!==	左辺と右辺の値が等しくないか、データ型が異なる場合はtrue

論理演算子

複数の条件を結合してその結果を真（true)又は偽(fale)で表します

&&	左右の式がともに真(true)の場合は真(true)
\|\|	左右のどちらかが真(true)の場合は真(true)
!	式が偽(false)の場合は真(true)

少しわかりにくいので実際に試してみましょう。

100 > 0 && 100 < 0 //　&&の右がfalseなのでfalseになる
100 > 0 || 100 < 0 //  ||の左がtrueなのでtrueになる
100 > 0 && !(100 < 0)  //&&左辺右辺ともにtrueなのでtrueになる

100 > 0 && 100 < 0 //　&&の右がfalseなのでfalseになる

100 > 0 || 100 < 0 // ||の左がtrueなのでtrueになる

100 > 0 && !(100 < 0) //&&左辺右辺ともにtrueなのでtrueになる

おそらくわかりにくいと思います。
簡単な覚え方かわかりませんが、下記イメージです。

&&は左右の式がtrueの場合のみtrueそれ以外はfalse
||は左右のうちどちらかがtrueであればtrue
両方falseでfalse
!はtrueをfalseに、falseをtrueにする（結果を逆にする）

書いてみましたけど結局上の表と同じことを書いていることに気づきました。
これは慣れが肝心なので下記表を埋めてみてください。

左辺と右辺と結果が決まっています。
では、演算子に何を入れると結果が出力されるか考えてみてください。

左辺	論理演算子	右辺	結果
true		true	true
true		false	false
false		frue	false
false		false	false
true		true	true
true		false	true
false		true	true
false		false	false

これだけでは多分理解できないし覚えられないはずなので
ちょっとしたゲームを用意しました。
時間があるときに遊んでみてください。100点目指してね。
ひたすら論理演算

算術演算子

基本的には学校で習ったことのある馴染み深いものばかりかと思いますが、
除算と乗算、余りは見慣れない記号ですので覚えておきましょう。

加算	+
減算	–
乗算	*
除算	/
余り	%
前置加算	++
後置加算	—
前置減算	++
後置減算	—
代入演算	=

ルールそのものを変えてやる！if文の条件を変えてみる

今までのif文は条件が10位以内という一つの条件でしたが
11位以降の処理も追加してみましょう。条件の追加です。
11〜20位以内なら北海道旅行に行けるようにしましょう。
この場合は「else if」を追加で使用します。
elseは「他に」という意味があります、英語で「what else?」（他に何か？）
というふうに使われたりしますね。
書き方は下記の通りです。

if文の書き方とほとんど一緒ですね。２つのif文をelseで繋げてるだけです。
最後は条件がない、つまり「条件に当てはまらない場合」となるので
ifがなくelseだけですね。

else ifとelseで条件を細かく設定

説明だけでは理解できないので、実際にプログラムを書いてみましょう。
先ほどのプログラムの応用です。10位以内なら先ほどと同じ、ハワイ旅行、
20位以内なら北海道旅行に行きます。
それ以外は「次は頑張れ」とアラートするプログラムです。

var Rank = 1;
if(Rank < 11){
	alert("ハワイに行くぞ");
}else if(Rank < 21){
	alert("北海道行くぞ");
}else{
	alert("次は頑張れ")
}

var Rank = 1;

if(Rank < 11){

alert("ハワイに行くぞ");

}else if(Rank < 21){

alert("北海道行くぞ");

}else{

alert("次は頑張れ")

}

条件の1つ目は10位以内で、達成すればハワイに行きます。
条件の2つ目は20位以内で、達成すれば北海道に行きます。
もしどちらでもない場合は「次は頑張れ」と褒めてくれます。
if, else if について理解できましたか？

if文の処理の順序について

これまでの例で、納得いかないことがあると思います。
「1位になったらハワイと北海道両方いけないとおかしいんじゃないか」
こういう意見が出てくる人もいると思います。
条件の1つめと条件の2つめは満たしてますからね。

else ifはifで条件が一致しない場合の為の条件なのでif文で条件が一致した場合、
それ以降のelse if、elseの処理は行いません。大事なことなので再度書いておきます。

if文は条件に一致して処理を行った場合、以降のelse、else ifの処理は行いません。

これは重要なので覚えてくださいね！

if文演習

それでは、いつも通り、サンプルプログラムを書いていきましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src=lec07.js></script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

lec07.js

//変数の宣言
var number = 9;

if(number > 10){
    alert('10より大きい');
}else{
    alert('10より小さい');
}

//変数の宣言

var number = 9;

if(number > 10){

alert('10より大きい');

}else{

alert('10より小さい');

}

if文の使い方まとめ

if文を利用することで処理を分岐させることができる
if文の分岐は条件式が正しい(真:true)または正しくないかで(偽:false）で判断する
if文はelse ifを利用することで複数の条件を指定することができる
論理演算子で複数の条件を結合することができる。

課題

次のプログラムを完成させてください

//２つの入力された値が同じか確認するプログラム

var A = prompt('1つ目の値を入力したください');
var B = prompt('2つ目の値を入力したください');

if(□){
    alert("AとBは同じ");
}

//２つの入力された値が同じか確認するプログラム

var A = prompt('1つ目の値を入力したください');

var B = prompt('2つ目の値を入力したください');

if(□){

alert("AとBは同じ");

}

1で作成したプログラムで値が違う場合は「AとBは違う」と
表示してください。

宿題

プロンプトから変数「height」に身長「weight」に体重、「zako」に座高「gender」に
‘男’または’女’のデータを入れて、その内容からアラートを
表示するプログラムを作成することになりました。

要望として、下記内容を満たすようにプログラムを組んでください。

男で、身長が170以上で体重が60kg以下に場合はアラートで「痩せ」とアラート表示
男で、身長が170以上で体重が60kgより大きい場合はアラートで「普通」とアラート表示
男で上記1,2以外は「不明」とアラート
男以外の場合は、身長、体重、座高に関わらず「女」と表示

Pocket

第9回　変数の宣言と使い方を理解しよう

第12回　配列の宣言と使い方を理解しよう