第6回 ループ（for, while, do-while）

プログラミングにおいて、ループは特定の処理を何度も繰り返し実行するための基本的な構文です。大量のデータを処理したり、同じ操作を複数回行う場合に不可欠です。ループを活用することで、コードの冗長性を減らし、効率的なプログラムを作成できます。

for文の基本構文

for文は、繰り返し回数が明確な場合に最もよく使用されるループ構文です。

基本構文：

for (初期化; 条件式; 増減式) {
  // 繰り返し実行するコード
}

• 初期化はループカウンタの初期値を設定します
• 条件式はループを続行する条件を指定します
• 増減式はループカウンタを更新します

for文の実例

配列のループ処理

配列内の要素を順番に処理する場合、for文が非常に便利です。

例

let fruits = ['りんご', 'バナナ', 'オレンジ'];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// 出力結果
// りんご
// バナナ
// オレンジ

多重ループ（ネストされたループ）

ループの中に別のループを入れることで、多次元のデータを処理できます。

例

let matrix = [
  [1, 2],
  [3, 4]
];

for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(`matrix[${i}][${j}] = ${matrix[i][j]}`);
  }
}

// 出力結果
// matrix[0][0] = 1
// matrix[0][1] = 2
// matrix[1][0] = 3
// matrix[1][1] = 4

while文の基本構文

while文は、指定した条件が真である間、コードを繰り返し実行します。

基本構文

while (条件式) {
  // 繰り返し実行するコード
}

while文の実例

条件に基づく繰り返し処理

ユーザーの入力や外部条件に基づいてループを続行する場合に使用します。

例

let count = 0;

while (count < 5) {
  console.log(`カウントは${count}`);
  count++;
}

// 出力結果
// カウントは0
// カウントは1
// カウントは2
// カウントは3
// カウントは4

do…while文の基本構文

do...while文は、少なくとも一度はコードを実行し、その後条件式を評価します。

基本構文

do {
  // 最低一度は実行されるコード
} while (条件式);

do…while文の実例

ユーザー入力の再試行など

ユーザーが正しい入力をするまで繰り返す場合に適しています。

例

let input;

do {
  input = prompt('0から9の数字を入力してください');
} while (isNaN(input) || input < 0 || input > 9);

console.log(`入力された数字は${input}です`);

breakとcontinueによるループ制御

ループの中断と次のイテレーションへのスキップ

• 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

ループの使い分け

for文、while文、do…while文の選択基準

• for文は繰り返し回数が明確な場合に使用します
• while文は繰り返し回数が不明で、特定の条件が満たされるまでループを続行したい場合に適しています
• do…while文は条件に関わらず、少なくとも一度はコードを実行したい場合に使用します

ループのパフォーマンス最適化

効率的なループの書き方

• 条件式を簡潔にすると複雑な条件式はパフォーマンスを低下させます
• ループ内での計算を最小限にするとループ外で計算できるものは事前に計算します

例

let array = [/* 大量のデータ */];
let length = array.length; // ループ外で配列の長さを取得

for (let i = 0; i < length; i++) {
  // 処理
}

for…in文とfor…of文

ES6以降の新しいループ構文

• for…in文はオブジェクトの列挙可能なプロパティを反復処理します
• for…of文は反復可能なオブジェクト（配列、文字列など）の値を反復処理します

例：for…in

let obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
  console.log(`${key} - ${obj[key]}`);
}

// 出力結果
// a - 1
// b - 2
// c - 3

例：for…of

let numbers = [10, 20, 30];

for (let num of numbers) {
  console.log(num);
}

// 出力結果
// 10
// 20
// 30

無限ループの注意点

無限ループの原因と防止策

無限ループは、ループの終了条件が満たされないために発生し、プログラムが停止しなくなります。

防止策

• 条件式を正しく設定する：ループが必ず終了するように条件を設定します
• デバッグする：ループ内で変数が正しく更新されているか確認します

実践的なループの例

実際のコード例で学ぶループ処理

例：1から100までの合計を計算する

let sum = 0;

for (let i = 1; i <= 100; i++) {
  sum += i;
}

console.log(`合計は${sum}`);

// 出力結果
// 合計は5050

まとめ

学んだ内容の総括と次回予告

今回は、JavaScriptにおけるループ構文（for、while、do...while）について学びました。ループを効果的に使用することで、繰り返し処理を効率的に行うことができます。次回は、これらのループを活用した関数の定義と呼び出しについて詳しく解説します。お楽しみに！

関連記事

• 第1回　JavaScriptを学ぼう：導入編
• 第2回　JavaScriptを学ぼう：開発ツールの導入
• 第3回 JavaScriptを学ぼう： 変数とデータ型
• 第4回 JavaScriptを学ぼう： 演算子
• 第5回 JavaScriptを学ぼう： 条件文（if, else, switch）
• jQueryの進化とセキュリティについて考える
• ブラウザキャッシュのメリットやデメリット