JavaScriptのforの使い方は？for文の基本からforEachの3つのパラメータを紹介！

.NET開発者のためのブログメディア

SE: 同じ処理を繰り返したいときの、効率的なfor分の使い方について教えてください。

PM: ではfor分の基本的な記述方法を、実際のコードを見ながら確認していきましょう。

JavaScriptのforとは？

JavaScriptで同じような処理を何度も繰り返したい時はどうすれば良いのでしょうか。10回行うとして、同じ内容を10回記述するのは効率が悪いものです。そんな時はfor文を使えば解決します。

for文はJavaScriptに限らず多くの言語にある機能ですが、JavaScriptならではのルールもあります。この記事では基本から応用まで詳しく紹介するので是非ご覧下さい。

for文の基本

JavaScriptのfor文は以下のように記述します。

for (var i = 0; i < 3; i++) {
    alert (i);
}

for (var i = 0; i < 3; i++) {

alert (i);

}

これを実行すると、alertによるポップアップウィンドウが3回出て来て、それぞれには0・1・2と表示されています。for文によって繰り返し処理が実行されたのです。

for文の文法は以下の通りです。

for (初期化処理; 繰り返す条件式; 変数の加減処理) {

繰り返し処理

}

これを上のサンプルに当てはめると、変数iを0で初期化し、iが3よりも少ない間、i++によりiを1ずつ加算しながら繰り返すというfor文になります。

for文は省略が可能

for文の初期化処理・条件式・加減処理はそれぞれ省略が可能です。例えば、

var i = 0;
for (; i < 3; i++) {
    alert (i);
}

var i = 0;

for (; i < 3; i++) {

alert (i);

}

は同じ結果になります。また、

var i = 0;
for (; i < 3;) {
    alert (i++);
}

var i = 0;

for (; i < 3;) {

alert (i++);

}

もやはり同じ結果になります。そして、

var i = 0;
for (;;) {
    alert (i);
    if (++i >= 3) break; // iが3以上の場合はbreakで抜ける
}

var i = 0;

for (;;) {

alert (i);

if (++i >= 3) break; // iが3以上の場合はbreakで抜ける

}

も同じ結果です。条件式が無い場合はずっと終わらず、無限ループになります。breakというキーワードがありますが、これを実行するとforループから抜けることができます。breakで抜けないとループがずっと終わらないので注意しましょう。

二重ループ

for文は二重ループも可能です。以下のJavaScriptサンプルをご覧ください。

for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
        alert('i=' + i + ' j=' + j);
    }
}

for (var i = 0; i < 3; i++) {

for (var j = 0; j < 3; j++) {

alert('i=' + i + ' j=' + j);

}

実行すると、「i=0 j=0」「i=0 j=1」・・・「i=2 j=2」と9回表示されます。入れ子のループが実行されているのがわかると思います。このサンプルに以下のようなbreakを追加してみましょう。

for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
        if (j==1) break;
        alert('i=' + i + ' j=' + j);
    }
}

for (var i = 0; i < 3; i++) {

for (var j = 0; j < 3; j++) {

if (j==1) break;

alert('i=' + i + ' j=' + j);

}

これを実行すると内側のループはjが1になったら1つ外側に抜けるので、「i=0 j=0」「i=1 j=0」「i=2 j=0」と3回ポップアップが出て終わります。

breakにはラベルを付けられる

上のJavaScriptサンプルではbreakで抜けましたが、一つ外のループではなく、その外側に抜けて二重ループを終わらせたい場合はどうすればいいのでしょうか。その場合は以下のようにbreakにラベルを付けます。

outside: for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
        if (j==1) break outside;
        alert('i=' + i + ' j=' + j);
    }
}

outside: for (var i = 0; i < 3; i++) {

for (var j = 0; j < 3; j++) {

if (j==1) break outside;

alert('i=' + i + ' j=' + j);

}

実行すると「i=0 j=0」だけが出て終わります。i=0でj=1の時にbreakで外側のfor文のoutside:ラベルの所に行って、それで処理が終わるからです。ラベルはこのようにループが入れ子の時に利用してください。

continueの使い方

JavaScriptにはbreakとは別に、continueがあります。これは以下のように使用します。

for (var i = 0; i < 3; i++) {
    if (i == 1) continue;
    alert (i);
}

for (var i = 0; i < 3; i++) {

if (i == 1) continue;

alert (i);

}

実行すると、0と2が表示されて終わります。1がスキップされました。そのように、continue処理をスキップする機能があります。forループでcontinueが呼ばれると、ループのそれ以後の処理が飛ばされて次のループに移るのです。

ラベル付きcontinue

continueにもbreakと同様にラベルを付けられます。以下のJavaScriptサンプルをご覧ください。

outside: for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
        if (j==1) continue outside;
        alert('i=' + i + ' j=' + j);
    }
}

outside: for (var i = 0; i < 3; i++) {

for (var j = 0; j < 3; j++) {

if (j==1) continue outside;

alert('i=' + i + ' j=' + j);

}

実行すると、「i=0 j=0」「i=1 j=0」「i=2 j=0」と表示されます。jが1になると外側のfor文の次のループに移行しています。ラベルを外したり、continueをbreakに変えたりして結果を比較すると理解しやすいでしょう。

for～in文について

JavaScriptのfor文には、オブジェクトの中身を手軽に取り出せるfor～in文があります。以下がそのサンプルです。

var human = {
    name:'一郎',
    age: 30,
    work:'会社員'
}

for (var key in human) {
    alert(key + ' ' + human[key]);
}

var human = {

name:'一郎',

age: 30,

work:'会社員'

}

for (var key in human) {

alert(key + ' ' + human[key]);

}

humanにはname・age・workの3つのプロパティを持つオブジェクトが入っています。for～inですべてのプロパティを取り出すことができます。実行するとプロパティネームと値の3つの組み合わせが全て表示されます。

for～inの注意点

for～intには一つ注意点があります。上のサンプルのfor～inの前に以下の1行を追加してみましょう。

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

1 2	Object.prototype.func = function() {};

実行すると、humanのプロパティの中身を表示した後に「func function() {}」が出てきます。オブジェクトを拡張してfuncと言うメソッドを追加したことで、それまで表示されてしまうのです。しかしこれは意図した動作でないことも多いでしょう。

出したくないものを出さない方法

上の問題を解消するには、オブジェクトのhasOwnPropertyメソッドを使用すると良いでしょう。サンプルのfor～inの箇所を以下のように直してください。

for (var key in human) {
    if(human.hasOwnProperty(key)) {
        alert(key + ' ' + human[key]);
    }
}

for (var key in human) {

if(human.hasOwnProperty(key)) {

alert(key + ' ' + human[key]);

}

これでkeyで指定されたプロパティのみが表示されるので、funcは出て来なくなります。

for～of文について

次はfor～of文を解説します。以下のJavaScriptサンプルを実行してみてください。

var ary = ['太郎', '次郎', '花子'];
 
for(var value of ary) {
    alert(value);
}

var ary = ['太郎', '次郎', '花子'];

for(var value of ary) {

alert(value);

}

実行すると太郎・次郎・花子と3つのポップアップが表示されます。for～ofはこのように配列の各要素に処理を行いたい時に使うことができます。ただしfor～inのようにオブジェクトには使用できません。

配列を普通のfor文で扱う方法

for～ofを使わずに普通のfor文で配列の全要素に対して処理を行う場合は、以下のようにします。

var ary = ['太郎', '次郎', '花子'];
 
for(var i = 0; i < ary.length; i++) {
    alert(ary[i]);
}

var ary = ['太郎', '次郎', '花子'];

for(var i = 0; i < ary.length; i++) {

alert(ary[i]);

}

配列の長さは「配列変数.length」で取得できます。これで上のfor～ofを使ったサンプルと同じことができます。このやり方の方が他のプログラム言語と近いのでしっくり来る人も多いでしょう。

forEachについて

最後はforEachを解説します。これもfor～ofと同じく配列で使用できるのですが、使い方が違います。

var ary = ['太郎', '次郎', '花子'];
 
ary.forEach(function(value) {
    alert(value);
});

var ary = ['太郎', '次郎', '花子'];

ary.forEach(function(value) {

alert(value);

});

forEachは配列変数のメソッドとして提供されています。コールバック関数を登録することで、配列の全要素に対して処理ができます。なおforEachではbreakやcontinueは使用できません。

forEachの3つのパラメータ

forEachのコールバック関数では3つのパラメータを利用できます。

function( value, index, array )

valueが要素の値、indexが要素の番号、arrayが対象の配列です。以下はindexを使用しています。

var ary = ['太郎', '次郎', '花子'];
 
ary.forEach(function(value, index) {
    alert(index + ' ' + value);
});

var ary = ['太郎', '次郎', '花子'];

ary.forEach(function(value, index) {

alert(index + ' ' + value);

});

実行すると、「0 太郎」「1 次郎」「2 花子」と表示されます。

SE: for分を使い分けることで、様々な繰り返し処理が可能になるんですね。

PM: この3つのfor分が基本になりますので、自分なりに応用してマスターしてください。

JavaScriptのfor文を繰り返し処理に活用しよう

JavaScriptのfor文について解説しましたがいかがでしたでしょうか。まず、JavaScriptのforについて説明してから、forの基本文からforEachの3つのパラメータについて解説しました。

この記事読んだ後、実際にJavaScriptのfor文のコードを書いて理解を深めてみて下さい。

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）