【JavaScript】if文で条件分岐の書き方の基本とコツを３分で解説

JavaScriptにおけるif文は、特定の条件が真(true)の場合にコードブロックを実行するために使用します。if文を利用することで、"もし○○○なら●●●をする" というように、特定の条件を満たす場合に狙った処理を行うことができるようになります。

ポイント　if文の基本構造

if (条件) {
  // 条件が真(true)の場合に実行されるコード
}

条件: 括弧()内に記述されます。この条件が真(true)と評価された場合にのみ、中括弧{}内のコードが実行されます。
実行コード: 条件が真の場合に実行されるコードブロック。中括弧{}で囲まれます。

このページで学べる内容

if文の意味と使い方
else / else if の使い方
if文を利用したサンプルコード

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

参考　【JavaScript入門】基本文法/基礎文法を5分で

JavaScript：if文の基本
1. if文：構文ルール
2. if文：サンプルコード
else if文
1. else ifの書き方：構文ルール
2. else if：サンプルコード
if文を利用する際の注意点

JavaScript：if文の基本

if文とは、その名の通り特定の場合にのみ処理を行いたい場合に用いる構文です。

例えば、「入力された値が ●●● であれば」や「ユーザが △△△ をクリックしたら」など、何らかの特定の条件に応じて処理を分岐させたい場合などに利用します。

if文：構文ルール

if (条件) {
  // 条件が真(true)の場合に実行されるコード
}

if文では最後の「;」セミコロンは不要。可読性向上のため実際の処理を記述する行はインデントするようにしましょう。条件が偽(false)である場合に実行されるコードブロックを指定したい場合は以下のようにelseを用います

if (条件) {
  // 条件が真(true)の場合に実行されるコード
} else {
  // 条件が偽(false)の場合に実行されるコード
}

条件: if文内の括弧()に記述されます。この条件が真(true)と評価された場合、if文の中括弧{}内のコードが実行されます。
真の場合の実行コード: ifの中括弧{}内に記述され、条件が真の場合に実行されます。
偽の場合の実行コード: elseの後の中括弧{}内に記述され、条件が偽の場合に実行されます。

真偽値⇒true/false

true
条件を満たす場合を "true" と呼びます。trueは日本語で「真」の意です。

false
条件を満たさない場合を "false" と呼びます。falseは日本語で「偽」の意です。

let number = 12;
document.write(number > 10);  //"true" が表示されます。
document.write(number > 20);  //"false" が表示されます。

参考　データ型の基本：Boolean型

早速、サンプルコードを見ていきましょう。if文は、実際のコードを見て覚えるのが一番楽です。

if文：サンプルコード

See the Pen if文① by ビズドットオンライン (@BizOnline) on CodePen.

入力した値が奇数なのか偶数なのかを返してくれるコードです。これは、if文の条件式に「入力した値が偶数である場合」を指定しており、値が偶数であれば「〇〇は偶数です」と返すように、偶数でない場合は「〇〇は奇数です」と返すように記述しています。

サンプルコードの詳しい説明

以下のコードでは、関数を定義しています。変数の値が、「偶数の場合/偶数ではない場合」の条件を定義し、それぞれに応じた処理を記述しています。

function judgement() {
    let num = document.getElementById("sample").value;

    if (num % 2 == 0) {
        document.write(`${num}は偶数です`);
    } else {
        document.write(`${num}は奇数です`);
    }
}

参考　JavaScript：function

HTMLのformタグを利用して、入力フォームを作成しています。ここに入力した値を、先ほど定義した関数で拾い偶数判定を行うようにしています。

<form name="sample">
    数値を入力して「OKボタン」をクリックすると・・・<br>
    <input type="text" id="sample" size="8">
    <input type="button" value="OK" onClick="judgement()">
</form>

参考　HTML：formタグの使い方

else if文

これまでは、条件が２つ（true/falseの場合）だけでしたが、実際のプログラムでは条件が３つ以上になる場合も多く存在します。

例えば、先ほどのサンプルコードではユーザに「数値を入力してください！」としか指示をしていませんが、全角の数字（もしくは漢数字）など、半角数字を入力した場合はどうなるでしょうか？

「こんにちは」と入力してみてください。

See the Pen if文① by ビズドットオンライン (@BizOnline) on CodePen.

おそらく「あいうえおは奇数です」と表示されてしまったのではないでしょうか？

これは、「偶数の場合ではない」処理が行われているためです。「①偶数の場合 / ②それ以外」ではなく、「①偶数の場合 / ②奇数の場合 / ③それ以外」の３つの条件に分けて記述すべきです。そんな時に役立つのが「else if」です。

else ifの書き方：構文ルール

if (条件1) {
  // 条件1が真(true)の場合に実行されるコード
} else if (条件2) {
  // 条件1が偽(false)で、条件2が真(true)の場合に実行されるコード
} else {
  // どの条件も真ではない場合に実行されるコード
}

else ifを利用することで、条件を複数指定することができるようになります。

条件1: 最初のif文内の条件。この条件が真(true)と評価されると、対応するコードブロックが実行され、それ以降のelse ifやelse節は無視される。
条件2: else ifに指定された条件。最初の条件が偽(false)で、この条件が真(true)の場合に実行されるコードブロックを指定。
その他の条件: 必要に応じて、複数のelse if節を連鎖させることができます。それぞれのelse if節で異なる条件を評価し、それに応じたアクションを定義します。
else節: すべての条件が偽(false)の場合に実行されるコードブロックです。これはオプショナルであり、省略も可能ですが、どの条件にも当てはまらない場合のデフォルトのアクションを提供します。

if文では、上から順に条件を比較していき、"true" になった時点で指定した分岐に分かれていきます。つまり、条件2の比較を行う前に条件1で"true"となれば、条件1の処理のみが実行されることに注意が必要です。

else if：サンプルコード

else ifを用いたサンプルコードです。

以下では、偶数でも奇数でもない場合（半角数字が入力されなかった場合）の処理として「半角数字を入力してください」と表示するようにしています。

See the Pen if文② by ビズドットオンライン (@BizOnline) on CodePen.

if文を利用する際の注意点

if文を使用する際には、いくつかの重要な注意点を理解しておくことが重要です。これらの注意点を把握することで、より効果的かつ正確に条件分岐をコーディングできます。

1. 条件の厳密な比較

JavaScriptでは、==（等価演算子）と===（厳密等価演算子）の違いに注意する必要があります。==は型変換を行ってから比較を行いますが、===は型変換を行わずに比較を行います。可能な限り===を使用して、意図しない型変換によるエラーを避けるべきです。

if (0 == '0') { // trueを返すが、型変換が行われる
}
if (0 === '0') { // falseを返す、型も含めて厳密に比較
}

参考　等価演算子と厳密等価演算子

2. 複合条件の評価

複数の条件を組み合わせる際は、論理演算子（&&（AND）、||（OR）、!（NOT））を使用する必要があります。複合条件を正しく構築することで複雑なロジックを実装できますが、条件が多くなるほどコードの可読性が下がることがあります。

括弧を使用して、評価の順序を明確にすると良いでしょう。

if (条件1 && (条件2 || 条件3)) {
  // 複合条件の例
}

3. ブロックの省略

単一のステートメントのみを実行する場合、中括弧{}を省略することができますが、これはエラーを引き起こしやすいため、推奨されません。明確なコードブロックの使用により、コードの可読性とメンテナンス性が向上します。

if (条件) ステートメント; // 可能だが推奨されない

4. switch文の検討

複数の条件による分岐が多い場合は、if-else if-elseの代わりにswitch文の使用を検討することも有効です。if-else文に比べて、特定の値に対する多くの条件分岐を扱う場合に読みやすく、効率的なコードを書くことができます。特に、同一の式に対して多数の可能性を検討する必要がある場合に適しています。

switch (式) {
  case 値1:
    // 式が値1と等しい場合に実行されるステートメント
    break;
  case 値2:
    // 式が値2と等しい場合に実行されるステートメント
    break;
  ...
  default:
    // どのcaseにも該当しない場合に実行されるステートメント
}

参考　JavaScript：switch文

まとめ　JavaScriptにおけるif文（条件分岐）の使い方

基本的なif文の構造
- 特定の条件が真(true)の場合にのみ、コードブロックを実行する。
else節の追加
- 条件が偽(false)の場合に実行されるコードブロックを指定。
else ifで複数の条件をチェック
- 複数の異なる条件を順に評価し、それぞれに対応するコードブロックを実行。
論理演算子の使用
- 複数の条件を組み合わせる場合に、&& (AND), || (OR) を使用します。
条件式の比較
- == (等価演算子) と === (厳密等価演算子) の違いに注意します。厳密等価演算子の使用を推奨します。

// 基本的なif文
let score = 85;
if (score > 80) {
  console.log("素晴らしい！");
}

// else節の使用
if (score > 90) {
  console.log("非常に優秀です！");
} else {
  console.log("良い努力です！");
}

// else ifで複数の条件をチェック
if (score > 90) {
  console.log("非常に優秀です！");
} else if (score > 80) {
  console.log("素晴らしい！");
} else {
  console.log("良い努力です！");
}

// 論理演算子の使用
let age = 20;
let hasPermission = true;
if (age >= 18 && hasPermission) {
  console.log("運転を開始できます");
}