■今回のゴール
前回は変数とデータ型を学びました。
今回は「条件分岐」を学びます。
今日のゴールは1つです。
条件によって処理を変えられるようになることです。
■ if文の基本
【図-条件分岐】
上記の図の様に条件を判断して条件が成立していたら処理Aを行い、不成立の場合は何もしないことをJavaScriptで実現するのがif分です。条件が成立しているということをJavaScriptでは条件がtrue（真）であると言い、成立していないことを条件がfalse（偽）であると言います。
if文の基本的な形は下記の様になります。
if (条件) {
処理
}例えば、「テストの点数が70点以上だったら合格」という判断ををプログラムでやるには下記の様に記述します。
let score = 80;
if (score >= 70) {
console.log("合格");
}この場合、scoreは80なので合格と表示されます。
■ if / else
では、70未満の場合も対応したい場合はどうするば良いでしょうか？
その場合は、elseを使います。
【図-条件分岐】
図で示すと上記の様に条件を判断して条件が成立していたら処理Aを行い、不成立の場合は処理Bを行います。
プログラムの書き方は下記になります。
if (条件) {
処理A
} else {
処理B
}
なので、「テストの点数が70点以上だったら合格、70点より低かったら不合格と表示する」ためには下記の様に記述します。
if (score >= 70) {
console.log("合格");
} else {
console.log("不合格");
}
■ 比較演算子
上の例で「テストの点数が70点以上」ということを表すためにif文の（）の中で
score >= 70という表現を使いました。
テストの点数（score）と70の大小を比較して、70以上ならtrueという値を返し、
そでなければfalseを返します。
a + b は a と b に加算（足し算）という演算を行って結果として値 a + b を返します。
a – b は a と b に減算（引き算）という演算を行って結果として値 a – b を返します。
a * b は a と b に乗算（掛け算）という演算を行って結果として値 a X b を返します。
a / b は a と b に除算（割り算）という演算を行って結果として値 a / b を返します。
まとめてみると皆、
ａ ? b と書いて a と b に演算を行って、結果として値 a ? bを返す
という形になっています。
そこで?のことを演算子と呼んでいます。
a >= b は a と b に比較演算（以上）を行って結果としてtrueかfalseの値を返す。
と考えることが出来ます。
そこで>=のことを比較演算子と呼んでいます。
JavaScriptでは下記の様な比較演算子を使うことが出来ます。
-
>=（以上）
-
<=（以下）
-
>（より大きい）
-
<（より小さい）
-
===（完全一致）
この完全一致はデータの型も考慮して一致している必要があります。
なので、例えば
10 === “10”
はfalseになります。
（10は数値型の値で、”10″は文字列型の値になるので、型が異なるため完全一致になりません。）
■ else if
次のような事を考えてみます。
「テストの点数が80点以上だったら 5
テストの点数が80点より小さく60点以上だったら 4
テストの点数が60点より小さく40点以上だったら 3
テストの点数が80点より小さく20点以上だったら 2
テストの点数が20点より小さかったら 1」と表示する。
条件を図に表してみると、
これを見て貰えば、4～1はテストの点数(score)が80点以上（score >= 80）のelseの方に収まることが分かります。
同じ様に
3～1はテストの点数(score)が60点以上（score >= 60）のelseの方に収まる
2～1はテストの点数(score)が40点以上（score >= 40）のelseの方に収まる
1はテストの点数(score)が20点以上（score >= 20）のelseの方に収まる
ことがわかります。
つまりelseの中にif文がある形になっています。
実際にプログラムの形にすると下記になります。
if (score >= 80) { …… ①
console.log("5");
} else { …… ①
if (score >= 60) { …… ②
console.log("4");
} else { …… ②
if (score >= 40) { …… ③
console.log("3");
} else { …… ③
if (score >= 20) { …… ④
console.log("2");
} else { …… ④
console.log("1");
} …… ④
} …… ③
} …… ②
} …… ①ここで①と①、②と②と言う様に同じ番号の｛｝が対応しています。
ただ見て分かる様にとても見難いですよね。
そこで、JavaScriptではelse の後にif文を{}で囲まずに書ける様にしています。
if (score >= 80) {
console.log("5");
} else if (score >= 60) {
console.log("4");
} else if (score >= 40) {
console.log("3");
} else if (score >= 20) {
console.log("2");
} else {
console.log("1");
}少し複雑な条件が見やすく書けることが分かります。
■ 演習
今回のまとめとして、成人判定と偶数奇数の判定を行ってみましょう。
成人判定
日本では18歳以上を成人としています。
変数ageに年齢を設定して、成人かどうかを判定してください。
【解答例】
let age = 20;
if (age >= 18) {
console.log("成人");
} else {
console.log("未成年");
}
偶数・奇数
2で割り切れる整数が偶数、2で割ると1余る整数が奇数です。
変数numに整数を設定して、それが偶数なのか奇数なのかを判定してください。
【解答例】
let num = 7;
if (num % 2 === 0) {
console.log("偶数");
} else {
console.log("奇数");
}
まとめ
今回はif文について学びました。
- if文の基本形１
- if文の基本形２
- 比較演算子
- else if
if文の基本形１
if文の基本的な形は下記の様になります。
if (条件) {
処理
}
if文の基本形２
if文のもう一つの基本的な形は下記の様になります。
if (条件) {
処理A
} else {
処理B
}
比較演算子
大小比較を行う際に使用する比較演算子について学びました。
-
>=（以上）
-
<=（以下）
-
>（より大きい）
-
<（より小さい）
-
===（完全一致）
else if
条件１が当てはまれば処理Aを当てはまらない場合に条件２が当てはまれば処理Bをどれも当てはまらなければ処理Cを実施すると言う様に、if文の条件に合わない場合に更に別の条件をチェックしていく様な場合にelse ifを使うことが出来ます。
if (条件１) {
処理A
} else if (条件２) {
処理B
} else {
処理C
}
コメント