2025.05.11 2025.05.21

【オウル先生の基礎講座】Vol.3「ループ処理を理解しよう」

progmraming

Contents

繰り返し処理の基本から応用までを解説

先生、ループ処理って難しそう…本当に必要な機能なの？

フォックン

フォックン、ループ処理はプログラミングの世界で時間と労力を大幅に節約できる魔法のような機能なんだ！同じ処理を何度も繰り返す必要がある時に、ループを使えば数行で解決できるよ😊

オウル先生

ループ処理とは

ループ処理とは、特定の処理を繰り返し実行する制御構文のことです。プログラミングにおいて、同じ処理を何度も手作業で書く代わりに、効率的に処理を実行できます。

日常生活で例えると：

10回手を叩く
配列の全要素を順番に表示する
特定の条件を満たすまで何かを繰り返す

これらの繰り返し処理をコードで表現するのがループです。

JavaScriptの主要なループ構文

JavaScriptには主に以下の4種類のループ構文があります：

1. for文（最も基本的なループ）

for (初期化; 条件式; 更新処理) {
  // 繰り返したい処理
}

// 例：1から5まで出力
for (let i = 1; i <= 5; i++) {
  console.log(i);
}
// 出力: 1 2 3 4 5

この構文、ちょっと複雑そうだね…それぞれの部分は何をしてるの？

フォックン

良い質問だね！for文の各部分を詳しく見てみよう：

初期化：let i = 1（最初に1回だけ実行）
条件式：i <= 5（毎回チェック、trueなら継続）
更新処理：i++（1回のループが終わるたびに実行）
この順番で実行されるんだ！

オウル先生

2. while文（条件が満たされる間ループ）

while (条件式) {
  // 条件が真の間繰り返す処理
}

// 例：カウントダウン
let count = 3;
while (count > 0) {
  console.log(count);
  count--;
}
console.log("発射！");
// 出力: 3 2 1 発射！

3. do…while文（最低1回は必ず実行）

do {
  // 必ず1回は実行される処理
} while (条件式);

// 例：ユーザー入力のバリデーション
let userInput;
do {
  userInput = prompt("1から10の数字を入力してください");
} while (userInput < 1 || userInput > 10);

4. for…of文（配列やイテラブルオブジェクトのループ）

for (const 要素 of イテラブル) {
  // 要素ごとの処理
}

// 例：配列の要素を出力
const fruits = ['りんご', 'バナナ', 'みかん'];
for (const fruit of fruits) {
  console.log(`${fruit}が好きです`);
}

for…of文は配列やオブジェクトを扱うときにとても便利だよ。値に直接アクセスできるから、コードがスッキリするんだ！

オウル先生

ループの実践例

配列の操作

// 配列の要素を2倍にする
const numbers = [1, 2, 3, 4, 5];
const doubled = [];

for (let i = 0; i < numbers.length; i++) {
  doubled.push(numbers[i] * 2);
}

console.log(doubled); // [2, 4, 6, 8, 10]

// 現代的な書き方（map関数）
const doubledModern = numbers.map(num => num * 2);

ネストループ（入れ子ループ）

// 九九表を作成
for (let i = 1; i <= 9; i++) {
  let row = '';
  for (let j = 1; j <= 9; j++) {
    row += `${i * j}\t`;
  }
  console.log(row);
}

ネストループって難しそうだけど、こういう時に使うんだね！

フォックン

そうだね！ネストループは2次元データ（表形式）や組み合わせ処理などで活躍するよ。ただし、実行回数がnested levelに応じて指数的に増えるから、パフォーマンスには注意が必要だね。

オウル先生

ループの制御

break文（ループを中断）

// 特定の条件で早期終了
for (let i = 1; i <= 10; i++) {
  if (i === 5) {
    break; // 5に達したら終了
  }
  console.log(i);
}
// 出力: 1 2 3 4

continue文（次の繰り返しにスキップ）

// 偶数だけスキップ
for (let i = 1; i <= 5; i++) {
  if (i % 2 === 0) {
    continue; // 偶数をスキップ
  }
  console.log(i);
}
// 出力: 1 3 5

ループの使い分けガイド

ループ種類	使用シーン	具体例
for文	回数が明確な場合	配列のインデックス処理
while文	条件次第で終了する場合	入力待ち、探索処理
do…while	最低1回実行が必要な場合	初回バリデーション
for…of	配列要素の操作	イテレーション処理

どのループを使えばいいか迷ったらどうすればいいの？

フォックン

まずは繰り返しの目的を明確にすることが大切だね。配列の処理ならfor…of、回数が決まっているならfor、条件ベースならwhileという具合に、状況に応じて選択しよう。チームの規約やコードレビューを通じて経験を積むことも重要だよ！

オウル先生

ループの落とし穴と対策

1. 無限ループ

// 危険な例：終了条件のないループ
while (true) {
  console.log("これは無限に続く..."); // 危険！
}

// 安全な例：適切な終了条件
let attempts = 0;
while (attempts < 10) {
  console.log("試行回数: " + attempts);
  attempts++;
}

2. パフォーマンス問題

// 非効率な例
for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

// 改善例：lengthをキャッシュ
const len = array.length;
for (let i = 0; i < len; i++) {
  console.log(array[i]);
}

パフォーマンスの最適化は場合によって効果が変わるから、実際にベンチマークを取って確認することをおすすめするよ。現代のJavaScriptエンジンは賢いから、基本的な最適化は自動的に行われることが多いんだ。

オウル先生

実践チャレンジ

以下の問題に挑戦してみましょう：

問題1： 1から100までの整数の中で、3の倍数とその和を出力するプログラムを書いてください。

問題2： 2次元配列（行列）の全要素を走査し、その合計値を求めるプログラムを書いてください。

問題3： FizzBuzzを実装してください（1〜50までの整数をループし、3の倍数で”Fizz”、5の倍数で”Buzz”、両方の倍数で”FizzBuzz”を出力）。

// 問題1の解答
let sum = 0;
console.log("3の倍数:");
for (let i = 1; i <= 100; i++) {
  if (i % 3 === 0) {
    console.log(i);
    sum += i;
  }
}
console.log(`合計: ${sum}`);

// 問題2の解答
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
let total = 0;
for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    total += matrix[i][j];
  }
}
console.log(`行列の合計: ${total}`);

// 問題3の解答
for (let i = 1; i <= 50; 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);
  }
}

モダンな配列操作メソッド

JavaScriptには、ループを簡潔に書けるメソッドがあります：

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

// map: 各要素を変換
const squared = numbers.map(n => n ** 2);

// filter: 条件に合う要素を抽出
const evens = numbers.filter(n => n % 2 === 0);

// reduce: 要素を集約
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

// forEach: 副作用を伴う処理
numbers.forEach(n => console.log(n));

これらのメソッドは普通のループと何が違うの？

フォックン

いい質問だね！これらのメソッドは宣言的プログラミングスタイルを促進し、コードをより読みやすく、簡潔にするんだ。特にmap、filter、reduceの組み合わせは強力で、関数型プログラミングの重要な基礎となっているよ。

オウル先生