〈PR〉プロが選ぶ!2023年最新!おすすめプログラミングスクール比較ガイド

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

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

UIHACK
編集長
UIHACK 編集長

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

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

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

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

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

本記事の内容
  • なぜ繰り返し処理はプログラミングにおいて欠かせないのか?
  • JavaScriptのfor文とは?
  • JavaScriptのfor文と回数指定の方法
  • JavaScriptのfor文と配列の操作方法
  • JavaScriptのfor文と無限ループの回避方法

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

繰り返し処理とは

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

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

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

JavaScriptのfor文とは?

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

UIHACK
編集長
UIHACK 編集長

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

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

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

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

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

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

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

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

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

for文 まとめ

今回のコードでは、変数 i を0から始め、i が5未満の間、ループ処理が行われます。ループごとに i の値がコンソールに出力されます。増分式 i++ によって、i の値が1ずつ増加しています。

最初のループでは、i の初期値が0なので、0が出力されます。次のループでは、i の値が1に増加し、1が出力されます。このように、5回のループが実行され、0から4までの数字が順に出力されます。

このような形式のforループは、指定した回数の繰り返し処理を行いたい場合に便利です。変数 i を使ってループ回数やインデックスを管理し、繰り返し処理を制御することができます。また、処理内容はコンソールへの出力だけでなく、他の処理や操作に応じて自由に変更できます。

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

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

UIHACK
編集長
UIHACK 編集長

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

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

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

UIHACK
編集長
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
編集長
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
編集長
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
編集長
UIHACK 編集長

解説

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

for文と配列の操作方法のまとめ

これらの例では、for文を使って配列の要素を順番に処理し、必要な操作を行っています。ループ変数を用いて配列のインデックスにアクセスし、要素の取得や変更、新しい配列の作成などが可能です。配列を効果的に操作するために、for文を使いこなしましょう。

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

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

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

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

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

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

解説

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

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

UIHACK
編集長
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
編集長
UIHACK 編集長

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

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

break文の使用

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

解説

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

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

let i = 0;
let continueLoop = true;

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

解説

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

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

無限ループは予期せぬ結果やパフォーマンスの低下を引き起こす可能性があるため、注意が必要です。適切な条件式や制御フラグの設定によって、無限ループを回避し、正常なプログラムの実行を確保しましょう。

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

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

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

for-inの特徴
  1. for-in文はオブジェクトのプロパティに対して反復処理を行います。
  2. 反復処理の際には、オブジェクトのプロパティ名(キー)を取得します。
  3. for-in文はプロトタイプチェーンを辿り、継承されたプロパティも含めて反復処理を行います。
  4. 配列に対しても使用できますが、配列のインデックスがプロパティとして扱われるため、順番が保証されません。
  5. 主な使いどころは、オブジェクトのプロパティを列挙する場合や、配列のインデックスや要素の順不同の処理が必要な場合です。

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文の特徴
  1. for-of文は配列やイテラブルオブジェクトに対して反復処理を行います。
  2. 反復処理の際には、配列の要素やイテラブルオブジェクトの値を取得します。
  3. for-of文は順番に要素を取得するため、反復処理の順序が保証されます。
  4. オブジェクトに対しては使用できません。
  5. 主な使いどころは、配列や文字列などのシーケンスを順番に処理する場合です。

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

const arr = [1, 2, 3];

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

出力結果

1
2
3

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

for-in文for-of文
使用対象オブジェクトのプロパティ配列やイテラブルオブジェクト
反復対象プロパティ名(キー)要素の値
プロトタイプチェーンプロトタイプチェーンも含めて反復処理プロトタイプチェーンは含まない
配列への使用可能順序が保証されず、インデックスが扱われる
処理順序保証されない順番が保証される
使用例オブジェクトのプロパティの列挙配列や文字列などのシーケンスの処理
UIHACK
編集長
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
編集長
UIHACK 編集長

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

本記事で知った事
  • なぜ繰り返し処理はプログラミングにおいて欠かせないのか?
  • JavaScriptのfor文とは?
  • JavaScriptのfor文と回数指定の方法
  • JavaScriptのfor文と配列の操作方法
  • JavaScriptのfor文と無限ループの回避方法

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です