プログラミングでは条件次第で処理を変えたい場合があります。
例えば、Enterキーを押したらフォームに入力された値のチェックを行う場合、押されたキーがEnterキーであるかどうかを判定する必要があります。
また、ユーザーがログインしている場合は「ログイン」ボタンは非表示にしてユーザーのアイコンを表示したいかもしれません。
このように条件によって処理を変えることを 条件分岐 といいます。
今回は、条件分岐に使用する if文 と switch文の書き方と真偽値や論理演算子について学習します。
今回の学習内容
真偽値について
Boolean(ブーリアン)型とも呼ばれ、値は true（真） か false （偽）のどちらかしかありません。
そのため「はい」か「いいえ」など、どちらか一つの値しかない場合に使用されます。
文字列や数値と同じく値の型となります。
JavaScriptのその他の値についてははじめてのJavaScript を参照してください。
真偽値（Boolean）の使い方
// flag という変数を宣言し、真偽値 false を代入する
let flag = false;
console.log(flag); // false
false)と同等になるケース
JavaScriptでは、以下の場合 false（偽）と同等に評価されます。null、0やNaN、空文字列 ('')または("")(``)、undefined
上記以外は
true（真）と同等に評価されます。
論理演算子について
AND演算、OR演算、NOT演算
論理演算子を使うことで複数の条件を組み合わせた結果を返すことができます。
論理演算子は、AND（かつ）、OR（または）、NOT（否定）の３つで、JavaScriptでは次のように表現します。
&&（AND）、||（OR）、!（NOT）「A かつ B」（ A && B ）
「A または B」（ A || B）
「A ではない」（ !A ）
というような表現ができます。
ショートサーキット評価
論理演算子は左から右に評価されます。
例えば、true || false である場合、左辺で既に結果が確定しているため右辺の評価を省略します。
論理演算子の使い方
// 真 かつ 真
console.log(true && true); // true
// 偽 かつ 真
console.log(false && true); // false
// 真 または 偽
console.log(true || false); // true
// 偽 または 偽
console.log(false || false); // false
// 否定NOT(!)
console.log(!false); // true
真偽値以外で論理演算子を使用した場合
JavaScriptではBoolean型以外の値も true や false のどちらかに判定されます。
Boolean以外の値では null 、 0 や NaN、空文字（'' 、 ""、``）、undefined は falsy（偽っぽい） な値とされており、false と判定されます。
また論理演算子を用いた場面での返り値は短絡評価（ショートサーキット評価）され、どちらかの 値が返却 されます。
console.log(null || 'Cat'); // 'Cat'
console.log('Dog' || 'Cat'); // 'Dog'
console.log(0 && 100); // 0
console.log(undefined && '100'); // undefined
console.log('0' && 0); // 数値の 0
console.log(!'Dog'); // false
Boolean型で返却させたい場合は以下のように記述することで実現できます。
console.log(!!'Dog'); // true
console.log(Boolean('Dog')); // true
console.log(!!(null || 'Cat')); // true
console.log(Boolean(null || 'Cat')); // true
比較演算について
以上、以下、未満、超、イコール、NOTイコール
値を比較する比較演算子(<, >, <=, >=, ==, !=, ===, !==)を使用できます。
数値の大小や文字列の比較などに使用でき、結果として真偽値（Boolean型）を返します。
例えば、
「100 と 50 + 50 が 同じかどうか」
「’おはよう’ と ‘こんにちは’ が 同じかどうか」
「33 は 100 – 60 より 低いかどうか」
というような条件を表現できます。
==と===の違いについて
文字列の '20' と 数値の 20 は 数値 20と考えれば等しい値ですが、厳密に等しいかといえば文字列と数値なので不一致となります。
上記の例をそれぞれで比較した場合、== を使用した場合は等しいと判定され、=== を使用すると 不一致と判定されます。
比較演算子の使い方
// < の使い方
console.log(50 < 100); // true
// <= の使い方
console.log(50 <= 100); // true
// > の使い方
console.log(50 > (50 + 20)); // false
// >= の使い方
console.log(50 >= (50 + 20)); // false
// == の使い方
console.log('100' == 100); // true
// != の使い方
console.log('20' != 20); // false
// === の使い方
console.log('犬' === '犬'); // true
// !== の使い方
console.log('20' !== 20); // true
// 複数を比較する場合
console.log('猫' === '犬' || '動物' === '動物' && 1 > 0); // true
// ()を使って使って複数を比較する場合
console.log('動物' === '動物' && (1 > 0 || '猫' === '犬')); // true
// 問題 次の結果は true または false のどちらになるでしょう？
console.log(20 === '20');
if文について
if文を使うことで、もし条件が 真（true） だとしたら「真のときの処理」、偽（false） だったら「偽のときの処理」のような分岐処理を行うことができます。if文の構文
if( 条件式 ) {
条件式が真だった場合の処理
} else {
条件式が偽だった場合の処理
}
また、一致しない場合に改めて条件を設定する else if を使用することができます。（条件は複数設定できます）
if( 条件式1 ) {
条件式1が真だった場合の処理
} else if ( 条件式2 ) {
条件式1が偽で条件式2が真だった場合の処理
} else {
いずれも偽だった場合の処理
}
else if や else は省略することができます。
if文の使い方
let age = 33;
let result;
if(age < 20) {
result = '未成年';
} else {
result = '成年'; // ここが実行されます
}
console.log(`${age}歳は${result}です`); //33歳は成年です
if文を省略した書き方（三項演算子）
三項演算子を用いることで 以下のように if 文を省略した書き方ができます。
条件式 ? 真の処理 : 偽の処理;
let age = 33;
let result = age < 20 ? '未成年' : '成年';
console.log(`${age}歳は${result}です`); // 33歳は成年です
if文のネスト（入れ子）
if文の{}中に更にif文を記述して分岐させることができます。
このことを ifのネスト（入れ子） と呼んだりしますが、過度にネストしてしまうと著しく可読性を損ねる可能性がありますので、ネストの最大の深さは 2 〜 3を目安にしましょう。
let name = 'Hanako';
let gender = 'female';
let age = 19;
let score = 78;
// 読みにくいコードの例
if(gender === 'male') {
if(age >= 20) {
if(score >= 80 ) {
if(name) {
console.log(`${name}さん`);
} else {
console.log('ななし');
}
} else if(score >= 60) {
// ...省略
} else {
// ...省略
}
} else {
// ...省略
}
} else if(gender === 'female') {
// ...省略
}
switch文について
switch文 は switchに渡される 式 を評価し、その式の値が case 節と一致した( === で比較し true になる)場合に、その case の処理を実行します。switch文の構文
switch ( 式 ) {
case 値１ :
式 が 値１ と同等なときの処理
break;
case 値２ :
式 が 値２ と同等なときの処理
break;
case 値３ :
式 が 値３ と同等なときの処理
break;
default:
どの case にも該当しないときの処理
}
breakの役割
case の処理に break; を記述することで処理を抜けます。
もし、この break; の記述がない場合は、処理を抜けずに次の case または default の処理を実行します。
switch文 の使い方
以下の例では、switch の式に animal （値は'猫'）を渡しています。
そのため case '猫': と等しくなり console.log('にゃんにゃん'); が実行され、break; で switch文を抜けます。
const animal = '猫';
switch(animal) {
case '犬':
console.log('わんわん');
break;
case '鳥':
console.log('ちゅんちゅん');
break;
case '猫':
console.log('にゃんにゃん'); // この処理が実行されます
break; // switch文を抜けます
default:
console.log('その他の鳴き声');
}
もし animal に 'ライオン' が代入されていた場合だとどうなるでしょう？
break を書かない場合の処理
以下の例では、case 2: の処理を実行しますが、 break; が無いため、それ以降の処理も実行されます。
const number = 2;
switch(number) {
case 0:
console.log(0);
break;
case 1:
console.log(1);
break;
case 2:
console.log(2); // この処理が実行されます
case 3:
console.log(3); // この処理が実行されます
default:
console.log(-1); // この処理が実行されます
}
if文 と switch文 の使い分け
if文 では 等価演算子 と 論理演算子 を使用することが出来るため、〜以上や、かつ、または、等の条件で分岐させる必要がある場合 は if文 を使用しましょう。
switch文 では 複数の case 節 を見やすく定義できるため、値の一致によって処理を分岐させる場合、かつ分岐処理が複数ある場合 は switch文 を使用しましょう。
if文を使用するしかない場合
// --------------------
// スコアが80以上なら「★★★★★」、60以上なら「★★★」、60未満なら「★」をコンソールに出力する
// --------------------
let score = 62;
let stars;
if(score >= 80) {
stars = '★★★★★';
} else if(score >= 60) {
stars = '★★★';
} else {
stars = '★';
}
console.log(stars);
if文よりswitch文を使用した方がいい場合
// --------------------
// 色の名前 によって その色に関連する物 を コンソールへ出力 する
// --------------------
const color = '赤';
let obj;
// if文で実行する場合
if ( color === '黄' ) {
obj = 'バナナ';
} else if ( color === '赤' ) {
obj = 'ポスト';
} else if ( color === '緑' ) {
obj = '葉っぱ';
} else if ( color === '青' ) {
obj = '海';
} else {
obj = 'なし';
}
console.log(obj);
// switch文で実行する場合
switch ( color ) {
case '黃':
obj = 'バナナ';
break;
case '赤':
obj = 'ポスト';
break;
case '緑':
obj = '葉っぱ';
break;
case '青':
obj = '海';
break;
default:
obj = 'なし';
}
console.log(obj);
課題
もし 変数 r が
50 以上なら「 [rの数値]は50以上です。」
50未満であれば「[rの数値]は50未満です。」
とコンソールへ出力されるプログラムを作成してください。
// 0以上100未満の数値をランダムでrに代入する
let r = Math.floor(Math.random() * Math.floor(100));
// ここからコーディング
もし 変数 personsAge が
0以上6未満であれば「[personsAgeの数値]歳: 未就学児」
6以上12以下であれば「[personsAgeの数値]歳: 小学生」
13以上15以下であれば「[personsAgeの数値]歳: 中学生」
16以上は「[personsAgeの数値]歳: 義務教育は終了しました」
とコンソールへ出力されるプログラムを作成してください。
// 0以上20未満の数値をランダムでxに代入する
let personsAge = Math.floor(Math.random() * Math.floor(20));
// ここからコーディング
weather が「晴れ」なら 「今日は天気がいいですね。」
「曇り」なら「 明日は雨が降るかもしれません。」
「雨」なら 「雨の音に癒やされますね。」
その他であれば 「天気に注意してください。」
をコンソールに表示するプログラムを作成してください。
// weather に '晴れ', '曇り', '雨', '台風' のいずれかをランダムで代入する
const weathers = ['晴れ', '曇り', '雨', '台風'];
const weather = weathers[Math.floor(Math.random() * Math.floor(4))];
// ここからコーディング
