【第6回】条件によって処理を変えよう！if文とswitch文 | JavaScript入門

はじめに

前回の記事では、JavaScriptでの計算や比較に使う「演算子」について学びました。これらの演算子を活用して、「条件に応じた動作」をプログラムに組み込むことができるようになると、JavaScriptはさらにパワフルなツールになります。

今回のテーマは、条件分岐。たとえば「ユーザーの入力によってメッセージを変える」「曜日によって表示する内容を切り替える」といった処理を実現するためには、プログラムに“判断”をさせる必要があります。

JavaScriptでは、この“判断”を実装するために主に以下の2つの方法があります：

• if文：最も基本的な条件分岐の方法。条件に応じて処理を実行する。
• switch文：複数の条件を整理してスッキリ書きたいときに便利。

本記事では、これらの構文の使い方や書き方の違い、そしてどんなときにどちらを使えば良いかについて、具体的なコード例を交えながらわかりやすく解説していきます。

「条件によって処理が変わる」しくみを理解することは、どんなアプリケーションでも必要不可欠なスキルです。ぜひ、一緒に学んでいきましょう！

if文の基本を学ぼう

JavaScriptで最も基本的な条件分岐の方法が、if文です。「もし〜ならば〜する」といった処理を記述するための構文で、プログラムに判断力を与える最初のステップと言えます。

if文の構文と意味

if文の基本構文は以下のとおりです：

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

たとえば、数値が正の数かどうかを判定するコードは次のようになります：

const number = 10;

if (number > 0) {
  console.log("正の数です");
}

このコードでは、number > 0 の条件が true である場合にのみ、「正の数です」というメッセージが表示されます。

elseとelse ifの使い方

else は、条件が成り立たなかった場合に実行する処理を指定します。

const score = 45;

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

また、else if を使うと、複数の条件を順にチェックできます：

const score = 75;

if (score >= 90) {
  console.log("とてもよくできました");
} else if (score >= 60) {
  console.log("合格です");
} else {
  console.log("不合格です");
}

上から順に条件を判定し、最初に true となったブロックの処理だけが実行されます。

実践：年齢に応じたメッセージを表示してみよう

const age = 20;

if (age >= 65) {
  console.log("シニア料金が適用されます");
} else if (age >= 20) {
  console.log("通常料金です");
} else if (age >= 13) {
  console.log("学生割引が適用されます");
} else {
  console.log("子供料金です");
}

このように、if文とelse ifを組み合わせることで、状況に応じた処理の分岐が可能になります。

switch文を使って分岐を整理しよう

if文は柔軟な条件分岐ができる反面、複数の条件を比較する処理が増えるとコードが煩雑になりやすいという欠点もあります。そこで便利なのが、switch文です。選択肢が明確な場合に使うことで、コードの可読性がぐっと上がります。

switch文の構文と特徴

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

switch (値) {
  case 値1:
    // 値が値1と一致したときの処理
    break;
  case 値2:
    // 値が値2と一致したときの処理
    break;
  default:
    // どのcaseにも一致しないときの処理
}

重要なポイント：

• switch に渡された値が、各 case の値と 厳密等価（===） で比較されます。
• 各 case の処理の後には break を書くのが基本。これがないと、次の case 以降の処理まで実行されてしまいます（フォールスルー）。
• default はどの case にも当てはまらなかった場合に実行されます。

if文とswitch文の違い

if文は柔軟性、switch文は可読性重視と覚えておくと良いでしょう。

実践：曜日に応じて予定を出し分ける

以下は、曜日によって異なるメッセージを表示する例です：

const day = "火曜日";

switch (day) {
  case "月曜日":
    console.log("週の始まり、頑張ろう！");
    break;
  case "火曜日":
    console.log("集中して作業を進めよう！");
    break;
  case "水曜日":
    console.log("週の折り返し地点！");
    break;
  case "木曜日":
    console.log("あと少しで週末！");
    break;
  case "金曜日":
    console.log("ラストスパート！");
    break;
  default:
    console.log("週末はゆっくり休みましょう");
}

day の値に応じて、対応する case の処理が実行されます。これだけの条件を if-else で書くと、かなり読みにくくなってしまうことが想像できると思います。

条件式の書き方を理解しよう

条件分岐で重要なのは、「どんな条件で処理を分けるのか」という判断基準そのものです。JavaScriptでは、単純な比較だけでなく、複数の条件を組み合わせたり、短く書き換えたりするさまざまなテクニックが用意されています。

論理演算子との組み合わせ

複数の条件を一度に判定したいときは、論理演算子を使います。

例：年齢と会員ステータスで特典を判定

const age = 25;
const isMember = true;

if (age >= 20 && isMember) {
  console.log("会員特典が適用されます");
}

三項演算子（条件演算子）も覚えておこう

三項演算子（条件演算子）は、if文を1行で書きたいときに便利です。

条件 ? 真のときの値 : 偽のときの値;

例：ログイン状態による表示メッセージ

const isLoggedIn = true;
const message = isLoggedIn ? "ようこそ！" : "ログインしてください";
console.log(message);

このように、短くてシンプルな条件には三項演算子が適しています。ただし、複雑すぎる条件式を三項演算子で書くと可読性が下がるため注意しましょう。

よくあるミスとその対処法

条件分岐はシンプルに見えて、思わぬバグの温床にもなりがちです。初心者がつまずきやすい典型的なミスと、それを防ぐための対策を紹介します。

条件の書き間違いに注意

== と === の混同

JavaScriptには、**等価演算子（==）と厳密等価演算子（===）**の2種類があります。

console.log('5' == 5);   // true（型が変換される）
console.log('5' === 5);  // false（型が違うため）

対策：

原則として、常に===（厳密等価）を使うのが安全です。型の不一致によるバグを防ぎ、コードの予測可能性が高まります。

複数条件の評価順序を理解する

論理演算子を使った条件式では、評価の順序を正しく理解することが重要です。以下のコードを見てみましょう：

const age = 18;
const hasLicense = false;

if (age >= 18 && hasLicense) {
  console.log("運転できます");
} else {
  console.log("運転できません");
}

この例では、age >= 18 が true でも、hasLicense が false なので全体が false になります。

対策：

条件が複雑な場合は、括弧 () を使って評価順序を明示的にすると可読性も上がります。

if ((age >= 18) && (hasLicense === true)) {
  // 明確な意図が伝わる
}

意図しない値を比較してしまう

JavaScriptでは、null や undefined、空文字 "" などが false として扱われるため、意図しない動作が起こることがあります。

const userName = "";

if (userName) {
  console.log("ユーザー名が入力されています");
} else {
  console.log("ユーザー名が未入力です");
}

対策：

明確な比較を使い、意図的に「空かどうか」を判断するようにしましょう。

if (userName === "") {
  console.log("ユーザー名が未入力です");
}

まとめ

今回の記事では、JavaScriptの条件分岐について、if文とswitch文の使い方を中心に解説しました。これらは、プログラムの流れを柔軟に制御するために不可欠な構文です。

学んだポイントをおさらいしましょう：

• if文は、柔軟な条件判断に向いており、elseやelse ifを組み合わせることで多様な分岐が可能。
• switch文は、特定の値に基づいた分岐をシンプルに記述でき、選択肢が多い場面で活躍。
• 論理演算子や三項演算子を活用することで、条件式を効率よく書くことができる。
• よくあるミス（==と===の混同や条件の評価順序）に注意し、明確な意図を持ったコードを書くことが重要。