JavaScriptのif文を使うには？用いる構文と条件式を解説

JavaScriptのif文を使うには

JavaScriptのif文は、条件を満たしている場合に実行される構文です。使い方は、「if (条件) 文;」の1行で表すことができます。ここで示す「条件」は論理的な条件式を表します。if文を使うには、if文自体の構文と、if文で判断される条件式を学ぶことでプログラミングに活用することができます。

【参考】：MDN Web Docs: 文と宣言 【参考】：MDN Web Docs: if...else

JavaScriptの入門！その概要や文法の基礎について解説！

JavaScriptの書き方とは？初心者向けに基本から解説

JavaScriptのif文の概要と使い方

JavaScriptは、プログラミング言語として言語固有の基本機能や構文が定められています。その構文に従って、処理する手続きを記述していきます。if文は、ある条件が満たされる場合に処理を実行し、示す条件に応じて処理を制御することができます。

文法は簡単で、以下のように使用します。

if (条件)
  文;
// または次のように1行で表します
if (条件) 文;

上の例では、条件が真（true）の場合に文を実行します。条件が条件が成立する真（true）の場合と条件が不成立の偽（false）の場合、それぞれに実行分を設定する場合は、else節を文に追加します。

if (条件)
  条件が成立する場合（true）の文;
else
  条件が不成立の場合（false）の文;

ここでは、if文の基本構文をさらに発展させて、複雑な処理を行うための構文を学びます。複雑な処理は、単一ステートメントでは記述できないために、複数の文を組み合わせる必要があります。その場合は、文全体を波括弧”{}”で囲んでブロック文とします。

if (条件) {
  条件が成立する場合（true）の文1;
  条件が成立する場合（true）の文2;
     ：
} else {
  条件が不成立の場合（false）の文1;
  条件が不成立の場合（false）の文2;
     ：
}

【参考】：MDN Web Docs: if...else 【参考】：MDN Web Docs: ブロック

if文で条件が不成立の場合、else節を使用してさらにif文を追加することができます。これによって、複数条件がある場合に処理を細かく分岐して実行することができます。例えば3種類の条件があり、それぞれで異なる処理をさせる場合は次のように記述します。

if (条件1)
  条件1が成立する場合（true）の文;
else
  if (条件2)
    条件2が成立する場合（true）の文;
  else
    if (条件3)
      条件3が成立する場合（true）の文;
    else
      すべての条件が不成立の場合（false）の文;

ここで示されるelse節は直前のif節と対になっているので、わかりやすくインデントを追加しておきます。メンテナンス性を考慮すると、次のように波括弧で囲っておくと良いでしょう。

if (条件1) {
  条件1が成立する場合（true）の文;
} else {
  if (条件2) {
    条件2が成立する場合（true）の文;
  } else {
    if (条件3) {
      条件3が成立する場合（true）の文;
    }  else {
      すべての条件が不成立の場合（false）の文;
    }
  }
}

【参考】：MDN Web Docs: if...else 【参考】：MDN Web Docs: ブロック

これまでにelse節の使い方を学びました。if節とelse節の組み合わせは、多少面倒な部分だと感じる人もいるでしょう。ここでは構文をシンプルに記述するために、elseとifの組み合わせ構文について学びます。

JavaScriptでは他のプログラミング言語のような「elseif」構文が定義されていないので「else if」のように「else」と「if」間にスペースを入れて使用します。

先に学んだelse節は、次のようにすっきりと表すことができます。

if (条件1) {
  条件1が成立する場合（true）の文;
} else if (条件2) {
    条件2が成立する場合（true）の文;
} else if (条件3) {
    条件3が成立する場合（true）の文;
} else {
    すべての条件が不成立の場合（false）の文;
}

比較演算子とは、条件式における論理的な真偽を返す演算子です。if文などの条件分岐に用いて真偽によって処理を分岐させる役割を持ちます。基本的な考え方は、前後の2つを比較した場合に等しいか、大小の差があり等しくないかなどの条件式で判別に使用します。

AとBが等しい場合は「A == B」で表します。同様にAがBより小さい場合は「A < B」、AがBよりも大きい場合は「A > B」で表します。AがBより小さいか等しい場合は「A <= B」、AがBより大きいか等しい場合は「A >= B」、AとBが等しくない場合は「A != B」で表します。

「A == B」ですが、データ型も一致しているか確認する場合は「厳密等価演算子」の”===”を用いて、「A === B」で条件式を記述します。同様に「A != B」についても、データ型も確認する場合は、「A !== B」と「厳密不等価演算子」を用いて記述します。

【参考】：MDN Web Docs: 式と演算子 【参考】：MDN Web Docs: コードでの意思決定 — 条件文 【参考】：MDN Web Docs: 厳密等価 (===) 【参考】：MDN Web Docs: 厳密不等価 (!==)

if文で記述する条件式は、論理演算子で複数の条件を評価することができます。

ANDを意味する「&&」はそれぞれの条件がすべて真（true）の場合に真（true）となります。ORを意味する「||」は記述する複数の条件の中でいずれかが真（true）の場合、最初の真（true）となった時点で、条件式全体を真（true）とします。論理演算の結果を反転させるには、NOTを表す「!」を追加します。

例えば、条件1と条件2のいずれかが成立すれば処理をするOR条件の場合は、次のように記述します。合わせて条件3と条件4のいずれも成立するAND条件の場合も記載しておきます。

if (条件1 || 条件2) {
  条件1あるいは条件2のいずれかが成立する場合（true）の文;
} else {
    if節の条件式が不成立の場合（false）の文;
} 

if (条件3 && 条件4) {
    条件3と条件4いずれも成立する場合（true）の文;
} 
} else {
     if節の条件式が不成立の場合（false）の文;
}

【参考】：MDN Web Docs: 式と演算子 【参考】：MDN Web Docs: コードでの意思決定 — 条件文

JavaScriptでif文を実際に使ってみる

ここでは、学んだ構文を使って実際にif文を使っていきます。if文の条件分岐を比較できるように、関数を定義して使用します。

この例では、引数が ”りんご” の場合は ”食べ過ぎに注意しましょう" を表示して、戻り値1を返します。比較演算子は、数字や文字列などデータ型を気にせずに使用できます。

function check(parm) {
    if (parm == "りんご") { // 文字列の比較もできます
        console.log(parm,"の食べ過ぎに注意しましょう")
        ret = 1;
    }
    else {
        console.log("引数は",parm,"です")
        ret = 0;
    }
    return ret;
}
i=check("りんご"); // "りんご の食べ過ぎに注意しましょう"が表示されます
j=check("バナナ"); // "引数は バナナ です"が表示されます
k=check(9999);     // "引数は 9999 です"が表示されます
console.log("結果は",i,j,k); //"結果は 1 0 0"が表示されます

“りんご” 、 ”バナナ” 、数字の9999を引数で与えると ”りんご” のみがif文の条件式で真（true）となっていることがわかります。

続いて「else if」節の構文を使って、比較演算子の条件を追加します。この例では、 ”バナナ” を条件に追加し、 ”体に良いよ” と表示し、戻り値2を返します。実行すると、3つの入力値でそれぞれ分岐処理がされていることがわかります。

function check(parm) {
    if (parm == "りんご") {      // 文字列の比較もできます
        console.log(parm,"の食べ過ぎに注意しましょう")
        ret = 1;
    }
    else if (parm == "バナナ") { // 文字列の比較もできます
        console.log(parm,"は体に良いよ")
        ret = 2;
    }
    else {
        console.log("引数は",parm,"です")
        ret = 0;
    }
    return ret;
}
i=check("りんご"); // "りんご の食べ過ぎに注意しましょう"が表示されます
j=check("バナナ"); // "バナナ は体に良いよ"が表示されます
k=check(9999);     // "引数は 9999 です"が表示されます
console.log("結果は",i,j,k); //"結果は 1 2 0"が表示されます

最後に、JavaScriptの論理演算子で複数条件を設定してみます。次の例では、関数の引数が ”りんご” もしくは ”バナナ” の場合、 ”食べ過ぎに注意しましょう" を表示して、戻り値1を返すように論理演算子で複数条件を設定します。

実行すると、引数が ”りんご” もしくは ”バナナ” の場合、条件式が真（true）となったことがわかります。

function check(parm) {
    if (parm == "りんご" || parm == "バナナ") { // 文字列の比較もできます
        console.log(parm,"の食べ過ぎに注意しましょう")
        ret = 1;
    }
    else {
        console.log("引数は",parm,"です")
        ret = 0;
    }
    return ret;
}
i=check("りんご"); // "りんご の食べ過ぎに注意しましょう"が表示されます
j=check("バナナ"); // “バナナ の食べ過ぎに注意しましょう"が表示されます
k=check(9999);     // "引数は 9999 です"が表示されます
console.log("結果は",i,j,k); //"結果は 1 1 0"が表示されます

JavaScriptのif文は1度作成すれば理解できる

JavaScriptのif文は、考え方がシンプルです。条件式を、比較演算子と論理演算子で組み立てるだけで、使用することができます。1度簡単なコードを作成し、制御フローをチェックすると良いでしょう。チェック済みのif文のJavaScriptコードは使いまわしができますので、理解も深まりおすすめです。

JavaScriptの数値計算とは？演算子やライブラリの例を紹介

JavaScript入門者・中級者におすすめの技術本8選！