条件文（if、else、else if）を使ってみる【JavaScript】

今回はJavaScriptで条件文を書いてみます。

<h2>ifとelse</h2>

おそらく、実際のプログラムを見た方が理解が早いと思いますので、早速以下のプログラムを実行してみましょう。


```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
    	<script>
		// 変数Aを宣言します。
		let A;
		
		// 変数Aに値を代入します。
		A = 10;
		
		// 条件文
		if(A < 10){
			alert("変数Aの値は10未満です。")
		}else if(A >= 10){
			alert("変数Aの値は10以上です。")
		}
		</script>
  </head>
  <body>
  </body>
</html>
```


上記を実行すると、以下のように「変数Aの値は10以上です。」と表示されます。

![exe_practice7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982997/b2aebae6-e026-d79b-a298-f57b2f65fa34.png)


今回は変数Aに10を設定していますので、

```
		if(A < 10){
			alert("変数Aの値は10未満です。")
		}
```

は満たさず、スルーして、

```
		else if(A >= 10){
			alert("変数Aの値は10以上です。")
		}
```

上記の部分で条件に合致し、「変数Aの値は10以上です。」と表示されます。

<h2>else</h2>

さて、先程のプログラムですが、以下のように書き換えることもできます。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
    	<script>
		// 変数Aを宣言します。
		let A;
		
		// 変数Aに値を代入します。
		A = 10;
		
		// 条件文
		if(A < 10){
			alert("変数Aの値は10未満です。")
		}else{
			alert("変数Aの値は10以上です。")
		}
		</script>
  </head>
  <body>
  </body>
</html>
```

else ifがelseに変わっていますが、結果としては変わりません。
else ifでは()の中で条件を指定していましたが、elseでは()がなく、「それ以外の場合」という条件になります。

例えば、先程プログラムで言えば、if(A < 10)というように「Aが10未満の場合」と指定されているため、「Aが10未満ではない場合」すなわち「Aが10以上である場合」となります。
これはelse if(A >= 10)と同じ意味ですね。したがって、結果が変わらないのです。

<h2>else ifとelse</h2>

また、以下の通り、else ifとelseを一緒に書くことも可能です。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
    	<script>
		// 変数Aを宣言します。
		let A;
		
		// 変数Aに値を代入します。
		A = 10;
		
		// 条件文
		if(A < 10){
			alert("変数Aの値は10未満です。")
		}else if(A >= 10 && A < 20){
			alert("変数Aの値は10以上、20未満です。")
		}else{
			alert("変数Aの値は20以上です。")
		}
		</script>
  </head>
  <body>
  </body>
</html>
```

else if(A >= 10 && A < 20)の「&&」は「かつ」という意味です。したがって、「Aが10以上である、かつ、Aは20未満である」すなわち「Aは10以上、20未満である」となります。

![exe_practice9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982997/b34ab908-630a-f36a-5981-dcfacdefeba4.png)


if:Aは10未満
else if:Aは10以上、20未満
else:上記以外→Aは20以上

上記のように各条件をまとめるとelseの条件がわかりやすいかと思います。
このようにelse ifとelseを組み合わせることも可能です。

<h2>if文のみ</h2>

以下のようにif文だけを使用することもできます。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
    	<script>
		// 変数Aを宣言します。
		let A;
		
		// 変数Aに値を代入します。
		A = 10;
		
		// 条件文
		if(A < 10){
			alert("変数Aの値は10未満です。")
		}
		</script>
  </head>
  <body>
  </body>
</html>
```

この場合、if文の条件を満たさないので何も起きませんが、裏側でしっかりプログラムが動いています。
else ifやelseを使用せず、if文のみにして「特定の条件の時だけ、この処理を行ってほしい」といったことも実装可能です。個人的な感覚ですが、意外とif文単体の書き方は結構使う印象がありますので、覚えておいて損はありません。

<h2>終わりに</h2>

今回は条件文（if、else、else if）を紹介しました。
少しずつプログラミングをやっている感じが出てきておもしろくなってきたのではないでしょうか？

確かに、プログラミングは難しい部分もありますが、基本的な部分はどなたでも理解できると思っています。
そして意外にも、基本的な組み合わせでそれなりに役に立つプログラムが作成できると私は考えています。

私は業務の中でExcelのマクロを組むことがありますが、さすがにお客様に納品できるレベルではないものの、自分の面倒な業務の一部をマクロに任せることで、何度か楽をすることができました。
みなさんもご自身が担当されている業務を細かく切り分けていった時に、繰り返しの多い面倒な作業があるのではないでしょうか？
そういった作業を少しでも自前のプログラムに任せることで楽をすることができますし、「プログラミングを勉強してよかった」と感じる良いきっかけになります。

スペシャリストと呼ばれるような人材にならなくても、上記のように基本的なことだけで作ったプログラムに助けられることがあります。まさに「芸は身を助く」かと思います。
一歩ずつ基本的なことから積み上げていきましょう。


今回の記事を作成するにあたって、以下を参考にいたしました。ありがとうございます。

【参考文献】

https://udemy.benesse.co.jp/development/system/javascript-if-else.html