JavaScript | if文（条件分岐）

JavaScript

2020.07.192025.10.25

JavaScript の if 文の基本を、初心者向けにやさしく解説

JavaScript の if 文の基本を、初心者向けにやさしく解説

プログラミングは「状況によって動きを変える」ことが大事です。if 文はその入り口。怖がらずに、手で動かしながら覚えましょう。

if 文ってなに？

役割: 条件をチェックして、成り立つときだけ処理を実行する。
動き: 条件が true（正しい）なら実行、false（正しくない）ならスキップ。

if (条件式) {
  // 条件が true のときにだけ実行される
}

if (条件式) {
  // 条件が true のときにだけ実行される
}

JavaScript

例題（気温で上着を着るか判断）:

let temperature = 12;

if (temperature < 15) {
  console.log("上着を着よう");
}

let temperature = 12;

if (temperature < 15) {
  console.log("上着を着よう");
}

JavaScript

ポイント: 比較には <, >, <=, >=, ===, !== をよく使います。

if…else 文で「どっちか」を選ぶ

役割: 条件が true のときと false のとき、どちらでも必ず何かをする。

if (条件式) {
  // true のとき
} else {
  // false のとき
}

if (条件式) {
  // true のとき
} else {
  // false のとき
}

JavaScript

例題（合格判定）:

let score = 70;

if (score >= 70) {
  console.log("合格です");
} else {
  console.log("不合格です");
}

let score = 70;

if (score >= 70) {
  console.log("合格です");
} else {
  console.log("不合格です");
}

JavaScript

ポイント: 「AならB、そうでなければC」と覚えるとわかりやすい。

else if で「複数の条件」を順番に試す

役割: 上から順番にチェックして、最初に当てはまったものだけ実行。

if (条件1) {
  // 条件1がtrue
} else if (条件2) {
  // 条件2がtrue
} else {
  // どれにも当てはまらないとき
}

if (条件1) {
  // 条件1がtrue
} else if (条件2) {
  // 条件2がtrue
} else {
  // どれにも当てはまらないとき
}

JavaScript

例題（成績のランク分け）:

let score = 83;

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

let score = 83;

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

JavaScript

ポイント: 条件は「広い→狭い」ではなく「狭い→広い」だと誤判定になります。上の例は「高い点から順に」チェックしているのでOK。

波括弧 {} の省略と注意点

役割: 実行する処理が1行なら {} を省略できる。
おすすめ: 初心者は原則 {} を付ける。読みやすく、ミスが減る。
省略例:

let isMember = true;
if (isMember) console.log("会員割引を適用");
else console.log("通常価格です");

let isMember = true;
if (isMember) console.log("会員割引を適用");
else console.log("通常価格です");

JavaScript

罠: 2行以上あるのに省略すると、意図しない動きになります。

// 悪い例（意図せず1行しかifに含まれない）
if (isMember)
  console.log("会員です");
  console.log("割引を適用"); // ← これは常に実行される

// 悪い例（意図せず1行しかifに含まれない）
if (isMember)
  console.log("会員です");
  console.log("割引を適用"); // ← これは常に実行される

JavaScript

よく使う条件の書き方

等しい（数値や厳密比較）:

if (age === 18) { ... } // 厳密に同じ

if (age === 18) { ... } // 厳密に同じ

JavaScript

等しくない:

if (age !== 18) { ... }

if (age !== 18) { ... }

JavaScript

範囲チェック:

if (age >= 0 && age <= 120) { ... } // かつ（AND）

if (age >= 0 && age <= 120) { ... } // かつ（AND）

JavaScript

いずれかならOK:

if (color === "red" || color === "blue") { ... } // または（OR）

if (color === "red" || color === "blue") { ... } // または（OR）

JavaScript

真偽値をそのまま使う:

if (isLoggedIn) { ... } // true/falseの変数を直接

if (isLoggedIn) { ... } // true/falseの変数を直接

JavaScript

具体例で手を動かす

例1：送料の判定

ルール: 3000円以上で送料無料、それ以外は一律500円。

let total = 2800;

if (total >= 3000) {
  console.log("送料無料");
} else {
  console.log("送料500円");
}

let total = 2800;

if (total >= 3000) {
  console.log("送料無料");
} else {
  console.log("送料500円");
}

JavaScript

例2：朝の行動分岐

ルール: 雨なら傘、強風なら帽子はやめる、どちらでもなければ散歩。

let isRain = true;
let isWindy = false;

if (isRain) {
  console.log("傘を持っていく");
} else if (isWindy) {
  console.log("帽子はやめておこう");
} else {
  console.log("散歩に行こう");
}

let isRain = true;
let isWindy = false;

if (isRain) {
  console.log("傘を持っていく");
} else if (isWindy) {
  console.log("帽子はやめておこう");
} else {
  console.log("散歩に行こう");
}

JavaScript

例3：ログインメッセージ

ルール: ログイン済みなら名前を表示、未ログインならゲストを表示。

let isLoggedIn = false;
let userName = "Sato";

if (isLoggedIn) {
  console.log(`ようこそ、${userName}さん`);
} else {
  console.log("ゲストとして閲覧中");
}

let isLoggedIn = false;
let userName = "Sato";

if (isLoggedIn) {
  console.log(`ようこそ、${userName}さん`);
} else {
  console.log("ゲストとして閲覧中");
}

JavaScript

初心者がつまずきやすいポイント

代入と比較の混同:

// 間違い：= は代入、=== が比較
if (x = 1) { ... } // ← xに1を代入してしまう
// 正しくは
if (x === 1) { ... }

// 間違い：= は代入、=== が比較
if (x = 1) { ... } // ← xに1を代入してしまう
// 正しくは
if (x === 1) { ... }

JavaScript

条件の順番ミス:

// 悪い例（広い条件が先で、狭い条件に到達しない）
if (score >= 70) {
  console.log("合格");
} else if (score >= 90) {
  console.log("特別合格"); // ここには絶対に来ない
}

// 悪い例（広い条件が先で、狭い条件に到達しない）
if (score >= 70) {
  console.log("合格");
} else if (score >= 90) {
  console.log("特別合格"); // ここには絶対に来ない
}

JavaScript

文字列と数値の混在:

let input = "10"; // 文字列
if (input >= 10) { // 数値比較のつもり
  console.log("OK?");
}
// 厳密には型に注意。必要なら Number(input) に変換。

let input = "10"; // 文字列
if (input >= 10) { // 数値比較のつもり
  console.log("OK?");
}
// 厳密には型に注意。必要なら Number(input) に変換。

JavaScript

練習問題（自分で書いて、実行してみよう）

映画の料金判定:
- ルール: 高校生以下は1000円、大学生は1200円、大人は1500円。
- ヒント: 年齢と在学区分（”高校”, “大学”, “社会人”など）を使う。
アラームの文言:
- ルール: 平日で7:00前なら「早起き」、7:00以降なら「通常」、休日なら「おやすみ」。
- ヒント: 曜日フラグ（isWeekend）と時刻（hour）で分岐。
パスワード強度チェック:
- ルール: 8文字以上かつ数字を含むなら「強い」、8文字未満なら「弱い」、それ以外は「普通」。
- ヒント: length と includes() を使う。

解答例と解説

① 映画の料金判定

問題: 高校生以下は1000円、大学生は1200円、大人は1500円。

解答例

let category = "大学生"; // "高校生", "大学生", "社会人" など

if (category === "高校生") {
  console.log("料金は1000円です");
} else if (category === "大学生") {
  console.log("料金は1200円です");
} else {
  console.log("料金は1500円です");
}

let category = "大学生"; // "高校生", "大学生", "社会人" など

if (category === "高校生") {
  console.log("料金は1000円です");
} else if (category === "大学生") {
  console.log("料金は1200円です");
} else {
  console.log("料金は1500円です");
}

JavaScript

解説

=== は「厳密に等しい」比較。文字列の一致を確認するのに使います。
条件を上から順にチェックし、最初に当てはまったものだけ実行されます。
else は「どれにも当てはまらなかった場合」の処理。

② アラームの文言

問題: 平日で7:00前なら「早起き」、7:00以降なら「通常」、休日なら「おやすみ」。

解答例

let isWeekend = false; // trueなら休日、falseなら平日
let hour = 6; // 時刻（0〜23）

if (isWeekend) {
  console.log("おやすみ");
} else if (hour < 7) {
  console.log("早起き");
} else {
  console.log("通常");
}

let isWeekend = false; // trueなら休日、falseなら平日
let hour = 6; // 時刻（0〜23）

if (isWeekend) {
  console.log("おやすみ");
} else if (hour < 7) {
  console.log("早起き");
} else {
  console.log("通常");
}

JavaScript

解説

まず「休日かどうか」を最優先で判定。
平日なら次に「7時より前かどうか」をチェック。
それ以外は「通常」として処理。
条件の順番を工夫することで、シンプルに書けます。

③ パスワード強度チェック

問題:

8文字以上かつ数字を含む → 「強い」
8文字未満 → 「弱い」
それ以外 → 「普通」

解答例

let password = "abc12345";

// 数字を含むかどうかをチェック
let hasNumber = password.includes("0") || password.includes("1") ||
                password.includes("2") || password.includes("3") ||
                password.includes("4") || password.includes("5") ||
                password.includes("6") || password.includes("7") ||
                password.includes("8") || password.includes("9");

if (password.length < 8) {
  console.log("弱い");
} else if (hasNumber) {
  console.log("強い");
} else {
  console.log("普通");
}

let password = "abc12345";

// 数字を含むかどうかをチェック
let hasNumber = password.includes("0") || password.includes("1") ||
                password.includes("2") || password.includes("3") ||
                password.includes("4") || password.includes("5") ||
                password.includes("6") || password.includes("7") ||
                password.includes("8") || password.includes("9");

if (password.length < 8) {
  console.log("弱い");
} else if (hasNumber) {
  console.log("強い");
} else {
  console.log("普通");
}

JavaScript

解説

password.length で文字数を取得。
includes() で文字列に特定の文字が含まれているかを判定。
まず「8文字未満」をチェック → それ以外なら「数字を含むかどうか」で分岐。
実際には正規表現（/\d/）を使うともっとスマートに書けますが、初心者向けにわかりやすい形にしました。

まとめ

if 文は「条件を順番に試す」仕組み。
条件の順番を工夫すると、コードが読みやすくなる。
=== や length、includes() などの基本的なメソッドを組み合わせると、実用的な判定ができる。

月	火	水	木	金	土	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31