条件分岐
プログラミングにおいて重要な条件分岐
「ある条件が成り立つときだけある処理を行う」という場面が出てくる
このようなプログラムを条件分岐
const number =12;
↓yes 定数numberの値が10より大きい?
console.log("numberは10より大きいです");
のようなものを作りたい。
if文の書き方
if文を用いると「もし〇〇ならば⚫️⚫️を行う」という条件分岐が可能になります。ifの後ろに条件式を書き、それが「成り立つ」場合の処理を{ }のなかに書きます。
下記でイメージ
if(条件式){
処理//条件式が成り立てば実行される
}//セミコロンは不要
const number=12;
if(numberが10より大きい場合){
console.log("numberは10より大きいです。")
//条件式が成り立てば実行される
}
if文のコード
実際のコードを見てみましょう
条件式の一例「number > 10」の部分は「定数numberの値が10より大きい」という意味の条件式になります。
定数numberには12が代入されているので、この条件は成り立ち、処理が実行されます。
const number =12;
if(number>10){
//「numberの値が10より大きい」という条件
console.log("numberは10より大きいです")
}
numberは10より大きいです
if文書くときのポイント
if文を書くときは、インデントするようにしましょう。
console.logの部分でtabキーを1回おすと半角スペース2つ分インデントすることができます。
インデントすると、コードが見やすくなります。
const number= 12;
if(number > 10){
console.log("numberは10より大きいです")
//↑tabキーでインデント!
}
演習
const level = 12;
// 条件式を「level > 10」とするif文を作ってください
if(level>10){
console.log("レベルが10より大きいです");
}
条件式の出力
if文を使うことができました。次は条件式の部分を詳しく見てみましょう。
先ほどのif文の条件式の部分を出力してみると「true」が出力されます
const number=12;
//条件式を抜き出す
「if(number > 10)」{
console.log("numberは10より大きいです");
}
const number=12;
//抜き出した部分の条件式を出力
「console.log(number>10);」
コンソール(出力結果)
true
となる
真偽値
先ほどの例で出力された「true」は真偽値と呼ばれる。
真偽値にはtrueとfalseという２つの値しか存在しない。
条件式
・成り立つと「true」
・成り立たないと「false」
という真偽値に置き換わる
よって条件式を出力すると、trueやfalseが出力される
真偽値-true
const number =12;
console.log(number >10);
コンソール
true
真偽値-false
const number =8 ;
console.log(number =10);
コンソール
false
if文と真偽値
if文の条件式が
trueであれば処理が実行され、
falseであれば実行されない
ということがわかります。
if文の条件式がtrueの処理の流れをみていきましょう。
const number=12;
//条件式が成り立つ
if(number > 10){
console.log("numberが10より大きいです")
}
const number=12;
//trueの置き換わる
if(true){
console.log("numberが10より大きい")
}
大小を比べる演算子
条件式に使った「>」は比較演算子と呼ばれる、大小比較の記号です。
「a<b」は、aの方がbより小さいときtrue,大きいときfalseになります。
また「a<=b」とすると、aの方がbより小さいまたは等しい(つまりb以下のときtrueになります。
a<b ・・・aはbより小さい
a<=b ・・・aの方が小さいまたは等しい
a>b ・・・aはbより大きい
a>=b ・・・aの方が大きいまたは等しい
const number=12;
//true
console.log(number<30);
//true
console.log(number<=12);
//false
console.log(number>12);
演習
const age = 24;
// 「age >= 20」を出力してください
console.log(age>=20);
// 「age < 20」を出力してください
console.log(age<20);
// ageの値が20以上の場合に、「私は20歳以上です」と出力してください
if(age>=20){
console.log("私は20歳以上です");
}
比較演算子
比較演算子には左と右の値が等しいか調べる
「a===b」はaとbが等しければtrue、等しくなければfalseになる
「a!==b」はその逆
等しいか比べる
a===b ・・・ aとbが等しい
a!==b ・・・ aとbが異なる
const number=12;
//true
console.log(number===12;)
const name= "john";
//false
console.log(name !== "john");
演習
const password = "ninjawanko";
// passwordの値が"ninjawanko"の場合、「ログインに成功しました」と出力してください
if (password === "ninjawanko"){
console.log("ログインに成功しました");
}
// passwordの値が"ninjawanko"でない場合、「パスワードが間違っています」と出力してください
if (password !=="ninjawanko"){
console.log("パスワードが間違っています");
}
条件が成り立たない場合の処理
numberの値が10より大きくない場合には「10以下です」と出力する方法
const number=7;
↓定数 numberの値が10より大きい?
Yes
"10より大きいです"
No
"10以下です"
としたい
elseの書き方
if文に「else」を組み合わせると
「もし〇〇なら⚫️⚫️を行うそうでなければ■■を行う」
という処理ができるようになります。
if(条件式){
条件が「true」の時の処理
}else{
条件が「false」の時の処理
}
elseのコード
elseを使った実際のコード
script1.js numberの値が10より大きいかどうかで処理を分けた場合に
ifのみを使用した例
script2.js else文を用いると、1つの条件分岐で同じことを実現できます。
elseを使わない場合→複数のif文が必要
const number=7;
if(number >10 ){
console.log("numberは10より大きいです");
}
if(number<=10){
console.log("numberは10以下です")
}
elseを使う場合→１つの条件紙で成立する
const number=7;
if(number = 10){
console.log("numebrは10より大きいです")
}else{
console.log("numberは10以下です")
}
演習
const age = 17;
// 条件式が成り立たない場合に「私は20歳未満です」と出力してください
if (age >= 20) {
console.log("私は20歳以上です");
} else{
console.log("私は20歳未満です");
}
条件を追加する
「10より大きい」という条件を満たさない中で「5より大きい」という条件で
処理を分岐する方法
const number=7;
定数numberの値が10より大きい?
Yes
"10より大きいです"
NO
かつ定数numberの値が5より大きい?
Yes
"5より大きい"
No
"5以下です"
としたい
else ifの書き方
ifとelseの間に「else if(条件)」を追加することで、
ifに条件分岐に追加することができます。
if(条件式1){
条件式1が「true」の時の処理
}else if(条件式2){
条件式1が「false」、条件式2が「true」の時の処理
}else{
どちらの条件式も「false」の時の処理
}
else ifのコード
「else if」を使った実際のコードを確認
条件式2がtrueなので「else if」 の中の処理が実行され、
コンソールは以下のようになる
const number = 7;
if(number = 10){//false
console.log("numberは10より大きいです")
}else if(number > 5){//true
console.log("numberは5より大きいです)
}else{
console.log("numberは5以下です")
}
numberは5より大きいです
const age = 17;
##演習
// ageの値が10以上20未満のとき、「私は20歳未満ですが、10歳以上です」と出力してください
if (age >= 20) {
console.log("私は20歳以上です");
} else if(age>=10){
console.log("私は20歳未満ですが、10歳以上です");
}
else {
console.log("私は10歳未満です");
}
かつ
複数の条件を組み合わせる方法
「かつ」について
「かつ」は「&&」→「条件1&&条件2」は「条件１かつ条件2」
という意味で、複数の条件が全てtrueならtrueになる
「10より大きいかつ30より小さい」は「10<x<30」と書くことはできない
かつ - &&
・true && true → true
・true && false → false
・false && true → false
・false && false → false
xが20の時 x>10 && x<30 ・・・true
true true
xが5の時 x>10 && x<30 ・・・false
false true
または
「または」は「||」→「条件1||条件2」は「条件1または条件2」
という意味で、複数の条件のうち1つでもtrueならtrueになる
または - ||
・true || true →true
・true || false →true
・false|| true →true
・false|| false →false
xが5の時 x<10 || x>30 ・・・true
true false
xが20の時 x<10 || x>30 ・・・false
false true
組み合わせの具体例
if文を使った「かつ」の具体例
number31のとき
「number>=10」も「number<100」もともとtrueなので、
処理が実行されます
const number=31;
if(number >=10 && number <100){
console.log("numberは2桁です");
}
numberは2桁です。
演習
const age = 24;
// 指定された条件のif文を作成してください
if(age>=20 && age<30){
console.log("私は20代です");
}
switch文とは
信号機の色を表す、定数colorの値によって処理をしたい例
ある値によって処理を分岐する場合に
switch文を用いることができる
定数color
ある値によって処理も分けたい!
・値が"緑"→「進めます」
・値が"黄"→「要注意」
・値が"赤"→「ストップ」
switch文の書き方(1)
「switch(条件の値){処理}」戸することでswitch文を使って
colorの値によって処理を分岐させる
switchの書き方
switch(条件の値){
//変数や定数など
:
:
}//セミコロン不要
具体例
const color="赤":
switch(color){
: //定数のcolorの値に応じて処理を分岐する
:
}
switch文の書き方(2)
switch文の中にcaseを追加することで処理を分けることができます
定数colorの値が「赤」であるときに「ストップ!」という文字列が出力される
switch(条件の値){
case 値1:
「条件の値」が「値1」と等しい時の処理
break;
//switch{}のなかにcaseを追加して処理を分ける
}
具体例
const color ='赤';
switch(color){
case"赤":
console.log("ストップ!");
//定数colorの値が'赤'の時に実行される
break;
}
switchの書き方(3)
switch文では分岐の数だけcaseを追加
caseの値に「黄」が指定されており、定数colorの値が「黄」である
場合には、「要注意」と出力されるようになっている
分岐の数だけ追加する
switch(条件の値){
case 値1:
//「条件の値」が「値1」と等しい時の処理
break;
case 値2:
//「条件の値」が「値2」と等しい時の処理
}
const color ="赤";
switch(color){
case"赤":
//定数colorの値が"赤"の時に実行される
console.log("ストップ");
break
case"黄":
//定数colorの値が"黄"の時に実行される
console.log("要注意");
break
}
switch文の注意点
switch文ではbreakが非常に重要です。
breakとはswitch文を終了する命令
合致したcaseの処理を行なった後、その次のcaseの処理も実行してしまいます。そのため、switch文を使う時にはbreakを忘れないように気をつけましょう。
const color="赤";
switch(color){
case"赤";
console.log("ストップ");
case"黄";
console.log("要注意");
berak;
}
上記のどちらも実行される
コンソール
ストップ!
要注意
演習
const rank = 2;
switch (rank) {
case 1:
console.log("金メダルです！");
break;
// rankの値が2のcaseを追加してください
case 2:
console.log("銀メダルです！");
break;
// rankの値が3のcaseを追加してください
case 3:
console.log("銅メダルです！");
break;
}
switch文-default
switchの条件の値がcaseの値と一致した時、
その部分の処理が実行されます。
caseのどれにも一致しなかった時、defaultの
ブロックが実行されます。
defaultはif文のelseに似たようなもの
switch(条件の値){
case 値1:
:
:
case 値2:
:
:
case 値3:
:
:
//「条件の値」が値1,値2,値3のどれも異なる時
default
処理
break;
}
const color="黒"
switch(条件の値){
case "赤":
:
:
case "黄":
:
:
case "緑":
:
:
//「条件の値」が値1,値2,値3のどれも異なる時
//この処理が実行される
default
console.log("colorの値が正しくありません")
break;
}
switch文 -defalut
このようなswitch文の性質を利用すると、if,elseによる分岐が多く
複雑な場合、switch文で書き換えるとシンプルで読みやすいコードにできます。
if(条件式){
処理
}else if (条件式2){
処理
}else{
処理
}
switch(条件の値){
case 値1:
処理
break;
case 値2:
処理
break;
case 値3:
処理
break;
default
処理
break;
}
演習
const rank = 5;
switch (rank) {
case 1:
console.log("金メダルです！");
break;
case 2:
console.log("銀メダルです！");
break;
case 3:
console.log("銅メダルです！");
break;
// defaultの処理を追加してください
default:
console.log("メダルはありません");
break;
}