【6日でできるJavaScript入門】条件分岐①
プログラムの中で「ある条件を満たすかどうか」によって処理を切り替えるのが条件分岐です。JavaScriptでは主にif文を使って実現し、ユーザーの入力やデータの値に応じて異なるメッセージや動作を表示します。この「条件分岐①」では、if文の基本から文字列を使った条件、elseを組み合わせた二分岐までを学びます。
１．条件分岐とは？
条件分岐は、プログラムに「○○ならばこの処理を、そうでなければ別の処理を」という判断をさせる構造です。
| 用語 | 説明 |
|---|---|
| 真 (true) | 条件を満たす状態 |
| 偽 (false) | 条件を満たさない状態 |
| 条件式 | 真偽を判定する式（比較演算子など） |
1.1. 例示：年齢判定
age >= 20 ? “成人です” : “未成年です”1.2. 条件分岐のメリット
- 一つのコードで複数のケースに対応
- 入力に応じた動的な画面表示が可能
２．if文の記述方法
基本構文は以下の通りです。
if (条件式) {
// 条件式がtrueのとき実行
}| 構文要素 | 例 | 説明 |
|---|---|---|
| 条件式 | age >= 20 | 比較演算子を用いて真偽を判定 |
| 本文 | alert('…') | 条件を満たす場合の処理 |
2.1. サンプルHTML：年齢によるメッセージ
ファイル名： lesson14-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>🎂 年齢チェック</title>
</head>
<body>
<h1>🎂 あなたの年齢は？</h1>
<button onclick="checkAge(15)">15歳</button>
<button onclick="checkAge(20)">20歳</button>
<button onclick="checkAge(25)">25歳</button>
<button onclick="checkAge(30)">30歳</button>
<div id="result"></div>
<script>
function checkAge(age) {
if (age >= 20) {
document.getElementById('result').textContent = '成人です。';
}
}
</script>
</body>
</html>ブラウザの出力例
20歳以上をクリックすると「成人です。」と表示されますが、不具合があります。この不具合は、この後、紹介する修正版で改善されます。
2.2. 比較演算子
| 演算子 | 意味 | 例 |
|---|---|---|
== | 等しい | x == y |
!= | 等しくない | x != y |
> | より大きい | x > y |
< | より小さい | x < y |
>= | 以上 | x >= y |
<= | 以下 | x <= y |
３．文字の条件式
文字列を条件に使う場合は、シングルまたはダブルクォートで囲みます。
if (color == '赤') {
// 色が「赤」の場合
}3.1. サンプルHTML：カラー判定
<!-- HTML省略 -->
<button onclick="checkColor('赤')">赤</button>
<button onclick="checkColor('青')">青</button>
<script>
function checkColor(color) {
if (color == '赤') {
alert('ストップ！');
}
}
</script>４．if ～ else で2つに分岐
else を付けると、条件を満たさない場合の処理も記述できます。
if (条件式) {
// true の処理
} else {
// false の処理
}4.1. サンプルHTML：年齢チェック改良版
ファイル名： lesson14-2.html
正しく、成人判定が行えるようになります。
<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>👶 年齢チェック②</title></head>
<body>
<h1>👶 あなたの年齢は？</h1>
<button onclick="checkAge(15)">15歳</button>
<button onclick="checkAge(20)">20歳</button>
<button onclick="checkAge(25)">25歳</button>
<button onclick="checkAge(30)">30歳</button>
<div id="result"></div>
<script>
function checkAge(age) {
const el = document.getElementById('result');
if (age >= 20) {
el.textContent = '成人です。';
} else {
el.textContent = '未成年です。';
}
}
</script>
</body>
</html>ブラウザの出力例
15歳→「未成年です」、25歳→「成人です」
まとめ
- 条件分岐は
if (条件式)で開始 - 文字列条件はクォート必須
elseで偽の処理にも対応
次回は複雑な分岐を実現する else if やswitchを学びましょう。