Articles
JavaScript入門
JavaScriptにおける繰り返し処理

JavaScriptにおける繰り返し処理

この記事ではJavaScriptにおける繰り返し処理について説明します。

YouTube Video

JavaScriptにおけるfor文

基本構文 

1for (initialization; condition; update) {
2  // Code to repeat
3}

JavaScriptのfor文は、繰り返し処理を行うための構文です。特定の条件が満たされる間、指定したコードブロックを繰り返し実行します。for文を使うことで、同じ処理を効率的に複数回実行できます。

  • 初期化(initialization): ループを開始する前に一度だけ実行される部分です。ループカウンターなどの変数を初期化します。
  • 条件(condition): ループを続けるかどうかを判断する条件です。true であればループを続け、false であれば終了します。
  • 更新(update): 各ループの終わりに実行され、ループカウンターを更新します。

例 

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

この場合、iは0から始まり、i < 5がtrueの間ループが実行されます。i++によって、i はループのたびに1ずつ増加します。結果として、0から4までが表示されます。

ループカウンターのスコープ

for文の初期化部分で変数を宣言または初期化します。ここで宣言した変数は、ループの間のみ有効です。

1for (let i = 0; i < 3; i++) {
2    console.log(i); // Outputs 0, 1, 2
3}
4console.log(i);  // ReferenceError
  • この例のように、変数にfor文の外で参照するとエラーになります。

無限ループ

ループが終了しない条件を設定すると、無限ループになります。これはブラウザやシステムに負荷をかける可能性があるので注意が必要です。

1for (;;) {
2    console.log("Infinite loop");
3    break; // Exits the infinite loop with break
4}

配列とfor文

for文は配列と組み合わせて使うことが一般的です。配列の各要素に対して処理を行うのに便利です。

例 

1let fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4    console.log(fruits[i]);
5}
6// Outputs "apple", "banana", "cherry"

このように、インデックスを用いて配列の各要素に対して処理を行うことができます。

他のループ構文

for...of文

for...of文は、配列や文字列などの反復可能なオブジェクトに対して使います。

1let fruits = ["apple", "banana", "cherry"];
2
3for (let fruit of fruits) {
4    console.log(fruit);
5}
6// Outputs "apple", "banana", "cherry"

このように、インデックスを使わずに各要素に対して処理を行うことができます。

for...in文

for...in文は、オブジェクトのプロパティを繰り返し処理するために使います。

1let person = { name: "John", age: 30, city: "Tokyo" };
2
3for (let key in person) {
4    console.log(key + ": " + person[key]);
5}
6// Outputs "name: John", "age: 30", "city: Tokyo"

このように、キーを用いて各要素に対して処理を行うことができます。

まとめ

  • for文は、初期化、条件、更新の3つの部分を持つ繰り返し構文です。
  • break や continue を使ってループの挙動を制御できます。
  • 配列やオブジェクトと組み合わせると、要素やプロパティを効率的に処理できます。

JavaScriptにおけるwhile文

基本構文 

1while (condition) {
2    // Code that repeats while the condition is true
3}

JavaScriptのwhile文は、指定された条件がtrueである間、繰り返し処理を実行するループ構文です。for文と似ていますが、while文は条件のみを指定します。

  • 条件: ループを続けるかどうかを決める条件式を記述します。trueの間はループが継続し、falseになるとループが終了します。

例 

1let i = 0;
2
3while (i < 5) {
4    console.log(i);
5    i++;
6}
7console.log(i);  // 5

この例では、変数iが0から始まり、i < 5がtrueの間ループが実行されます。ループのたびにiが1増加し、iが5になると条件がfalseとなり、ループが終了します。結果として、while文によって0から4までが表示されます。

for文と異なり、while文では変数の初期化や更新は個別の文として記述されます。while文の後で、変数を参照することもできます。この場合、while文が終わった後に、5が表示されます。

無限ループ

条件が常にtrueの場合、ループが終了しない無限ループが発生します。無限ループは避けるべきですが、意図的に使用する場合には、break文でループを終了させることができます。

例 

1while (true) {
2    console.log("Infinite loop");
3    break;  // Ends the loop with `break`
4}

while文を使った配列の処理

配列をwhile文で処理することも可能です。

例 

1let fruits = ["apple", "banana", "cherry"];
2let i = 0;
3
4while (i < fruits.length) {
5    console.log(fruits[i]);
6    i++;
7}
8// Outputs "apple", "banana", "cherry"

do...while文

基本構文 

1do {
2    // Code that is executed at least once
3} while (condition);

while文の変種であるdo...while文は、少なくとも1回はループを実行した後、条件をチェックします。while文が最初に条件をチェックするのに対し、do...while文は一度処理を実行してから条件を確認します。

例 

1let i = 0;
2
3do {
4    console.log(i);
5    i++;
6} while (i < 5);

この例では、iが0から4まで表示されます。do...while文は、条件がfalseでも1回は必ず実行される点がwhile文と異なります。

まとめ

  • while文は、条件がtrueの間繰り返し処理を実行するために使います。
  • 無限ループに注意しつつ、breakやcontinueを使ってループの流れを制御できます。
  • do...while文は、少なくとも1回はループを実行したい場合に便利です。

breakとcontinue

ループ内でbreakとcontinueを使えます。

  • breakは、ループを途中で終了するために使います。
  • continueは、現在の反復をスキップして、次の反復に進みます。

break の例 

 1for (let i = 0; i < 10; i++) {
 2    if (i === 5) {
 3        break;  // Exits the loop when i is 5
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 2, 3, 4
 8
 9let i = 0;
10
11while (i < 10) {
12    if (i === 5) {
13        break;  // Ends the loop when i is 5
14    }
15    console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4

この場合、iが5になるとbreakが実行されます。結果として、0から4までが表示されます。

continue の例 

 1for (let i = 0; i < 5; i++) {
 2    if (i === 2) {
 3        continue;  // Skips when i is 2
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 3, 4
 8
 9let i = 0;
10while (i < 5) {
11    i++;
12    if (i === 2) {
13        continue;  // Skips when i is 2
14    }
15    console.log(i);
16}
17// Outputs 0, 1, 3, 4

この場合、iが2の時にcontinueが実行されます。結果として、2以外の数値が表示されます。

JavaScriptにおける入れ子ループ

JavaScriptのプログラミングにおいて、入れ子ループ（nested loop）は、1つのループの内部に別のループが存在する構造です。このようなループは、特定のアルゴリズムや処理が複数の次元や階層にわたる場合に非常に有効です。例えば、配列の中に配列が含まれている多次元配列の処理などがその典型例です。

ここでは、入れ子ループの基本構造、使用例、注意点、そして最適化の考慮点について説明します。

入れ子ループの基本構造

入れ子ループの基本構造は、1つのループの内部にもう1つ、または複数のループが含まれている形式です。外側のループが1回実行されるごとに、内側のループがその回数分だけ実行されます。

以下は、2つのループが入れ子になった基本的な例です。

 1for (let i = 0; i < 3; i++) {
 2    console.log(`Outer loop iteration: ${i}`);
 3
 4    for (let j = 0; j < 2; j++) {
 5        console.log(`  Inner loop iteration: ${j}`);
 6    }
 7}
 8// Output:
 9// Outer loop iteration: 0
10//   Inner loop iteration: 0
11//   Inner loop iteration: 1
12// Outer loop iteration: 1
13//   Inner loop iteration: 0
14//   Inner loop iteration: 1
15// Outer loop iteration: 2
16//   Inner loop iteration: 0
17//   Inner loop iteration: 1

上記のコードでは、iが外側のループでカウントされ、jが内側のループでカウントされています。外側のループが1回実行されるたびに、内側のループは2回実行されます。

入れ子ループの実際の使用例

入れ子ループは、特に多次元配列の処理に役立ちます。例えば、2次元配列を処理する場合、行（外側のループ）と列（内側のループ）の両方を扱う必要があります。

次の例では、2次元配列を扱い、各要素を出力します。

 1const matrix = [
 2  [1, 2, 3],
 3  [4, 5, 6],
 4  [7, 8, 9]
 5];
 6
 7for (let row = 0; row < matrix.length; row++) {
 8    for (let col = 0; col < matrix[row].length; col++) {
 9        console.log(`Element at [${row}][${col}] is: ${matrix[row][col]}`);
10    }
11}
12// Output:
13// Element at [0][0] is: 1
14// Element at [0][1] is: 2
15// Element at [0][2] is: 3
16// Element at [1][0] is: 4
17// Element at [1][1] is: 5
18// Element at [1][2] is: 6
19// Element at [2][0] is: 7
20// Element at [2][1] is: 8
21// Element at [2][2] is: 9

このように、入れ子ループを使うことで、2次元配列の各要素にアクセスすることが可能です。

注意点

入れ子ループを使用する際には、いくつかの注意点があります。

  1. パフォーマンスの問題

    入れ子ループは、ループが深くなるほど実行時間が急激に増加します。例えば、外側のループが100回実行され、内側のループが100回実行される場合、合計で10,000回の処理が行われます。このため、ループの回数が多くなる場合は、効率を考慮してループの最適化を検討する必要があります。

  2. 複雑なアルゴリズムへの適用

    入れ子ループは非常に強力ですが、処理が複雑になると、コードが理解しにくくなることがあります。そのため、コードの可読性を保つために、適切なコメントや関数を使って処理を整理することが重要です。

最適化の考慮点

入れ子ループを使用する際には、次のような最適化が考えられます。

  1. ループの早期終了

    内側のループで特定の条件を満たした場合、break文を使用してループを終了させることができます。これにより、無駄なループを回避し、パフォーマンスを向上させることができます。

1for (let i = 0; i < 5; i++) {
2    for (let j = 0; j < 5; j++) {
3        if (i + j > 5) {
4            break;
5        }
6        console.log(`i: ${i}, j: ${j}`);
7    }
8}

  1. 計算を外に出す

    ループの中で毎回同じ計算を行うのではなく、ループの外で一度計算して、その結果を使うようにすることで、処理を効率化することができます。

 1let array = [1, 2, 3, 4, 5];
 2
 3// Inefficient example (calculating every time)
 4for (let i = 0; i < array.length; i++) {
 5    for (let j = 0; j < array.length; j++) {
 6        let sum = array[i] + array[j];
 7        console.log(sum);
 8    }
 9}
10
11// Efficient example (calculating outside)
12let arrayLength = array.length;
13for (let i = 0; i < arrayLength; i++) {
14    for (let j = 0; j < arrayLength; j++) {
15        let sum = array[i] + array[j];
16        console.log(sum);
17    }
18}

まとめ

入れ子ループは、JavaScriptで複雑なデータ構造やアルゴリズムを処理する際に非常に便利です。しかし、適切に使用しないとパフォーマンスの低下やコードの可読性の低下を招く可能性があります。入れ子ループを効果的に使うためには、ループの最適化やコードの整理を心掛け、状況に応じた適切なアプローチを取ることが重要です。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

JavaScriptにおける条件分岐のベストプラクティスJavaScriptにおける反復処理のベストプラクティス