【JavaScript】条件分岐をわかりやすく解説!【if文, if else文】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

今回は条件分岐について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

条件分岐を理解できる
if文が書けるようになる
if~else文が書けるようになる

プログラミングのメインは条件分岐だよ!

条件分岐とは
if文
if〜else文
if ~ else if ~ else文
オマケ：問題
まとめ
オマケ：答え

条件分岐とは

条件分岐とは、もし〇〇ならXXせよ。
というように、条件に応じて処理を分岐させることです。

たとえばですが、テストの点が
・70点以上だったら、進級する
・70点未満だったら、補修を受ける

信号が、
・青なら進む
・黄色なら注意
・赤なら止まる

このような条件と、現在の状況を比較して
条件を満たす(true)か満たさない(false)かで処理を分けることです。

条件分岐とは、もし〇〇ならXXせよ。ということだよ!

if文

条件分岐の基本はif文です。

ifという英単語の意味は「もしも」です

つまり“もし〇〇なら”の部分を表します。

構文

if (条件式) {
    // 条件式がtrueだった場合の処理
}

このように記述します。

例えばですが、テストの結果(score)が

70点以上だったら”合格です”

と出力する条件分岐を作ってみましょう。

if (score >= 70) {
    console.log("合格です");
}

こんな感じに記述することが出来ます!

※比較演算子について復習したい方はこちら

【JavaScript】真偽値と比較演算子【Boolean】

この記事を読むと・・・真偽値の判定方法がわかる！比較演算子の使い方がわかる！等価演算子と厳密等価演算子の違いがわかる！

条件分岐の構文は、if(条件式){// trueの場合の処理} だよ！
falseの場合は何もしないよ！

if〜else文

if~else文とは、「もし〇〇ならXXせよ、〇〇でなければ△△せよ」という文で
条件式がfalseの場合の処理も指定されている条件分岐です。

構文

if (条件式) {
    // 条件式がtrueだった場合の処理
} else {
    // 条件式がfalseだった場合の処理
}

このように記述します。

先ほどのテストの例で、
テストの結果(score)が70点以上だったら「合格です」
テストの結果(score)が70点未満だったら「不合格です」
と出力する条件分岐を作ってみましょう。

if (score >= 70) {
    console.log("合格です");
} else {
    console.log("不合格です");
}

※elseのあとに条件式は不要です

こんな感じに記述することが出来ます!

条件式がfalseの場合にも何らかの処理を指定したい場合は、if〜else文を使おう！

if ~ else if ~ else文

if ~ else if ~ else文とは、「もし〇〇ならXXせよ、□□なら☆☆せよ、何れにも該当しなければ△△せよ」
という文で、指定された条件とその処理が複数ある場合の書き方です。

構文

if (条件式1) {
    // 条件式1がtrueだった場合の処理
} else if (条件式2){
    // 条件式2がtrueだった場合の処理
}
} else {
    // 条件式1,2 両方falseだった場合の処理
}

同じくテストの例で、
テストの結果(score)が100点だったら「満点です」
テストの結果(score)が70点以上だったら「合格です」
テストの結果(score)が70点未満だったら「不合格です」
と出力する条件分岐を作ってみましょう。

if (score == 100) {
    console.log("満点です");
} else if (score >= 70) {
    console.log("合格です");
} else {
    console.log("不合格です");
}

このように記述することが出来ます!

条件式が複数ある場合は、if 〜 else if ~ else文を使おう！

オマケ：問題

hourという定数を宣言し、0〜23の値入れてください
hourの値に応じて以下のように、出力を変えてください。

①hourが0の場合は「今はhour時だよ！日付が変わったよ！」
②20以上の場合は「今はhour時だよ！こんばんは！」
③7以上の場合は「今はhour時だよ！こんにちは！」
③それ以外場合は「今はhour時だよ！まだ寝てるよ！」

【JavaScript】ログを出してみよう！【console.log】

この記事を読むとこのような事ができるようになります！・ログが出せるようになる・実際のWebサイトでログが見れるようになる・環境構築不要でJavaScriptが学べるようになる

※オンラインで実行したい方はこちらを参考に

まとめ

条件分岐とは「もし〇〇ならXXせよ」というように処理を分岐させること
if文は、条件式がtrueの場合のみに特定の処理を実行
if ~ else文は、条件式がtrueの場合にもfalseの場合にも何かしらの処理を実行
if ~ else if ~ else文は、条件式が複数ある場合の書き方

条件分岐を理解できてえらい！
プログラミングの8割は条件分岐で出来ているので、何度も復習しようね！

オマケ：答え

解答例①

// 現在時刻の宣言
const hour = 0;

if (hour == 0) {
  // 0時の場合の処理
  console.log("今は" + hour + "時だよ！日付が変わったよ！");
} else if (hour >= 20) {
  // 20時以上だった場合の処理
  console.log("今は" + hour + "時だよ！こんばんは！");
} else if (hour >= 7) {
  // 7時以上だった場合の処理
  console.log("今は" + hour + "時だよ！こんにちは！");
} else {
  // 何れにも該当しなかった場合(1〜6時)の場合の処理
  console.log("今は" + hour + "時だよ！まだ寝てるよ！");
}

解答例②
※AND条件が書ける方向け

// 現在時刻の宣言
const hour = 0;

if (hour == 0) {
  // 0時の場合の処理
  console.log("今は" + hour + "時だよ！日付が変わったよ！");
} else if (20 <= hour && hour <= 23) {
  // 20時~23時だった場合の処理
  console.log("今は" + hour + "時だよ！こんばんは！");
} else if (7 <= hour && hour <= 19) {
  // 7時〜19時以上だった場合の処理
  console.log("今は" + hour + "時だよ！こんにちは！");
} else {
  // 何れにも該当しなかった場合(1〜6時)の場合の処理
  console.log("今は" + hour + "時だよ！まだ寝てるよ！");
}

今回は①のパターンで書けていればOKです！
②のパターンについては、近々解説します。

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

Twitter
instagram

サメハック。