【JavaScript】javascriptのif文の使い方を徹底解説

JavaScript

if文とは、ある条件の時にはAの処理を行い、別の条件の時にはBの処理を行うなど、条件によって処理を分けたい時に使う構文です。

条件分岐

if文の使用例
1
2
3
4
5
6
7
8
9
const n = 10;

if ((n % 2) == 0 ) {
    // nを2で割った際のあまりが0の時このブロックを実行する。
    console.log('偶数'); // => 偶数
} else {
    //  ↑のifのブロックが偽の時 ("nを2で割った際のあまりが0じゃない時")にこのブロックが実行される
    console.log('奇数');
}

if文の使い方

この章では、条件分岐やif文の使い方について解説します。

条件分岐とは
リンクをコピーしました

条件分岐とは、その時の状態に応じて処理を使い分ける時に活用する構文です。
例えば、先ほどのソースコードをフローチャート図にしてみましょう。

条件分岐

数値を定義した後、その数値がどのようなものなのかというのを、ifにて判断をしています。
判断をする際の図は「ひし形」のブロックを利用して記述します。
それがTRUEの時はそのまま処理を実行し、そうでない場合はNOの矢印の先に進み「奇数」を出力するようになっています。

ifの使い方
リンクをコピーしました

条件分岐を利用した構文の中で最も使われる構文である「if文」について説明をします。

まずは「if文」の使い方を見てみましょう。
基本的な構文は次のようなものになります。

if文の基本構文
1
2
3
4
if (条件式) {
  // ifでは括弧の中の"条件式"を評価してそれが"true"であればそのブロックの中の処理が実行されます。
  console.log('ここが実行されます')
}

ifの後に続く (条件式)には次のようなものを指します。
またこの条件式には先ほどのように変数を渡すことでその変数を評価し真偽値を得ることもできます。

条件式に変数を使った場合
1
2
3
4
5
6
7
8
9
10
11
12
const num1 = 10;
const num2 = 20;

// ↓の条件式は全てtruthyになるため続くBlock内が実行される
if (num1 === 10) {} // num1には先ほど10を代入しているためtrue
if ('text' === 'text') {} 
if (true) {} 

// ------------------------------------------------
// ↓以下のような条件の場合は条件式がfalsyなためBlockは実行されません。
if (num1 === num2) {} // 10 === 20という評価になりこれはfalse
if (false) {}

if文にはより複雑な条件の時に利用する、「else if」節があります。

else if節の使用例
1
2
3
4
5
if (条件式) {
  /* ifがtrueならここが実行される */
} else if (条件式) {
  // ifがfalseの時にこちらの条件式がTrueであれば実行される。
} 

「if」および、「else if」いづれにも一致しない場合はelse節を利用することで全ての条件に一致しない時の処理を記述することができます。

else節を使用した場合
1
2
3
4
5
if (条件式) {

} else {
  // 条件式に一致しなかった時に実施される
}

実際にif文を書いてみましょう。

sample.js | if文の使用例1
1
2
3
4
5
6
7
8
const number = 10; // 3
console.log(`before "if statement", number is ${number}`);

if (number > 5) {
  console.log("numberは5より大きいです");
} else {
  console.log("numberは5より小さいです");
}

上記のコードを実行している様子を実際にみてみましょう。

if文の使用例2
1
2
3
4
5
6
7
8
const age = 21 // お酒は20歳を超えてから。
const age = 10 

if (age >= 20) {
    console.log('乾杯! :beer:')
} else {
    console.log('お酒は20歳になってから!。コーラを飲みましょう。')
}

こちらの例も実行してみましょう。

どうでしょうか。実際にif文を書いてみると挙動がわかりやすいと思います。
記事最後の演習問題も解いてみましょう!

論理演算子の使い方

javascriptにおいて式の中では論理演算子と呼ばれるものが3つあります。

  • &&(論理積)
  • ||(論理和)
  • !(否定)

&& (論理積)
リンクをコピーしました

論理積、つまり AND演算子&&アンパサンド2つで表記されます。
論理積ではAND演算子前後の値が双方truthyの時に式全体の結果としてtrueを返します。

javascript
1
2
3
4
5
6
7
8
9
10
11
12
    true && true // true
    true && false // false
    false && true // false
    false && false // false

    // もうすこし具体的な例にしてみましょう。
    const fruit = { name: 'banana', price: 150 }

    if (fruit.name == 'banana' && fruit.price == 150) { /* true */ }
    if (fruit.name == 'banana' && fruit.price == 100) { /* false */ }
    if (fruit.name == 'apple' && fruit.price == 150) { /* false */ }
    if (fruit.name == 'apple' && fruit.price == 100) { /* false */ }

このように、
双方の条件が正しい時、(name == 'banana')かつ、(price == 150)の時はif節の処理が実行され、片方の条件が'false'の場合全体としての条件はfalseになり、if節の処理が実行されません。

||(論理和)
リンクをコピーしました

論理和、これは || パイプ2つで表記されます。
これは演算子の前後のいずれかがtrueであればtrueを、そうでない場合にfalseを返却します。

javascript
1
2
3
4
5
6
7
8
9
10
11
    true || true // true
    true || false // true
    false || true // true
    false || false // false

    // こちらも同様に別例にしてみましょう。
    const fruit = {name: 'banana', price: 150 }
    if (fruit.name == 'banana' || fruit.price == 150) { /* true */ }
    if (fruit.name == 'banana' || fruit.price == 100) { /* true */ }
    if (fruit.name == 'apple' || fruit.price == 150) { /* true */ }
    if (fruit.name == 'apple' || fruit.price == 100) { /* false */ }

論理積と違い、論理和では、双方の条件がfalseの場合のみ、全体としてfalseを返却します。
4つの例のうち、上部3つの例は条件のどちらかにtrueが存在しているため、全体としてtrueを返却しています。

!(否定)
リンクをコピーしました

否定演算子は感嘆符(エクスクラメーション) '!'で表記されます。

javascript
1
2
3
4
5
6
7
      !true // false
      !flase // true

      !(true && true) // false
      !(false && true) // true
      !(true || false) // false
      !(false || false) // true

このように括弧と組み合わせることでより複雑な条件に対応することができます

演算子の優先順位
リンクをコピーしました

論理積「&&」は 論理和「||」より先に実行されます。
これを回避するために括弧を使って優先順位を操作することができます。

javascript
1
2
3
4
condition1 && (condition2 || condition3)
// これを括弧を無くしてみると
// !(!condition1 || !condition2 && !condition3)
// このようになります。

括弧を使うことで視覚的にも読みやすくなります。
あまり直感的でない論理演算子による表記を見かけた場合括弧を用いて書き直した方がわかりやすいかもしれません。

問題と解説

codpenを編集し、実際に問題をといてみましょう。
コードを編集した後は右下の'rerun'を実行することで再度実行することができます。
出力結果を見る際はChromeDeveloperToolを開いてConsoleタブを見ましょう。

See the Pen ecmascript_if_q1 by miyajima yuya (@pikawaka) on CodePen.


以下は一例です。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const applePrice = 0;
const applePrice1 = 50;
const applePrice2 = 100;
const applePrice3 = 200;
const applePrice4 = 500;

checkApplePrice(applePrice);
checkApplePrice(applePrice1);
checkApplePrice(applePrice2);
checkApplePrice(applePrice3);
checkApplePrice(applePrice4);

function checkApplePrice(price) {
  if (price === 100) {
    console.log(`${price}: applePrice is 100`);
  } else if (price === 200) {
    console.log(`${price}: applePrice is 200`);
  } else if (0 < price && price < 100) {
    console.log(`${price}: 0 < applePrice < 100`);
  } else if (100 < price && price < 200) {
    console.log(`${price}: 100 < applePrice < 200`);
  } else {
    console.log(`${price}: elseにきた`);
  }
}
まとめ

if文は条件によって処理を使い分けたい時に使用する構文だよと覚えておきましょう!