読み込み中...

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

初心者がJavaScript if else文を簡単にマスターする方法 JS
この記事は約7分で読めます。

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

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

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

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

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

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

はじめに

この記事を読めば、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);

●注意点と対処法

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

●カスタマイズ方法

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

まとめ

条件分岐を使ったプログラミングは、さまざまなシチュエーションで有用です。

本稿では、数値の大小比較、文字列の比較、複数条件の組み合わせ、応用例としてのログインフォームのバリデーション、ポイントに応じた会員ランクの判定、年齢に応じたおすすめ商品の表示など、様々なサンプルコードを紹介しました。

また、注意点と対処法、カスタマイズ方法についても触れました。

これらの知識を活用して、条件分岐をうまく扱えるプログラムを作成していきましょう。