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

当サイトでは一部リンクに広告が含まれています
アイキャッチ

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

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

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

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

・if文の基本的な書き方がわからない
・else ifを使った複数の条件分岐のやり方が理解できない
・論理演算子を使ったif文の応用が難しい

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

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

この記事を書いた人
筆者のプロフィールアイコン
  • 未経験からWebエンジニアとして転職成功(年収 30% アップ)
  • 現役のフルスタックエンジニアとして活躍中
  • 開発チームリーダーとして複数プロジェクトをリード
  • 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
目次

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 ifelseを組み合わせることで、より複雑な条件分岐を表現できます。

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

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

一方、elseは、それまでのifelse 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 > 10falseなので、次のelse if (num > 5)に移ります。numの値は3なのでこれもfalseです。よって最後のelse内の処理が実行され、"numは5以下"とコンソールに表示されます。

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

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

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

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

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

このコードでは、score80以上なら"合格"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は等しい");
}

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

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

else ifを使う際の注意点

else ifを使う際には、条件式の順番に気をつける必要があります。ifelse 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)を評価しています。つまり、num10以上20未満の場合にのみ、"numは10以上20未満"と出力されます。

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

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

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

  • &&(AND): 両方の条件がtrueの場合にtrue
  • ||(OR): どちらかの条件がtrueの場合にtrue
  • !(NOT): 条件の逆の値(trueならfalsefalseならtrue

AND演算子(&&)の使用例

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

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

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

OR演算子(||)の使用例

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

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

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

NOT演算子(!)の使用例

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

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

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

まとめ

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

  • if文は条件分岐を行うための文法で、条件式がtrueの時だけ処理が実行される
  • else ifを使うと、複数の条件を順に評価できる
  • elseは、それまでの条件が全てfalseだった場合の処理を書く
  • else ifを使う際は、条件式の順番に気をつける
  • if文はネスト(入れ子)にすることができる
  • 条件式の中では、AND(&&)、OR(||)、NOT(!)の論理演算子が使える

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

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

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

JavaScript を効率よく勉強するなら

この記事を読んでいる方は JavaScript の勉強を頑張っていることと思います!

しかし、JavaScript は学習範囲が広く、知識不足で苦労している方もいるかもしれませんね。

そんなときは本やプログラミングスクールを活用し、体系的な学習を検討してみてはいかがでしょうか?

目次