JavaScript入門 #7 - if文と条件分岐

入門 | 10分 で読める | 2026.06.14

公式ドキュメント
実演JavaScript条件分岐

このシリーズについて

「JavaScript入門」第7回です。今回は、条件によって実行する処理を変える方法を学びます。

if文とは

if は、条件が true の時だけ処理を実行する構文です。

const score = 80;

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

条件式の結果は、最終的に true または false として判定されます。

Step 1: if / elseを使う

条件に合う場合と合わない場合で処理を分けます。

const age = 18;

if (age >= 18) {
  console.log("利用できます");
} else {
  console.log("保護者の確認が必要です");
}

else は、どの条件にも当てはまらなかった時に実行されます。

Step 2: else ifで複数条件を書く

点数によって表示を変えてみます。

const score = 82;

if (score >= 90) {
  console.log("A");
} else if (score >= 70) {
  console.log("B");
} else if (score >= 50) {
  console.log("C");
} else {
  console.log("再提出");
}

上から順番に判定され、最初に一致したブロックだけが実行されます。

Step 3: 論理演算子を使う

複数の条件を組み合わせます。

const userName = "taro";
const password = "secret";

if (userName === "taro" && password === "secret") {
  console.log("ログイン成功");
} else {
  console.log("ログイン失敗");
}
演算子意味例
&&かつ両方trueならtrue
``
!ではないtrue/falseを反転

Step 4: switchを使う

同じ値に対する分岐が多い時は switch も使えます。

const role = "editor";

switch (role) {
  case "admin":
    console.log("管理者です");
    break;
  case "editor":
    console.log("編集者です");
    break;
  default:
    console.log("一般ユーザーです");
}

break を忘れると次の case も続けて実行されます。

注意: switch では break の書き忘れに注意します。意図的でない限り、各caseの最後に書きます。

練習

condition.js を作り、購入金額によって送料を出します。

const totalPrice = 2800;

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

よくあるエラー

エラーよくある原因確認する場所
常に同じ結果になる= と === を間違えた条件式
分岐が実行されない条件の順番が逆大きい条件を先に書いていないか
switchが複数実行されるbreak 忘れ各caseの末尾

次のステップ

JavaScript入門 #8 - for文とwhile文 で、同じ処理を繰り返す方法を学びます。

まとめ

条件分岐では、条件式が true か false かを意識します。if / else if / else を基本にし、同じ値の分岐が多い時だけ switch を検討します。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR