【JavaScript入門】for文を使った繰り返し処理を完璧に覚える！for…inやfor…ofの使い方も詳しく解説 │ TechMania

プログラミングを行う上で同じような処理を繰り返し実行したいとき、そういったループ処理を行うための専用の構文が言語の標準機能として用意されていることがほとんどです。

JavaScriptでは for 文という構文を使うことで基本的なループ処理を実装することができます。
今回は、for文の基本的な使い方から応用方法などについて詳しく解説していきたいと思います！

1. for文のループ処理とは？
2. for文の使い方
- 2.1. 基本構文と使い方
- 2.2. 配列を使ってループ処理をする
3. for文を使用する上で注意すべきポイント
4. for文のループ処理の途中でループを抜ける
- 4.1. continueで特定のタイミングだけ処理をスキップ
- 4.2. breakでループ処理を中断する
5. for … ofで配列やマップの中身を取り出してループ処理をする
6. for … inの使い方
- 6.1. 基本構文と使い方
- 6.2. for文やfor … ofとの違いに注意
7. その他のJavaScriptでのループ処理
- 7.1. forEachメソッドによる配列のループ処理
- 7.2. while文によるループ処理
8. まとめ
9. 関連記事
10. JavaScriptの勉強方法は？

for文のループ処理とは？

プログラミングでは、使用する言語ごとに記述方法や実装可能な機能が異なりますが、いずれの言語でも必ず用意されている機能がいくつかあります。
そのうちの1つが、いわゆるループ処理と呼ばれる反復処理機能です。

JavaScriptでループ処理を実装する際に使用するのがfor文です。
一定の法則に基づき、決められた回数だけ同じ処理を繰り返したい場合に使用することができます。

同じくループ処理の実装に使用できる while 文という構文もありますが、こちらは繰り返す回数が決まっていない (特定の条件を満たすまで繰り返し続ける) 場合に使用するため、ループ回数が明確に定まっているか否かで使い分けをするといいでしょう。

for文を含むループ処理は、基本的な機能でありながら活用できる範囲が幅広く、プログラミングを行う上での必須機能となっています。

for文の使い方

まずは、for文の基本的な使い方から見ていきましょう。

基本構文と使い方

for文を使用する際は、以下のような形式で構文を記述します。

【基本構文】

for (初期化式;  条件式;  変化式) {
  // 繰り返したい処理内容
}

for文では、ループ度に一定の基準で数値が増減する変数 (カウンター変数) を定義し、ブロック内で使用することができます。
初期化式は主に、このカウンター変数を初期化するために使用されます。

条件式は、繰り返し処理を続行するか否かを判断するための式です。
各ループの実行前に判定が行われ、trueの場合にブロック内の処理が実行されます。

変化式は、各ループの処理完了後に実行される式です。
基本的に、カウンター変数の値がいくつ増減するかを指定するために使用されます。

以下のサンプルコードで、実際の動きを見てみましょう。

【サンプルコード】

for (let count = 1;count < 6;count++) {
  console.log(count + '回目の処理です。');
}

【実行結果】

1回目の処理です。
2回目の処理です。
3回目の処理です。
4回目の処理です。
5回目の処理です。

上記のコードの場合、「let count = 1」が初期化式、「count < 6」が条件式、「count++」が変化式となります。

これに伴い、変数 count の数値が1から始まり、各ループの処理が終わるごとに数値が1ずつ増えていきます。
そして、ループを続ける条件が count の値が6未満の場合となっているため、5回目の処理が完了した時点でループ処理が終了しています。

このように、それぞれの引数に指定する数値を調整することで、任意の回数だけループ処理を行うことができます。
以上がfor文の基本的な動作です。

配列を使ってループ処理をする

ループ処理が使用される一例として、配列を扱うパターンが実際の開発でもよくあります。
今度は、for文を使用して配列の要素にアクセスする例を見てみましょう。

【サンプルコード】

const sampleArray = ['りんご', 'ぶどう', 'いちご', 'みかん', 'もも'];

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

【実行結果】

りんご
ぶどう
いちご
みかん
もも

for文で配列を扱う際には、いくつかのポイントがあります。

まず１つに、ループ処理内で配列にアクセスする場合、インデックス番号の指定にはカウンター変数を活用しましょう。
カウンター変数を使用することで自動で番号が変動するため、各番号ごとにコードを分けて記述する必要がなくなり、少ないコードで処理を実装することができます。

また、配列の要素数の分だけループしたい時は、lengthプロパティを使用すると便利です。
lengthプロパティは対象の配列の要素数を返却してくれるため、条件式での比較に活用することでループ回数を自動で調整できるようになります。

ただし、配列のインデックス番号は0から開始されるため、全ての要素にアクセスしたい場合はカウンター変数の初期値を0にする必要があります。

他の数値を指定してしまうと、一部の要素が処理されなくなるだけでなく、意図しない動作を引き起こす可能性にもなり得るため注意が必要です。

for文を使用する上で注意すべきポイント

for文には一点、使用する上で注意するべきポイントがあります。

まずは、以下のサンプルコードを見てみましょう。

【サンプルコード】

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

console.log(count);

【実行結果】

0
1
2
3
4
Uncaught ReferenceError: count is not defined

このコードを実行すると、一番下の出力処理の部分でエラーが発生します。
何故なら、for文で宣言されたカウンター変数 count はfor文のブロックスコープ（波括弧の内側の部分）の中でしか使用することができないからです。

続いて、以下のサンプルコードを見てみましょう。

【サンプルコード】

for(var count = 0; count < 5; count++) {

  console.log(count);
}

console.log(count);

【実行結果】

コードの内容自体は、for文の初期化式で let でなく var を使用している点以外は、先ほどと何も変わりません。
ですが、このコードを実行すると今度はエラーが発生することなく正常に作動します。

このように、var で宣言された場合のカウンター変数は、ローカル変数にはならずにブロック外でも使用できてしまいます。

この2つのコードの大きな違いは、let と var で宣言された変数が有効になる範囲がそれぞれ異なっているということです。

現在のJavaScriptのコーディングで変数の宣言によく使用される let や const は、関数やfor文などのブロックの中で宣言されると、その中だけで有効になるブロックスコープという有効範囲を持っています。

一方で、JavaScriptにもともとあった var はグローバルスコープといって、varで宣言された変数はプログラム全体を有効範囲とする仕様になっています。そのため、2つめのコードではfor文の中で宣言された変数がfor文のブロックを抜けても有効なままになっていました。

変数の有効範囲 (スコープ) の違いは、プログラミング全体の処理に与える影響も大きいため、使用の際には注意が必要です。

for文のループ処理の途中でループを抜ける

先ほどまでのサンプルコードは全て、指定した回数分だけ必ずループする処理内容でした。

ですが for文では、途中で処理を中断してループを抜けたり、任意のループ回のみ処理をスキップすることもできます。

それぞれの詳しい使い方について見ていきましょう。

continueで特定のタイミングだけ処理をスキップ

「特定の条件下のみ、処理をスキップしたい」といったケースで活用できるのが、continue文です。
continue文を使用すると、それ以降に記述されたループ内の処理がスキップされ、次のループ回へと即座に移行されます。

以下のサンプルコードを見てみましょう。

【サンプルコード】

for (let count = 0; count < 10; count++) {
    // 奇数の時は処理を行わない
    if(count % 2 === 1) continue;
    console.log(count);
}

【実行結果】

このサンプルコードでは、if文でカウンター変数の値が奇数か否かの条件分けを行い、trueの場合に出力表示処理をスキップするよう continue 文を記述しています。

実行結果を見ると、表示されている数値は全て偶数となっており、条件の通りに処理がスキップされているのが分かりますね。

このように、continue文を使用する場合は if文と組み合わせて活用するのが一般的です。

breakでループ処理を中断する

続いて、for文で中断処理を行う方法について解説します。

先ほどの continue 文の場合は、あくまでそのループ回の処理がスキップされるのみでループ処理そのものは継続される仕様でしたが、処理を完全に中断し for 文を終了させる方法も存在します。

for文の中断処理を行いたい場合は、break 文を使用します。

以下のサンプルコードを見てみましょう。

【サンプルコード】

for (let count = 0; count < 10; count++) {
    // 変数の値が５以上になったら中断する
    if (count >= 5) break;
    console.log(count);
}

【実行結果】

このサンプルコードでは、カウンター変数が５以上になった段階でループ処理を中断するよう記述しています。

実行結果を見ると、変数の値が4の状態が最後となり、5に到達した時点で処理が中断されているのが分かると思います。

このように、スキップしたループ回以外は処理が実行されていた continue 文と異なり、break 文は実行された時点でループ処理そのものが中断されます。

for … ofで配列やマップの中身を取り出してループ処理をする

JavaScriptで使用できるループ処理方法の１つに、for … of 文があります。
通常のfor文とどのように動きが異なるのか、基本的な使い方から順に解説していきます。

基本構文と使い方

for … of文を使用する際は、以下のように記述します。

【基本構文】

for (変数名 of 反復可能オブジェクト) {
    // 繰り返したい処理内容
}

for …of文は、後述するイテレータを持つオブジェクト（反復可能オブジェクト）に対して使用可能な構文です。
条件式などをもとにループ回数を指定する for 文とは異なり、配列やマップなどの反復可能オブジェクトから要素を順に取り出して処理を行います。

要素が直接変数に代入されるため、for文を使って記述するよりもコードがより簡潔になり、処理内容の意図も読み取りやすくなるという利点があります。

以下のサンプルコードで実際の動きを見てみましょう。

【サンプルコード】

const sampleArray = ['りんご', 'ぶどう', 'いちご', 'みかん', 'もも'];

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

【実行結果】

りんご
ぶどう
いちご
みかん
もも

for文の場合は、カウンター変数をもとにインデックス番号を指定して要素を取り出す必要がありましたが、for … of文ではこのように要素が直接変数に代入されます。

for文で使用可能であった continue文や break文については、for … of文でも同様に使用することができます。

注意するポイント：イテレータの扱い

for … of文は上述の通り、反復可能オブジェクトに対して使用できる構文のため、それ以外のオブジェクトに使おうとするとエラーが発生します。

反復可能オブジェクトとは、イテレータを持つオブジェクトのことを言います。

イテレータは、配列やリストなどの要素に順番にアクセスするための仕組みです。
JavaScriptにおいては、next()メソッドを実装したオブジェクトのことをイテレータと呼びます。

for … of文は、このイテレータの仕組みを利用して動作する構文のため、反復オブジェクトに対してのみ使用が可能となっています。

JavaScriptで反復可能オブジェクトに分類されるものには、以下の種類があります。

配列
文字列
Map
Set
arguments
DOM

数値型やオブジェクト型などに対しては使用ができないので注意が必要です。

【応用編】for await … ofの使い方

for … of文と似た構文に、for await … of文というものがあります。

for await … of文は、非同期の反復可能オブジェクト（AsyncIterable）をループ処理するための制御文です。
例えばAPIのレスポンスなど、非同期処理の結果を一度にまとめて受け取るのではなく、順繰りに受け取りたい場合に活用することができます。

以下は簡単なサンプルコードです。

【サンプルコード】

const sleep = (s) => new Promise(f => setTimeout(f, s * 1000));
 
async function* foo() {
  yield 1;
  await sleep(1);
  yield 2;
  await sleep(1);
  yield 3;
}
 
(async () => {
  for await (const value of foo()) {
    console.log(value);
  }
})();

【実行結果】

1
2
3

非同期処理の内容を逐次実行したい場合の記述方法は他にもいくつかありますが、手段の１つとして覚えておくと便利です。

for … inの使い方

続いて、同じくループ処理の記述方法の１つである for … in文も合わせて紹介します。

基本的な使い方から、for文や for … of文との違いなどについても解説していきますので、順に見ていきましょう。

基本構文と使い方

for … in文を使用する際は、以下のように記述します。

【基本構文】

for (変数名 in オブジェクト) {
   // 繰り返したい処理内容
}

for … in文は、主にオブジェクト型のような列挙可能プロパティを持つオブジェクトを反復処理するために使用する制御文です。

一番の大きな特徴として、オブジェクトであればキー、配列であればインデックス番号といったように、要素の値ではなくプロパティを変数に代入する点にあります。

以下のサンプルコードで実際の動きを見てみましょう。

【サンプルコード】

const sampleObject = {
    name : '山田太郎',
    age : 19,
    job : '大学生'
}

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

【実行結果】

name：山田太郎
age：19
job：大学生

結果を見ると、変数に代入される値がオブジェクト内のキーとなっているのが分かると思います。

for文やfor … ofとの違いに注意

for …in文は、基本的にはオブジェクトを扱う上で使用する構文ですが、仕様上は配列にも適用可能となっています。
しかしながら、配列に対して for …in文を使用することは、あまりお勧めできない方法であると言えます。

その理由として、for文や for … of文と異なる以下のような特徴があります。

prototypeで拡張されたメソッドも一緒に取得してしまう
処理の順序が保証されていない
変数にインデックス番号が格納されるため、コードが嵩張りやすい

特に、１つ目にあげたメソッドの件については、配列に限らず起こり得る問題となっています。

以下のサンプルコードを見てみてください。

【サンプルコード】

const sampleObject = { 
    name: '山田太郎', 
    age: 19, 
    job: '大学生'
}

Object.prototype.hoge = function() {};

for (let key in sampleObject) {
   console.log(key + '：' + sampleObject[key])
}

【実行結果】

name：山田太郎
age：19
job：大学生
hoge：function() {}

結果を見ると、元々格納されていた要素だけでなく、拡張されたメソッドまで一緒に取得されているのが分かります。
このように、本来必要のない情報まで取得してしまう場合があります。

基本的には他の使用可能な方法で代替するのが望ましいですが、for … in文を使用した上で上記を回避したい場合は、hasOwnPropertyメソッドを使用しましょう。

【サンプルコード】

const sampleObject = { 
    name: '山田太郎', 
    age: 19, 
    job: '大学生'
}

Object.prototype.hoge = function() {};

for (let key in sampleObject) {
   if(sampleDict.hasOwnProperty(key)) {
       console.log(key + '：' + sampleObject[key])
   }
}

【実行結果】

name：山田太郎
age：19
job：大学生

その他のJavaScriptでのループ処理

上記で紹介した3つの方法の他にも、ループ処理の実装に使用できる方法が存在します。
それぞれ見ていきましょう。

forEachメソッドによる配列のループ処理

実装可能な方法の１つ目は、forEachメソッドを使用する方法です。
forEachメソッドを使用する際の基本構文は、以下のように記述します。

【基本構文】

array.forEach(コールバック関数)

コールバック関数の引数に配列の各要素が格納されるため、for …of文と似たような形式でループ処理を行うことができます。

サンプルコードで実際の動きを確認してみましょう。

【サンプルコード】

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

sampleArray.forEach(function(value) {
    console.log(value);
});

【実行結果】

forEachメソッドを使用する際の注意点として、あくまで制御文ではなくメソッドのため、continue文や break文を使用することはできません。

処理のスキップや中断をする必要がある場合には、for … of文を代わりに使用すると良いでしょう。

forEachメソッドについては以下の記事で詳しく解説しています。ぜひこちらも併せてご一読ください。

【JavaScript入門】forEachメソッドで配列の各要素に処理を繰り返す！使い方から注意点まで徹底解説

while文によるループ処理

実装可能なもう１つの方法は、while文を使用する記述方法です。

冒頭でも解説したように、for文が任意の回数分だけループ処理を行う構文であるのに対し、while文はループ回数を明確に定めない処理での使用に適しています。

while文を使用する際の基本構文は、以下のように記述します。

【基本構文】

while(条件式) {
   // 繰り返したい処理内容
}

while文には、カウンター変数や要素を自動で格納するための変数などは存在しないため、必要に応じてブロック内でコードを記述する必要があります。

以下のサンプルコードで実際の動きを見てみましょう。

【サンプルコード】

const sampleArray = [10, 2, 23, 26, 37, 15];

let count = 0;
let value = 0;

while(value < 30) {
    value = sampleArray[count];
    count++;
    console.log(count + '回目：' + value);
}

【実行結果】

1回目：10
2回目：2
3回目：23
4回目：26
5回目：37

上記のコードは、配列の要素の中から数値が 30 を超える要素が現れるまで、回数に制限なくループ処理を行うコードとなっています。

while文を使用するケースでは、ループ回数を明確に定めず処理する場合が多いため、条件式の内容を間違えてしまうと永遠にループ処理が続いてしまうことになります。
使用の際には注意しましょう。

まとめ

今回は、JavaScriptでループ処理を実装する方法について解説してきました。

様々な実装方法があるため一度に全て覚えるのは大変かもしれませんが、いずれも使う機会の多い方法です。
ぜひ使い方をマスターしていきましょう！

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

＜テックマニアの特徴＞
・たしかな育成実績と親身な教育　～セカンドキャリアを全力支援～
・講師が現役エンジニア　～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート　～「わからない」を徹底解決～
・実務ベースでスキルを習得　～実践的な凝縮カリキュラム～

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。