条件分岐

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構文では、一つ目の条件が満たされた場合、二つ目の条件は実行されないためです。