• Home
  • Web制作
  • JavaScriptのif文をマスターしよう！条件分岐の基礎から応用まで徹底解説

JavaScriptのif文をマスターしよう！条件分岐の基礎から応用まで徹底解説

schedule
Tags: JavaScript

JavaScriptのif文とは？ 条件分岐の基本を理解しよう！

JavaScriptでプログラムを書く際に、「もし○○だったら、△△を実行する」 というように、状況に応じて処理を分岐させたい場合がありますよね。

そんな時に役立つのが if文 です。

if文は、条件分岐を行うための基本的な構文であり、プログラムの流れを制御する上で非常に重要な役割を担います。

if文の基本的な書き方

JavaScriptのif文は、以下のように記述します。

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

条件式 には、true（真）または false（偽）のいずれかを返す式を記述します。

条件式が true の場合、{} 内の処理が実行されます。

false の場合は、{} 内の処理はスキップされ、if文の後の処理が実行されます。

例えば、変数 age に格納された年齢が20歳以上かどうかを判定する場合は、以下のように記述します。

const age = 25;

if (age >= 20) {
  console.log("あなたは成人です。"); 
}

この場合、変数 age の値が25なので、条件式 age >= 20 は true と評価されます。

そのため、{} 内の console.log("あなたは成人です。"); が実行され、コンソールに「あなたは成人です。」と表示されます。

if文をさらに活用！ else if、elseによる条件分岐

if文では、条件式が false の場合に実行する処理を記述することもできます。

elseによる処理の分岐

else を使うと、条件式が false の場合に実行する処理を指定できます。

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

先ほどの年齢判定の例に else を追加してみましょう。

const age = 18;

if (age >= 20) {
  console.log("あなたは成人です。"); 
} else {
  console.log("あなたは未成年です。"); 
}

この場合、変数 age の値は18なので、条件式 age >= 20 は false と評価されます。

そのため、else 以降の {} 内の console.log("あなたは未成年です。"); が実行され、コンソールに「あなたは未成年です。」と表示されます。

else ifで複数の条件を指定

else if を使うと、複数の条件式を順番に評価していくことができます。

if (条件式1) {
  // 条件式1がtrueの場合に実行される処理
} else if (条件式2) {
  // 条件式1がfalseで、条件式2がtrueの場合に実行される処理
} else {
  // 上記のどの条件式にも当てはまらない場合に実行される処理
}

年齢によって異なるメッセージを表示する例を見てみましょう。

const age = 18;

if (age >= 20) {
  console.log("あなたは成人です。お酒も飲めます。"); 
} else if (age >= 18) {
  console.log("あなたは成人です。ただし、お酒はまだ飲めません。"); 
} else {
  console.log("あなたは未成年です。"); 
}

このコードでは、age の値によって以下の3つのパターンに分岐します。

  1. age が20以上の場合は、「あなたは成人です。お酒も飲めます。」と表示
  2. age が18以上20未満の場合は、「あなたは成人です。ただし、お酒はまだ飲めません。」と表示
  3. 上記以外の場合は、「あなたは未成年です。」と表示

このように、else if を使うことで、複数の条件を効率的に処理できます。

if文をもっと使いこなす！ 複雑な条件式を記述する方法

if文では、より複雑な条件式を記述することも可能です。

論理演算子を使った条件式

複数の条件を組み合わせたい場合は、論理演算子 を使用します。

JavaScriptで利用できる論理演算子は以下の3つです。

  • && (AND演算子): 両側の条件が true の場合に true を返す
  • || (OR演算子): いずれかの条件が true の場合に true を返す
  • ! (NOT演算子): 条件式の結果を反転させる

例えば、年齢が20歳以上で、かつ、名前が"太郎"である場合のみメッセージを表示するには、以下のように記述します。

const age = 25;
const name = "太郎";

if (age >= 20 && name === "太郎") {
  console.log("あなたは20歳以上で、名前が太郎さんですね！"); 
}

比較演算子を使った条件式

数値や文字列の大小比較などを行う場合は、比較演算子 を使用します。

JavaScriptで利用できる比較演算子は以下の6つです。

  • === (厳密等価): 値とデータ型が等しい場合に true を返す
  • !== (厳密不等価): 値またはデータ型が等しくない場合に true を返す
  • > (より大きい): 左辺が右辺より大きい場合に true を返す
  • < (より小さい): 左辺が右辺より小さい場合に true を返す
  • >= (以上): 左辺が右辺以上の場合に true を返す
  • <= (以下): 左辺が右辺以下の場合に true を返す

例えば、変数 score に格納された点数が80点以上の場合は「合格」、そうでない場合は「不合格」と表示する場合は、以下のように記述します。

const score = 85;

if (score >= 80) {
  console.log("合格"); 
} else {
  console.log("不合格"); 
}

まとめ：if文をマスターして、JavaScriptの可能性を広げよう！

今回は、JavaScriptのif文について、基本的な使い方から、else、else ifを用いた分岐、そして複雑な条件式まで解説しました。

if文は、プログラムの流れを制御する上で欠かせない構文です。

今回ご紹介した内容を踏まえ、if文をマスターして、より自由度の高いプログラムを作成していきましょう！

関連記事