すぐに理解できる！JavaScript条件分岐完全マスター8選

はじめに

この記事を読めば、JavaScriptの条件分岐を完全に理解し、使いこなすことができるようになります。

初心者でも分かりやすいように、基本から応用まで徹底解説していきます。

●JavaScriptとは

JavaScriptは、ウェブページに動的な要素を追加するために使われるプログラミング言語です。

例えば、ボタンがクリックされたときに何かアクションを起こすといったことができます。

この記事では、JavaScriptの基本的な機能である条件分岐について解説していきます。

●条件分岐とは

条件分岐とは、ある条件に応じて処理を分岐させることです。

JavaScriptでは、if文とswitch文の2つの方法があります。

○if文

if文は、条件式が真(true)の場合に処理を実行します。

条件式が偽(false)の場合は、その処理はスキップされます。

○switch文

switch文は、ある値に応じて処理を分岐させることができます。

条件が多くなる場合は、if文よりもswitch文を使った方がコードがスッキリすることが多いです。

●if文の使い方

if文は条件式が真(true)の場合に処理を実行し、偽(false)の場合には処理をスキップします。

if文の基本的な使い方や応用例をサンプルコードと共に解説します。

○サンプルコード1：基本的なif文

このサンプルコードでは、変数ageが18歳以上の場合に「成人です」と表示します。

let age = 20; // 年齢を20歳に設定

if (age >= 18) {
  console.log("成人です");
}

○サンプルコード2：if-else文

このサンプルコードでは、変数ageが18歳以上なら「成人です」、そうでなければ「未成年です」と表示します。

let age = 16; // 年齢を16歳に設定

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

○サンプルコード3：if-else if-else文

このサンプルコードでは、変数scoreの値に応じて、評価が表示されます。

let score = 82; // 点数を82点に設定

if (score >= 90) {
  console.log("優秀です");
} else if (score >= 70) {
  console.log("良いです");
} else if (score >= 50) {
  console.log("普通です");
} else {
  console.log("頑張りましょう");
}

●switch文の使い方

switch文は、ある値に応じて処理を分岐させることができます。

switch文の基本的な使い方や応用例をサンプルコードと共に解説します。

○サンプルコード4：基本的なswitch文

このサンプルコードでは、変数colorの値に応じて、メッセージが表示されます。

let color = "red"; // 色をredに設定

switch (color) {
  case "red":
    console.log("赤色です");
    break;
  case "blue":
    console.log("青色です");
    break;
  case "green":
    console.log("緑色です");
    break;
  default:
    console.log("その他の色です");
}

○サンプルコード5：switch文でbreakを省略

このサンプルコードでは、変数colorの値に応じて、メッセージが表示されますが、breakを省略することで、複数のcaseに一度に対応します。

let color = "yellow"; // 色をyellowに設定

switch (color) {
  case "red":
  case "blue":
  case "green":
    console.log("主要な色です");
    break;
  case "yellow":
  case "purple":
  case "orange":
    console.log("アクセントカラーです");
    break;
  default:
    console.log("その他の色です");
}

○サンプルコード6：switch文でdefault節を使用

このサンプルコードでは、変数colorの値に応じて、メッセージが表示されます。

default節は、どのcaseにも該当しない場合に実行される処理です。

let color = "brown"; // 色をbrownに設定

switch (color) {
  case "red":
    console.log("赤色です");
    break;
  case "blue":
    console.log("青色です");
    break;
  case "green":
    console.log("緑色です");
    break;
  default:
    console.log("その他の色です");
}

●条件分岐の応用例

ここでは、条件分岐を使った実用的なサンプルコードを紹介します。

○サンプルコード7：ユーザー入力に応じた挨拶

このサンプルコードでは、ユーザーが入力した時間に応じて、適切な挨拶が表示されます。

let hour = parseInt(prompt("今何時ですか？"), 10); // ユーザーが入力した時間を取得

if (hour >= 5 && hour < 12) {
  console.log("おはようございます");
} else if (hour >= 12 && hour < 18) {
  console.log("こんにちは");
} else {
  console.log("こんばんは");
}

○サンプルコード8：条件に応じた割引率の計算

このサンプルコードでは、ユーザーが入力した金額に応じて、割引率が計算されます。

let price = parseInt(prompt("購入金額を入力してください"), 10); // ユーザーが入力した金額を取得
let discount;

if (price >= 10000) {
  discount = 0.2;
} else if (price >= 5000) {
  discount = 0.1;
} else {
  discount = 0;
}

let discountedPrice = price * (1 - discount);
console.log(`割引後の金額は${discountedPrice}円です`);