概要

JavaScriptの理解を深めるため、

で学習した内容を記載していく。

本記事では、条件分岐について記載する。

if文

if文の書き方

if (条件式) {
    条件式がtrueの場合の処理;
} else {
    条件式がfalseの場合の処理;
 }

{}で囲まれた部分をブロック文と呼ぶ。1つ目のブロック文には、条件式がtrueの場合の処理を書き、elseの後ろの２つ目のブロック文には、条件式がfalseの場合の処理を書く。

if文の具体例

「金額が5000円以上の場合は送料無料、そうでない場合は送料800円とコンソールに表示する」プログラムの場合。

if_example.js

const price = 3000;

if (price >= 5000) {
    console.log('送料無料');
} else {
    console.log('送料800円');
}

else ifによって分岐を増やす

複数の条件による分岐がある場合はelse ifを使うことでプログラムを作ることができる。

if (条件式１) {
    条件式１が真値となる場合の処理;
} else if (条件式2) {
    条件式２が真値となう場合の処理;
} ・・・

 // 同様に何個でも条件式を追加することができる 
} else {
    どの条件式も真値にならない場合の処理;
}

「重量による配送料」は、else ifを使って以下のように書くことができる。

else_if.js

const weight = 300;

if (weight < 250) {
    console.log('配送料２００円');
} else if (weight < 500) {
    console.log('配送料４００円');
} else if (weight < 1000) {
    console.log('配送料６００円');
} else {
    console.log('取り扱いできません');
}

論理積（&&）と論理和（||）

２つの条件両方を満たすような条件をAND条件という。一方どちらか１つを満たせばよい条件をOR条件という。
このAND条件とOR条件を作るための、&&と||という演算子が用意されている。&&を論理積演算子、||を論理和演算子という。

条件式A && 条件式B
// AとBの両方がtrueなら、true。そうでなければfalse

条件式A || 条件式B
// AとBのどちらか１つがtrueなら、true。両方falseならfalse

これで、以下のようなコードも&&と||を使うことで簡潔に書くことができる。

・年齢が２０歳以上、かつ２９歳以下なら「２０代」と表示するプログラム。
・年齢が１０歳以下、または６０歳以上なら「ジュニアまたはシニア」と表示するプログラム

and_or.js

const age1 = 25;
if (age1 >= 20 && age <= 29) {
    console.log('２０代');
}

const age2 = 65;
if (age <= 10 ||  age >= 60) {
    console.log('ジュニアまたはシニア');
}

三項演算子

シンプルなif文は、三項演算子を使って簡潔なコードに書き換えることができる。条件式が真値の場合は、？の後ろの値を返し、偽値の場合は：の後ろの値を返す。

(条件式) ?　真値のときに返す値 :　偽値の時に返す値;

例えば、次のようなif文を使ったコードがあったとする。

const size = 20;
let result;
if (size >= 30) {
    result = '粗大ゴミ';
} else {
    result = '不燃ごみ';
}

これを三項演算子を使って書くと次のようになる。

const size = 20;
const result = (size >= 30) ? '粗大ゴミ'　: '不燃ごみ';

switch文

switch文はある変数がどのような値なのかによって処理を分岐させることができる。

switch文の書き方

switch (変数) {
case 値１:
    変数が値１となるときの処理;
    break;
case 値2:
    変数が値2となるときの処理;
    break;
case 値3:
    変数が値3となるときの処理;
    break;
default:
    その他の処理;
}

もし、どのcaseにも一致しない場合は、default以降の処理を実行する。

順位によって、処理を分岐させる例は以下のように書くことができる。

switch.js

const ranking = 2;

switch (ranking) {
case 1:
    console.log('金メダル');
    break;
case 2:
    console.log('銀メダル');
    break;
case ３:
    console.log('銅メダル');
    break;
default:
    console.log('メダルなし'); 
}

【JavaScript】JavaScriptまとめ②(条件分岐）

概要

if文