JavaScriptで理解！if文の使い方10選

はじめに
●JavaScript if文の基本
- ○if文の構文
●JavaScript if文の使い方
●JavaScript if文の応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptでif文を使いこなすことができるようになります。

JavaScriptのif文はプログラミングの基本中の基本ですが、初心者にとっては難しい部分もあるでしょう。

この記事では、JavaScriptのif文の使い方を10のサンプルコードを通じて徹底解説します。

応用例や注意点、カスタマイズ方法も含め、JavaScriptのif文をマスターしましょう。

●JavaScript if文の基本

○if文の構文

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

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

if (条件式) {
  // 実行される処理
}

●JavaScript if文の使い方

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

このコードでは、変数ageが20以上の場合に「成人です」と表示するコードを紹介しています。

この例では、ageが20以上であるかどうかを判定して、条件を満たす場合にメッセージを表示しています。

const age = 25;

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

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

このコードでは、変数temperatureが30以上なら「暑いですね」、そうでなければ「涼しいですね」と表示するコードを紹介しています。

この例では、temperatureが30以上かどうかを判定し、真の場合と偽の場合にそれぞれメッセージを表示しています。

const temperature = 28;

if (temperature >= 30) {
  console.log('暑いですね');
} else {
  console.log('涼しいですね');
}

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

このコードでは、変数scoreの値に応じて、「優」、「良」、「可」、「不可」のいずれかを表示するコードを紹介しています。

この例では、scoreの値を条件分岐させ、それぞれの範囲に応じた評価を表示しています。

const score = 75;

if (score >= 90) {
  console.log('優');
} else if (score >= 70) {
  console.log('良');
} else if (score >= 50) {
  console.log('可');
} else {
  console.log('不可');
}

○サンプルコード4：条件演算子

このコードでは、条件演算子(三項演算子)を使って、変数isMemberが真の場合は「会員です」、偽の場合は「非会員です」と表示するコードを紹介しています。

この例では、isMemberの値に応じて表示するメッセージを切り替えています。

const isMember = true;
const message = isMember ? '会員です' : '非会員です';
console.log(message);

●JavaScript if文の応用例

○サンプルコード5：入力値チェック

このコードでは、ユーザーからの入力値が正しい範囲内にあるかどうかをチェックするコードを紹介しています。

この例では、入力値が1から10の範囲内であることを確認し、範囲外であればアラートを表示しています。

const input = 5;

if (input >= 1 && input <= 10) {
  console.log('入力値が正しい範囲内です');
} else {
  console.log('入力値が範囲外です');
}

○サンプルコード6：配列の要素判定

このコードでは、配列内に特定の要素が含まれているかを判定するコードを紹介しています。

この例では、fruits配列内に’apple’が含まれているかどうかを確認しています。

const fruits = ['apple', 'orange', 'banana'];
const target = 'apple';

if (fruits.includes(target)) {
  console.log('配列に目的の要素が含まれています');
} else {
  console.log('配列に目的の要素が含まれていません');
}

○サンプルコード7：ランダムな挨拶メッセージ

このコードでは、ランダムに挨拶メッセージを選択して表示するコードを紹介しています。

この例では、挨拶メッセージの配列からランダムに一つ選び、表示しています。

const greetings = ['おはよう', 'こんにちは', 'こんばんは'];
const randomIndex = Math.floor(Math.random() * greetings.length);

console.log(greetings[randomIndex]);

○サンプルコード8：画像のスライドショー

このコードでは、画像を順番に切り替えるスライドショーを実装する方法を紹介しています。

この例では、画像のURLを配列に格納し、順番に表示してスライドショーを実現しています。

const images = [
  'image1.jpg',
  'image2.jpg',
  'image3.jpg',
];
let currentIndex = 0;

function showNextImage() {
  currentIndex = (currentIndex + 1) % images.length;
  document.getElementById('slideshow').src = images[currentIndex];
}

setInterval(showNextImage, 2000);

○サンプルコード9：年齢に応じたアクセス制限

このコードでは、ユーザーの年齢に応じてアクセスを制限する方法を紹介しています。

この例では、年齢が18歳未満の場合にアクセスを制限し、アラートを表示しています。

const age = 16;

if (age < 18) {
  alert('18歳未満の方はアクセスできません');
} else {
  console.log('アクセスが許可されました');
}

○サンプルコード10：簡易カレンダー表示

このコードでは、現在の日付と曜日を表示する簡易カレンダーを作成する方法を紹介しています。

この例では、Dateオブジェクトを使用して現在の日付と曜日を取得し、表示しています。

const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const date = today.getDate();
const day = ['日', '月', '火', '水', '木', '金', '土'][today.getDay()];

console.log(`${year}年${month}月${date}日(${day})`);