条件分岐

if 文

if 文は、JavaScript の制御構造で、特定の条件下のみで実行されるプログラムを記述することができます。

基本構造

const age = 18;
if (age < 20) {
  document.write("未成年者の場合は法定代理人の同意が必要です。");
}

このプログラムは、未成年者の場合は法定代理人の同意が必要です。 と表示しますが、1 行目を const age = 20; に変更すると何も表示されなくなります。

2 行目の if (age < 20) { 部分がポイントです。ここに差し掛かると、括弧内の式 age < 20 が評価され、true になります。このため、直後の波括弧内の処理が実行されます。

if 文の基本構造は

if (式) {
  処理;
}

で、式の評価結果が true であれば処理が実行されます。

if ～ else

if ～ else 構文を用いると、条件が満たされなかったときの処理を記述できます。

if (式) {
  処理1;
} else {
  処理2;
}

式の評価結果が true であれば処理 1 が、false であれば処理 2 が実行されます。

const age = 18;
if (age >= 20) {
  document.write("大人です");
} else {
  document.write("子供です");
}

この例では、age >= 20 の評価が false となるので、子供です が表示されます。

if ～ else if ～ else

if ～ else if ～ else 構文を使うと、複数の条件を重ねることができます。

if (式1) {
  処理1;
} else if (式2) {
  処理2;
} else {
  処理3;
}

演習

自分の年齢を変数に入れておきます。

const age = 20;

下を満たすプログラムを作成してください。

• 18 歳未満なら 選挙権はありません と表示する
• 18 歳以上 ～ 25 歳未満なら 投票に行けます と表示する
• 25 歳以上なら 衆議院議員に立候補できます と表示する

解答例: 選挙権

if ～ else if ～ else 構文を使うと、次のように書くことができます。

script.js

const age = 20;
if (age < 18) {
  document.write("選挙権はありません");
} else if (age < 25) {
  document.write("投票に行けます");
} else {
  document.write("衆議院議員に立候補できます");
}

GitHub で表示このプログラムを実行する

4 行目の式は age >= 18 && age < 25 ではないかと思うかもしれませんが、上のように age < 25 としても同じ結果になります。これは、if ～ else if ～ else 構文では、一つ目の条件が満たされた場合、二つ目の条件は実行されないためです。