2025.12.28

【JavaScript】条件分岐とは?（if・else if・switch）

takahide

おはようございます。タカヒデです。

本日は、「JavaScriptにおける、条件分岐（if・else if・switch）」を解説します。

こんな人にオススメ

JavaScriptにおける『条件分岐』がよくわからない
『if文』『else if文』『switch文』の記載方法と記載例を知りたい

ぜひ本記事を参考にしてください。

Contents

条件分岐とは
条件分岐（if文）
複数の条件式で分岐（else if文）
式の値によって処理を分岐（switch文）
まとめ

条件分岐とは

条件分岐とは、与えられた条件が、「真」であるか「偽」であるかによって、対応する命令を実行することです。

「もし●●であれば○○を実行、●●でなければ△△を実行」という表現をするための命令を指します。

これらは『if文』『else if文』『switch文』を使用して命令します。

具体例を見ていきます。
「もし宿題が終わっていればゲームをする、宿題が終わっていなければノートを開く」
このように条件によって実行する命令が異なるのが条件分岐です。

続けて、条件分岐の具体的な記載方法を見ていきましょう。

条件分岐（if文）

シンプルな条件分岐の記載方法です。

与えられた条件式に対して、「真（true）」であるか「偽（false）」であるかによって対応する命令を実行します。

if(条件式){
 条件式が「真」の場合に実行する命令
}else{
 条件式が「偽」の場合に実行する命令
}

if(条件式){
 条件式が「真」の場合に実行する命令
}else{
 条件式が「偽」の場合に実行する命令
}

以下は記載例です。

let x = 3;

if (x >= 5) {
  console.log("xは5以上");
} else {
  console.log("xは5未満");
}

//実行結果：xは5未満

let x = 3;

if (x >= 5) {
  console.log("xは5以上");
} else {
  console.log("xは5未満");
}

//実行結果：xは5未満

上記例においてxの値を10に変更すると実行結果は『xは5以上』となります。

複数の条件式で分岐（else if文）

続いて、複数の条件式で分岐を行う場合には『else if文』を使用します。

具体的には、「もし●●であれば○○を実行、▲▲であれば△△を実行、いずれの条件にも当てはまらないのであれば□□を実行」という表現をするための命令を指します。

if(条件式1){
 条件式1が「真」の場合に実行する命令
}else if(条件式2){
 条件式2が「真」の場合に実行する命令
}else{
 すべての条件式が「偽」の場合に実行する命令
}

if(条件式1){
 条件式1が「真」の場合に実行する命令
}else if(条件式2){
 条件式2が「真」の場合に実行する命令
}else{
 すべての条件式が「偽」の場合に実行する命令
}

以下は記載例です。

let x = 8;

if (x >= 10) {
  console.log("xは10以上");
} else if (x >= 5) {
  console.log("xは5以上");
} else {
  console.log("xは5未満");
}

//実行結果：xは5以上

let x = 8;

if (x >= 10) {
  console.log("xは10以上");
} else if (x >= 5) {
  console.log("xは5以上");
} else {
  console.log("xは5未満");
}

//実行結果：xは5以上

ちなみに、条件式1・条件式2どちらにも合致する場合、条件式1の命令が実行され条件式2は判定もされません。

記載する場合は注意しましょう。

式の値によって処理を分岐（switch文）

式と値が一致した場合に命令を実行する場合には『switch文』を使用します。

具体的には、「対象の値がいずれかの値と一致した場合に処理を実行」という表現をするための命令を指します。

switch(式){
 case 値1:
   「式===値1」の場合に実行する命令
   break;
 case 値2:
   「式===値2」の場合に実行する命令
   break;
 default:
   すべての値に一致しない場合に実行する命令
   break;
}

switch(式){
 case 値1:
   「式===値1」の場合に実行する命令
   break;
 case 値2:
   「式===値2」の場合に実行する命令
   break;
 default:
   すべての値に一致しない場合に実行する命令
   break;
}

以下は記載例です。

let text = "C";

switch (text) {
  case "A":
    console.log("Aです");
    break;
  case "B":
    console.log("Bです");
    break;
  case "C":
    console.log("Cです");
    break;
  default:
    console.log("該当無し");
    break;
}

//実行結果：Cです

let text = "C";

switch (text) {
  case "A":
    console.log("Aです");
    break;
  case "B":
    console.log("Bです");
    break;
  case "C":
    console.log("Cです");
    break;
  default:
    console.log("該当無し");
    break;
}

//実行結果：Cです