【JavaScriptの超基本】条件分岐（if文とswitch文）について簡単に解説

#概要
この記事では、JavaScriptの条件分岐について、超基本的な知識をメモ的にまとめています。

自分用の備忘録なのであしからず。

#目次
- [条件分岐](#条件分岐)
- [真偽値](#真偽値)
- [比較演算子](#比較演算子)
- [if文](#if文)
    - [else](#else)
    - [else if](#else-if)
    - [複数の条件式](#複数の条件式)
- [switch文](#switch文)
- [まとめ](#まとめ)

#条件分岐
条件分岐とは、ある条件が成り立つときだけ処理を行うというようなプログラムのことです。

JavaScriptでは、**「if文」**や**「switch文」**といった書き方がありますので、それぞれ学んでいきます。

今回は条件分岐を学ぶ前に、条件分岐を理解する上で必要な**「真偽値」**と**「比較演算子」**について学んでいきます。

#真偽値
まずは、具体例から。
以下のプログラムを実行します。

```index.js
const number = 22;
console.log(number > 20);
//出力結果 : true
```

ここで出力される`true`は「真偽値」と呼ばれるものです。真偽値には`ture`と`false`の二つの値しか存在しません。条件式が成り立っているとき`ture`、成り立っていないときは`false`となります。

上の例で、**「number > 20」**は**「定数numberが20より大きい」**という条件式になります。
今、定数numberには22が代入されていて20より大きい値なので、条件が成り立ちtrueが出力されています。

#比較演算子
真偽値を出力した際の条件式の部分で出てきた「>」は「比較演算子」と呼ばれるものです。比較演算子にはいくつか種類がありますので、まとめてみました。

| 演算子 |判定|
|:-:|:-:|
|a === b|aがbと等しいときTrue|
|a !== b|aがbと等しくないときTrue|
|a > b|aがbより大きいときTrue|
|a < b|aがbより小さいときTrue|
|a >= b|aがb以上のときTrue|
|a <= b|aがb以下のときTrue|

数学の記号と似ているので、難しくはないと思います。

「===」と「!==」は数値だけでなく、文字列同士の比較にも用いることができます。

この真偽値と比較演算子の知識は、条件分岐のコードを書く際に重要になってきますので、しっかり理解しましょう。

では次に、実際に条件分岐のコードについて見ていきます。

#if文
if文を用いると、「もし〜ならば、〜を行う」という条件分岐のプログラムを書くことができます。書き方は以下の通りです。

```index.js
if (条件式) {
  処理
}
```

`if`の後ろの`条件式`がtrueのとき、`{ }`の中の**処理**が実行されます。
処理は**インデント（字下げ）**します。文末のセミコロンは不要です。

実際のコードを見てみます。

```index.js
const number = 22;
if (number > 20) {
  console.log('numberは20より大きいです');
}
//出力結果 : numberは20より大きいです
```

ここでは`number`は`22`であり、条件式がtrueとなるので処理が実行されます。

仮に`const number = 18`と宣言すると、`number > 20`という条件式を満たさなくなるので、コンソールには何も出力されません。

##else
`else`を用いると条件が成り立たなかった場合に別の処理を行うことができます。
つまり、条件式がfalseの場合の処理を決められます。

**「もし〜ならば〜を行う、そうでなければ〜を行う」**というように処理を実行することができます。

書き方は以下の通りです。

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

if文の後ろに`else`と書き、`{ }`の中に処理を書きます。

実際のコードは次のような感じになります。

```index.js
const number = 19;
if (number > 20) {
  console.log('numberは20より大きいです');
} else {
  console.log('numberは20以下です'};
}
//出力結果 : numberは20以下です
```

コードを見ていくと、まず`if`の後ろの条件式で`number`と`20`を比較します。
今回は、`number`には19が代入されていて、これは20より小さいので`false`となり`if`ブロックの中の処理は実行されずにスルーされます。
よって、`else`ブロックに書かれている処理が実行されます。

##else if
さらに条件を追加したい場合には`else if`を用います。`if`と`else`の間に`else if (条件) {処理}`を追加することで条件分岐を増やすことができます。

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

書き方は、これまでと大体一緒ですね。

```index.js
const number = 19;
if (number > 20) {
  console.log('numberは20より大きいです');
} else if (number > 10) {
  console.log('numberは10より大きいです');
} else {
  console.log('numberは10以下です'};
}
//出力結果 : numberは10以下です
```

こちらもコードを見ていきます。

まず`if`の後ろの条件式で`number`と`20`を比較します。
今回は、`number`には19が代入されていて、これは20より小さいので`false`となり、`if`ブロックの中の処理は実行されずにスルーされます。

次に、`else if`の後ろの条件式で`number`と`10`を比較します。
`number`には19が代入されていて、これは10より大きいので`true`となり、`else if`ブロックの中の処理が実行されます。

`else if`ブロックの処理が実行されるので、その後ろの`else`ブロックの処理は行われません。

このように、if文では、上から順番に条件式を判定していき、**最初に`true`になったブロックの処理だけが実行**されます。
この性質を理解して、**条件式を正しい順番**で書くようにしましょう。

##複数の条件式
`&&`や`||`を用いることで、複数の条件式を組み合わせることができます。

`&&`は**「かつ」**に相当し、`条件式1 && 条件式2`と書くことで複数の条件式全てが`true`であれば全体が`true`になります。

一方、`||`は**「または」**に相当し、`条件式 || 条件式2`と書くことで複数の条件式のいずれかが`true`であれば全体が`true`になります。

実際のコードを見てみましょう。

```index.js
//例１） &&を用いたif文
const number = 21;
if (number % 3 === 0 && number % 4 === 0) {
  console.log('numberは3の倍数かつ4の倍数です')
} 
//何も出力されない

//例２） ||を用いたif文
if (number % 3 === 0 || number % 4 === 0) {
  console.log('numberは3の倍数または4の倍数です')
}
//出力結果 : numberは3の倍数または4の倍数です
```

例1では、条件式の部分で`number`に代入された`21`が**「3で割り切れるのかどうか」**と**「4で割り切れるのかどうか」**を判定しています。
当然、21は3で割り切れますが、4では割り切れません。
つまり、片方の条件式しか満たしていないため、`if`ブロックの処理は実行されません。

例2でも、例1と同じ条件で`number`を判定しています。
21は3で割り切れるため、片方の条件を満たしています。
よって、`if`ブロックの処理が実行され、コンソールに文字が出力されます。

#Switch文
switch文を用いると、**ある値によって処理を分岐する**ことができます。

まずは書き方を見てみましょう。

```index.js
switch (条件の値) {
  case 値1:
    条件値と値1が等しい時の処理
    break;
  case 値2:
    条件値と値2が等しい時の処理
    break;
  default:
    どの条件にも合致しなかった時の処理
    break;
}
```

コードの流れにとしては、まず`条件の値`に、定数や変数などを指定します。その後`{ }`の中に`case`を追加して処理を分けます。

`case`の後に書く値と条件の値が等しい時、指定した処理を行います。

`break;`はswitch文を終了する命令になります。
`break`がないと、合致した`case`の処理を行った後、その次の`case`の処理も実行してしまいます。

どの`case`にも一致しなかった時の処理、`default`のブロックが実行されます。if文で言う`else`のようなものです。

分岐が多くなった場合、if文に比べてシンプルで読みやすいコードになります。

具体的なコードを見てみましょう。

```index.js
const customerCategorization = '大人'
switch (customerCategorization) {
  case 'シニア':
    console.log('食べ放題料金は2000円です');
    break;
  case '大人':
    console.log('食べ放題料金は3000円です');
    break;
  case '小人':
    console.log('食べ放題料金は1500円です');
    break;
  default:
    console.log('正しい値を入力してください');
    break;
}
//出力結果 : 食べ放題料金は3000円です
```

コードをみていきます。

まず、1行目で定数が宣言され、`customerCategorization`には`大人`が代入されています。

具体例のswitch文では、`customerCategorization`の値を比較していきます。

まず、一つ目の`case`では、`customerCategorization`と`シニア`を比較します。当然、一致していないので処理は実行されません。

次に、二つ目の`case`で、`customerCategorization`と`大人`を比較します。これは、一致して`true`となるので、処理が実行され、コンソールには大人の食べ放題料金が出力されます。

switch文は、if文と同じように、最初に一致した条件の処理のみ実行されるので、以降の処理はスルーされます。

#まとめ
今回は、JavaScriptでの条件分岐について簡単にまとめてみました。

読んでいただきありがとうございました。では。