読み込み中...

JavaScriptにおけるif文で条件式を複数設定する方法9選

JavaScriptのif文で複数条件を設定する JS
2024.05.08
この記事は約22分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●JavaScriptのif文とは

JavaScriptを学んでいると、必ず出会うのがif文です。

if文は条件分岐を行うための重要な制御構文で、プログラムの流れを制御するために欠かせません。

if文を使うことで、ある条件が成立したときに特定の処理を実行し、条件が成立しなかった場合は別の処理を実行するといったことが可能になります。

例えば、ユーザーがフォームに入力した値が正しいかどうかをチェックしたり、ゲームのスコアに応じて異なるメッセージを表示したりといった場面で、if文は大活躍します。

○if文の基本構文

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

if (条件式) {
  // 条件式が真(true)のときに実行される処理
} else {
  // 条件式が偽(false)のときに実行される処理
}

ifのあとに丸括弧()で囲んだ条件式を記述し、その条件式が真(true)であるときに実行したい処理を波括弧{}で囲みます。

条件式が偽(false)の場合に実行したい処理は、elseブロックに記述します。

ただし、elseブロックは省略可能で、条件式が真のときだけ特定の処理を実行したい場合は、elseブロックを記述しなくてもOKです。

○if文の条件式

if文の条件式には、比較演算子や論理演算子を使って、様々な条件を記述することができます。

例えば、次のような比較演算子を使って条件式を記述できます。

  • == -> 等しい
  • != -> 等しくない
  • > -> 大きい
  • >= -> 以上
  • < -> 小さい
  • <= -> 以下
  • === -> 厳密に等しい
  • !== -> 厳密に等しくない

また、論理演算子を使って複数の条件式を組み合わせることもできます。

  • && -> かつ（AND）
  • || -> または（OR）
  • ! -> 否定（NOT）

○サンプルコード1：シンプルなif文

それでは、シンプルなif文の例を見てみましょう。

const score = 80;

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

上記のコードでは、score変数に格納された値が60以上であれば、”合格です！”と出力され、60未満であれば”不合格です。”と出力されます。

実行結果

合格です！

この例では、scoreが80なので、条件式score >= 60が真となり、ifブロックの処理が実行されます。

このようにif文を使うことで、条件に応じて処理を分岐させることができるのです。

if文の使い方をマスターすれば、より柔軟で動的なプログラムを書くことができるでしょう。

ただし、if文の記述方法によってはコードの可読性が下がってしまうこともあるので、適切に使い分けることが大切ですね。

次は、論理演算子を使った複数条件の設定方法について見ていきましょう。

●論理演算子を使った複数条件の設定

さて、if文の基本が理解できたところで、次は複数の条件を組み合わせる方法について見ていきましょう。

JavaScriptでは、論理演算子を使うことで、複数の条件式を組み合わせることができます。

代表的な論理演算子には、論理積を表す&&と論理和を表す||があります。

この演算子を使いこなすことで、より複雑な条件分岐を表現できるようになるのです。

○論理積 (&&) を使う方法

論理積を表す&&演算子は、左右の条件式がともに真(true)のときに、全体の条件式が真になります。

つまり、「AかつB」という条件を表現できるわけですね。

例えば、「変数xが10以上かつ20以下である」という条件は、次のように記述できます。

if (x >= 10 && x <= 20) {
  console.log("xは10以上かつ20以下です");
}

○サンプルコード2：&&を使った複数条件

const age = 25;
const gender = "男性";

if (age >= 20 && gender === "男性") {
  console.log("20歳以上の男性です");
} else {
  console.log("20歳未満または女性です");
}

このコードでは、変数ageが20以上かつ変数genderが”男性”である場合に、”20歳以上の男性です”と出力されます。

それ以外の場合は、”20歳未満または女性です”と出力されます。

実行結果

20歳以上の男性です

ageが25、genderが”男性”なので、両方の条件が満たされ、ifブロックの処理が実行されることになります。

○論理和 (||) を使う方法

一方、論理和を表す||演算子は、左右の条件式のいずれかが真(true)のときに、全体の条件式が真になります。

「AまたはB」という条件を表現できます。

例えば、「変数xが10未満または20より大きい」という条件は、次のように記述できます。

if (x < 10 || x > 20) {
  console.log("xは10未満または20より大きいです");
}

○サンプルコード3：||を使った複数条件

const score = 85;

if (score < 60 || score > 100) {
  console.log("不合格です");
} else {
  console.log("合格です！");
}

このコードでは、変数scoreの値が60未満または100より大きい場合に、”不合格です”と出力されます。それ以外の場合は、”合格です！”と出力されます。

実行結果

合格です！

scoreが85なので、60未満でも100より大きくもないため、elseブロックの処理が実行されます。

○サンプルコード4：&&と||を組み合わせる

さらに、&&と||を組み合わせることで、より複雑な条件を表現することもできます。

const age = 30;
const gender = "女性";
const isStudent = true;

if ((age >= 18 && age <= 25) || (gender === "女性" && isStudent)) {
  console.log("割引対象です！");
} else {
  console.log("割引対象ではありません。");
}

このコードでは、次のような複雑な条件を表現しています。

  • 年齢が18歳以上25歳以下である
  • または、女性かつ学生である

変数ageが30、genderが”女性”、isStudentがtrueなので、2つ目の条件が満たされます。

したがって、”割引対象です！”と出力されます。

実行結果

割引対象です！

このように、論理演算子を使いこなすことで、様々な条件を柔軟に表現できるようになります。

コードの可読性を保ちつつ、適切に条件分岐を行うことが大切ですね。

●else ifを使った複数条件の設定

JavaScriptのif文では、条件が成立しない場合の処理をelseブロックに記述できることを先ほど学びました。

しかし、場合によっては、2つ以上の条件を順番にチェックしたいこともあるでしょう。

そんなときは、else ifを使って複数の条件を設定することができます。

else ifを使えば、最初の条件が成立しなかった場合に、次の条件をチェックすることができるのです。

○else ifの使い方

else ifを使った複数条件の設定は、次のような構文になります。

if (条件式1) {
  // 条件式1が真のときの処理
} else if (条件式2) {
  // 条件式1が偽で、条件式2が真のときの処理
} else if (条件式3) {
  // 条件式1と条件式2が偽で、条件式3が真のときの処理
} else {
  // すべての条件式が偽のときの処理
}

このように、else ifを使うことで、複数の条件を順番にチェックし、最初に成立した条件に対応する処理を実行することができます。

もちろん、else ifは必要な数だけ追加することができます。

ただし、条件式は上から順番に評価されるので、条件式の順序には注意が必要ですね。

○サンプルコード5：else ifを使った複数条件

それでは、else ifを使った具体的なサンプルコードを見てみましょう。

const score = 75;

if (score >= 90) {
  console.log("秀");
} else if (score >= 80) {
  console.log("優");
} else if (score >= 70) {
  console.log("良");
} else if (score >= 60) {
  console.log("可");
} else {
  console.log("不可");
}

このコードでは、変数scoreの値に応じて、次のような条件分岐を行っています。

  • 90点以上なら”秀”
  • 80点以上90点未満なら”優”
  • 70点以上80点未満なら”良”
  • 60点以上70点未満なら”可”
  • 60点未満なら”不可”

変数scoreの値が75なので、3番目の条件式が成立し、”良”と出力されます。

実行結果

良

このように、else ifを使えば、複数の条件を順番にチェックし、適切な処理を実行することができます。

ただし、あまりにも多くのelse ifを使うと、コードの可読性が下がってしまうことがあります。

条件分岐が複雑になりすぎる場合は、switch文を使うことを検討してみてもいいかもしれません。

switch文については、次のセクションで詳しく見ていきましょう。

きっと、条件分岐のテクニックが身につくはずです。

●switch文を使った条件分岐

JavaScriptのif文は、条件分岐を行うための強力な武器ですが、条件が多岐にわたる場合、if文だけでは少し記述が冗長になってしまうことがあります。

そんなときは、switch文を使うと、よりスッキリとした条件分岐を実現できるのです。

switch文は、ある式の値に応じて、複数の処理を切り替えるための制御構文です。

○switch文の基本構文

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

switch (式) {
  case 値1:
    // 式が値1と等しいときの処理
    break;
  case 値2:
    // 式が値2と等しいときの処理
    break;
  ...
  default:
    // 式がどの値とも等しくないときの処理
}

switchのあとに丸括弧()で囲んだ式を記述し、その式の値に応じて処理を切り替えます。

caseに続けて値を指定し、その値と式の値が等しい場合に実行する処理を記述します。

各caseの処理の最後には、break文を記述するのが一般的です。

break文を記述しないと、次のcaseの処理も実行されてしまうので注意が必要ですね。

defaultは、式の値がどのcaseの値とも一致しなかった場合に実行される処理を記述するために使用します。

defaultは省略可能です。

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

それでは、switch文を使った具体的なサンプルコードを見てみましょう。

const fruit = "バナナ";

switch (fruit) {
  case "リンゴ":
    console.log("リンゴは赤いフルーツです。");
    break;
  case "バナナ":
    console.log("バナナは黄色い果物です。");
    break;
  case "オレンジ":
    console.log("オレンジはビタミンCが豊富です。");
    break;
  default:
    console.log("それは果物ではありません。");
}

このコードでは、変数fruitの値に応じて、次のような条件分岐を行っています。

  • “リンゴ”なら”リンゴは赤いフルーツです。”と出力
  • “バナナ”なら”バナナは黄色い果物です。”と出力
  • “オレンジ”なら”オレンジはビタミンCが豊富です。”と出力
  • それ以外なら”それは果物ではありません。”と出力

変数fruitの値が”バナナ”なので、2番目のcaseの処理が実行されます。

実行結果

バナナは黄色い果物です。

switch文を使えば、式の値に応じて処理を切り替えることができます。

if文と比べると、条件が多岐にわたる場合でもコードがスッキリと書けるのが魅力ですね。

ただし、switch文で扱える式の値は、数値、文字列、boolean型などの単純な値に限られます。

より複雑な条件分岐を行う場合は、if文を使う必要があります。

switch文とif文を使い分けることで、より読みやすく効率的なコードを書くことができるでしょう。

条件分岐のテクニックを身につけて、プログラミングのスキルを高めていきましょう。

●三項演算子を使った条件分岐

JavaScriptのif文は、条件分岐を行うための基本的な構文ですが、ちょっとした条件分岐を行う場合、if文を使うと少し冗長に感じることがあります。

そんなときは、三項演算子を使うと、より簡潔に条件分岐を表現できるのです。

三項演算子は、条件式の結果に応じて、2つの値のどちらかを返すための演算子です。

○三項演算子の使い方

三項演算子の基本的な構文は次のようになります。

条件式 ? 式1 : 式2

条件式が真(true)の場合は式1が評価され、偽(false)の場合は式2が評価されます。

式1と式2には、任意の式を記述できます。

例えば、次のように使うことができます。

const age = 20;
const message = age >= 18 ? "成人です" : "未成年です";
console.log(message);

このコードでは、変数ageの値が18以上の場合は”成人です”が、18未満の場合は”未成年です”が、変数messageに代入されます。

実行結果

成人です

このように、三項演算子を使えば、if文を使わずに簡潔に条件分岐を表現できます。

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

それでは、三項演算子を使った具体的なサンプルコードを見てみましょう。

const score = 85;
const result = score >= 60 ? "合格" : "不合格";
console.log(`あなたの結果は${result}です。`);

このコードでは、変数scoreの値が60以上の場合は”合格”が、60未満の場合は”不合格”が、変数resultに代入されます。

実行結果

あなたの結果は合格です。

変数scoreの値が85なので、条件式score >= 60が真となり、”合格”が変数resultに代入されます。

三項演算子を使えば、シンプルな条件分岐をスッキリと表現できます。

特に、条件式の結果を変数に代入したい場合や、関数の引数に条件分岐の結果を渡したい場合などに便利ですね。

ただし、三項演算子は簡潔さを優先するあまり、可読性が下がってしまう可能性もあります。

複雑な条件分岐を三項演算子で表現しようとすると、かえってコードが読みにくくなってしまうこともあるので注意が必要です。

使いどころを見極めて、if文と三項演算子を適切に使い分けることが大切ですね。

条件分岐のテクニックを身につけて、より良いコードを書けるようになりましょう。

●if文の省略記法

JavaScriptのif文は、条件分岐を行うための基本的な構文ですが、ちょっとした工夫をすることで、より簡潔に記述することができます。

その工夫の1つが、if文の省略記法です。

if文の省略記法を使えば、シンプルな条件分岐をよりコンパクトに表現できるようになるのです。

○if文の省略記法の書き方

if文の省略記法は、次のような構文になります。

条件式 && 式

この構文では、条件式が真(true)の場合に、式が評価されます。

条件式が偽(false)の場合は、式は評価されません。

例えば、次のように使うことができます。

const x = 10;
x > 5 && console.log("xは5より大きい");

このコードでは、変数xの値が5より大きい場合に、”xは5より大きい”とコンソールに出力されます。

実行結果

xは5より大きい

このように、if文の省略記法を使えば、条件式が真の場合にのみ実行したい式を簡潔に記述できます。

○サンプルコード8：if文の省略記法

それでは、if文の省略記法を使った具体的なサンプルコードを見てみましょう。

const isAdmin = true;
const message = "ようこそ！";

isAdmin && console.log(message);

このコードでは、変数isAdminがtrueの場合に、変数messageの内容がコンソールに出力されます。

実行結果

ようこそ！

変数isAdminがtrueなので、console.log(message)が実行され、”ようこそ！”とコンソールに出力されます。

if文の省略記法は、条件式が真の場合に実行したい式が1つだけの場合に便利です。

ただし、可読性を考慮して使う必要があります。

省略記法を使いすぎると、かえってコードが読みにくくなってしまう可能性もあるので注意が必要ですね。

if文の省略記法は、適材適所で使うことが大切です。

●よくあるエラーと対処法

JavaScriptのif文を使っていると、思わぬエラーに遭遇することがあります。

エラーに立ち向かうことは、プログラミングスキルを向上させる上で欠かせないプロセスです。

そこで、if文を使う上でよく遭遇するエラーと、その対処法について見ていきましょう。

エラーを理解し、適切に対処できるようになることが、if文をマスターするための重要なステップなのです。

○条件式の記述ミス

if文の条件式を記述する際に、よくある間違いが条件式の記述ミスです。

例えば、比較演算子を間違えて使ってしまったり、条件式の括弧を忘れてしまったりすることがあります。

条件式の記述ミスは、意図しない動作を引き起こす原因になります。

コードを書く際は、条件式が意図した通りに記述されているか、しっかりと確認することが大切ですね。

もし、条件式の記述ミスによるエラーが発生した場合は、次のように対処しましょう。

// 誤った例
if (x = 5) {
  console.log("xは5です");
}

// 修正例
if (x === 5) {
  console.log("xは5です");
}

上記の誤った例では、比較演算子===の代わりに代入演算子=が使われています。

この場合、変数xに5が代入され、条件式は常に真になってしまいます。

修正例のように、正しい比較演算子を使うように気をつけましょう。

○ブロックの範囲ミス

if文のブロック{}の範囲を間違えてしまうことも、よくあるエラーの1つです。

ブロックの範囲を正しく指定しないと、意図しない動作になってしまいます。

下記のように、ブロックの範囲を正しく指定するように注意しましょう。

// 誤った例
if (x > 10)
  console.log("xは10より大きい");
  console.log("この行は常に実行される");

// 修正例
if (x > 10) {
  console.log("xは10より大きい");
}
console.log("この行は常に実行される");

誤った例では、ブロック{}が省略されているため、if文の条件に関係なく、2行目のconsole.logが常に実行されてしまいます。

修正例のように、ブロック{}を正しく指定することで、意図した通りの動作になります。

○比較演算子の誤用

JavaScriptの比較演算子には、==と===、!=と!==があります。

これらの比較演算子の違いを理解していないと、思わぬバグを引き起こすことがあります。

==と!=は、値の型を自動的に変換して比較するのに対し、===と!==は、値の型も含めて厳密に比較します。

下記のように、比較演算子を適切に使い分けることが大切です。

// 誤った例
if (x == "5") {
  console.log("xは数値の5です");
}

// 修正例
if (x === 5) {
  console.log("xは数値の5です");
}

誤った例では、==を使っているため、文字列の”5″と数値の5が等しいと判定されてしまいます。

修正例のように、===を使って厳密に比較することで、意図した通りの判定ができます。

●if文の応用例

さて、ここまでif文の基本的な使い方やエラー対処法について解説してきました。

if文は、条件分岐を行うための非常に重要な構文ですが、実際の開発現場では、さまざまな場面でif文が活用されています。

そこで、if文の応用例をいくつか見ていきましょう。

実践的なコードを通して、if文の活用方法を探ることで、よりif文への理解を深めることができるはずです。

○サンプルコード9：ユーザー入力のバリデーション

Webアプリケーションを作成する際、ユーザーからの入力をチェックすることは非常に重要です。

if文を使えば、ユーザー入力が正しいフォーマットかどうかを簡単にチェックできます。

下記のサンプルコードでは、ユーザーが入力した値が数値かどうかを判定しています。

function validateInput(input) {
  if (isNaN(input)) {
    console.log("入力値が正しくありません。数値を入力してください。");
  } else {
    console.log("入力値は数値です。");
  }
}

// 関数の呼び出し例
validateInput("abc"); // 入力値が正しくありません。数値を入力してください。
validateInput("123"); // 入力値は数値です。

このコードでは、isNaN()関数を使って、引数inputが数値かどうかを判定しています。

isNaN()は、引数が数値でない場合にtrueを返します。

if文を使って、isNaN(input)がtrueの場合は、”入力値が正しくありません。数値を入力してください。”とコンソールに出力し、falseの場合は、”入力値は数値です。”と出力しています。

このように、if文を使ってユーザー入力をチェックすることで、より堅牢なWebアプリケーションを作成できるでしょう。

○サンプルコード10：配列の要素チェック

配列を扱う際、特定の要素が配列に含まれているかどうかをチェックしたい場合があります。

if文とincludes()メソッドを使えば、簡単に配列の要素チェックができます。

下記のサンプルコードでは、配列fruitsに”バナナ”が含まれているかどうかを判定しています。

const fruits = ["リンゴ", "バナナ", "オレンジ"];

if (fruits.includes("バナナ")) {
  console.log("バナナは配列に含まれています。");
} else {
  console.log("バナナは配列に含まれていません。");
}

このコードでは、includes()メソッドを使って、配列fruitsに”バナナ”が含まれているかどうかを判定しています。

includes()は、引数が配列に含まれている場合にtrueを返します。

if文を使って、fruits.includes("バナナ")がtrueの場合は、”バナナは配列に含まれています。”とコンソールに出力し、falseの場合は、”バナナは配列に含まれていません。”と出力しています。

実行結果

バナナは配列に含まれています。

このように、if文と組み合わせることで、配列の要素チェックを簡単に行うことができます。

○サンプルコード11：オブジェクトのプロパティチェック

オブジェクトを扱う際、特定のプロパティがオブジェクトに存在するかどうかをチェックしたい場合があります。

if文とin演算子を使えば、簡単にオブジェクトのプロパティチェックができます。

下記のサンプルコードでは、オブジェクトpersonに”age”プロパティが存在するかどうかを判定しています。

const person = { name: "山田", age: 30 };

if ("age" in person) {
  console.log("ageプロパティはオブジェクトに存在します。");
} else {
  console.log("ageプロパティはオブジェクトに存在しません。");
}

このコードでは、in演算子を使って、オブジェクトpersonに”age”プロパティが存在するかどうかを判定しています。

in演算子は、指定したプロパティがオブジェクトに存在する場合にtrueを返します。

if文を使って、"age" in personがtrueの場合は、”ageプロパティはオブジェクトに存在します。”とコンソールに出力し、falseの場合は、”ageプロパティはオブジェクトに存在しません。”と出力しています。

実行結果

ageプロパティはオブジェクトに存在します。

このように、if文とともにin演算子を使うことで、オブジェクトのプロパティチェックを簡単に行うことができます。

○サンプルコード12：nullish coalescingを使ったデフォルト値の設定

JavaScriptでは、変数の値がnullやundefinedの場合に、デフォルト値を設定したい場合があります。

if文を使うこともできますが、より簡潔に記述できるnullish coalescing演算子(??)を使うこともできます。

下記のサンプルコードでは、変数nameがnullまたはundefinedの場合に、デフォルト値として”名無し”を設定しています。

let name = null;

name = name ?? "名無し";
console.log(name); // 名無し

name = "山田";
name = name ?? "名無し";
console.log(name); // 山田

このコードでは、nullish coalescing演算子(??)を使って、変数nameがnullまたはundefinedの場合に、デフォルト値として”名無し”を設定しています。

??の左側の値がnullまたはundefinedの場合、右側の値が返されます。

最初は、変数nameにnullが代入されているので、name ?? "名無し"の結果は”名無し”になります。

次に、変数nameに”山田”が代入されているので、name ?? "名無し"の結果は”山田”になります。

まとめ

JavaScriptのif文は、条件分岐を行うための非常に重要な構文です。

今回は、if文の基本構文から、論理演算子を使った複数条件の設定、else ifやswitch文を使った条件分岐、三項演算子やif文の省略記法など、さまざまな使い方を解説してきました。

if文は、JavaScriptの開発現場で頻繁に使われる構文の1つです。

if文を使いこなすことは、JavaScriptのスキルアップに欠かせません。

ぜひ、if文の使い方を完全にマスターして、複雑な条件分岐を適切に表現できるようにしていきましょう。