JavaScriptの条件分岐とループ処理

今回のゴール

• 条件分岐 を使って、状況に応じた処理ができる
• ループ処理 を使って繰り返し処理ができる

条件分岐とは？

プログラムは、状況に応じて異なる処理を実行する必要があります。

• 「ユーザーがログインしているなら、ログアウトボタンを表示する」
• 「入力値が空なら、エラーメッセージを表示する」
• 「スコアが60点以上なら合格、そうでなければ不合格を表示する」

このような 「もし〜なら、〇〇する」 という判断をプログラムで表現するのが 条件分岐 です。

if ... else 文（基本形）

if...else 文は、最も基本的な条件分岐の構文です。

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

条件式が true（真）か false（偽）かによって、実行されるコードが変わります。

if ... else 文の例

const hour = 14;

if (hour < 12) {
  console.log("おはようございます");
} else {
  console.log("こんにちは");
}
// 出力: "こんにちは"

hour が 12 より小さければ「おはよう」、そうでなければ「こんにちは」と表示されます。

else を省略する

else 部分は省略することもできます。

const score = 85;

if (score >= 80) {
  console.log("合格です！おめでとう！");
}
// 出力: "合格です！おめでとう！"

条件に一致した場合だけ処理を実行したいときは、else を書かなくても大丈夫です。

else if で複数の条件を判定

3つ以上の選択肢がある場合は、else if を使います。
条件は上から順番に評価され、最初に true になったブロックだけが実行されます。

const score = 75;

if (score >= 90) {
  console.log("評価: A");
} else if (score >= 80) {
  console.log("評価: B");
} else if (score >= 70) {
  console.log("評価: C");
} else {
  console.log("評価: D");
}
// 出力: "評価: C"

比較演算子とは

条件式を作るために使う記号を比較演算子と呼びます。

比較演算子の例

const price = 500;

console.log(price === 500);  // true（等しい）
console.log(price !== 300);  // true（等しくない）
console.log(price > 400);    // true（より大きい）
console.log(price < 400);    // false（より小さい）
console.log(price >= 500);   // true（以上）
console.log(price <= 600);   // true（以下）

比較演算子の結果は、必ず true か false になります。

== と === の違い（重要！）

== と === は似ていますが、動作が異なります。

console.log(5 == "5");   // true（値だけを比較）
console.log(5 === "5");  // false（値と型を比較）

console.log(0 == false);   // true
console.log(0 === false);  // false

=== は厳密等価演算子と呼ばれ、値と型の両方が一致するかをチェックします。
基本的には === を使いましょう。予期しないバグを防げます。

論理演算子とは

複数の条件を組み合わせるときに使う記号を論理演算子と呼びます。

論理演算子 AND (&&)

&& は、すべての条件が true のときに true を返します。

const age = 25;
const hasLicense = true;

// 年齢が18以上 かつ 免許を持っている場合
if (age >= 18 && hasLicense) {
  console.log("運転できます");
} else {
  console.log("運転できません");
}
// 出力: "運転できます"

論理演算子 OR (||)

|| は、どれか一つでも true なら true を返します。

const day = "日曜日";

// 土曜日 または 日曜日の場合
if (day === "土曜日" || day === "日曜日") {
  console.log("今日は休日です");
} else {
  console.log("今日は平日です");
}
// 出力: "今日は休日です"

論理演算子 NOT (!)

! は、true と false を反転させます。

const isLoggedIn = false;

// ログインしていない場合
if (!isLoggedIn) {
  console.log("ログインしてください");
}
// 出力: "ログインしてください"

!isLoggedIn は !false なので true になります。

論理演算子を組み合わせる

複数の論理演算子を組み合わせることもできます。

const age = 16;
const hasParentConsent = true;

// 18歳以上、または（16歳以上 かつ 保護者の同意がある）
if (age >= 18 || (age >= 16 && hasParentConsent)) {
  console.log("参加できます");
} else {
  console.log("参加できません");
}
// 出力: "参加できます"

括弧 () を使って、条件の優先順位を明確にしましょう。

switch 文とは

一つの値に対して複数の選択肢がある場合、switch 文が便利です。

switch (式) {
  case 値1:
    // 式が値1の場合に実行
    break;
  case 値2:
    // 式が値2の場合に実行
    break;
  default:
    // どれにも一致しない場合に実行
}

switch 文の例

const fruit = "りんご";

switch (fruit) {
  case "りんご":
    console.log("赤い果物です");
    break;
  case "バナナ":
    console.log("黄色い果物です");
    break;
  case "ぶどう":
    console.log("紫の果物です");
    break;
  default:
    console.log("不明な果物です");
}
// 出力: "赤い果物です"

break を忘れると...

break を書き忘れると、次の case も実行されてしまいます。

const fruit = "りんご";

switch (fruit) {
  case "りんご":
    console.log("赤い果物です");
    // break を忘れた！
  case "バナナ":
    console.log("黄色い果物です");
    break;
}
// 出力: "赤い果物です"
// 出力: "黄色い果物です" ← 意図しない動作！

break を忘れずに書きましょう。

switch 文と if...else の使い分け

// switch が適している例
switch (dayOfWeek) {
  case 1: console.log("月曜日"); break;
  case 2: console.log("火曜日"); break;
  // ...
}

// if...else が適している例
if (score >= 80) { /* ... */ }

(迷ったら if...else で良い)

三項演算子とは

単純な if...else によって値を切り替える処理を1行で書ける書き方です。

// 通常の if...else
let message;
if (age >= 18) {
  message = "成人です";
} else {
  message = "未成年です";
}

// 三項演算子で書くと
const message = age >= 18 ? "成人です" : "未成年です";

条件 ? trueの場合の値 : falseの場合の値 という形式です。

三項演算子の使いどころ

条件分岐によって変数の値を定めたい場合、let ではなく const で値を宣言できるため保守性が上がります。

const greeting = hour < 12 ? "おはようございます" : "こんにちは";

上記のようにシンプルな条件で値を決めたい場合には便利ですが、複雑な条件になると可読性は下がります。

const score = 85;
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "D";

ループ処理とは？

同じ処理を繰り返し実行することをループ処理と呼びます。

例: (ループ処理を使わないで) 1から5までの数字を表示する

// ループを使わない場合
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

例: ループ処理を使って上記の処理を書いた場合

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

for...of ループ

配列の各要素に対して処理を行うときは、for...of ループが便利です。

const fruits = ["りんご", "バナナ", "みかん"];

for (const fruit of fruits) {
  console.log(fruit);
}
// 出力:
// りんご
// バナナ
// みかん

配列の要素が順番に fruit に代入され、処理が繰り返されます。
(1回目: りんご, 2回目: バナナ, 3回目: みかん)

標準的な for ループ

決まった回数だけ処理を繰り返したいときは、標準的な for ループを使います。

for (let i = 0; i < 5; i++) {
  console.log(i);
}
// 出力: 0, 1, 2, 3, 4

for ループで配列を処理

const numbers = [10, 20, 30];

for (let i = 0; i < numbers.length; i++) {
  console.log(`index ${i}: ${numbers[i]}`);
}
// 出力:
// index 0: 10
// index 1: 20
// index 2: 30

配列の値だけ必要な場合は for...of ループの使用が推奨されますが、配列のインデックスにアクセスしたい場合は、for ループが便利です。

break でループを終了

break を使うと、ループを途中で終了できます。

const numbers = [1, 2, 3, 4, 5];

for (const num of numbers) {
  if (num === 3) {
    console.log("3を見つけた！ループを終了");
    break;
  }
  console.log(num);
}
// 出力:
// 1
// 2
// 3を見つけた！ループを終了

continue で繰り返しをスキップ

continue を使うと、現在の繰り返しをスキップして次に進めます。

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;  // 3はスキップ
  }
  console.log(i);
}
// 出力:
// 1
// 2
// 4
// 5

break はループ全体を終了、continue は今回の繰り返しだけをスキップします。

while ループ

while ループは、条件が true の間、繰り返し処理を実行します。

let count = 0;

while (count < 3) {
  console.log(`カウント: ${count}`);
  count++;
}
// 出力:
// カウント: 0
// カウント: 1
// カウント: 2

while(true) と break

while(true) で無限ループを作り、条件が満たされたときに break でループを抜く書き方もできます。

// ユーザーが「終了」と入力するまで繰り返す
while (true) {
  const input = prompt("何か入力してください（終了するには「終了」と入力）:");
  
  if (input === "終了") {
    break;  // ループを抜ける
  }
  
  console.log(`入力された内容: ${input}`);
}

for と while の使い分け

Arrayインスタンスのメソッド: forEach

Arrayインスタンスの forEach メソッドは、配列の各要素に対して関数を実行することで、ループ処理と同等の操作が実施できます。

const animals = ["犬", "猫", "鳥"];

function showAnimal (animal) {
  console.log(animal);
}
animals.forEach(showAnimal);
// 出力:
// 犬
// 猫
// 鳥

無名関数とアロー関数

forEach に関数を渡す場合、無名関数やアロー関数を使うと便利です (無名関数、アロー関数の詳細は別のスライドで紹介します)

• 無名関数: 名前のない関数を定義して使う

const prices = [100, 200, 300];

prices.forEach(function(price) {
  console.log(`${price}円`);
});

• アロー関数: 関数の記述方法をより簡素にできる

// アロー関数（省略形）
prices.forEach((price) => {
  console.log(`${price}円`);
});

forEach でインデックスを取得

forEach では、第2引数でインデックスを取得できます。

const subjects = ["国語", "数学", "英語"];

subjects.forEach((subject, index) => {
  console.log(`${index + 1}番目: ${subject}`);
});
// 出力:
// 1番目: 国語
// 2番目: 数学
// 3番目: 英語

(参考) Arrayインスタンスのメソッド: map

map は、配列の各要素に関数の処理を行い、その結果から新しい配列を作ります。

const numbers = [1, 2, 3, 4, 5];

// 各要素を2倍にした新しい配列を作成
const doubled = numbers.map((num) => {
  return num * 2;
});

console.log(doubled);  // [2, 4, 6, 8, 10]
console.log(numbers);  // [1, 2, 3, 4, 5] ← 元の配列は変わらない

(参考) Arrayインスタンスのメソッド: filter

filter は、条件に一致する要素だけを抽出して新しい配列を作ります。

const ages = [15, 22, 18, 30, 12];

// 18歳以上の要素だけを抽出
const adults = ages.filter((age) => {
  return age >= 18;
});

console.log(adults);  // [22, 18, 30]
console.log(ages);    // [15, 22, 18, 30, 12] ← 元の配列は変わらない

オブジェクトをループで回す

for...in というループ処理もあり、オブジェクトのプロパティに対するループ処理をかけます。

const person = { name: '太郎', age: 20 };
for (const key in person) {
  console.log(key + ': ' + person[key]); // 'name: 太郎', 'age: 20' が順に出力される
}

また、オブジェクトには keys(), values(), entries() というキーや値を配列で返すメソッドがあります。これを用いて配列と同じループ処理を行えます。

const person = { name: '太郎', age: 20 };
for (const [key, value] of Object.entries(person)) {
  console.log(key + ': ' + value); // 'name: 太郎', 'age: 20' が順に出力される
}

まとめ

• if...else, switch で条件に応じて異なる処理を実行できる
• 三項演算子で単純な条件分岐によって値を切り替える処理を1行で書ける
• 比較演算子 (===, !==, >, <, >=, <=) や論理演算子 (&&, ||, !) を使って条件式が書ける
• for...of や for ループ、while で繰り返し処理が書ける
• break でループを途中終了でき、continue で1回スキップできる
• Arrayのインスタンスメソッド (forEach, map, filter など) でも配列に対するループ処理が書ける
• for..in やオブジェクトの keys(), values(), entries() を使ってオブジェクトに対するループ処理が書ける

さらに学ぶには

• コードでの意思決定 — 条件文 (MDN)
• ループするコード (MDN)
• if...else リファレンス (MDN)
• switch リファレンス (MDN)
• for...of リファレンス (MDN)
• Array.prototype.forEach() (MDN)
• for...in文
• Object.entries()