3.条件分岐

学習目標

if / else if / else を使って条件に応じた処理を書ける
条件分岐を使って最大値を求めるプログラムを読める

1. 条件分岐

ここまでのプログラムは、上から下へ1行ずつ、すべての行が実行されていました。しかし実際のプログラムでは「条件に応じて異なる処理を行う」場面が頻繁にあります。

年齢に応じて料金を変える
点数に応じて成績をつける
ログイン中かどうかで表示を切り替える

このような「もし〜なら〜する」という処理を実現するのが 条件分岐 です。

1-1. `if`

条件に応じて処理を分けるには if を使います。if は条件式が true のときだけ、{} で囲まれた範囲（ブロック）を実行します。

if (条件式) {
  条件式が true のときに実行する処理
}

const age = 20;

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

console.log("年齢: " + age);

成人です
年齢: 20

処理の流れを追います。

() の中の age >= 18 を評価する。20 >= 18 なので true
条件式が true なので、{} の中の console.log("成人です") が実行される
{} を抜けた後、console.log("年齢: " + age) が実行される

age を 15 に変えると、age >= 18 は false になり、ブロック内の処理は実行されません。

const age = 15;

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

console.log("年齢: " + age);

年齢: 15

1-2. `if-else`

条件が false のときにも別の処理を実行するには else を使います。

const age = 15;
let label;

if (age >= 18) {
  label = "成人";
} else {
  label = "未成年";
}

console.log(label + "です（年齢: " + age + "）");

未成年です（年齢: 15）

処理の流れを追います。

age >= 18 を評価する。15 >= 18 なので false
条件式が false なので、if ブロックは実行されない
else ブロックが実行され、label に "未成年" が代入される
if-else の後、console.log で label と age を連結して出力する

ブロックの中では変数の代入や計算など、複数の処理を書くことができます。

const price = 1000;
const age = 15;
let total;

if (age >= 18) {
  total = price;
  console.log("通常料金");
} else {
  total = price * 0.5;
  console.log("子ども割引適用");
}

console.log("料金: " + total);

子ども割引適用
料金: 500

1-3. `else if`

点数に応じて成績を A / B / C に振り分けるなど、分岐先が3つ以上あるときは else if を使います。

const score = 75;

if (score >= 80) {
  console.log("A");
} else if (score >= 60) {
  console.log("B");
} else {
  console.log("C");
}

条件は上から順に評価されます。最初に true になった条件のブロックだけが実行され、残りはすべて実行されません。score が 75 の場合、処理の流れを追います。

score >= 80 を評価する。75 >= 80 なので false。このブロックは実行されない
score >= 60 を評価する。75 >= 60 なので true。"B" が出力される
true が見つかったので、else ブロックは実行されない

score の値を 90、75、40 などに変えて実行し、それぞれどのブロックが実行されるか確認してください。

1-4. 最大値の判定

条件分岐を使って、2つの数値から大きいほうを求めます。

const a = 30;
const b = 45;
let max; // 大きいほうの値を入れるための変数

if (a > b) {
  max = a;
} else {
  max = b;
}

console.log(max);

処理の流れを追います。

a > b を評価する。30 > 45 なので false
if ブロックは実行されない
else ブロックが実行され、max に b（45）が代入される
console.log(max) で 45 が出力される

a と b が等しい場合は a > b が false になるので else ブロックが実行されますが、値は同じなので結果に影響しません。

a と b の値を変えて何パターンか試し、常に大きいほうが max に入ることを確認してください。

2. 演習

演習: 条件分岐

3.条件分岐

1. 条件分岐

1-1. if

1-2. if-else

1-3. else if

1-4. 最大値の判定

2. 演習

1-1. `if`

1-2. `if-else`

1-3. `else if`