【JavaScript】 JavaScriptのif文の使い方とは？論理演算子も解説！

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

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文」の使い方を見てみましょう。
基本的な構文は次のようなものになります。

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には先ほど１０を代入しているためtrue
if ('text' === 'text') {} 
if (true) {} 

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

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

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

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

1
2
3
4
5
if (条件式) {

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

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

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より小さいです");
}

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

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

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

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

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

論理演算子の使い方

リンクをコピーしました

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

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

&& (論理積)

リンクをコピーしました

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

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節の処理が実行されません。

||(論理和)

リンクをコピーしました

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

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を返却します。
４つの例のうち、上部3つの例は条件のどちらかにtrueが存在しているため、全体としてtrueを返却しています。

!(否定)

リンクをコピーしました

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

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

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

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

演算子の優先順位

リンクをコピーしました

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

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にきた`);
  }
}

役に立ったらSHARE♪

• twitter
• facebook
• はてブ