JavaScript入門 if文を使った条件分岐の方法

スポンサーリンク

JavaScript

前回の記事(JavaScript入門 数値の四則演算と剰余の計算方法)では、JavaScriptにおける四則演算と剰余の計算方法について確認してみました。
これで、簡単な計算ならできるようになりましたね。

今回は、JavaScriptのif文を使った条件分岐について見てみます。
条件分岐は、条件に応じた複雑な処理を行う時に必須となってきますよ。
ぜひこの機会にしっかり理解しておきましょう。

スポンサーリンク

条件分岐とは?

条件分岐というのは、「もし〜なら」という条件に応じて処理を分岐させることを言います。
「もし〜なら」が成立した時に処理1、「そうでなければ」が成立した時に処理2、を行うということができます。
前者では「if」、後者では「else」が使われます。

if文の書き方

まずは、基本となるif文から見ていきましょう。
if文のフォーマットは以下のようになります。
条件式が成立した時に、中カッコ内の処理を行います。

if(条件式) {
  // 処理
}

条件式では、比較演算子と呼ばれるものを使って条件を記述します。
主な比較演算子には以下のようなものがあります。

  • == : 等しい
  • != : 等しくない
  • < : 左は右より小さい
  • > : 左は右より大きい
  • <= : 左は右以下
  • >= : 左は右以上

if文の例

それでは、if文の例をいくつか見てみます。
例えば、以下のコードではどうなるでしょうか?

var a = 7;
var b = 7;
if(a == b) {
  document.write("aとbは等しい");
}

この例の場合、aとbは同じ7の値になっています。
if文が実行されると、「a == b」が評価されますが、これは成り立ちます(true)。
そのため、その後の中カッコ内の処理が行われますので、「aとbは等しい」と表示されます。

では、もう一つの例。
以下のコードではどうなるでしょうか?

var a = 7;
var b = 7;
if(a != b) {
  document.write("a != b");
}

この例の場合、aとbは同じ値の7です。
if文が実行された時には「a != b」が評価されますが、これは成り立ちません(false)。
そのため、その後の中カッコ内の処理は行われませんので、何も表示されないということになります。

何となく、if文による条件分岐のイメージが掴めたでしょうか?

if〜else文の書き方

さきほどの場合、if文で「もし〜なら」の部分の処理を定義することができました。
では、「そうでなければ」の部分はどうしたら良いのでしょうか?
実は、この部分の処理の定義は「else」を使うとできます。

if〜else文のフォーマットは以下のようになります。
if文の処理を書いた後に、else文の処理を追加するイメージです。
この場合、条件式が成り立つ時(true)の時に処理1が、成り立たない(false)時には処理2が実行されます。

if(条件式) {
  // 処理1
} else {
  // 処理2
}

if〜else文の例

それでは、if〜else文の例を見てみます。
以下のコードを実行するとどうなるでしょうか?

var n = 8;
if(n >= 10) {
  document.write("nは10以上!")
} else {
  document.write("nは10より小さい!")
}

まず、nには8が代入されていますね。
if文が実行されると、「n >= 10」が評価されますが、これは成り立ちません(false)。
そのため、else側の処理が実行されますので、「nは10より小さい!」が表示されます。

if〜else if〜else文の書き方

条件分岐をやっていると、「もし〜ならば」「そうでなくて〜ならば」「そうでないなら」のパターンがあることが分かりますね。
このうち、「そうでなくて〜ならば」は「else if」で表現することができます。
実際にコードを見たほうが早いので、早速確認しましょう。

if(条件式1) {
  // 処理1
} else if(条件式2) {
  // 処理2
} else {
  // 処理3
}

条件式1が成り立つと条件式1、条件式2が成り立つと処理2、それ以外の時は処理3が実行されます。

if〜else if〜else文の例

それでは、例を見ていきましょう。
以下のコードを実行させるとどうなるでしょうか?

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

aには5、bには7が代入されています。
最初の条件式では、「a > b」が評価されますが、これは成り立ちません(false)。
そこで、次の条件式「a < b」が評価されますが、これは成り立ちます(true)。
その結果、「aはbより小さい」が表示されます。

条件分岐を重ねる

条件分岐の中で、さらに条件分岐をさせることができます。
その方法というのは簡単で、条件分岐中の処理の中で、また条件分岐させれば良いです。

if(条件式1) {
  if(条件式2) {
    // 処理1
  } else {
    // 処理2
  }
} else {
  if(条件式3) {
    // 処理3
  } else {
    // 処理4
  }
}

この例では、条件式1と条件式2が成り立てば処理1が実行されます。
条件式1がtrue、条件式2がfalseの時には処理2が実行されます。
条件式1がfalse、条件式3がtrueの時には処理3が実行されます。
条件式1がfalse、条件式3がfalseの時には処理4が実行されます。

練習問題

それでは、以上を踏まえて練習問題を解いてみましょう。

以下のコードを実行した時、何が出力されますか?

var a = 10;
var b = 5;
if(a < b) {
  if(a == 10) {
    document.write("A");
  } else {
    document.write("B");
  }
} else if(a > b) {
  if(a == 10) {
    document.write("C");
  } else {
    document.write("D");
  }
} else {
  document.write("E");
}

練習問題の解答

この練習問題は、条件分岐を重ねたものですね。
処理の流れをよく確認しましょう。

最初の条件式はfalseになりますね。
そこで、else if文の条件式の評価になりますが、これはtrueになります。
その後の処理のif文はtrueになりますので、結果として「C」が出力されます。

まとめ

今回の記事では、JavaScriptにおける条件分岐の方法について確認してみました。
今までよりは若干難しいかもしれませんが…。
非常に重要な項目ですので、この機会によく覚えておきましょう。

次回も条件分岐ですが、今後はswitch文を使ったバージョンを見ていきます。
ぜひ楽しみにしていてくださいね。

前回 ≫ JavaScript入門 数値の四則演算と剰余の計算方法
次回 ≫ JavaScript入門 switch文を使った条件分岐の方法

コメント