JavaScript の else および else if 文

1. else ステートメント

else ステートメントを使用すると、if 文の条件が false（偽） であった場合に実行するコードブロックを指定できます。

1.1 構文（Syntax）

if (条件) {
  // 条件が true の場合に実行されるコードブロック
} else {
  // 条件が false の場合に実行されるコードブロック
}

1.2 基本的な例

「時刻が 18:00 未満であれば "Good day" と表示し、それ以外（18:00 以降）であれば "Good evening" と表示する」処理は以下の通りです。

if (hour < 18) {
  greeting = "こんにちは";
} else {
  greeting = "こんばんは";
}

2. else if ステートメント

else if ステートメントを使用すると、最初の条件が false だった場合に、新しい条件を追加して判定を行うことができます。

2.1 else if の構文

if (条件1) {
  // 条件1が true の場合に実行されるコードブロック
} else if (条件2) {
  // 条件1が false で、かつ条件2が true の場合に実行されるコードブロック
} else {
  // 条件1も条件2も false の場合に実行されるコードブロック
}

2.2 複数の条件分岐の例

「時刻が 10:00 未満なら "Good morning"、10:00 以上 20:00 未満なら "Good day"、それ以外なら "Good evening"」と表示する場合のロジックです。

if (time < 10) {
  greeting = "おはようございます";
} else if (time < 20) {
  greeting = "こんにちは";
} else {
  greeting = "こんばんは";
}

2.3 実践例：ランダムなリンクの生成

この例では、乱数を用いて「Volardev」または「世界自然保護基金（WWF）」へのリンクを 50% の確率で生成します。

let text;
// Math.random() は 0 以上 1 未満の数値を返す
if (Math.random() < 0.5) {
  text = "<a href='https://volardev.com'>Volardev を訪問する</a>";
} else {
  text = "<a href='https://wwf.org'>WWF を訪問する</a>";
}

// id="demo" を持つ要素に結果を出力
document.getElementById("demo").innerHTML = text;