JavaScript 入門

JavaScript 条件分岐

条件分岐（条件文）を使用すると、特定の条件に基づいてコードの実行フローを制御することができます。

簡単に言えば、プログラムに「意思決定」を行わせる仕組みです。異なるコードパスを実行し、さまざまな入力に対して動的に反応できるようになります。条件分岐がなければ、プログラムは複雑なシナリオやユーザーインタラクションを処理できず、単に最初から最後まで順番に実行されるだけのものになってしまいます。

1. if文：条件付きでコードを実行する

if 文は、条件分岐の中で最も基本的な形式です。指定した条件が真（true）である場合にのみ、特定のコードブロックを実行します。

1.1 構文

if (条件) {
  // 条件が真 (true) の場合、ここにあるコードが実行されます
}
  • 条件 (Condition): 結果が true（真）または false（偽）になるエクスプレッション（式）です。これは単純な比較（例：x > 5）でも、複雑な論理式でも構いません。
  • {} (波括弧): 条件が真の時に実行されるコードブロックを囲みます。

       注意: コードが1行だけの場合、技術的には波括弧を省略できますが、これは悪い習慣とされています。コードの可読性を高め、将来的なミスを防ぐために、常に波括弧を付けるようにしましょう。

1.2 示例 1：基本的な if文

let age = 20;

if (age >= 18) {
  console.log("あなたは成人しています。");
}

この例では、プログラムが条件 age >= 18 を評価します。age は 20 なので条件は真となり、コンソールに「あなたは成人しています。」と表示されます。

1.3 示例 2：ブーリアン変数を使用した if文

let isRaining = true; // isRaining は「雨が降っている」という意味

if (isRaining) {
  console.log("傘を持って行ってください！");
}

ここでは、条件に直接ブーリアン変数 isRaining を指定しています。その値が true なので、「傘を持って行ってください！」と表示されます。

1.4 示例 3：波括弧の省略（非推奨）

let number = 10;

if (number > 5)
  console.log("数字は 5 より大きいです。"); // この行は条件に応じて実行されます
  console.log("この行は常に実行されます。"); // 警告：この行は if とは無関係で、常に実行されます！

文法上は問題ありませんが、このような書き方は強く推奨しません。
最初の console.log だけが if 文に属し、2番目の console.log は条件に関わらず実行されます。これは予期せぬバグの原因となり、可読性も損なうため、常に {} を使用してください。

2. else文：条件が偽の時に実行する

else 文は、代替案を提供します。if の条件が偽（false）であった場合に、else ブロック内のコンテンツが実行されます。

2.1 構文

if (条件) {
  // 条件が真の場合、ここを実行
} else {
  // 条件が偽の場合、ここを実行
}

2.2 示例 1：if...else文

let temperature = 15;

if (temperature > 20) {
  console.log("暖かい日です。");
} else {
  console.log("涼しい日です。");
}

この例では、条件 temperature > 20 が評価されます。temperature は 15 なので条件は偽となり、プログラムは最初のブロックをスキップして else ブロックを実行し、「涼しい日です。」と表示します。

2.3 示例 2：偶数か奇数かのチェック

let num = 7;

if (num % 2 === 0) {
  console.log(num + " は偶数です。");
} else {
  console.log(num + " は奇数です。");
}

この例では剰余演算子（%）を使用しています。num を 2 で割った余りが 0 であれば偶数、そうでなければ奇数と判断します。

3. else if文：複数の条件を処理する

else if 文を使用すると、複数の条件を順番にチェックできます。異なる状況に基づいて、異なるコードブロックを実行させることができます。

3.1 構文

if (条件1) {
  // 条件1 が真の場合、ここを実行
} else if (条件2) {
  // 条件1 が偽 かつ 条件2 が真の場合、ここを実行
} else {
  // 条件1 と 条件2 がどちらも偽の場合、ここを実行
}

必要に応じて、いくらでも else if 文を追加できます。最後の else ブロックはオプション（任意）であり、それまでのすべての条件が満たされなかった場合にのみ実行されます。

3.2 示例 1：if...else if...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 if (score >= 60) {
  console.log("ランク：D");
} else {
  console.log("ランク：F");
}

この例では、コードが score の値を順番にチェックします。最初に真となる条件に遭遇すると、対応するコードブロックが実行され、残りのチェックはすべてスキップされます。ここでは score >= 70 が最初に満たされる条件なので、「ランク：C」と表示されます。

3.3 示例 2：季節の判定

let month = 4; // 4月

if (month >= 3 && month <= 5) {
  console.log("春");
} else if (month >= 6 && month <= 8) {
  console.log("夏");
} else if (month >= 9 && month <= 11) {
  console.log("秋");
} else {
  console.log("冬");
}

この例では、論理演算子（&&：かつ）を使用して、月が特定の範囲内にあるかどうかをチェックしています。

3.4 else if に関する重要な注意事項

  • 順序が重要: 条件は上から下の順に評価されます。一度ある条件が満たされると、残りの else if や else は無視されます。そのため、ロジカルな順序で条件を並べる必要があります。
  • 排他性: else if 構造は、これらの条件が互いに排他的であることを意味します。最終的に実行されるコードブロックは1つだけです。
  • else は任意: 最後の else は省略可能です。省略した場合にすべての条件が満たされないと、何も起こりません。

4. ネストされた条件分岐

if、else if、または else 文の中に別の条件分岐を入れることを、ネスト（入れ子）と呼びます。より複雑な意思決定ロジックを作成するために使用されます。

4.1 示例：ネストされた if文

let age = 25;
let hasLicense = true; // 免許を持っているか

if (age >= 18) {
  console.log("運転できる年齢です。");

  // 内部の if 文
  if (hasLicense) {
    console.log("運転を許可されています。");
  } else {
    console.log("運転するには免許が必要です。");
  }
  
} else {
  console.log("まだ運転できる年齢ではありません。");
}

この例では、外側の if がまず年齢をチェックします。年齢が基準を満たしている場合にのみ、プログラムは内部に入り、免許の有無をチェックします。

ヒント: ネストは可能ですが、あまりにも深いネストはコードを極めて読みにくくします。今後の学習では、論理演算子や関数の分割（リファクタリング）を使って、ネストを浅くする方法を学んでいきましょう。