JavaScriptのif文の使い方をわかりやすく解説！if-else文の活用方法も

JavaScriptでプログラムを書くとき、「条件分岐」は避けては通れません。

条件分岐を使うことで、「もし条件Aならこの処理をする、条件Bならこの処理をする」というように状況に応じて実行する処理を変えることができるからです。

そして、その条件分岐のために欠かせないのが、if文です。
JavaScriptの学習初期の段階で必ずマスターすべき重要な文法の1つと言えるでしょう。

しかし、if文の使い方が難しいと感じている初心者の方も多いのではないでしょうか。

こういった悩みを抱えている方のために、この記事ではif文の基礎から応用までを徹底的に解説していきます。

コード例を交えながら、初心者にもわかりやすく説明していくので、ぜひ最後まで読んでif文をマスターしてください！

この記事を書いた人

• 現役のフルスタックエンジニアとして活躍中
• 開発チームリーダーとして複数プロジェクトをリード
• 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
• プログラミングスクールのカリキュラム執筆経験あり

JavaScriptのif文とは？条件分岐の基本を理解しよう

まずは、JavaScriptのif文の基本から見ていきましょう。if文は、指定した条件が成り立つかどうかでプログラムの処理を分岐させるための文法です。

if文の基本的な書き方は次のようになります。

if (条件式) {
  // 条件式がtrueの場合に実行する処理
}

ifの後の()内に条件式を書きます。その条件式の結果がtrue（真）である場合、{}内の処理が実行されます。一方、条件式がfalse（偽）の場合は、{}内の処理はスキップされます。

例えば、次のようなif文を考えてみましょう。

var num = 10;
if (num > 5) {
  console.log("numは5より大きい");
}

このif文の条件式はnum > 5です。numの値が10なので、この条件式はtrueになります。よって、{}内のconsole.log("numは5より大きい");が実行され、コンソールに"numは5より大きい"と表示されます。

else if と else を使って複数の条件を指定する

if文には、else ifとelseを組み合わせることで、より複雑な条件分岐を表現できます。

まず、else ifを使うと、最初のifの条件がfalseだった場合に、別の条件を指定できます。

if (条件式1) {
  // 条件式1がtrueの場合の処理
} else if (条件式2) {
  // 条件式1がfalseで条件式2がtrueの場合の処理
}

一方、elseは、それまでのifとelse ifの条件が全てfalseだった場合の処理を指定するために使います。

if (条件式1) {
  // 条件式1がtrueの場合の処理
} else if (条件式2) {
  // 条件式1がfalseで条件式2がtrueの場合の処理
} else {
  // 条件式1も条件式2もfalseの場合の処理
}

例えば、次のようなif文を考えてみましょう。

var num = 3;
if (num > 10) {
  console.log("numは10より大きい");
} else if (num > 5) {
  console.log("numは5より大きく10以下");
} else {
  console.log("numは5以下");
}

このif文では、まずnum > 10がfalseなので、次のelse if (num > 5)に移ります。numの値は3なのでこれもfalseです。よって最後のelse内の処理が実行され、"numは5以下"とコンソールに表示されます。

if文を使った条件分岐のコード例

if文の基本が理解できたところで、具体的なコード例を見ながらif文の使い方を学んでいきましょう。

点数に応じて合否を判定する

最初の例は、点数に応じて合否を判定するプログラムです。

var score = 85;
if (score >= 80) {
  console.log("合格");
} else {
  console.log("不合格");
}

このコードでは、scoreが80以上なら"合格"、80未満なら"不合格"とコンソールに表示します。scoreの値が85なので、出力結果は"合格"になります。

数値の大小関係を判定する

次の例は、数値の大小関係を判定するプログラムです。

var a = 5;
var b = 10;
if (a > b) {
  console.log("aはbより大きい");
} else if (a < b) {
  console.log("aはbより小さい");
} else {
  console.log("aとbは等しい");
}

このコードでは、aとbの大小関係を判定しています。aがbより大きければ"aはbより大きい"、aがbより小さければ"aはbより小さい"、aとbが等しければ"aとbは等しい"とコンソールに表示します。

この例では、aは5、bは10なので、"aはbより小さい"と出力されます。

else ifを使う際の注意点

else ifを使う際には、条件式の順番に気をつける必要があります。ifとelse ifは上から順に評価されていくので、条件式の順番を間違えると意図しない結果になってしまうことがあるからです。

例えば、次のようなコードを考えてみましょう。

var num = 15;
if (num >= 10) {
  console.log("numは10以上");
} else if (num >= 20) {
  console.log("numは20以上");
}

numの値は15なので、本来なら"numは10以上"と出力されるはずです。しかし、実際に出力されるのは"numは10以上"だけです。

なぜなら、最初のif (num >= 10)がtrueになるので、その後のelse ifは評価されないからです。num >= 20という条件もtrueになるはずなのに、そちらの処理は実行されません。

このようなミスを防ぐには、条件が広いものから順に書くようにしましょう。つまり、上のコードは次のように書き換えるべきです。

var num = 15;
if (num >= 20) {
  console.log("numは20以上");
} else if (num >= 10) {
  console.log("numは10以上20未満");
}

if文のネスト（入れ子）について

if文はネスト（入れ子）にすることで、より複雑な条件分岐を表現できます。ネストとは、if文の中にさらにif文を書くことを指します。

次の例を見てみましょう。

var num = 15;
if (num >= 10) {
  if (num < 20) {
    console.log("numは10以上20未満");
  }
}

このコードでは、最初のif (num >= 10)がtrueの場合に、その中でさらにif (num < 20)を評価しています。つまり、numが10以上20未満の場合にのみ、"numは10以上20未満"と出力されます。

ネストは何段でも可能ですが、あまり深くネストしすぎるとコードが読みづらくなるので注意が必要です。

論理演算子を使ったif文の条件式

条件式の中では、論理演算子を使ってより複雑な条件を表現することができます。JavaScriptの主な論理演算子は次の3つです。

AND演算子（&&）の使用例

AND演算子（&&）を使うと、複数の条件が全てtrueの時だけ処理を実行するようなif文が書けます。

var num = 15;
if (num >= 10 && num < 20) {
  console.log("numは10以上20未満");
}

このコードは、numが10以上かつ20未満の場合にのみ、"numは10以上20未満"と出力します。numの値が15なので、条件は満たされ、出力が行われます。

OR演算子（||）の使用例

OR演算子（||）を使うと、複数の条件のどれか1つでもtrueの場合に処理を実行するようなif文が書けます。

var num = 15;
if (num < 10 || num >= 20) {
  console.log("numは10未満か20以上");
}

このコードは、numが10未満または20以上の場合に、"numは10未満か20以上"と出力します。numの値は15なので、どちらの条件も満たさず、出力は行われません。

NOT演算子（!）の使用例

NOT演算子（!）は、条件の逆の値を返します。つまり、条件がtrueならfalseを、falseならtrueを返します。

var num = 15;
if (!(num >= 20)) {
  console.log("numは20未満");
}

この例では、num >= 20がfalseなので、!(num >= 20)はtrueになります。よって、"numは20未満"と出力されます。

まとめ

JavaScriptのif文について、基本的な使い方から応用的な事項まで幅広く解説してきました。ポイントをまとめると次のようになります。

if文は、JavaScriptでプログラムを書く上で非常に重要な文法の1つです。この記事を読んで、if文の使い方がしっかりと理解できたでしょうか。

初めはシンプルなif文から始めて、徐々にelse ifや論理演算子を使った応用的な条件分岐へとステップアップしていくのがおすすめです。実際にコードを書いて試行錯誤しながら学んでいくことが、if文をマスターする近道ですよ。

今回の内容を理解できれば、JavaScriptでの条件分岐はバッチリです。
他の文法も合わせて学習し、JavaScriptプログラミングのスキルを高めていきましょう！

コスパよく JavaScript を学習できる Udemy 講座人気ランキング

ちなみに姉妹サイトの Learning Next では、JavaScript を独学で学べる Udemy 講座の人気ランキングや、各講座の受講生レビューをもとにした分析スコアを公開しています。

「学習にあまりお金をかけたくない…」「スクールに通う時間がない」という方は、こちらを参考に Udemy 講座の学習も検討してはいかがでしょうか？

▶️ UdemyでJavaScriptを学べる講座の人気ランキング – Learning Next

ひとめで良い点・悪い点、さらにおすすめポイントが分かりますので、講座選びで失敗したくない方はぜひ活用してみてください！