【10選】複数条件の組み合わせ方法徹底解説！条件分岐のコツと注意点を学ぼう

はじめに
●JavaScriptのif文とは
- ○if文の基本
●JavaScriptで複数条件を使う方法
- ○複数条件の組み合わせ方法
●サンプルコードと解説
●注意点と対処法
- ○複数条件が複雑になるときの対処法
まとめ

はじめに

この記事を読めば、JavaScriptで複数条件を使うif文を習得できるようになります。

JavaScriptの基礎から応用まで、実用的なサンプルコードを交えて、分かりやすく解説します。

これで、あなたもJavaScriptで複数条件を使ったプログラミングに自信を持てるようになりますよ。

●JavaScriptのif文とは

if文は、JavaScriptにおいて条件分岐を行うための基本的な構文です。

条件式が真(true)である場合に、特定の処理を実行します。

条件式が偽(false)の場合、別の処理を実行することもできます。

○if文の基本

基本的なif文の構文は次のようになります。

if (条件式) {
  // 条件式が真の場合に実行される処理
} else {
  // 条件式が偽の場合に実行される処理
}

●JavaScriptで複数条件を使う方法

複数の条件を組み合わせてif文を使いたい場合、JavaScriptではAND(&&)、OR(||)、およびNOT(!)といった論理演算子を使用します。

○複数条件の組み合わせ方法

AND条件：両方の条件が真である場合に処理を実行する。
OR条件：どちらか一方の条件が真である場合に処理を実行する。
NOT条件：条件が偽である場合に処理を実行する。

●サンプルコードと解説

ここでは、複数条件を使ったif文の実用的な例を10個紹介します。

それぞれのコードには、詳細な説明とコメントがついています。

○サンプルコード1：AND条件を使ったif文

このコードでは、AND条件を使って年齢が18歳以上で、会員であるかどうかをチェックしています。

この例では、年齢が18歳以上かつ会員である場合に、特定の処理を実行しています。

const age = 20;
const isMember = true;

if (age >= 18 && isMember) {
  // 年齢が18歳以上かつ会員である場合に実行される処理
  console.log("特典を受けられます");
} else {
  console.log("特典を受けられません");
}

○サンプルコード2：OR条件を使ったif文

このコードでは、OR条件を使って、年齢が60歳以上または会員であるかどうかをチェックしています。

この例では、年齢が60歳以上または会員である場合に、特定の処理を実行しています。

const age = 65;
const isMember = false;

if (age >= 60 || isMember) {
  // 年齢が60歳以上または会員である場合に実行される処理
  console.log("割引が適用されます");
} else {
  console.log("割引が適用されません");
}

○サンプルコード3：NOT条件を使ったif文

このコードでは、NOT条件を使ってログインしていないかどうかをチェックしています。

この例では、ログインしていない場合に、特定の処理を実行しています。

const isLoggedIn = false;

if (!isLoggedIn) {
  // ログインしていない場合に実行される処理
  console.log("ログインが必要です");
} else {
  console.log("ログイン済みです");
}

○サンプルコード4：混合条件を使ったif文

このコードでは、AND条件とOR条件を組み合わせて、年齢が18歳以上かつ会員である場合、または年齢が60歳以上の場合に、特定の処理を実行しています。

const age = 65;
const isMember = true;

if ((age >= 18 && isMember) || age >= 60) {
  // 年齢が18歳以上かつ会員である場合、または年齢が60歳以上の場合に実行される処理
  console.log("特典を受けられます");
} else {
  console.log("特典を受けられません");
}

○サンプルコード5：三項演算子を使った条件分岐

このコードでは、三項演算子を使って、年齢が18歳以上かどうかを判定し、成人か未成年かを表示しています。

const age = 20;
const result = age >= 18 ? "成人" : "未成年";

console.log(result); // "成人"

○サンプルコード6：switch文を使った条件分岐

このコードでは、switch文を使って曜日に応じたメッセージを表示しています。

const day = "火曜日";

switch (day) {
  case "月曜日":
    console.log("今週も頑張ろう！");
    break;
  case "火曜日":
    console.log("火曜日だ、まだまだ頑張ろう！");
    break;
  case "水曜日":
    console.log("水曜日、折り返し地点！");
    break;
  case "木曜日":
    console.log("木曜日、もう少し頑張ろう！");
    break;
  case "金曜日":
    console.log("金曜日、もうすぐ週末！");
    break;
  default:
    console.log("土曜日か日曜日、リフレッシュしよう！");
}

○サンプルコード7：if文のネスト

このコードでは、if文をネストして、年齢と会員の状態に応じたメッセージを表示しています。

const age = 20;
const isMember = true;

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

○サンプルコード8：関数を使った条件分岐

このコードでは、関数を使って条件分岐を行い、数字が偶数か奇数かを判断してメッセージを表示しています。

function checkEvenOrOdd(number) {
  if (number % 2 === 0) {
    console.log("偶数です");
  } else {
    console.log("奇数です");
  }
}

checkEvenOrOdd(5); // "奇数です"

○サンプルコード9：条件演算子の連鎖

このコードでは、条件演算子を連鎖させて、成績に応じた評価を表示しています。

const score = 85;
const grade = score >= 90 ? "S" : score >= 80 ? "A" : score >= 70 ? "B" : score >= 60 ? "C" : "D";

console.log(grade); // "A"

○サンプルコード10：複数条件を使ったエラーチェック

このコードでは、ユーザーが入力した文字列に対して複数の条件をチェックし、条件に合致しない場合にエラーメッセージを表示しています。

function validateInput(input) {
  if (input.length < 5) {
    console.log("入力が短すぎます");
  } else if (input.length > 20) {
    console.log("入力が長すぎます");
  } else if (!input.match(/^[a-zA-Z0-9]+$/)) {
    console.log("入力に英数字以外の文字が含まれています");
  } else {
    console.log("入力は適切です");
  }
}

validateInput("abc"); // "入力が短すぎます"