Javascriptの【条件分岐】なんとなくイメージはつくんだよな。でも、ちゃんとは分かってないんだよね。
どうしたもんだろう？
Javascriptの「条件分岐」
なんとなくはわかるんだけど・・・。
でも使いこなせてはいないな・・・。
そんなことってあると思います。
原因はなんだろう？
必要な「演算子」をいい加減に覚えている可能性があります。
Javascriptの条件分岐に「演算子」は重要
条件分岐が使いこなせない原因の1つに「演算子」となんとなくでしか覚えていないということがあります。
「演算子」数学で見たことから多分わかると思う。
→しっかり覚えていない。
「演算子」を単体で説明される。
→なんに使うのかよくわからないから覚えない。簡単そうだから後で覚えればいいや、でちゃんと覚えてない。
私自身、たぶん大丈夫だろうで案件で撃沈したことがあります。
「演算子」は条件分岐の条件を決めるのに重要です。
算術演算子
| ＋ | 加算演算子 足し算です。 |
| － | 減算演算子 引き算です。 |
| * | 乗算演算子 掛け算です。 ※アスタリスクと呼びます。 |
| / | 除算演算子 割り算です。 |
| % | 剰余演算子 割り算の余りの値をとります。 7％2なら余りである1が値になります。 |
- 算術演算子を利用する場合、/と％取り違えがちです。
※％は割り算ではありません。パーセントのため慣れるまで間違えがちです。 - 掛け算は*。最初はアスタリスクをつける習慣がないため、×を掛け算につかいがちです。×では動きません。掛け算は*
比較演算子
「a < b」は、aの方がbより小さいときtrue, 大きいときfalseになります。
また「a <= b」とすると、aの方がbより小さいまたは等しい（つまりb以下）のときtrueになります。
| a < b | aはbより小さい |
| a<=b | aはbより小さい または等しい |
| a > b | aはbより大きい |
| a >= b | aはbより大きい または等しい |
「比較演算子」には左と右の値が等しいかを調べるものもあります。
「a === b」はaとbが等しければtrue、等しくなければfalseになります。
「a !== b」はその逆です。等しくなければtrue、等しければfalseになります。
| a === b | aとbが等しい |
| a !== b | aとbが異なる |
Javascriptの「条件分岐」if文とは？
「if文」を用いると「もし○○ならば△△を行う」という条件分岐が可能になります。
ifの後ろに条件式を書きます。それが成り立つ場合の処理を{ }の中に書きます。
if(条件式){
条件が「true]の時の処理
}
「true」は真偽値と呼ばれるものです。
真偽値にはtrueとfalseという2つの値しか存在しません。
条件式は、成り立つと「true」、成り立たなければ「false」という真偽値に置き換わります。
よって下の図のように条件式を出力してみると、trueやfalseが出力されています。
実際にコードを書くとこんな感じです。
定数を設定してみました。
以下の場合条件が「true」のため、｛ ｝内の処理が成り立ちます。
|
1 2 3 4 5 6 7 8 9 |
const age = 25; if(age >= 20){ console.log("age歳は大人です") } |
条件が「false」の時はどうなるのかを示したい場合はどうするかと言うと、
elseとう文を使います。
if(条件式){
条件が「true]の時の処理
}else｛
条件が「false]の時の処理
｝
実際にコードを書くとこんな感じです。
定数を設定してみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const age = 10; if(age >= 20){ console.log("ageは大人です") }else{ console.log("ageは子供です") } |
更に条件をつけることも可能です。
↓
if(条件式1){
条件式1が「true]の時の処理
}else if(条件式2)｛
条件式1が「false]、条件式2が「true]の時の処理
｝else{
どちらの条件式も「false]の時の処理
}
実際にコードを書くとこんな感じです。
定数を設定してみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const age = 17; if (age >= 20) { console.log("私は大人です"); } else if(age >= 10){ console.log("私は20歳未満ですが、10歳以上です"); } else { console.log("私は10歳未満です"); } |
論理演算子
条件が増えると入れ子も増えていくことになります。
どんどん複雑化してしまうため複数の条件を組み合わせることができます。
| && | ”かつ”です。 |
| || | ”または”です。 |
&&の説明
「条件1 && 条件2」は「条件1かつ条件2」という意味で複数の条件がすべてtrueなら「true」になります。
「10より大きいかつ30より小さい」は「10 < x < 30」と書くことは出来ません。
このようなときは「&&」を使いましょう。
age > 10 && age < 30
&&で条件を繋げて書くことができます。
「||」の説明
「または」は「||」で表します。
「条件1 || 条件2」は「条件1または条件2」という意味です。
この場合は、複数の条件のうち1つでもtrueならtrueになります。
「10より大きいまたは30より小さい」
age > 10 || age < 30
Javascriptの条件分岐「switch文」とは？
条件が多い場合、「if文」で書くことは難しくなってきます。
この｛ が必要なのか必要じゃないのか、どんどん分からなくなっていきます。
もっと簡単に書く方法はないのか？そこで「switch文」の登場です。
実際にコードを書くとこんな感じです。
定数を設定してみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
const animal="犬"; switch(animal){ case"犬": console.log("ワンワンワン"); break; } |
「switch文」では分岐の数だけcaseを追加していきます。caseの後ろの文字は:（コロン）です。
そしてswitch文ではbreakが重要です。breakはswitch文を終了する命令です。
「break」がないと合致したcaseの処理を行った後、次のcaseの処理も実行してしまいます。「switch文」を使うときにはbreakを書き忘れないように注意が必要です。
条件を追加する。
defaultはif文のelseに似たようなものです。
switch文を利用すると「if文」だと分岐が多く複雑になってしまう場合でも、
「switch文」に書き換えるとシンプルで読みやすいコードにできます。
実際にコードを書くとこんな感じです。
定数を設定してみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const animal="犬"; switch (animal) { case"犬": console.log("ワンワンワン"); break; case"きじ": console.log("ホロッホー"); break; case"猿": console.log("ウッキー"); break; default: console.log("桃太郎の家来ではありません。"); break; } |
上記の文章をif文で書こうとすると複雑なものになってしまいます。
「if文」と「switch文」両方知っていて使い分ける必要があります。
