【JavaScript】for文の繰り返し処理と無限ループの回避方法

本記事は、「そもそも何故、プログラミングをする時に、なぜ繰り返し処理ってするんだろう」と思いつつ

UIHACK 編集長

・なぜ繰り返し処理はプログラミングにおいて欠かせないのか？
・Javascriptのforの書き方
・JavaScriptのfor文と回数指定の方法

上記のような、悩みや疑問を持っている、プログラミングを勉強したい人向けに現役エンジニアが解説します。

この記事では、JavaScriptのfor文の基本的な構文から応用テクニックまでを詳しく解説します。for文を使うことで、同じ処理を繰り返し実行したり、配列やオブジェクトの要素を効率的に処理したりすることができます。また、ループの制御やカウンタの設定なども解説します。

プログラミング未経験の方でも、読みやすい内容なので、本記事を読んで未来に向けて、一歩を踏み出しましょう。

それでは、ご一読ください！

なぜ繰り返し処理はプログラミングにおいて欠かせないのか？

繰り返し処理とは

繰り返し処理は、プログラミングにおいて不可欠な要素です。なぜなら、同じ処理を繰り返し実行することで、効率的なコードの作成や複雑なタスクの自動化が可能になるからです。

効率性を向上させます。同じ処理を手動で繰り返すのではなく、ループ構造を使用することでコードの重複を避け、効率的に処理を実行できます。特に大量のデータや配列の要素を処理する際には、繰り返し処理が必要不可欠です。

JavaScriptのfor文を使いこなすことで、あなたも、プログラミングの力を最大限に引き出せるでしょう。

JavaScriptのfor文とは？

JavaScriptのfor文は、プログラミング言語JavaScriptにおけるループ構造の一種です。for文は、指定された回数だけ繰り返し処理を行うために使用されます。

UIHACK 編集長

for文は一般的に以下のような構文を持ちます。

for (初期化式; 条件式; 増分式) {
  // 繰り返し実行する処理
}

for文を使用することで、同じ処理を指定した回数だけ繰り返し実行することができます。また、初期化式や条件式、増分式には任意の式を使用できるため、柔軟にループの動作を制御することも可能です。

例えば、以下のコードは、0から4までの数字を順にコンソールに出力する簡単な例です。

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

UIHACK 編集長

この例では、初期化式 let i = 0 で変数 i の初期値を設定し、条件式 i < 5 でループの実行条件を指定しています。増分式 i++ によって変数 i の値がインクリメントされます。ループが5回繰り返され、0から4までの数字が順に出力されます。

念の為にコンソール結果を載せておきます。

上記はGoogle Chromeのデベロッパーツール > コンソールタブで検証した結果です。

JavaScriptのfor文は、反復処理やデータの処理など、様々なシナリオで利用されます。for文を使いこなすことで、効率的で柔軟なプログラミングが可能になります。

JavaScriptのfor文と回数指定の方法

次に、JavaScriptのfor文における回数指定の方法は、初期化式、条件式、増分式を適切に設定することで実現します。以下に回数指定の方法を説明します。

UIHACK 編集長

例えば、10回の繰り返し処理を行いたい場合を考えましょう。

for (let i = 0; i < 10; i++) {
  // 繰り返し実行する処理
}

上記のコードでは、初期化式 let i = 0 で変数 i の初期値を0に設定しています。条件式 i < 10 では、i が10未満である限りループが継続されます。増分式 i++ によって、ループごとに変数 i の値が1ずつ増加します。

UIHACK 編集長

もうひとつの方法として、回数を変数に格納しておき、それを条件式に利用する方法もあります。

const loopCount = 5;

for (let i = 0; i < loopCount; i++) {
  // 繰り返し実行する処理
}

上記の例では、loopCount という変数に回数を設定しています。それを条件式 i < loopCount に使用することで、指定した回数だけの繰り返し処理が実行されます。

回数指定は、繰り返し処理の制御において重要な要素です。適切な初期化式、条件式、増分式を設定し、必要な回数の繰り返し処理を実現しましょう。

JavaScriptのfor文と配列の操作方法

JavaScriptのfor文は、配列の要素を繰り返し処理する際にも活用されます。以下に、JavaScriptのfor文を使った配列の操作方法を3点紹介します。

1.配列の要素を順番に処理する

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

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

UIHACK 編集長

解説

この例では、配列の要素を順番にコンソールに出力しています。ループ変数 i を使用して、配列のインデックスにアクセスし、要素を取得しています。

2.配列の要素を合計する

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

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

console.log(sum);

UIHACK 編集長

解説

この例では、配列の要素を合計しています。ループ内で変数 sum に要素を加算していき、最終的な合計値をコンソールに出力しています。

3.配列の要素を変換する。

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

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

console.log(multipliedArray);

UIHACK 編集長

解説

この例では、配列の要素を2倍に変換した新しい配列を作成しています。ループ内で変数 multipliedArray に変換後の要素を追加していき、最終的な結果をコンソールに出力しています。

JavaScriptのfor文と無限ループの回避方法

プログラミングをしていると、一度はなってしまうその名も「無限ループ」。

その、JavaScriptのfor文において無限ループを回避するためには、条件式と増分式を設定する必要があります。
以下に無限ループを回避するための方法をいくつか紹介します。

無限ループの例を見てみよう！

良い子は、絶対実行しないで下さい。下手したらPC止まります(・・∂) ｱﾚ?(・・∂) ｱﾚ?(・・∂) ｱﾚ?

for (var x = 0; x < 4; x--) {
  console.log('xは'+ x);
}

UIHACK 編集長

解説

上記のコードは、条件式 x < 4 と増分式 x– の組み合わせにより、x の値は常に減少し、条件式が常に真（true）となるため無限ループが発生します。

要は、4の数値まで来たら止まるのに、ずっとマイナスだからループが止まらないって事です。

UIHACK 編集長

正しくループが終了するよう修正するには、以下のように条件式と増分式を適切に設定します。

for (var x = 0; x < 4; x++) {
  console.log('xは' + x);
}

修正後のコードでは、条件式 x < 4 によって x の値が4未満の間ループが実行されます。また、増分式 x++ によって x の値が1ずつ増加します。これにより、0から3までの値が順番に出力され、4の時点で条件式が偽（false）となりループが終了します。

修正後のコードを実行すると、以下のような結果が得られます。

xは0
xは1
xは2
xは3

UIHACK 編集長

修正を行うことで、正常にループが終了し、想定通りの結果が得られました。
めでたしめでたし(ｏ･ω･ｏ）

その他の無限ループを回避するための方法をいくつか紹介します。

break文の使用

for (let i = 0; ; i++) {
  // ループ処理
  if (i === 10) {
    break; // 条件を満たしたらループを終了
  }
}

UIHACK 編集長

解説

条件式を空にすることで、無限ループが作られます。この場合、ループ内で特定の条件を満たした場合に break 文を使用してループを終了させることができます。上記の例では、i が10になった時に break 文が実行され、ループが終了します。

whileループと制御フラグの使用

let i = 0;
let continueLoop = true;

while (continueLoop) {
  // ループ処理
  if (i === 10) {
    continueLoop = false; // 条件を満たしたらループを終了
  }
  i++;
}

UIHACK 編集長

解説

while ループを使用し、ループの終了条件を制御フラグで管理する方法もあります。ループ内で条件を満たした場合に制御フラグを変更し、ループを終了させることができます。

JavaScriptのfor_in文とfor_ofの違いと使いどころ

JavaScriptにおいて、for-in文とfor-of文は両方ともオブジェクトや配列の反復処理を行うために使用されますが、いくつかの重要な違いがあります。以下にそれぞれの違いと使いどころを説明します。

for-in文の特徴と使いどころ

for-inのサンプルコード

const 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文の特徴と使いどころ

for-of文のサンプルコード

const arr = [1, 2, 3];

for (let value of arr) {
  console.log(value);
}

出力結果

1
2
3

for-in文とfor-of文の違いと使いどころを表形式でまとめます。

UIHACK 編集長

解説

この表を参考にすると、for-in文はオブジェクトのプロパティの列挙に、for-of文は配列やイテラブルオブジェクトの要素の処理に適していることがわかります。

JavaScriptのforeach文とは？

JavaScriptのforEachは、配列の要素を順番に処理するためのメソッドです。forEachメソッドは、与えられたコールバック関数を配列の各要素に対して一度ずつ実行します。

forEachメソッドはループ内で要素の値にアクセスするためのシンプルな構文を提供します。以下に、forEachメソッドの使用例を示します。

const array = [1, 2, 3];

array.forEach(function(element) {
  console.log(element);
});

この例では、配列の各要素が順番にコンソールに出力されます。forEachメソッドは、配列の要素数だけコールバック関数を実行し、要素の値を引数として渡します。

forEachメソッドは、配列の要素を順番に処理するための便利なメソッドです。反復処理のループを直接記述する代わりに、forEachメソッドを使用することで、コードを簡潔に書くことができます。

javascript for文の結論とまとめ

UIHACK 編集長

今回は、for文の繰り返し処理についてご紹介しました。
それでは、最後にもう一度、おさらいしましょう。

もう一度、最初から「JavaScriptのfor文とは？」を読む↑

JavaScriptの他の基本的な変数の使い方も学びたい方はぜひ以下の記事もご覧ください。

2022年8月17日 【Javascript】初心者向けに変数の意味と3つ(var・let・const)の宣言の使い分け方法を解説！

JavaScriptで、ポップアップウィンドウを表示させたいあなたは以下の記事もご覧ください。

2023年6月30日 【JavaScript】現役エンジニアが教える！モーダルウィンドウの実装方法！【初心者でもOK】