第5回 JavaScriptを学ぼう： 条件文（if, else, switch）

プログラミングにおいて条件文は、特定の条件に基づいてコードの実行を制御する重要な構文です。条件分岐を利用することで、プログラムに柔軟性とダイナミズムを持たせることができます。JavaScriptでは、if、else、switchといったキーワードを使用して条件文を構築します。

if文の基本構文

if文は、指定した条件が真（true）の場合にのみブロック内のコードを実行します。

基本構文

if (条件式) {
  // 条件式が真の場合に実行されるコード
}

例

let score = 85;
if (score >= 80) {
  console.log("合格です！");
}
// "合格です！"が出力されます

if…else文

if文にelseを追加することで、条件が偽（false）の場合に別のコードブロックを実行できます。

基本構文

if (条件式) {
  // 条件式が真の場合に実行されるコード
} else {
  // 条件式が偽の場合に実行されるコード
}

例

let score = 65;
if (score >= 80) {
  console.log("合格です！");
} else {
  console.log("不合格です。");
}
// "不合格です。"が出力されます

if…else if…else文

複数の条件をチェックしたい場合、else ifを使って条件を連結できます。

基本構文

if (条件式1) {
  // 条件式1が真の場合
} else if (条件式2) {
  // 条件式2が真の場合
} else {
  // いずれの条件も真でない場合
}

例

let score = 75;
if (score >= 90) {
  console.log("評価: A");
} else if (score >= 80) {
  console.log("評価: B");
} else if (score >= 70) {
  console.log("評価: C");
} else {
  console.log("評価: D");
}
// "評価: C"が出力されます

ネストされた条件文

条件文の中に別の条件文を入れることで、より複雑な条件分岐を実現できます。

let isMember = true;
let age = 20;

if (isMember) {
  if (age >= 18) {
    console.log("大人のメンバーです。");
  } else {
    console.log("未成年のメンバーです。");
  }
} else {
  console.log("非メンバーです。");
}
// "大人のメンバーです。"が出力されます

注意点

• ネストが深くなるとコードが読みづらくなるため、適切に整理することが重要です。
• 複雑な条件は論理演算子を使って簡潔に書くことも検討しましょう。

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

論理演算子を使用すると、複数の条件を組み合わせて一つの条件式にまとめることができます。

• 論理AND（&&）：全ての条件が真の場合に真
• 論理OR（||）：いずれかの条件が真の場合に真
• 論理NOT（!）：真を偽に、偽を真に反転

例

let age = 25;
let hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("入場できます。");
} else {
  console.log("入場できません。");
}
// "入場できます。"が出力されます

比較演算子の復習

条件文で使用する比較演算子を再確認しましょう。

• 等価（==）と厳密等価（===）
• 不等価（!=）と厳密不等価（!==）
• 大なり・小なり（>, <, >=, <=）

例

let value = '10'; <span class="hljs-comment">// valueは文字列型の'10'です</span>

if (value == 10) {
  console.log("値は10です。");
}
// "値は10です。"が出力されます

if (value === 10) {
  console.log("値と型が一致します。");
}
// 何も出力されません（型が一致しないため）

文字型とデータ型について

詳しくは「第3回 JavaScriptを学ぼう： 変数とデータ型」の「プリミティブ型データ型の詳細解説」で説明しています。

switch文の基本構文

switch文は、変数の値に応じて実行するコードを切り替える際に便利です。

基本構文

switch (評価対象) {
  case 値1:
    // 値1の場合に実行されるコード
    break;
  case 値2:
    // 値2の場合に実行されるコード
    break;
  default:
    // どのケースにも一致しない場合に実行されるコード
}

例

let color = '赤';

switch (color) {
  case '赤':
    console.log("止まれ！");
    break;
  case '黄':
    console.log("注意！");
    break;
  case '青':
    console.log("進め！");
    break;
  default:
    console.log("信号の色ではありません。");
}
// "止まれ！"が出力されます

switch文 vs if文

使い分けのポイント

• switch文は、評価対象が特定の値（数値や文字列）と一致するかをチェックする場合に適しています。
• if文は、範囲や複雑な条件を評価する場合に適しています。

性能面

• 条件が多い場合、switch文の方が可読性が高くなることがあります。
• JavaScriptエンジンによっては、switch文の方が高速に実行される場合もあります。

break文とdefaultケース

break文は、switchまたはループから抜け出すために使用します。breakを忘れると、意図せず次のケースのコードも実行されてしまいます。

defaultケースは、どのcaseにも一致しない場合に実行されます。

例

let day = 3;

switch (day) {
  case 1:
    console.log("月曜日");
    break;
  case 2:
    console.log("火曜日");
    break;
  case 3:
    console.log("水曜日");
    break;
  default:
    console.log("無効な日付です。");
}
// "水曜日"が出力されます

実践的な条件文の例

ユーザーのログイン状態をチェックする

let isLoggedIn = true;
let isAdmin = false;

if (isLoggedIn && isAdmin) {
  console.log("管理者ページへようこそ！");
} else if (isLoggedIn) {
  console.log("ユーザーページへようこそ！");
} else {
  console.log("ログインしてください。");
}
// "ユーザーページへようこそ！"が出力されます

三項演算子（条件演算子）

条件文を簡潔に書くために、三項演算子を使用できます。

構文

条件式 ? 真の場合の値 : 偽の場合の値;

例

let age = 20;
let message = (age >= 18) ? "成人です。" : "未成年です。";
console.log(message);
// "成人です。"が出力されます

エラーハンドリングと条件文

条件文を使用して、エラーを未然に防ぐチェックを行うことができます。

例

function divide(a, b) {
  if (b === 0) {
    console.log("エラー：0で割ることはできません。");
    return;
  }
  console.log(a / b);
}

divide(10, 2); // 5が出力されます
divide(10, 0); // エラーが出力されます

まとめ

今回は、JavaScriptにおける条件文（if、else、switch）について学びました。条件文を理解することで、プログラムの制御フローを自在に操ることができます。論理演算子や比較演算子と組み合わせて、より複雑な条件分岐を実装することも可能です。次回は、繰り返し処理を行う**ループ（for、while、do-while）**について詳しく解説します。お楽しみに！

関連記事

• 第1回　JavaScriptを学ぼう：導入編
• 第2回　JavaScriptを学ぼう：開発ツールの導入
• 第3回 JavaScriptを学ぼう： 変数とデータ型
• 第4回 JavaScriptを学ぼう： 演算子
• jQueryの進化とセキュリティについて考える
• ブラウザキャッシュのメリットやデメリット