Progate JavaScript 条件分岐

##条件分岐
プログラミングにおいて重要な条件分岐
「ある条件が成り立つときだけある処理を行う」という場面が出てくる

このようなプログラムを条件分岐

```script.js
const number =12;
```

↓yes 定数numberの値が10より大きい?

```script.js
console.log("numberは10より大きいです");

```

のようなものを作りたい。

##if文の書き方
if文を用いると「もし〇〇ならば⚫️⚫️を行う」という条件分岐が可能になります。ifの後ろに条件式を書き、それが「成り立つ」場合の処理を{ }のなかに書きます。

下記でイメージ

```script.js
if(条件式){

  処理//条件式が成り立てば実行される

}//セミコロンは不要

```

```script.js
const number=12;

if(numberが10より大きい場合){

  console.log("numberは10より大きいです。")

  //条件式が成り立てば実行される
}

```

##if文のコード
実際のコードを見てみましょう
条件式の一例「number > 10」の部分は「定数numberの値が10より大きい」という意味の条件式になります。
定数numberには12が代入されているので、この条件は成り立ち、処理が実行されます。

```script.js
const number =12;
if(number>10){
  //「numberの値が10より大きい」という条件
  console.log("numberは10より大きいです")  
}

```

```
numberは10より大きいです
```

##if文書くときのポイント
if文を書くときは、インデントするようにしましょう。
console.logの部分でtabキーを1回おすと半角スペース2つ分インデントすることができます。
インデントすると、コードが見やすくなります。

```scirpt.js
const number= 12;
if(number > 10){
  console.log("numberは10より大きいです")
//↑tabキーでインデント!
}
```

##演習

```script.js
const level = 12;

// 条件式を「level > 10」とするif文を作ってください
if(level>10){
  console.log("レベルが10より大きいです");
}

```

##条件式の出力
if文を使うことができました。次は条件式の部分を詳しく見てみましょう。
先ほどのif文の条件式の部分を出力してみると「true」が出力されます

```script.js
const number=12;

//条件式を抜き出す
「if(number > 10)」{
  console.log("numberは10より大きいです");
}
```

```script.js
const number=12;
//抜き出した部分の条件式を出力
「console.log(number>10);」
```

コンソール(出力結果)

```
true
```

となる

##真偽値
先ほどの例で出力された「true」は<strong>真偽値</strong>と呼ばれる。
真偽値には<strong>true</strong>と<strong>false</strong>という２つの値しか存在しない。
条件式
・成り立つと「true」
・成り立たないと「false」
という真偽値に置き換わる

よって条件式を出力すると、trueやfalseが出力される

<strong>真偽値-true</strong>

 ```script.js
const number =12;
console.log(number >10);

```

コンソール

```
true
```

<strong>真偽値-false</strong>



```script.js
const number =8 ;
console.log(number =10);

```

コンソール

```
false
```

##if文と真偽値
if文の条件式が
trueであれば処理が実行され、
falseであれば実行されない
ということがわかります。
if文の条件式がtrueの処理の流れをみていきましょう。

```script.js
const number=12;
//条件式が成り立つ
if(number > 10){

  console.log("numberが10より大きいです")
 
}

```

```script.js
const number=12;

//trueの置き換わる
if(true){

  console.log("numberが10より大きい")
}

```

##大小を比べる演算子
条件式に使った「>」は比較演算子と呼ばれる、大小比較の記号です。
「a<b」は、aの方がbより小さいときtrue,大きいときfalseになります。
また「a<=b」とすると、aの方がbより小さいまたは等しい(つまりb以下のときtrueになります。

```script.js
 a<b  ・・・aはbより小さい
 a<=b ・・・aの方が小さいまたは等しい
 a>b  ・・・aはbより大きい
 a>=b ・・・aの方が大きいまたは等しい
```

```script.js
const number=12;
//true
console.log(number<30);

//true
console.log(number<=12);

//false
console.log(number>12);

```

##演習
```script.js
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」はその逆

<strong>等しいか比べる</strong>

```scipt.js
a===b　・・・ aとbが等しい
a!==b　・・・ aとbが異なる
```

```script.js
const number=12;
//true
console.log(number===12;)

const name= "john";
//false
console.log(name !== "john");

```

##演習
```script.js
const password = "ninjawanko";

// passwordの値が"ninjawanko"の場合、「ログインに成功しました」と出力してください
if (password === "ninjawanko"){
  console.log("ログインに成功しました");
}



// passwordの値が"ninjawanko"でない場合、「パスワードが間違っています」と出力してください
if (password !=="ninjawanko"){
  console.log("パスワードが間違っています");
}

```

##条件が成り立たない場合の処理
numberの値が10より大きくない場合には「10以下です」と出力する方法

```scirpt.js

const number=7;

```

↓定数 numberの値が10より大きい?

<strong>Yes</strong>

```
"10より大きいです"
```

<strong>No</strong>

```
"10以下です"
```

としたい

##elseの書き方
if文に「else」を組み合わせると
「もし〇〇なら⚫️⚫️を行うそうでなければ■■を行う」
という処理ができるようになります。

```script.js
if(条件式){
  条件が「true」の時の処理
}else{
  条件が「false」の時の処理
}
```

##elseのコード
elseを使った実際のコード

script1.js numberの値が10より大きいかどうかで処理を分けた場合に
ifのみを使用した例

script2.js else文を用いると、1つの条件分岐で同じことを実現できます。

<strong>elseを使わない場合→複数のif文が必要</strong>

```script.js
const number=7;
if(number >10 ){
  console.log("numberは10より大きいです");
}
if(number<=10){
  console.log("numberは10以下です")
}
```

<strong>elseを使う場合→１つの条件紙で成立する</strong>

```script.js
const number=7;
if(number = 10){
  console.log("numebrは10より大きいです")
}else{
  console.log("numberは10以下です")
}

```

##演習

```script.js

const age = 17;

// 条件式が成り立たない場合に「私は20歳未満です」と出力してください
if (age >= 20) {
  console.log("私は20歳以上です");
} else{
  console.log("私は20歳未満です");
}


```

##条件を追加する

「10より大きい」という条件を満たさない中で「5より大きい」という条件で
処理を分岐する方法

```script.js
const number=7;
```

定数numberの値が10より大きい?

<strong>Yes</strong>

```
"10より大きいです"
```

<strong>NO</strong>

かつ定数numberの値が5より大きい?

Yes

```
"5より大きい"
````

No

```
"5以下です"
```

としたい

##else ifの書き方
ifとelseの間に「else if(条件)」を追加することで、
ifに条件分岐に追加することができます。

```script.js
if(条件式1){
  条件式1が「true」の時の処理  
}else if(条件式2){
  条件式1が「false」、条件式2が「true」の時の処理
}else{
  どちらの条件式も「false」の時の処理
}
 ```

##else ifのコード
「else if」を使った実際のコードを確認
条件式2がtrueなので「else if」 の中の処理が実行され、
コンソールは以下のようになる

```script.js
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より大きいです
```

```script.js
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歳未満です");
}

```

##かつ
複数の条件を組み合わせる方法
「かつ」について
「かつ」は<strong>「&&」</strong>→「条件1&&条件2」は「条件１かつ条件2」
という意味で、<strong>複数の条件が全てtrueならtrue</strong>になる
「10より大きいかつ30より小さい」は「10<x<30」と書くことはできない

<strong> かつ - && </strong>
・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」
という意味で、複数の条件のうち<strong>1つでもtrueならtrue</strong>になる

<strong> または - || </strong>
・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なので、
処理が実行されます

```script.js
const number=31;
if(number >=10 && number <100){
  console.log("numberは2桁です");
}

```

```
numberは2桁です。
```

##演習
```script.js
const age = 24;

// 指定された条件のif文を作成してください
if(age>=20 && age<30){
  console.log("私は20代です");
}

```

##switch文とは

信号機の色を表す、定数colorの値によって処理をしたい例
<strong>ある値によって処理を分岐する</strong>場合に
switch文を用いることができる

定数color

ある値によって処理も分けたい!

・値が"緑"→「進めます」
・値が"黄"→「要注意」
・値が"赤"→「ストップ」

##switch文の書き方(1)
「switch(条件の値){処理}」戸することでswitch文を使って
colorの値によって処理を分岐させる

switchの書き方

```script.js
switch(条件の値){
      //変数や定数など
 :
 :

}//セミコロン不要
```
具体例

```script.js
const color="赤":

switch(color){
 :    //定数のcolorの値に応じて処理を分岐する
 :
}
```

##switch文の書き方(2)
switch文の中にcaseを追加することで処理を分けることができます
定数colorの値が「赤」であるときに「ストップ!」という文字列が出力される

 ```script.js
switch(条件の値){
  case 値1:
  「条件の値」が「値1」と等しい時の処理
  break;
  //switch{}のなかにcaseを追加して処理を分ける
}

```

具体例

```script.js
const color ='赤';
switch(color){
  case"赤":
  console.log("ストップ!");
  //定数colorの値が'赤'の時に実行される
  break;
}

```

##switchの書き方(3)
switch文では分岐の数だけcaseを追加
caseの値に「黄」が指定されており、定数colorの値が「黄」である
場合には、「要注意」と出力されるようになっている

分岐の数だけ追加する

```script.js

switch(条件の値){
  case 値1:
  //「条件の値」が「値1」と等しい時の処理
  break;
  case 値2:
  //「条件の値」が「値2」と等しい時の処理
}
```

```script.js
const color ="赤";
switch(color){
  case"赤":
  //定数colorの値が"赤"の時に実行される
     console.log("ストップ");
  break
  case"黄":
  //定数colorの値が"黄"の時に実行される
     console.log("要注意");
  break
}

```

##switch文の注意点
switch文では<strong>break</strong>が非常に重要です。
breakとはswitch文を終了する命令
合致したcaseの処理を行なった後、その次のcaseの処理も実行してしまいます。そのため、switch文を使う時にはbreakを忘れないように気をつけましょう。

```script.js
const color="赤";
switch(color){
  case"赤";
     console.log("ストップ");
  case"黄";
     console.log("要注意");
  berak;

}

上記のどちらも実行される

```

コンソール

```
ストップ!
要注意
```

##演習
```script.js

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のどれにも一致しなかった時、<strong>default</strong>の
ブロックが実行されます。
defaultはif文のelseに似たようなもの

```script.js
switch(条件の値){
  case 値1:
    :
    :
  case 値2:
    :
    :
  case 値3:
    :
    :
//「条件の値」が値1,値2,値3のどれも異なる時
   default
    処理
    break;

}
```

```script.js



const color="黒"

switch(条件の値){
  case "赤":
    :
    :
  case "黄":
    :
    :
  case "緑":
    :
    :
//「条件の値」が値1,値2,値3のどれも異なる時
//この処理が実行される
   default
     console.log("colorの値が正しくありません")
    break;
}

```

##switch文 -defalut
このようなswitch文の性質を利用すると、if,elseによる分岐が多く
複雑な場合、switch文で書き換えるとシンプルで読みやすいコードにできます。

```script.js
  if(条件式){
    処理
}else if (条件式2){
  処理
}else{
  処理
}
```


```script.js
switch(条件の値){
  case 値1:
    処理
    break;
  case 値2:
    処理
    break;
  case 値3:
    処理
    break;
  default
    処理
    break;
}
```

##演習

```script.js
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;
}
```