はじめてのJavaScript⑤ 条件分岐-1 「if文 / else/ else if」

##1. はじめに
本記事では、JavaScriptの
「if文 / else/ else if」
について記載する。
##2.条件分岐の概要
:::note
「もし〇〇ならば✗✗する」というプログラム。
:::
:::note
値によって処理するプログラムを分岐させる。
:::
(例)
・ECサイトの通販の商品代金合計がもし2000円未満ならば、送料500円を請求する。
・選挙の事務Aさんが、もし20歳ならば投票の入場券を発送する。
##3. if文
概要部分でも触れたが、if文は

「もし〇〇ならば✗✗する」というプログラム。

のことである。
構文としては以下の通り。

index.js

if (条件式) {
  //条件がtrueの場合に実行したい処理
} else {
  //条件がfalseの場合に実行したい処理
}

※条件式がfalseのときに実行する処理が無い場合はelseを省略することが可能。
##4. if elseを使用した実践
(例)
・変数xを宣言すると同時に整数を代入。
・変数xの値が、100以上だったら、'100以上の値です'とコンソールに表示。
・変数xが100未満だったら、'100未満の値です'とコンソールに表示。

---

まずは変数xを宣言する。

index.js

let x = 100;

---

次に、変数xの値が100未満だったら〜の部分を記述。 更に、elseで100未満だったら〜を記述。

index.js

if (x >= 100) {
  console.log('100以上の値です');
} else {
  console.log('100未満の値です');
}

デベロッパーツールで検証してみると

となり、変数xは100なのでコンソールへ出力すると100以上との結果が返ってくる。

---

elseの検証も実施してみる。 変数xの数値を変更してみる。

index.js

let x = 99;

コンソールへ出力すると

となり、elseの検証に問題ないことが確認できた。
##5. 比較演算子
比較演算子とは、

・二つの式や値の比較を行い、結果を真偽値（trueまたはfalse）で返すもの。
・一致・不一致や大小の比較などいくつかの種類がある。

を指す。
比較演算子の詳細説明は以下より。
MDN:比較演算子
##6. else if
else ifは、以下のような形で使用される。

index.js

if (条件式1) {
  //条件式1がtrueの倍位に実行したい処理
} else if(条件式2) {
  //条件式2がtrueの場合に実行したい場合
} else {
  //全ての条件式が成り立たなかった場合に実行したい処理
}

※else ifは、複数記述可能
(例)
テストの点数yによって、通知表の成績をコンソールへ出力する。
・90点以上:A
・80点以上:B
・60点以上:C
・60点未満:D

---

まずは、点数yを宣言。

index.js

let y = 90;

その後、if分を記述。
上記記載のように、elseに該当する箇所はDということになる。

index.js

if (y >= 90) {
  console.log('A');
} else if (y >= 80) {
  console.log('B');
} else if (y >= 60) {
  console.log('C');
} else {
  console.log('D');
}

点数yは90としたので、コンソールへ出力されるのは

Aということになる。
点数yの数値を変更することで、コンソールへ出力される条件が異なっていく。(ここでは割愛)
##7. おわりに
次項:はじめてのJavaScript⑥ 条件分岐-2 「switch」へ続く。