JavaScriptのループ(繰り返し)処理を解説！forループからメソッドまで

JavaScriptでデータのリストや配列を操作する場合、ループ処理は避けて通れない道です。

ループ処理は複数のデータに対して同じ操作を繰り返すための強力な構文で、非常によく使われます。

すーさん

本記事ではJavaScriptの主なループ構文である「forループ」から「ループ用メソッド」まで、全てのループについて詳しく解説します。

おすすめのプログラミングスクール

DMM WEB CAMP

未経験者のために開発されたカリキュラムで、現役エンジニアによる充実したサポート体制。最短3ヶ月でITエンジニアへ転職を目指すことが可能。

入学金	0円
料金	169,800円(税込)〜
学び方	オンライン(自習形式)
校舎	ー
保証制度	8日間返金保証 早期卒業返金保証
就職サポート	○
運営会社	株式会社インフラトップ

【転職型スクールNo.1】エンジニア転職特化のプログラミングスクール_DMM WEBCAMP

詳しくはこちら

初心者におすすめのプログラミングスクールに関しては【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選で詳しく紹介していますので、興味ある方はぜひチェックしてみてください。

あわせて読みたい

【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選

フリーランスエンジニアにおすすめのエージェント

レバテックフリーランス

業界最大級の案件数を誇るフリーランスITエンジニア向けのサービス。専門アドバイザーによる案件提案と全面的なサポートを提供。

案件数	50,000件以上
リモート	○ （半分くらいがリモート対応）
単価	45万 〜 195万円
稼働日数	週5日が多め
福利厚生	◎
運営会社	レバテック株式会社

【レバテックフリーランス】フリーランス向け！
Webエンジニア案件情報サイト無料会員登録

詳しくはこちら

Javascriptのループ処理とは

ループ処理とは、特定の条件が満たされるまで一連の命令を繰り返し実行することを言います。

この繰り返しの処理がコードの一部を何度も実行することを可能にし、コードを短縮させ、効率化することを可能にしています。

また、大量のデータを操作する際にもループ処理は不可欠です。

JavaScriptにおけるループ処理には以下のものがあります。

for

• for loop
  • 一定の回数だけループを実行します。
• for…in loop
  • オブジェクトのプロパティを繰り返し処理します。
• for…of loop
  • Iterableオブジェクト（配列、Map、Setなど）の要素を繰り返し処理します。

While

• while loop
  • 指定した条件が真である限りループを実行します。
• do…while loop
  • 指定した条件が真である限りループを実行します。ただし、最初のループは条件を評価する前に実行されます。

Array.prototypeメソッド

• Array.prototype.forEach()
  • 配列の各要素に対して指定した関数を実行します。
• Array.prototype.map()
  • 配列の全ての要素を使って新しい配列を生成します。
• Array.prototype.filter()
  • 指定した関数のテストをパスしたすべての要素から新しい配列を生成します。
• Array.prototype.reduce()
  • 配列の各要素に対してリデューサー関数を適用し、単一の出力値を生成します。
• Array.prototype.some()
  • 配列の少なくとも1つの要素が指定した関数によってチェックされた条件を満たすかどうかを判断します。
• Array.prototype.every()
  • 配列の全ての要素が指定した関数によってチェックされた条件を満たすかどうかを判断します。

これらのループは、それぞれ特定の状況やタスクに対して最適化されています。

例えば、特定の回数の繰り返しを必要とする状況ではforループが適しています。

一方、特定の条件が満たされるまで処理を続ける場合は、whileまたはdo-whileループが最適です。

Array.prototypeメソッドは、より宣言的なコードを書くのに役立ちます。

つまり、コードが何を行うか（何をするか）だけでなく、それがどのように行われるべきか（どのようにそれを行うか）を明確に表現します。

この結果、コードはより読みやすく、保守しやすくなります。

すーさん

ループはコードを簡潔にし、読みやすくするために便利ですが、無限ループ（ループが終わらない状態）を作り出す可能性もあります。

そのため、ループ処理を使用する際は、ループが適切に終了するように注意深くコードを書くことが重要です。

Javascript学習におすすめの書籍

確かな力が身につくJavaScript「超」入門 第2版

created by Rinker

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング

1冊ですべて身につくJavaScript入門講座

created by Rinker

ノーブランド品

• Amazon
• 楽天市場
• Yahooショッピング

Javascriptのループ処理

forループの使い方

for ループは、特定の回数だけ処理を繰り返すためのもので、次のような形式で書かれます。

1for (初期化式; 条件式; 増分式) {
2    // 実行する処理
3}

• 初期化式
  • ループが始まる前に一度だけ実行されます。通常、変数の初期値を設定します。
• 条件式
  • 各ループの繰り返しの開始前に読み込まれます。この条件が true であればループは続行し、false であればループは終了します。
• 増分式
  • 各ループの最後に実行されます。通常、変数の値を更新するために記述します。

1for (let i = 0; i < 5; i++) {
2    console.log(i);  // 0から4までの数値が出力される
3}

この例では、i という変数を初期化し、i が5未満の間、ループ内のコード（console.log(i)）を実行します。

ループの各イテレーションの後で、i の値は1増加します。

for ループは配列の要素を順に処理するためにもよく使用されます。

1let fruits = ['apple', 'banana', 'cherry'];
2for (let i = 0; i < fruits.length; i++) {
3    console.log(fruits[i]);
4}
5
6//コンソール結果
7//apple
8//banana
9//cherry

この例では、fruits 配列の各要素を順にコンソールに出力します。

fruits.length は配列の長さ（要素数）を表すため、この for ループは配列の最初の要素から最後の要素まで順に処理します。

for…in ループの使い方

for…inループは、オブジェクトのプロパティや配列のインデックスを列挙するために使用されます。

一般的な形式は以下の通りです。

1for (variable in object) {
2    // 実行する処理
3}

ここで、variableはプロパティ名または配列のインデックスを受け取り、objectは反復処理を行うオブジェクトまたは配列です。

1let person = {
2    name: 'Alice',
3    age: 20,
4    city: 'Tokyo'
5};
6
7for (let key in person) {
8    console.log(key + ': ' + person[key]);
9}
10
11//コンソール結果
12//name: Alice
13//age: 20
14//city: Tokyo

この例では、personオブジェクトの各プロパティをfor…inループで列挙し、プロパティ名とその値をコンソールに出力します。

for…inループは配列のインデックスも列挙することができます。

1let fruits = ['apple', 'banana', 'cherry'];
2
3for (let index in fruits) {
4    console.log(index + ': ' + fruits[index]);
5}
6
7//コンソール結果
8//0: apple
9//1: banana
10//2: cherry

しかし、配列の要素を順に処理する場合は、for…inループよりもforループや Array.prototype.forEach()、for…ofループを使用することがおすすめします。

for…inループはオブジェクトのプロパティの列挙に最適であり、配列については順序が保証されない場合があるからです。

また、for…inループはオブジェクトの継承チェーン全体を通じて列挙します。

つまり、オブジェクトが他のオブジェクトからプロパティを継承している場合、それらの継承プロパティも列挙します。

これを避けるためには、hasOwnProperty()メソッドを使用して、列挙されたプロパティがオブジェクト自身のものであるかどうかをチェックすることが一般的です。

for…of ループの使い方

for…ofループは、配列や文字列などのイテラブルオブジェクト（反復操作が可能なオブジェクト）の要素を順に取り出すために使用されます。

一般的な形式は以下の通りです。

1for (variable of iterable) {
2    // 実行する処理
3}

ここで、variableは各反復操作で取得した要素を受け取り、iterableは反復処理を行うオブジェクトです。

1let fruits = ['apple', 'banana', 'cherry'];
2
3for (let fruit of fruits) {
4    console.log(fruit);
5}
6
7//コンソール結果
8//apple
9//banana
10//cherry

この例では、fruits配列の各要素をfor…ofループで順に取り出し、それぞれをコンソールに出力します。

文字列に対してfor…ofループを使用すると、文字列の各文字を順に取り出すことができます。

1let greeting = 'Hello, world!';
2
3for (let char of greeting) {
4    console.log(char);
5}
6
7//コンソール結果
8 // 'H', 'e', 'l', 'l', 'o', ',', ' ', 'w', 'o', 'r', 'l', 'd', '!' が順に出力される

なお、for…ofループはMapやSetなどの組み込みイテラブルオブジェクトにも使用することができます。

for…ofループはforループやfor…inループと比べて直感的で簡潔なコードを書くことができるため、特に配列や文字列の要素を順に取り出す場合には便利です。

Javascript学習におすすめの書籍

確かな力が身につくJavaScript「超」入門 第2版

created by Rinker

• Kindle
• Amazon
• 楽天市場
• Yahooショッピング

1冊ですべて身につくJavaScript入門講座

created by Rinker

ノーブランド品

• Amazon
• 楽天市場
• Yahooショッピング

Whileループ

以下whileループの使い方です。

Whileループの使い方

whileループは、特定の条件が満たされている間、繰り返し処理を行うためのループ構造です。基本的な形式は以下の通りです。

1while (条件式) {
2    // 実行する処理
3}

ここで、条件式はループの各イテレーション（繰り返し）の開始前に実行されます。

この条件が trueであればループは続行し、falseであればループは終了します。

1let i = 0;
2
3while (i < 5) {
4    console.log(i); 
5    i++;
6}
7
8//コンソール結果
9// 0から4までの数値が出力される

この例では、iという変数が5未満である間、ループ内のコード（console.log(i)）を実行し、それと同時にiの値を1増加させます。

whileループは、ループ回数があらかじめ不明な場合や、特定の条件を満たす要素が見つかるまで配列を検索するなど、ループを終了する条件がループ中の処理結果に依存する場合に特に役立ちます。

すーさん

注意点として、whileループの条件式が常にtrueを返すような場合、ループは無限に続行します。

これを無限ループといい、プログラムが停止しなくなる可能性があるため、注意が必要です。

whileループを使用する際は、必ずループが終了する条件が設定されていることを確認しましょう。

do…whileループの使い方

do…whileループは、条件をチェックする前に少なくとも一度はブロック内のコードを実行するループ構造です。基本形式は以下の通りです。

1do {
2    // 実行する処理
3} while (条件式);

ここで、条件式はループの各反復操作の終わりに実行されます。

もし条件式がtrueを返す場合、次の反復操作が始まります。

条件がfalseを返すと、ループは終了します。

1let i = 0;
2
3do {
4    console.log(i); // 0から4までの数値が出力される
5    i++;
6} while (i < 5);

この例では、変数iの値が5未満である間、ループ内のコード（console.log(i)）を実行し、それと同時にiの値を1増加させます。

do…whileループの特性として、i < 5の条件を満たさない場合でも、ループ内のコードは最初の1回は必ず実行されます。

したがって、do…whileループは、ブロック内のコードが少なくとも一度は実行されるべき状況で便利です。

一方、whileループと同様に、無限ループにならないようにループ終了条件を適切に設定することが重要です。

ループ用メソッド

Array.prototype.forEach()

Array.prototype.forEach()は、配列の各要素に対して指定した関数を実行するメソッドです。

基本的な形式は以下の通りです。

1array.forEach(function(currentValue, index, array){
2    // 実行する処理
3});

この基本構文には3つのパラメータがあります。

となります。

これらの引数は、コールバック関数に渡されます。

1let fruits = ['apple', 'banana', 'cherry'];
2
3fruits.forEach(function(fruit, index) {
4    console.log(index + ': ' + fruit); 
5});
6
7//コンソール結果
8// 0: apple, 1: banana, 2: cherryが出力される

この例では、fruits配列の各要素に対して、その要素とそのインデックスをコンソールに出力するための関数を実行しています。

なお、forEach()メソッドは元の配列を変更しません。

また、forEach()はbreakステートメントを使用して途中で終了することができない点が、一般的なforループやwhileループとは異なります。

つまり、forEach()は配列の全ての要素に対して処理を行うことが保証されています。

すーさん

特定の条件でループを抜け出す必要がある場合は、forループやwhileループ、またはArray.prototype.some()やArray.prototype.every()のような他の配列メソッドを使用する方が適しています。

Array.prototype.map()の使い方

Array.map()メソッドは、配列の各要素に対して指定した関数を実行し、その結果を新しい配列として返します。

このメソッドは元の配列を変更せず、新しい配列を作成します。

また、元の配列の要素の順序は保持されます。

基本的な使い方は以下のようになります。

1const newArray = array.map(function(element, index, array) {
2    // 要素ごとに実行したい処理
3    // 新しい値を返す
4});

この基本構文には3つのパラメータがあります。

コールバック関数内では、各要素に対して実行したい処理を記述し、その結果として新しい値を返します。

map()メソッドは、各要素に対してコールバック関数を適用し、その戻り値から新しい配列を生成します。

1let originalArray = [1, 2, 3, 4, 5];
2let newArray = originalArray.map(function(item) {
3    return item * 2;
4});
5console.log(newArray); 
6
7//コンソール結果
8// [2, 4, 6, 8, 10]

この例では、originalArrayの各要素に対して乗算（item * 2）を行い、その結果を新しい配列newArrayに格納しています。

Array.map()メソッドは、配列の各要素を何らかの形で変換するときによく使用されます。

例えば、オブジェクトの配列から特定のプロパティだけを抽出した新しい配列を作成する場合などに役立ちます。

1let users = [
2  { name: 'Alice', age: 20 },
3  { name: 'Bob', age: 25 },
4  { name: 'Charlie', age: 30 },
5];
6
7let names = users.map(function(user) {
8  return user.name;
9});
10
11console.log(names); 
12
13// コンソール結果
14// ['Alice', 'Bob', 'Charlie']

この例では、users配列の各要素（ユーザーオブジェクト）からnameプロパティのみを取り出し、その結果を新しい names配列に格納しています。

ES6のアロー関数を使用すると、Array.map()のコードをより簡潔に書くことができます。

1let originalArray = [1, 2, 3, 4, 5];
2let newArray = originalArray.map(item => item * 2);
3console.log(newArray); 
4
5// コンソール結果
6// [2, 4, 6, 8, 10]

Array. prototype.filter()の使い方

Array.filter()メソッドは、元の配列の各要素に対してテスト関数を適用し、その関数を満たす（関数がtrueを返す）要素からなる新しい配列を作成します。

1const newArray = array.filter(function(element, index, array) {
2    // 要素ごとに実行したい条件の判定処理
3    // trueを返す要素が結果の配列に残される
4});

基本構文には3つのパラメータがあります。

コールバック関数内では、各要素に対して条件の判定処理を行います。

条件を満たす要素はtrueを返し、結果の配列に残されます。

条件を満たさない要素はfalseを返し、結果の配列から除外されます。

1let originalArray = [1, 2, 3, 4, 5];
2let filteredArray = originalArray.filter(function(item) {
3    return item > 3;
4});
5console.log(filteredArray); 
6
7// コンソール結果
8// [4, 5]

この例では、originalArrayの各要素に対してテスト関数（item > 3）を適用し、その結果を新しい配列filteredArrayに格納しています。

結果の配列には、元の配列からテスト関数を満たす要素だけが含まれます。

Array.filter()メソッドは、配列から特定の条件を満たす要素だけを抽出するときに便利です。

例えば、オブジェクトの配列から特定のプロパティが一定の値を持つ要素だけを抽出する場合などに使用できます。

1let users = [
2  { name: 'Alice', age: 20 },
3  { name: 'Bob', age: 25 },
4  { name: 'Charlie', age: 30 },
5];
6
7let youngUsers = users.filter(function(user) {
8  return user.age < 30;
9});
10
11console.log(youngUsers); 
12
13// コンソール結果
14// [{ name: 'Alice', age: 20 }, { name: 'Bob', age: 25 }]

この例では、users配列の各要素（ユーザーオブジェクト）からageプロパティが30未満の要素を抽出し、その結果を新しいyoungUsers配列に格納しています。

ES6のアロー関数を使うと、Array.filter()のコードをより簡潔に書くことができます。

1let originalArray = [1, 2, 3, 4, 5];
2let filteredArray = originalArray.filter(item => item > 3);
3console.log(filteredArray); 
4
5// コンソール結果
6// [4, 5]

Array. prototype.reduce()の使い方

Array.reduce()メソッドは配列の全ての要素に対して指定したリデューサー関数（コールバック関数）を適用し、それらの値を一つの値に集約します。

リデューサー関数は四つの引数を受け取ります：累積値、現在の値、現在のインデックス、ソース配列。

1const result = array.reduce(function(accumulator, currentValue, index, array) {
2    // 要素ごとに実行したい処理
3    // 結果をaccumulatorに累積し、次の要素に渡す
4    return accumulator;
5}, initialValue);

基本構文には、4つの主要なパラメータがあります。

また、reduce()メソッドの第2引数としてinitialValueを指定することもできます。

これは初期のaccumulatorの値を設定するためのオプションです。

コールバック関数内では、各要素に対して実行したい処理を記述し、その結果をaccumulatorに累積していきます。

最終的な累積結果がreduce()メソッドの返り値となります

1let nums = [1, 2, 3, 4, 5];
2let sum = nums.reduce(function(acc, curr) {
3    return acc + curr;
4}, 0);
5console.log(sum); 
6
7// コンソール結果
8// 15

この例では、nums配列の全ての要素に対してリデューサー関数を適用し、各要素を累積値（acc）に加えていきます。

最終的にsumは全ての要素の合計値を保持します。

リデューサー関数の第一引数は累積値（acc）で、これは前回の関数の呼び出しから返された値、もしくは初期値（上の例では 0）です。

第二引数は現在の要素の値（curr）です。

Array.reduce()メソッドは配列の要素を何らかの方法で合計・集約する必要があるときに役立ちます。

たとえば、商品の配列から全商品の総額を計算する場合などに使用されます。

1let products = [
2  { name: 'Apple', price: 1 },
3  { name: 'Orange', price: 2 },
4  { name: 'Banana', price: 3 },
5];
6
7let total = products.reduce(function(acc, product) {
8  return acc + product.price;
9}, 0);
10
11console.log(total); 
12
13// コンソール結果
14// 6

この例では、products配列の各要素（商品オブジェクト）からpriceプロパティを取り出し、それらを累積値に加えていき、最終的に全商品の総額を計算しています。

ES6のアロー関数を使用すると、Array.reduce()のコードをより簡潔に書くことができます。

1let nums = [1, 2, 3, 4, 5];
2let sum = nums.reduce((acc, curr) => acc + curr, 0);
3console.log(sum); 
4
5// コンソール結果
6// 15

Array.prototype.some()の使い方

Array.prototype.some()は、配列の少なくとも1つの要素が指定した関数によってチェックされた条件を満たすかどうかを判断するメソッドです。

基本的な形式は以下の通りです。

1let result = array.some(function(element, index, array){
2    // 条件を満たすかチェックする処理
3});

基本構文には3つのパラメータがあります。

コールバック関数内では、各要素に対して条件の判定処理を行います。

条件を満たす要素が見つかれば、some()メソッドは即座に終了し、trueを返します。

条件を満たす要素が見つからなければ、falseを返します。

1let numbers = [1, 2, 3, 4, 5];
2
3let hasEvenNumber = numbers.some(function(number) {
4    return number % 2 === 0;
5});
6
7console.log(hasEvenNumber); // trueが出力される

この例では、numbers配列の各要素が偶数であるかどうかをチェックしています。

some()メソッドは、配列のどれか1つの要素が偶数（2で割り切れる）であることを見つけると、すぐにtrueを返します。

Array.prototype.some()は、配列の要素が特定の条件を満たすかどうかをすばやく確認したい場合に便利です。

特に、全ての要素を調べる必要がない場合や、条件を満たす要素を見つけた時点で探索を終了したい場合には、some()メソッドを使用すると効率的です。

Array.prototype.every()の使い方

Array.prototype.every()は、配列のすべての要素が指定した関数によってチェックされた条件を満たすかどうかを判断するメソッドです。

基本的な形式は以下の通りです。

1let result = array.every(function(element, index, array){
2    // 条件を満たすかチェックする処理
3});

この基本的な構文には3つのパラメータがあります。

コールバック関数内では、各要素に対して条件の判定処理を行います。

すべての要素が条件を満たす場合はtrueを返し、そうでなければfalseを返します。

1let numbers = [2, 4, 6, 8, 10];
2
3let areAllEvenNumbers = numbers.every(function(number) {
4    return number % 2 === 0;
5});
6
7console.log(areAllEvenNumbers); // trueが出力される

この例では、numbers配列の各要素が偶数であるかどうかをチェックしています。

every()メソッドは、配列の全ての要素が偶数（2で割り切れる）であることを確認し、その結果をtrueとして返します。

Array.prototype.every()は、配列の全ての要素が特定の条件を満たすかどうかを確認する場合に便利です。

特に、1つでも条件を満たさない要素があればすぐに調査を終了したい場合には、every()メソッドを使用すると効率的です。

プログラミングが学べるスクール

JavaScriptのループ処理についてより深く学びたい方は、プログラミングスクールを検討すると良いでしょう。

各スクールでは、基本的な構文から応用までを学ぶことができ、専門の講師が直接指導してくれます。

学習のペースも自分でコントロールできるため、自分に合った学習方法を見つけられます。

おすすめのプログラミングスクール【DMM WEBCAMP】

DMM WEB CAMPは、日本国内で人気のオンラインプログラミングスクールです。

初心者から中級者向けのカリキュラムが提供され、Web開発に必要なHTML、CSS、JavaScript、Ruby on Railsなどのプログラミング言語を学べます。

自宅学習と講師による個別サポートが組み合わさっており、多くの卒業生がIT業界への転職やフリーランスとして成功を収めています。

DMM WEBCAMPのコース

WEBCAMP エンジニア転職では下記3コースを提供しています。

• 短期集中コース
  • 短期集中で最短3ヶ月でITエンジニアへ転職を目指す（転職保証付き）
• 専門技術コース
  • 短期集中コースのカリキュラムに加えてAIまたはクラウドを学習し、より専門性を高め転職できる（最大で受講料の70%をキャッシュバック）
• 就業両立コース
  • 働きながら学習し転職を目指す（転職保証付き）

DMM WEBCAMPで学べること

【転職型スクールNo.1】エンジニア転職特化のプログラミングスクール

DMM WEBCAMP公式サイト

その他おすすめのプログラミングスクールに関しては以下の記事で詳しく紹介していますので、ぜひチェックしてみてください。

あわせて読みたい

【初心者用】フリーランスも目指せる！おすすめのプログラミングスクール16選

まとめ

本記事では、JavaScriptの主要なループ構文について解説しました。

それぞれの構文には特性があり、目的に応じて最適なものを選択することが大切です。

また、これらの基本を押さえることで、より複雑なコードを理解する土台を築くことができます。

JavaScriptのループ処理は初心者にとっては少し難易度が高いかもしれませんが、一度理解してしまえば非常に強力なツールとなります。

プログラミングを習得する上で重要なスキルの一つなので、ぜひマスターしてください。

そして、さらに学びたいと思ったら、プログラミングスクールに参加することも検討してみてください。

フリーランスエンジニアにおすすめのエージェント

レバテックフリーランス

業界最大級の案件数を誇るフリーランスITエンジニア向けのサービス。専門アドバイザーによる案件提案と全面的なサポートを提供。

案件数	50,000件以上
リモート	○ （半分くらいがリモート対応）
単価	45万 〜 195万円
稼働日数	週5日が多め
福利厚生	◎
運営会社	レバテック株式会社

【レバテックフリーランス】フリーランス向け！
Webエンジニア案件情報サイト無料会員登録

詳しくはこちら

すーさん

webデザイナー/webエンジニア

TwitterInstagramLINEContact

30代web業界未経験 →オーストラリアにIT留学 →現地インターンを1年半経験 →フリーランスwebデザイナー・エンジニアとして活動 →月収80万円達成！