JavaScript if elseの使い方7選！初心者も簡単マスター

はじめに
●JavaScriptのif elseとは
- ○if else文の基本
●if else文の使い方
●応用例とサンプルコード
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptのif else文を使ったプログラミングができるようになります。

JavaScript初心者の方でも、分かりやすい説明とサンプルコードを通じて、if else文の使い方や応用例を理解できるようになるでしょう。

●JavaScriptのif elseとは

○if else文の基本

JavaScriptのif else文は、プログラムの中で条件分岐を行う際に使用されます。

条件式が真(true)の場合、if内の処理が実行され、偽(false)の場合はelse内の処理が実行されます。

●if else文の使い方

○サンプルコード1：数値の大小比較

このサンプルコードでは、2つの数値を比較して大きい方の値を表示するコードを紹介しています。

この例では、変数aと変数bを比較し、aが大きい場合は「a is greater」と表示され、そうでない場合は「b is greater」と表示されます。

let a = 10;
let b = 20;

if (a > b) {
  console.log("a is greater");
} else {
  console.log("b is greater");
}

○サンプルコード2：文字列の比較

このサンプルコードでは、2つの文字列を比較して同じかどうかを判定するコードを紹介しています。

この例では、変数str1と変数str2の文字列を比較し、同じ場合は「Strings are equal」と表示され、異なる場合は「Strings are not equal」と表示されます。

let str1 = "apple";
let str2 = "orange";

if (str1 === str2) {
  console.log("Strings are equal");
} else {
  console.log("Strings are not equal");
}

○サンプルコード3：複数条件の組み合わせ

このサンプルコードでは、複数の条件を組み合わせて判定するコードを紹介しています。

この例では、変数scoreの数値に応じて、評価をA、B、C、Dのいずれかに分けて表示します。

let score = 85;

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else if (score >= 70) {
  console.log("C");
} else {
  console.log("D");
}

●応用例とサンプルコード

○サンプルコード4：曜日によるメッセージの表示

このサンプルコードでは、曜日に応じてメッセージを表示するコードを紹介しています。

この例では、現在の曜日を取得し、それに応じて曜日ごとのメッセージを表示します。

let today = new Date().getDay();

if (today === 0) {
  console.log("今日は日曜日です");
} else if (today === 1) {
  console.log("今日は月曜日です");
} else if (today === 2) {
  console.log("今日は火曜日です");
} else if (today === 3) {
  console.log("今日は水曜日です");
} else if (today === 4) {
  console.log("今日は木曜日です");
} else if (today === 5) {
  console.log("今日は金曜日です");
} else {
  console.log("今日は土曜日です");
}

○サンプルコード5：ログインフォームのバリデーション

このサンプルコードでは、ログインフォームに入力されたメールアドレスとパスワードを検証するコードを紹介しています。

この例では、メールアドレスが正しい形式で入力されており、パスワードが8文字以上であることを確認しています。

function validateLoginForm(email, password) {
  const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

  if (!emailRegex.test(email)) {
    console.log("メールアドレスが不正です");
  } else if (password.length < 8) {
    console.log("パスワードは8文字以上で入力してください");
  } else {
    console.log("ログイン情報が正しいです");
  }
}

let email = "example@example.com";
let password = "password123";
validateLoginForm(email, password);

○サンプルコード6：ポイントに応じた会員ランクの判定

このサンプルコードでは、会員のポイントに応じて会員ランクを判定するコードを紹介しています。

この例では、変数pointsに保存されたポイント数に応じて、会員ランクを表示します。

function checkMemberRank(points) {
  if (points >= 1000) {
    console.log("ゴールド会員です");
  } else if (points >= 500) {
    console.log("シルバー会員です");
  } else {
    console.log("ブロンズ会員です");
  }
}

let points = 600;
checkMemberRank(points);

○サンプルコード7：年齢に応じたおすすめ商品の表示

このサンプルコードでは、年齢に応じておすすめの商品を表示するコードを紹介しています。

この例では、変数ageに保存された年齢に応じて、おすすめの商品を表示します。

function recommendProduct(age) {
  if (age >= 60) {
    console.log("おすすめ商品：健康食品");
  } else if (age >= 30) {
    console.log("おすすめ商品：美容商品");
  } else {
    console.log("おすすめ商品：ファッションアイテム");
  }
}

let age = 45;
recommendProduct(age);

●注意点と対処法

条件式の書き方に注意しましょう。
間違った条件式では、意図しない結果が表示されることがあります。
対処法として、条件式が正しく記述されているか確認し、テストを行いましょう。
if文のネストは避けましょう。
複雑な条件判断が必要な場合は、適切にelse if文を使ってコードをシンプルに保ちましょう。
対処法として、条件分岐のロジックを見直し、適切な構造に改善することが求められます。

●カスタマイズ方法

条件分岐の範囲を変更することで、結果に適用される条件をカスタマイズできます。
例えば、ポイントに応じた会員ランクの判定で、ポイントの基準値を変更することで、会員ランクの基準を調整することができます。
追加の条件を組み込むことで、より柔軟な判定が可能になります。
例えば、年齢に応じたおすすめ商品の表示で、性別によっておすすめの商品を変更する条件を追加することができます。
関数の引数を変更することで、別の情報に基づいて判定を行うことができます。
例えば、年齢だけでなく、趣味や好みに基づいておすすめ商品を表示するように関数をカスタマイズすることができます。