【JavaScript入門】JavaScriptの条件分岐を学ぼう – if else文, else if文 –

本章では、JavaScriptの条件分岐、if else文、else if文について学びます。

本題に入る前に、if else文、else if文を理解するためにこちらを確認しておきましょう。

サンプルコードをダウンロードしよう

次のリンクから、サンプルコードをダウンロードしてください。

参考 サンプルコードJavaScript入門

サンプルコードをテキストエディタで開いてみよう

「Visual Studio Code」から、先ほどダウンロードしたファイルから「005 条件分岐」を選択して開いてみましょう。

開くと次のような画面になります。

サンプルコードをChromeで開いてみよう

サンプルコードの「スタート」の「index.html」をChromeで開いてみましょう。

if else文

前章では、条件分岐とJavaScriptのif文について学びました。

【JavaScript入門】JavaScriptの条件分岐を学ぼう – if文 –

次は、if else文 について学びましょう。

「if else文（イフ エルス文）」とは、条件が満たされたときと条件が満たされなかったときの二つの処理を書くことができる 文になります。

例えば、「10以上」という条件を満たした場合はコンソールに「10以上です」というメッセージを出力する、満たさなかった場合は「10より少ないです」と出力するケースを考えてみましょう。

条件	処理
10以上だったら	コンソールに「10以上です」を出す
10以上じゃなかったら	コンソールに「10より少ないです」を出す

if else文の書き方

if else文の書き方を見てみましょう。

if else文は次のフォーマットで書くことができます。

if (条件の式) {
  条件を満たした場合の処理を書く
} else {
  条件を満たさなかった場合の処理を書く
}

「else」という宣言が追加されて、さらに波括弧のブロックが一つ増えましたね。

では、先ほどのケースをif else文を使って考えてみましょう。

「10以上だったら」という条件に対して、条件を満たしたらifのブロックの中の処理を実行します。

条件を満たさなかったらelseのブロックの中の処理を実行します。

if (10以上だったら) {
  コンソールに「10以上です」を出す
} else {
  コンソールに「10より少ないです」を出す
}

もう一度、図を見て確認しましょう。

では、これをコードにして書いてみましょう。

const number = 100

if (number >= 10) {
  console.log("10以上です")
} else {
  console.log("10より少ないです")
}

「number >= 10」は、比較演算子 を使っています。

「左辺が右辺以上」という式で、条件を満たしたら真偽値の「true」を返します。

この場合は、「number」という変数の値が「100」なので条件を満たしています。

では、次のように変数の値を変えるとどうでしょうか。

const number = 1

if (number >= 10) {
  console.log("10以上です")
} else {
  console.log("10より少ないです")
}

「number」という変数の値が「1」なので条件を満たしていません。

ですので、elseのブロック内の処理が実行されてコンソールに「10より少ないです」が表示されます。

if else文を書いてみよう

実際にif else文を書いてみましょう。

サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「if else文を書いてみよう」と記述がされています。

その真下に、次のように書いてください。

// if else文を書いてみよう

const number = 1

if (number >= 10) {
  console.log("10以上です")
} else {
  console.log("10より少ないです")
}

const time = "朝"

if (time === "昼") {
  console.log("こんにちは")
} else {
  console.log("おはよう")
}

const age = 18

if (age >= 20) {
  console.log("成人です！")
} else {
  console.log("未成年です！")
}

Chromeのコンソールで確認すると、次のように出力されているのが分かります。

複数の条件で分岐させる else if文

if else文の他にも、「else if文」というものがあります。

「else if文」は、複数の条件分岐を書くことができる 文になります。

例えば、次のように「朝」、「昼」、「晩」でそれぞれ異なる処理をさせたい場合に使うことができます。

条件	処理
朝だったら	おはようと出す
昼だったら	こんにちわと出す
夜だったら	こんばんわと出す

else if文の書き方

else if文の書き方を見てみましょう。

else if文は次のフォーマットで書くことができます。

if (条件の式) {
  条件を満たした場合の処理を書く
} else if (条件の式) {
  条件を満たした場合の処理を書く
} else if (条件の式) {
  条件を満たした場合の処理を書く
}

「else if」という宣言が追加されて、さらに波括弧のブロックが増えましたね。

それぞれのブロックの中の処理は、それぞれの条件が満たされた場合のみ実行されます。

では、先ほどのケースをelse if文を使って考えてみましょう。

「朝」、「昼」、「晩」のそれぞれの条件満たしたら、それぞれの処理を実行しています。

if (朝だったら) {
  コンソールに「おはようと出す」を出す
} else if (昼だったら) {
  コンソールに「こんにちわと出す」を出す
} else if (夜だったら) {
  コンソールに「こんばんわと出す」を出す
}

もう一度、図を見て確認しましょう。

では、これをコードにして書いてみましょう。

const time = "昼"

if (time === "朝") {
  console.log("おはよう")
} else if (time === "昼") {
  console.log("こんにちわ")
} else if (time === "夜") {
  console.log("こんばんわ")
}

コンソールには何が表示されるでしょうか。

答えは、「こんにちわ」ですね。

比較演算子を使って、「time」という変数の値が右辺の文字と等しいか確認しています。

「time」には、「昼」という値が入っているのでこの場合は、console.log("こんにちわ")が実行されます。

else if文を書いてみよう

実際にelse if文を書いてみましょう。

サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「else if文を書いてみよう」と記述がされています。

その真下に、次のように書いてください。

// else if文を書いてみよう
const time2 = "夜"

if (time2 === "朝") {
  console.log("おはよう")
} else if (time2 === "昼") {
  console.log("こんにちわ")
} else if (time2 === "夜") {
  console.log("こんばんわ")
}

const myFavoriteFood = "ラーメン"

if (myFavoriteFood === "寿司") {
  console.log("私の好きな食べ物は寿司です")
} else if (myFavoriteFood === "ラーメン") {
  console.log("私の好きな食べ物はラーメンです")
} else if (myFavoriteFood === "焼肉") {
  console.log("私の好きな食べ物は焼肉です")
}

constdrink = "ビール"

if (drink === "オレンジジュース") {
  console.log("ソフトドリンクです")
} else if (drink === "ビール") {
  console.log("アルコールです")
}

Chromeのコンソールで確認すると、次のように出力されているのが分かります。

複雑な条件分岐

プログラムを書く際にはより複雑な条件を書く場面があります。

例えば、「まず年齢を聞いて、成人だったらアルコール飲料を聞いて、ビールだったら好きなビールを聞く」のケースを考えてみましょう。

色々な条件があって、少し複雑ですね。

では、このケースはどのようにしてコードに書けばいいのでしょうか。

条件分岐の中にはさらに条件分岐を書くことができます。

実際に書いてみましょう。

複雑な条件分岐を書いてみよう

では、実際に上記のケースを書いてみましょう。

サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「複雑な条件分岐を書いてみよう」と記述がされています。

その真下に、次のように書いてください。

// 複雑な条件分岐を書いてみよう
const myAge = window.prompt("年齢は？")

if (parseInt(myAge) >= 20) {
  const drink = window.prompt("お好きなお酒は？")

  if (drink === "ビール") {
    const beer = window.prompt("お好きなビールは？")

    console.log(beer + "をお持ちします！")

  } else {
    console.log("ビール以外をお持ちします!")
  }

} else {
  console.log("ソフトドリンクはいかがですか？")
}

見慣れない記述がありますが、今は気にせずif文のところだけに注目してください。

最初のif文で、年齢が20才以上かを確認しています。

if (parseInt(myAge) >= 20) {
  constdrink = window.prompt("お好きなお酒は？")
}}

20才以上であれば、好きなお酒を聞いています。

好きなお酒がビールであれば、好きなビールを聞いています。

if (drink === "ビール") {
  constbeer = window.prompt("お好きなビールは？")

  console.log(beer + "をお持ちします！")
}

それ以外の場合は、elseを使って処理を実行していますね。

では、これを実際に動かしてみましょう。

Chromeのコンソール画面を開きながら、リロードして、質問に答えてください。

コンソールに「サッポロビールをお持ちします」と表示されました。

まとめ

本章では、JavaScriptの条件分岐、if else文、else if文について学びました。

最後にもう一度、重要なことを確認しましょう。

次章は、JavaScriptの繰り返し文について解説します。