チュートリアル

JavaScript基礎：条件分岐とループ

JavaScript
JavaScript入門制御構文
広告エリア

条件分岐

if文

const age = 20;

if (age >= 20) {
  console.log("成人です");
} else if (age >= 13) {
  console.log("ティーンエイジャーです");
} else {
  console.log("子供です");
}

三項演算子

const age = 20;
const status = age >= 20 ? "成人" : "未成年";
console.log(status);  // "成人"

// ネストも可能（読みにくいので注意）
const category = age >= 20 ? "成人" : age >= 13 ? "10代" : "子供";

switch文

const fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("りんご");
    break;
  case "banana":
    console.log("バナナ");
    break;
  case "orange":
    console.log("オレンジ");
    break;
  default:
    console.log("不明な果物");
}

// breakを省略すると次のcaseも実行される（フォールスルー）
const month = 3;
switch (month) {
  case 3:
  case 4:
  case 5:
    console.log("春");
    break;
  case 6:
  case 7:
  case 8:
    console.log("夏");
    break;
  // ...
}

真偽値への変換

JavaScriptでは以下の値がfalseとして扱われます（Falsy値）。

// Falsy値
if (!false) console.log("false");
if (!0) console.log("0");
if (!"") console.log("空文字列");
if (!null) console.log("null");
if (!undefined) console.log("undefined");
if (!NaN) console.log("NaN");

// それ以外はTruthy
if ([]) console.log("空配列はtrue");
if ({}) console.log("空オブジェクトはtrue");
if ("0") console.log("文字列の0はtrue");

ループ

for文

// 基本形
for (let i = 0; i < 5; i++) {
  console.log(i);  // 0, 1, 2, 3, 4
}

// 逆順
for (let i = 4; i >= 0; i--) {
  console.log(i);  // 4, 3, 2, 1, 0
}

// 2ずつ増加
for (let i = 0; i < 10; i += 2) {
  console.log(i);  // 0, 2, 4, 6, 8
}

for…of（配列の要素を反復）

const fruits = ["apple", "banana", "orange"];

for (const fruit of fruits) {
  console.log(fruit);
}
// apple, banana, orange

// インデックスも必要な場合
for (const [index, fruit] of fruits.entries()) {
  console.log(`${index}: ${fruit}`);
}

for…in（オブジェクトのキーを反復）

const user = { name: "太郎", age: 25, city: "東京" };

for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}
// name: 太郎
// age: 25
// city: 東京

while文

let count = 0;

while (count < 5) {
  console.log(count);
  count++;
}
// 0, 1, 2, 3, 4

do…while文

let count = 0;

do {
  console.log(count);
  count++;
} while (count < 5);
// 最低1回は実行される

break と continue

// break - ループを終了
for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i);  // 0, 1, 2, 3, 4
}

// continue - 次のイテレーションへ
for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i);  // 0, 1, 3, 4
}

// ラベル付きbreak（ネストしたループを抜ける）
outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) break outer;
    console.log(i, j);
  }
}

配列のメソッド（ループの代替）

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

// forEach - 各要素に対して処理
numbers.forEach((num, index) => {
  console.log(`${index}: ${num}`);
});

// map - 変換して新しい配列を作成
const doubled = numbers.map(num => num * 2);
console.log(doubled);  // [2, 4, 6, 8, 10]

// filter - 条件に合う要素を抽出
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens);  // [2, 4]

// find - 条件に合う最初の要素
const found = numbers.find(num => num > 3);
console.log(found);  // 4

// some - 条件を満たす要素が1つでもあるか
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven);  // true

// every - 全ての要素が条件を満たすか
const allPositive = numbers.every(num => num > 0);
console.log(allPositive);  // true

// reduce - 集約
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum);  // 15

実践例

// FizzBuzz
for (let i = 1; i <= 15; i++) {
  if (i % 15 === 0) {
    console.log("FizzBuzz");
  } else if (i % 3 === 0) {
    console.log("Fizz");
  } else if (i % 5 === 0) {
    console.log("Buzz");
  } else {
    console.log(i);
  }
}

// 配列から最大値を見つける
const scores = [85, 92, 78, 96, 88];
let max = scores[0];
for (const score of scores) {
  if (score > max) {
    max = score;
  }
}
console.log(max);  // 96

// または
console.log(Math.max(...scores));  // 96

まとめ

  • if-elseで条件分岐、switchで複数の値を比較
  • for...ofで配列を、for...inでオブジェクトを反復
  • breakでループを抜け、continueで次へスキップ
  • 配列メソッド（map, filter, reduce）がよく使われる

次回は関数について学びます。

広告エリア