【8日目】制御構文 if

01.09.2019 — javascript, tutorials — 1 min read

今日は制御構文についてやります。

前回はこちら +JavaScript道場：七日目 / 関数について❷

用語集

if / 条件分岐
条件は真偽値trueまたはfalseとして判定される
==と===の違い
比較演算子

制御構文で最低限覚えて置くことはifとforの書き方です。今日は if をやります。

比較演算子

文字や数字、オブジェクトが一致するかを比較しtrueまたはfalseの真偽値を返します。

詳しくはこちら！

MDN 比較演算子

`==` (一致)

可能な限り === を使いましょう

1// consoleで試そう
2　　
3// 一致するか比較する
4100 == 100 // true
5100 == '100' // true
6"文字" == "文字" // true
7　　
8// ()で括ってもOK
9(100 == 100) // true
10(100 == '100') // true
11("文字" == "文字") // true
12　　　　　　　
13var a = "hello"
14var b = "hello"
15var c = "helloo" // oが多い
16　　　
17a == b // true
18a == c // false

`===` (データ型まで一致、厳密な比較)

1// consoleで試そう
2　
3// 一致するか比較する
4100 === 100 // true
5100 === '100' // false 文字と数値ではデータ型が異なる

オブジェクトの比較

オブジェクトは中身のデータが一緒でも、参照するオブジェクトが一緒じゃない場合 false になります。ここは重要なので覚えておいてください。

1var a = {}
2var b = {}
3　
4a == b // false
5　
6var c = a
7a == c // true

1// 試してみよう
2var a = {}
3var b = a // a と b は同じ
4　　
5a.name = "JavaScript道場"
6console.log(a)
7console.log(b)
8console.log(a === b)

`<`・`>`・`<=`・`=>` (大小比較)

1// consoleで試そう
2　　
3var a = 100
4a > 100  // aは100より大きい false
5a <= 100 // aは100以下 true
6a >= 99  // aは９９以上 true
7a < 99   // aは９９より小さい false

`if`

条件に応じて実行する処理を変えたい場合に使います。

詳しくはこちら！

MDN if...else

1if (条件式) { 条件を満たす時に実行する処理 }
2　　
3// サンプルプログラム  　
4// a の値を変化させて実行結果を確認しよう
5var a = 100
6if (a > 100) {
7    console.log("aは100より大きい")
8}

一行で書くこともできます

1// {} が省略できます
2if (a > 100) console.log("aは100より大きい")

`if` ~ `else`

1var a = 100
2if (a > 100) {
3    console.log("aは100より大きい")
4} else {
5    console.log("aは100以下")
6}

`if` ~ `else if` ~ `else`

1var a = 100
2if (a > 100) {
3    console.log("aは100より大きい") // 実行されない
4} else if (a < 50) {
5    console.log("aは50以下") // 実行されない
6} else {
7    console.log("aは50~100の間") // 実行される
8}

条件は複数指定できる

`&&` と `||`

1var a = true
2var b = true
3var c = false
4　　
5if (a && b) {
6    // a も b も true
7}
8　　
9if (a || b) {
10    // a または b どちらかが true
11}

複数条件指定するときは、`( )`を使ってわかりやすく書く

1if (a || b && c) {
2    // a が true または b,c どちらかも true
3}
4　　
5if ((a || b) && c) {
6    // c が true
7    // a または b どちらかが true
8    console.log("hello")
9}

真偽値以外のもの(数値や文字)が if で使われた場合の挙動

正確な情報はこちら！

Truthy

数値の場合

JavaScriptの場合、数値が0以外は全てtrue、0のみfalseです

1var a = 100;
2if(a) {
3    console.log("aはtrue?")
4} else {
5    console.log("aはfalse?")
6}

文字の場合

"" 空文字の場合false、それ以外は true

1var a = "hello";
2if(a) {
3    console.log("aはtrue.")
4} else {
5    console.log("aはfalse.")
6}
7// aはtrue.

1var a = "";
2if(a) {
3    console.log("aはtrue.")
4} else {
5    console.log("aはfalse.")
6}
7// aはfalse.

ルールが明確に決まっています.

JavaScript (ECMA-262) false（偽）になるものは下記のみ。

1false
2undefined
3null
4+0,-0,NaN
5"" （空文字）

良い設計のためのヒント

真偽値判定が複雑になる場合は真偽値を返す関数を作る

材料からカレーが作れるかを判定する

1var materials1 = [
2    { name: "じゃがいも", quantity: 2 },
3    { name: "人参", quantity: 3 },
4    { name: "牛肉", quantity: 100 },
5    { name: "ブロッコリー", quantity: 1 },
6    { name: "カレーのルウ", quantity: 1 },
7];
8　
9var materials2 = [
10    { name: "じゃがいも", quantity: 2 },
11    { name: "人参", quantity: 1 },
12    { name: "牛肉", quantity: 100 },
13    { name: "ブロッコリー", quantity: 1 },
14    { name: "カレーのルウ", quantity: 1 },
15];
16　
17// 必要な材料が必要な個数あるかを判定する
18function canCookCurry (materials) {
19    const REQ_POTATO = 2
20    const REQ_CARROT = 3
21    const REQ_BEEF = 100
22    const REQ_ROUX = 1
23    if(materials.filter((_) => _.name == "じゃがいも"  && _.quantity >= REQ_POTATO) == 0){
24    return false;
25    }
26    if(materials.filter((_) => _.name == "人参"  && _.quantity >= REQ_CARROT) == 0){
27    return false;
28    }
29    if(materials.filter((_) => _.name == "牛肉"  && _.quantity >= 100) == 0){
30    return false;
31    }
32    if(materials.filter((_) => _.name == "カレーのルウ"  && _.quantity >= REQ_ROUX) == 0){
33    return false;
34    }
35    return true;
36}
37console.log(canCookCurry(materials1)); // true
38console.log(canCookCurry(materials2)); // false

明日は for をやります

次回はこちら JavaScript道場：9日目 / 配列と制御構文 for