JavaScriptの基本③　条件分岐と繰り返し処理

本記事ではJavaScriptの条件分岐と繰り返し処理についてご紹介します。
まず条件分岐から説明します。

## 条件分岐
・if文
・switch文

### if文
基本的な条件分岐です。if(条件式){処理}の構文で成り立ち、(条件式)を計算してtrueとなるかfalseとなるかを判断します。

```javascript
if(条件式){
    //処理
}
```

＜＜使用例＞＞
```javascript

let i = 3;
if(i > 1){
    // iが1より大きいかどうか判断します
    console.log(i + 'は1よりも大きいです');
}
```
条件式に合致（true）すればコンソール上で下記のように結果が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/f1100131-7379-1089-3a19-b92336a416ed.png)

変数iに1以下を代入して確認してみます。
```javascript

let i = 0;
if(i > 1){
    // iが1より大きいかどうか判断します
    console.log(i + 'は1よりも大きいです');
}
```

(i > 1)の条件式に一致しないためコンソールには何も表示されません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/5077f1a8-8578-aec4-356b-0f8596b10d7d.png)

--------------------------
if文でtrueでなかった場合の処理を書きたい…
そんな時はelseを使用します。

```javascript
if(条件式){
    //処理
}else{
    //処理
}
```

＜＜使用例＞＞
```javascript

let i = 0;
if(i > 1){
    // iが1より大きいかどうか判断します
    console.log(i + 'は1よりも大きいです');
}else{
    console.log(i + 'は1よりも小さいです');
}
```
このように書くことで、条件式(i > 1)に当てはまらなかった場合の処理を下に記載することができます。
コンソールに表示された結果はこのようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/46e38939-6c78-5527-e699-035ae8128680.png)

-------------------------------------------------

if文でもっと条件を増やしたい…
そんな時はelse ifを用います。先ほどの「if」「else」の間に記載します。

```javascript
if(条件式1){
    //処理
}else if(条件式2){
    //処理
}else{
    //処理
}
```

このように記載することで、このような意味になります。
「if もし〇〇だった場合」

「else if もし〇〇でなくて△△である場合」

「else 〇〇でも△△でもない場合」

＜＜使用例＞＞

```javascript
let i = 1;
if(i > 1){
    // iが1より大きいかどうか判断します
    console.log(i + 'は1よりも大きいです');
}else if(i == 1){
    // iが1と一致するかどうか判断します
    console.log(i + 'は1です');
}else{
    console.log(i + 'は1よりも小さいです');
}
```

コンソールに表示される結果はこのようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/bec6d8ca-0a80-dee6-70d4-7d0f566fa857.png)

また、else ifの記述による条件は、「if」と「else」の間に複数増やすこともできます。

しかし、条件が増えすぎるとコードの可読性が低くなります。
そのため、複数の条件分岐に対応したのが**switch文**です。

### switch文
if文ほど使用頻度は高くありませんが、複数の値を用意して、その値に一致した場合、該当する処理を行う条件分岐です。
```javascript
switch (値){
    case 値:
        // 処理
    case 値:
        // 処理
    case 値:
        // 処理
    case 値:
        // 処理
    default:
        // 処理
}
```

＜＜使用例＞＞

```javascript
let color = 'red';

switch (color) {
    case 'red':
        console.log('赤');
        break;
    case 'blue':
        console.log('青');
        break;
    case 'yellow':
        console.log('黄');
        break;
    case 'white':
        console.log('白');
        break;
    default:
        console.log('不明な色です');
}
```

コンソールに表示される結果はこのようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/a1caeccf-109d-a710-f109-27d62b25eec9.png)

書き方のポイントとしては
**分岐後の処理のbreak**
…分岐して処理を行った後にbreakを記述しないと、そのまま次の条件に当てはまるかどうか検証し続けてしまい、無限ループが発生してしまうためです。

**if文でのelseがdefault**
…switch文の条件に一致しない値だった場合はelseではなくてdefaultを記述します。


また、記載したswitch文の条件に一致した条件から処理が行われるため、
例えば「〇〇かつ△△」という、〇〇と△△どちらでもある値だった時、
この場合switch文中で先に書かれていた条件の処理が行われます。



## 繰り返し処理
・for文
・while文
・do while文

### for文
…ある特定の処理を、指定した数繰り返し処理を行うための文。

```javascript
for(let i=1; i<=5; i++){
    console.log(i);
}
```

for文の中身を分解して考えてみましょう。

**let i=1** …変数iを宣言し、１を代入します。

**i<=5** …これはfor文の処理が行われるための条件です。
　　　　　　内容としては「iが5以下である場合は処理を行う」という意味合いになります。

**i++** …iの後置インクリメント演算子です。console.logの処理が終わった後にiを+1します。

つまり、「変数iが5以下である場合、console.logの処理を行い、を+1する」ということです。

コンソール上でどのような結果が出るか確認してみましょう。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/8c7303b8-47f7-d622-588d-e2e011ffbe9a.png)

このように５以上の数値になるまで数字がコンソール上に表示されるようになります。

### while文

```javascript
let i = 1;
while(i<=10){
    // 条件式がtrueの時に行われる処理
    console.log(i);
    i++;
}
```

while文を使用する場合、forのようにまとめて宣言・条件・処理内容を記載するのではなく
while文の外側で変数の宣言をし、while文の()内に条件を記載し、iにiを足す処理をそのwhile文の内側で行います。


ソースコードを実行するとコンソール上に下記のような結果が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/4f1bfb32-3265-ee1e-a699-acbd618fe01f.png)


### do while文
先ほどのwhile文と同様に外で変数の定義を行うところまでは同じですが、
異なるのは、次にdo {処理}を記述し、doの外に繰り返し処理の条件を記載するようになっています。

```javascript
let i = 3
do {
    console.log(i);
    i++;
} while(i <= 5);
```

こちらは変数iの中に3を代入しているため、コンソール上に3～5までの数字が出力されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3906686/b08a28ae-fb1d-46bb-157b-db059c2112b8.png)