JavaScriptのforループ基本ガイド:使い方と実例

JavaScriptのforループは、プログラミング初心者から経験者まで広く使われる基本的な制御構文の一つです。ループを使うことで、特定のコードブロックを繰り返し実行でき、効率的なプログラムを作成することができます。本記事では、forループの基本構文から、実際の使用例、ネストされたループ、配列の反復処理、さらにはbreakやcontinueの使い方まで、詳細に解説します。初心者の方でも理解しやすいように、具体的なコード例とともに説明していきますので、JavaScriptのforループの使い方をしっかりと身につけましょう。

forループの基本構文

JavaScriptのforループは、特定のコードブロックを指定した回数だけ繰り返し実行するための構文です。基本的なforループの構文は次のようになります。

for (初期化式; 条件式; 増減式) {
    // 繰り返し実行されるコードブロック
}

初期化式

ループの開始時に一度だけ実行される式で、通常はカウンタ変数の初期化が行われます。

for (let i = 0; i < 10; i++) {
    console.log(i);
}

この例では、let i = 0が初期化式です。

条件式

各反復の前に評価される式で、この式がtrueである限りループは続行します。条件式がfalseになると、ループは終了します。

for (let i = 0; i < 10; i++) {
    console.log(i);
}

この例では、i < 10が条件式です。

増減式

各反復の最後に実行される式で、通常はカウンタ変数の増減が行われます。

for (let i = 0; i < 10; i++) {
    console.log(i);
}

この例では、i++が増減式です。i++はiを1増加させることを意味します。

これら3つの部分が正しく設定されることで、forループは期待通りの動作を行います。次のセクションでは、forループの基本的な使い方について具体的な例を用いて説明します。

forループの基本的な使い方

forループを使うことで、特定の処理を複数回繰り返すことができます。ここでは、いくつかの基本的な使い方を紹介します。

単純なカウンタループ

以下の例は、0から9までの数字をコンソールに出力する単純なforループです。

for (let i = 0; i < 10; i++) {
    console.log(i);
}

このコードは、iが0から始まり、10未満である間、iを1ずつ増加させながら繰り返し処理を実行します。

逆順ループ

次の例は、10から1までの数字を逆順で出力します。

for (let i = 10; i > 0; i--) {
    console.log(i);
}

このコードでは、iが10から始まり、1より大きい間、iを1ずつ減少させながら繰り返し処理を実行します。

ステップサイズの変更

ループカウンタの増減幅を変更することもできます。次の例では、iを2ずつ増加させています。

for (let i = 0; i < 10; i += 2) {
    console.log(i);
}

このコードは、iが0から始まり、10未満である間、iを2ずつ増加させながら繰り返し処理を実行します。

配列の要素を処理する

forループを使って配列の各要素を処理することもよくあります。次の例では、配列の各要素をコンソールに出力します。

const fruits = ['apple', 'banana', 'cherry'];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

このコードは、配列fruitsの長さ未満である間、iを1ずつ増加させながら各要素を出力します。

基本的なforループの使い方を理解することで、繰り返し処理を効果的に行うことができます。次のセクションでは、配列の反復処理についてさらに詳しく見ていきます。

配列の反復処理

JavaScriptのforループは、配列の要素を反復処理する際に非常に便利です。ここでは、配列を使ったさまざまな反復処理の方法について説明します。

基本的な配列反復

配列の要素を1つずつ処理するために、forループを使用します。次の例は、配列内のすべての果物の名前をコンソールに出力します。

const fruits = ['apple', 'banana', 'cherry'];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

このコードでは、iが0から始まり、配列fruitsの長さ未満である間、各要素を出力します。

二次元配列の反復処理

二次元配列を処理する場合、forループをネストして使用します。次の例は、二次元配列のすべての要素をコンソールに出力します。

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

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

このコードでは、外側のループで行を、内側のループで列を反復処理し、すべての要素を出力します。

for…inループを使った配列の反復

for...inループは、配列のインデックスを反復処理するために使用できますが、オブジェクトのプロパティにも適用されるため、配列に対しては一般的に推奨されません。次の例は参考として示します。

const fruits = ['apple', 'banana', 'cherry'];
for (let index in fruits) {
    console.log(fruits[index]);
}

このコードでは、配列の各インデックスを反復処理し、その要素を出力します。

for…ofループを使った配列の反復

for...ofループは、配列の各要素を直接反復処理するために最適です。次の例では、配列の各要素をコンソールに出力します。

const fruits = ['apple', 'banana', 'cherry'];
for (let fruit of fruits) {
    console.log(fruit);
}

このコードでは、配列fruitsの各要素を直接出力します。

これらの方法を使い分けることで、配列の反復処理を効率的に行うことができます。次のセクションでは、ネストされたforループについてさらに詳しく見ていきます。

forループのネスト

ネストされたforループは、内側に別のforループを持つforループのことを指し、複雑なデータ構造を処理する際に非常に便利です。ここでは、ネストされたforループの使い方と実例について説明します。

基本的なネストされたforループ

次の例は、2次元配列（マトリックス）のすべての要素をコンソールに出力します。

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

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

このコードでは、外側のループで行を、内側のループで列を反復処理し、すべての要素を出力します。

多次元配列のネストされたforループ

さらに複雑な多次元配列もネストされたforループで処理できます。次の例では、3次元配列のすべての要素をコンソールに出力します。

const threeDArray = [
    [
        [1, 2, 3],
        [4, 5, 6]
    ],
    [
        [7, 8, 9],
        [10, 11, 12]
    ]
];

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

このコードでは、外側のループで最初の次元を、中間のループで2番目の次元を、内側のループで3番目の次元を反復処理します。

実践例：表形式データの処理

ネストされたforループは、表形式データを処理する際にも有用です。次の例は、表内の各セルを処理し、セルの値を計算します。

const table = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

for (let row = 0; row < table.length; row++) {
    for (let col = 0; col < table[row].length; col++) {
        table[row][col] *= 2; // 各セルの値を2倍にする
    }
}

console.log(table);

このコードでは、表の各セルの値を2倍にし、その結果をコンソールに出力します。

ネストされたforループを効果的に活用することで、複雑なデータ構造を処理し、より柔軟なプログラムを作成することができます。次のセクションでは、forループ内でのbreakとcontinueの使い方について説明します。

breakとcontinueの使い方

JavaScriptのforループ内でbreakとcontinueを使用することで、ループの制御をさらに細かく行うことができます。ここでは、それぞれの使い方と具体的な例を紹介します。

breakの使い方

breakは、ループを完全に終了させるために使用されます。breakが実行されると、現在のループが即座に終了し、ループの後のコードが実行されます。

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        break; // iが5に達したらループを終了
    }
    console.log(i);
}

このコードでは、iが5に達した時点でbreakが実行され、ループが終了します。したがって、コンソールには0から4までの数字が出力されます。

continueの使い方

continueは、現在の反復処理をスキップし、次の反復処理に進むために使用されます。continueが実行されると、ループの残りのコードがスキップされ、次の反復処理が開始されます。

for (let i = 0; i < 10; i++) {
    if (i === 5) {
        continue; // iが5の場合、残りのコードをスキップ
    }
    console.log(i);
}

このコードでは、iが5の場合にcontinueが実行され、コンソールには0から4および6から9までの数字が出力されます。iが5のときだけ出力がスキップされます。

実践例：特定の条件を満たす要素をスキップ

breakとcontinueを使って、特定の条件を満たす要素をスキップしたり、ループを終了させたりする実践的な例を見てみましょう。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        continue; // 偶数の場合はスキップ
    }
    if (numbers[i] > 8) {
        break; // 数字が8を超えたらループを終了
    }
    console.log(numbers[i]);
}

このコードでは、配列numbersの各要素を反復処理し、偶数の場合はcontinueでスキップし、数字が8を超えた場合はbreakでループを終了します。したがって、コンソールには1, 3, 5, 7が出力されます。

breakとcontinueを使うことで、ループの実行を柔軟に制御し、効率的なプログラムを作成することができます。次のセクションでは、for...inループとfor...ofループについて説明します。

for…inループとfor…ofループ

JavaScriptには、for...inループとfor...ofループという、配列やオブジェクトを反復処理するための特殊なループ構文があります。それぞれの使い方と特徴を見ていきましょう。

for…inループ

for...inループは、オブジェクトのすべての列挙可能なプロパティを反復処理するために使用されます。配列にも使用できますが、インデックス順に処理される保証がないため、配列にはあまり適していません。

const person = {
    name: 'John',
    age: 30,
    city: 'New York'
};

for (let key in person) {
    console.log(key + ': ' + person[key]);
}

このコードでは、オブジェクトpersonの各プロパティを反復処理し、キーと値をコンソールに出力します。

for…ofループ

for...ofループは、配列や文字列などの反復可能なオブジェクトの各要素を反復処理するために使用されます。for...ofループは、配列の要素を直接扱うため、配列の反復処理に適しています。

const fruits = ['apple', 'banana', 'cherry'];

for (let fruit of fruits) {
    console.log(fruit);
}

このコードでは、配列fruitsの各要素を反復処理し、各要素をコンソールに出力します。

オブジェクトとfor…ofループ

for...ofループはオブジェクトには直接使用できませんが、Object.entries、Object.keys、Object.valuesを使用することで、オブジェクトのキーや値を反復処理することができます。

const person = {
    name: 'John',
    age: 30,
    city: 'New York'
};

// オブジェクトの値を反復処理
for (let value of Object.values(person)) {
    console.log(value);
}

このコードでは、オブジェクトpersonの各値を反復処理し、各値をコンソールに出力します。

配列のfor…inとfor…ofの違い

配列にfor...inを使用するとインデックスが返され、for...ofを使用すると要素そのものが返されます。

const fruits = ['apple', 'banana', 'cherry'];

console.log('Using for...in:');
for (let index in fruits) {
    console.log(index); // インデックスが出力される
}

console.log('Using for...of:');
for (let fruit of fruits) {
    console.log(fruit); // 要素が出力される
}

この例では、for...inはインデックスを出力し、for...ofは配列の要素を出力します。

for...inループとfor...ofループを適切に使い分けることで、JavaScriptの反復処理をより効率的に行うことができます。次のセクションでは、実践的な応用例について説明します。

実践的な応用例

JavaScriptのforループを使った実践的な応用例をいくつか紹介します。これらの例を通じて、forループの実際の活用方法を理解しましょう。

配列のフィルタリング

特定の条件に基づいて配列の要素をフィルタリングする方法を見てみましょう。次の例では、配列の中から偶数の要素を抽出します。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = [];

for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        evenNumbers.push(numbers[i]);
    }
}

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

このコードでは、numbers配列を反復処理し、偶数の要素を新しい配列evenNumbersに追加しています。

文字列の逆転

次の例では、forループを使って文字列を逆転します。

const str = 'hello';
let reversedStr = '';

for (let i = str.length - 1; i >= 0; i--) {
    reversedStr += str[i];
}

console.log(reversedStr); // 'olleh'

このコードでは、文字列strを逆順に反復処理し、各文字を新しい文字列reversedStrに追加しています。

多次元配列の合計値計算

多次元配列のすべての要素の合計値を計算する方法を見てみましょう。

const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];
let sum = 0;

for (let i = 0; i < matrix.length; i++) {
    for (let j = 0; j < matrix[i].length; j++) {
        sum += matrix[i][j];
    }
}

console.log(sum); // 45

このコードでは、二次元配列matrixの各要素を反復処理し、すべての要素の合計値を計算しています。

オブジェクトのプロパティをコピーする

for…inループを使ってオブジェクトのプロパティを別のオブジェクトにコピーする方法を見てみましょう。

const original = {a: 1, b: 2, c: 3};
const copy = {};

for (let key in original) {
    if (original.hasOwnProperty(key)) {
        copy[key] = original[key];
    }
}

console.log(copy); // {a: 1, b: 2, c: 3}

このコードでは、オブジェクトoriginalのすべてのプロパティを反復処理し、新しいオブジェクトcopyにコピーしています。

FizzBuzz問題の解決

最後に、よく知られたプログラミングの練習問題であるFizzBuzz問題をforループで解決する方法を見てみましょう。

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

このコードでは、1から100までの数を反復処理し、3で割り切れる場合はFizz、5で割り切れる場合はBuzz、両方で割り切れる場合はFizzBuzzを出力し、それ以外の場合は数字そのものを出力します。

これらの実践的な応用例を通じて、forループの柔軟性と強力さを実感できたことでしょう。次のセクションでは、よくあるエラーとその対処法について説明します。

よくあるエラーとその対処法

forループを使用する際に遭遇する可能性のある一般的なエラーと、その対処法について説明します。これらのエラーを理解し、適切に対処することで、プログラムのバグを減らし、より効果的なコードを書けるようになります。

無限ループ

無限ループは、ループの終了条件が適切に設定されていない場合に発生します。これは、プログラムが停止しない、またはクラッシュする原因となります。

// 無限ループの例
for (let i = 0; i < 10; ) {
    console.log(i);
    // iの増減がないため、無限ループとなる
}

対処法

ループの条件を満たすために、カウンタ変数を適切に増減させることを忘れないようにします。

for (let i = 0; i < 10; i++) {
    console.log(i);
}

オフバイワンエラー

オフバイワンエラーは、ループの開始または終了条件が誤って設定されている場合に発生します。このエラーにより、ループが意図したよりも1回多くまたは少なく実行されます。

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

// オフバイワンエラーの例
for (let i = 0; i <= array.length; i++) {
    console.log(array[i]);
    // iが配列の長さと等しいときに、未定義の要素にアクセスする
}

対処法

ループの開始および終了条件を見直し、適切に設定することでオフバイワンエラーを防ぎます。

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

未定義の変数エラー

カウンタ変数やループ内で使用される変数が正しく宣言されていない場合、未定義の変数エラーが発生します。

for (i = 0; i < 10; i++) { // let, var, const を忘れている
    console.log(i);
}

対処法

変数を使用する前に、適切に宣言するようにします。

for (let i = 0; i < 10; i++) {
    console.log(i);
}

配列の範囲外アクセス

ループで配列を操作する際に、配列の範囲外にアクセスしようとするとエラーが発生します。

const array = [1, 2, 3];
for (let i = 0; i <= array.length; i++) {
    console.log(array[i]); // 最後の反復で未定義の要素にアクセス
}

対処法

配列の範囲内にアクセスするよう、ループ条件を適切に設定します。

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

ネストされたループの誤り

ネストされたループで、内側のループのカウンタ変数が外側のループで再使用される場合、意図しない動作が発生します。

for (let i = 0; i < 3; i++) {
    for (let i = 0; i < 3; i++) { // 内側のループで同じ変数名を使用
        console.log(i);
    }
}

対処法

内側と外側のループで異なるカウンタ変数を使用します。

for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        console.log(j);
    }
}

これらのよくあるエラーとその対処法を理解し、適用することで、より堅牢で信頼性の高いコードを書くことができるようになります。次のセクションでは、forループを使った実践的な演習問題を紹介します。

演習問題: 実践的なforループの練習

ここでは、forループを使って実際にコードを書いてみるための演習問題を紹介します。これらの問題に取り組むことで、forループの使い方に慣れ、理解を深めることができます。

問題1: 配列の合計値を計算する

次の配列numbersのすべての要素の合計値を計算して、コンソールに出力してください。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let sum = 0;

// ここにforループを追加
for (let i = 0; i < numbers.length; i++) {
    sum += numbers[i];
}

console.log('合計値:', sum); // 55

問題2: 配列の最大値を見つける

次の配列numbersの中から最大値を見つけて、コンソールに出力してください。

const numbers = [23, 56, 78, 12, 34, 99, 1, 8];
let max = numbers[0];

// ここにforループを追加
for (let i = 1; i < numbers.length; i++) {
    if (numbers[i] > max) {
        max = numbers[i];
    }
}

console.log('最大値:', max); // 99

問題3: 文字列の中の特定の文字を数える

次の文字列textの中に含まれる文字'e'の数を数えて、コンソールに出力してください。

const text = 'Hello, how are you doing on this fine evening?';
let count = 0;

// ここにforループを追加
for (let i = 0; i < text.length; i++) {
    if (text[i] === 'e') {
        count++;
    }
}

console.log('eの数:', count); // 5

問題4: 配列の偶数の要素だけを新しい配列に追加する

次の配列numbersから偶数の要素だけを新しい配列evenNumbersに追加して、コンソールに出力してください。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = [];

// ここにforループを追加
for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] % 2 === 0) {
        evenNumbers.push(numbers[i]);
    }
}

console.log('偶数の要素:', evenNumbers); // [2, 4, 6, 8, 10]

問題5: FizzBuzzプログラム

次のルールに従って1から100までの数をコンソールに出力するFizzBuzzプログラムを書いてください。

• 3の倍数の場合、”Fizz”と出力する
• 5の倍数の場合、”Buzz”と出力する
• 3と5の両方の倍数の場合、”FizzBuzz”と出力する
• それ以外の場合は、その数字を出力する

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

これらの演習問題に取り組むことで、forループの実践的な使用方法を習得し、さまざまなシナリオでforループを効果的に活用できるようになります。次のセクションでは、本記事のまとめを行います。

まとめ

本記事では、JavaScriptのforループの基本的な使い方から、配列や多次元配列の反復処理、ネストされたループ、breakとcontinueの使い方、for...inループとfor...ofループの違い、さらに実践的な応用例と演習問題に至るまで、幅広く解説しました。

forループは、特定の処理を繰り返し実行するための強力なツールです。基本構文を理解し、適切に活用することで、効率的で読みやすいコードを書くことができます。また、よくあるエラーとその対処法を理解することで、バグを減らし、堅牢なプログラムを作成することができます。

演習問題を通じて、実際に手を動かしながらforループの使用方法を練習することで、理解を深めることができたと思います。ぜひ、これらの知識を実際のプロジェクトで活用し、より効率的なJavaScriptプログラミングを目指してください。