JavaScript for文とは？特徴や使い方、注意点を実例付きで紹介

JavaScriptを学習し始めてすぐに扱う構文の一つにfor文があります。for文は非常に便利であるため様々な場面で使いますよね。

しかし、いざマスターしようと思っても、

「JavaScriptのfor文ってどうやって使えばいいかわからない…」
「JavaScriptのfor文を使う上での注意点は？」
「JavaScriptのfor文ってどうやって学んだらいいの？」

あなたはこのような悩みや疑問を抱えていませんか？

これからJavaScript for文を学ぼうとしている初心者の中には、for文をマスターするにも何からすればいいかわからない人もいるでしょう。

ましてや周りに頼れる人がいなければ、注意点などもわからずマスターするにも困ってしまいますよね。

そこで今回は、JavaScript for文の特徴から使い方を実用例を用いながら紹介！使用する際の注意点やforEachなどの特殊な書き方をする処理についても解説していきます。

この記事を読めばJavaScript for文を学び初めた初心者の方でも、簡単にfor文をマスターできるようになりますよ。

それでは参ります。

JavaScript for文とは？

JavaScript for文とは、ループや繰り返し処理をしてくれる構文です。PythonやC言語など様々なプログラミング言語で使われているメジャーな構文でもありますね。

「JavaScript for文ってどうやって記述すればいいの？」と思われている方もいるはず。JavaScriptのfor文は以下のように記述します。

for(　初期値　;　条件式　;　増減値　){ … }

初期値にはfor文で使う変数を設定します。基本的にvar i=0で使われることが多いですね。変数を定義しているのでvarを忘れないようにしましょう。

条件式にはfor文を続ける条件式が入ります。for文の中で処理が一通り終わった後、条件式を参考にしてもう一度繰り返すか判定するんですね。

条件式を満たせば同じ処理を繰り返し、満たさなかった場合はfor文から抜けるようになっています。

増減値にはfor文が繰り返されるたびに増減値の処理が行われるものです。これも基本的にi++で問題ないでしょう。

JavaScript for文の特徴

初めてfor文を学ばれる方は、「for文ってどんな特徴があるのか知りたい！」と思っていませんか？for文では主に次のような特徴を持っています。

• 同じ処理を繰り返して実行してくれる
• 配列と相性が良い
• 開始場所や繰り返し方を変えられる
• 繰り返しをスキップしたり、中断したりできる

それぞれの特徴について実際にプログラムを載せながら解説しますね。

同じ処理を繰り返して実行してくれる

次のようなコードがあったとしましょう。

document.write(10);
document.write(10);
document.write(10);

このコードは10を3回出力しているので実行結果は「101010」になります。しかし同じような文が３回も続いていてなんだかきれいなコードに見えませんよね。

そこでfor文の出番です。for文を使うことで次のように書き換えられます。

for(var i=0; i<3; i++){ document.write(10); };

このコードも実行結果は「101010」となり、先ほどよりも見やすくなりました。では実際にどのような処理が行われているのでしょうか。

for文の中を見ると初期値がi=0、条件式がi<3、増減値がi++になっています。

iが0から始まり処理を繰り返すたびにiが1増えて、iが3になるとループを抜ける仕組みになっていますね。

つまり上のコードでは、document.write(10)が3回繰り返されています。よって結果として「101010」が得られるわけなんですね。

配列と相性が良い

for文は配列を使った処理に非常に便利です。次のコードを見てみましょう。

document.write(‘apple ’);
document.write(‘orange ’);
document.write(‘banana ’);
document.write(‘grape ’);
document.write(‘melon’);

実行結果は「apple orange banana grape melon」となりますが、「もっとすっきりした書き方で表したい！」と思いませんか？これもfor文で書き直すことができるんです。

var fruit = [‘apple ’,’orange ’,’banana ’,’grape ’,’melon’];
for(var i=0; i<5; i++){
document.write(fruit[i]);
}

これも実行結果は同じ「apple orange banana grape melon」となります。新たに配列を作っているのがわかりますね。

配列の作り方は上記のように[‘apple’,…]と記述する方法、new Arrayで記述する方法があります。よく覚えておきましょう。

var fruit = [‘apple’,’orange’,’banana’,’grape’,’melon’];
var fruit = new Array(‘apple’,’orange’,’banana’,’grape’,’melon’);

では作成した配列をどのようにして一つずつ取り出しているのかというと、「document.write(fruit[i]);」の部分で取り出しているんです。

配列から指定したインデックスの変数を取り出すにはfruit[0]のように配列を格納している変数に[0]を付けることで取り出せます。

例えばappleは0番目の位置にあるのでfruit[0]、bananaは2番目の位置にあるのでfruit[2]で取り出せるわけなんですね。

上のコードはfruit[i]になっています。このiはfor文で定義した変数でしたね。つまりi=0、i=1、…と処理が繰り返すたびにiが増えるので、結果として順番に値を取り出せるわけです。

開始場所や繰り返し方を変えることもできる

for文の構造について詳しく見ていきましょう。先ほどのコードでは、for文は以下のようになっていました。

for(var i=0; i<5; i++){ … }

for文はiが0から始まり、1ずつ増えて4を超えるとループを抜けるものでしたよね。では次のfor文はどのように処理するのでしょうか。

for(var i=3; i>0; i--){ … }

for文はiが3から始まっています。そして処理が終わるとiが1ずつ減っていき、1より小さくなるとループを抜けていますね。

上記のようにfor文ではループを始める場所や繰り返し方を変えられます。実際にプログラムを組んで確認してみましょう。

var fruit = [‘apple ’,’orange ’,’banana ’,’grape ’,’melon’];
for(var i=3; i>0; i--){
document.write(fruit[i]);
}

実行結果は「grape banana orange 」になり、確かに3番目から1番目まで逆順に表示されていることが確認できますよ。

繰り返しはスキップ、中断することもできる

for文では特定の繰り返しをスキップしたり、中断したりできます。それぞれどのように記述するのか、プログラムを参考にみていきましょう。

var fruit = [‘apple ’,’orange ’,’banana ’,’grape ’,’melon’];
for(var i=0; i<4; i++){
if(i == 1) continue;
if(i == 3) break;
document.write(fruit[i]);
}

上のコードでは、iが1だった場合にcontinueをしてスキップしています。

スキップされるとそれ以降の処理は行われず次の処理に進むため、iが1の場合はdocument.write(fruit[i]);が実行されなくなるんですね。

一方iが3だった場合はbreakをしてループを中断しています。countinueと違うところは、次の処理に進まずfor文をそのまま抜け出す点です。

つまりiが3の場合はfor文を抜け出すのでfruit[3]、fruit[4]が出力されなくなるわけなんですね。

実行すると「apple banana 」と表示されます。

for文の使い方

for文の特徴を理解することはできたでしょうか？いよいよここからは、for文の使い方について解説していきますね。

事例となるプログラミングを参考にしながら、一緒にプログラムを組んでいきましょう！

使用例1 100までの3の倍数を全て足した合計を求める

100までの3の倍数は3、6、9、12、…、99と3から始まって100まで3ずつ増えているので、それに従ってfor文を作ればいいでしょう。

目的はそれらの数をすべて足した合計の数を知りたいのですから、新しい変数を作り、繰り返すたびに新しい変数に3の倍数を足していけばいいわけですね。

100までの3の倍数をすべて足すプログラムは以下のようになります。

var sum = 0;
for(var i=3; i<=100; i+=3){
sum += I;
}
document.write(sum);

一つ注意してほしい点は、合計の数を定義する場所、出力する場所はfor文の外で実行させること。

中で定義してしまうと、繰り返し処理が行われるたびにsumが毎回0に初期化されてしまうので正しい出力ができません。

また中で出力すると、繰り返し処理が行われるたびにそれまでの合計数が出力されます。ですがここではすべて足した合計の数だけでいいのでfor文の外で問題ありません。

使用例2 ×の模様を作る

for文を使って次の模様を作ってみましょう。

⬛︎⬜︎⬜︎⬜︎⬛︎
⬜︎⬛︎⬜︎⬛︎⬜︎
⬜︎⬜︎⬛︎⬜︎⬜︎
⬜︎⬛︎⬜︎⬛︎⬜︎
⬛︎⬜︎⬜︎⬜︎⬛︎

まずは5×5の四角を作ってみることから始めるといいですよ。□を5回繰り返して表示させる処理を5回繰り返せばできそうですね。

そして■の配置は、1行目は1番目と5番目、2行目は2番目と4番目と法則性があるのに気付いたでしょうか？これを利用するとi行目はi番目と5-i番目で模様が書けそうですね。

実際にプログラムにすると以下のようになります。

var str = "";
for(var i=1; i<=5; i++){
for(var j=1; j<=5; j++){
if(i == j || 5-i == j){ str += "⬛︎"; }
else{ str += "⬜︎"; }
}
str += "
";
}
document.write(str);

strという変数を作りそこに□や■を足していることで最後のdocument.write(str)で×の模様が作れるわけなんですね。

7行目の
は改行コードで四角を5つ表示させた後に、改行して5×5の四角を作る役割を果たしています。

使用例3 配列内の数字を降順に並べ替える

「8、2、20、38、7」という配列を大きい順に並べて「38、20、8、7、2」にします。

考え方はfor文でj番目とj+1番目の値を比べてj+1番目の値が多ければ入れ替える処理をすれば行えそうですね。

ただし入れ替える処理を一回繰り返しただけだと大きい順に並ばないので、配列の大きさ分、入れ替え処理を繰り返す必要があります。

実際のコードは次のようになります。

var kazu = [8,2,20,38,7];
for(var i=0; i<5; i++){ for(var j=0; j<4-i; j++){ if(kazu[j] < kazu[j+1]){ var x = kazu[j]; kazu[j] = kazu[j+1]; kazu[j+1] = x;
} } document.write(kazu); document.write("
");
}

実行結果は以下のようになりましたか？

8,20,38,7,2
20,38,8,7,2
38,20,8,7,2
38,20,8,7,2
38,20,8,7,2

1回目の繰り返し処理では大きい順に並んでいませんが2回目、3回目と繰り返すことで最終的に大きい順に並んでいることがわかりますね。

使用例4 無限ループを作る

for文では無限ループもつくれます。以下のコードを見てみましょう。

var n = 1;
for(;;){
n *= 2;
if(n > 1000) break;
}
document.write(n);　// n=1024

今までのfor文とは少し違って、初期値、条件式、増減値が何も書かれていませんよね？

つまり繰り返しによる増減が無く条件式も設定されていないので無限ループになるわけなんですね。

何回まで繰り返すのかわからない時は無限ループを使用するのが有効です。とても便利なコードなので覚えておくといいでしょう。

JavaScript forを使用する時の3つの注意点

for文の使い方についてわかったところで、初心者がコードを書くとやりがちなミスについて紹介していきます。「ミスしそうだな…」と思われた方はしっかり見ておきましょう。

• 配列は1ではなく0番目からスタートする
• for文で定義した変数は外側でも使える
• 無限ループはbreakを必ずつける

ミスをしないように気を付けるためには上記に注意する必要があります。それぞれどのようなミスをする可能性があるかを添えて解説していきますね。

配列は1ではなく0番目からスタートする

次のコードでは、出力結果はどうようになると思いますか？

var fruit = ['apple ','orange ','banana ','grape ','melon'];
document.write(fruit[1]);

答えは’orange’です。実は、配列は1番目からではなく0番目から数えるんですね。

例えば’apple’を出力したいならdocument.write(fruit[0])とする必要があります。

この考え方はfor文で配列を扱う場合も同じです。配列は0番目から始まるということを覚えておかないと、実行が思い通りにいかなくなってしまうので気を付けましょう。

for文で定義した変数は外側でも使える

次のコードを見てみましょう。

var fruit = ['apple ','orange ','banana ','grape ','melon'];
for(var i=0; i<5; i++){
document.write(fruit[i]);
}
document.write(fruit[i]);

実行結果は「apple orange banana grape melonundefined」になります。最後のdocument.write(fruit[i])だけ結果がundfinedになっていますね。

では、なぜこのような結果になると思いますか？

実はfor文で定義された変数は外側でも使えるんですね。増減値はi++になっていますから、for文を抜けた時のiは5になっています。

そのあとでdocument.write(fruit[i=5])をしていますがfruit配列に5番目の値はないのでundefinedになっているわけなんですよ。

これを知らずに他の部分でもiを使っていると想定外のエラーを起こす可能性があるのでよく覚えておきましょう。

無限ループはbreakを必ずつける

無限ループを作るときにも注意点があります。無限ループは途中で抜けない限り永遠に繰り返えされるので、breakを付ける必要があるんですね。

var fruit = ['apple ','orange ','banana ','grape ','melon'];
for(;;){
document.write(fruit[0]);
}

上記のように途中で抜けるbreakがない無限ループを作ってしまうと、実行した時に永遠に処理が続きます。

そのため操作ができなくなり、実行したブラウザをもう一度立ち上げないといけなくなるんですね。

「もう一度立ち上げるのはめんどう…」と思われた方は、breakは無限ループから抜け出すために重要な役割を果たしていることを忘れないでくださいね。

for文のいろいろな書き方

for文には今まで取り扱ったもの以外にも以下のように特殊なfor文があります。

• foreach
• for-of
• for-in

それぞれどのように使うのかを解説していきます。

foreach

foreachは配列の中身を繰り返すものです。配列の繰り返しのみ使える構文ですが、それ以外では扱えません。

var fruit = ['apple ','orange ','banana ','grape ','melon '];
fruit.forEach( function( value ){
document.write(value);
});

少し特殊な書き方をするのでやや複雑に感じますが、内容は’apple’から順番にforEach内の処理をしているだけなので慣れれば簡単に扱えるでしょう。

まずはfruit.forEach…のように繰り返し処理をしたい配列の変数に「.」でつなげてforEach構文を書きます。その中で繰り返してほしい処理を書けば完成です。

取り出される配列の値はvalue変数に入ります。forEach内ではdocument.write(value)で配列の中身を1個ずつ出力しているので実行結果は「apple orange banana grape melon 」になるわけなんですね。

forEachについて詳しく知りたい人は、以下の記事で解説していますので、ぜひチェックしてみてください。

→【5分でわかる！】JavaScript foreachの使い方・注意点を事例で解説

for-of

for-of文は配列やDOMコレクションを扱える配列です。

var fruit = ['apple ','orange ','banana ','grape ','melon '];
for(var value of fruit){
document.write(value);
};

上のコードでは、先ほどと同じ配列の中身を1つずつ出力しているプログラムです。

「var value of fruit」のfruitは取り出したい配列の変数、valueは取り出した配列の値を入れる変数であり、ここではfruit配列をvalueに入れています。

for-of文の中身はfor文の時と同じですね。繰り返してほしい処理を書くだけなのでfor文がわかれば問題ないでしょう。実行結果は「apple orange banana grape melon 」になります。

for-in

for-inはオブジェクトによく使われ、オブジェクトからプロパティを取り出して処理が行われます。

var fruit = {fru1:'apple ',fru2:'orange ',fru3:'banana ',fru4:'grape ',fru5:'melon '};
for(var value in fruit){
document.write(fruit);
};

fruitが今までと少し違う書き方になっているのがわかりますか？これがオブジェクトと言われるものです。

そしてfru1は’apple’に対応しているように1つの対になっているものをプロパティと呼びます。

for(var value in fruit)のfruitは処理させたいオブジェクト、valueはプロパティのキーであり、内部で繰り返したい処理を書いていますね。

プロパティのキーはfru1、fru2の部分であるので、fruitで’apple’、’orange’が出力されます。

実行結果も先ほどと同じ「apple orange banana grape melon 」になりますよ。

JavaScript forを学習する方法

ここまでfor文の書き方について一通り紹介しましたが、「この記事を読んだだけでは完璧に覚えられるか不安…」と思われる方もいるはず。

for文を効率的に身につけるためには、実際に自分でプログラムを書いてみることをおすすめします。。

例えば「for文の使い方」で紹介した使用例のプログラムを書いてみて実際にどのように動いているのかを確認してみたり、forEachなどを使ってどう使うのかを理解したりします。

プログラムの内容を知るために、実際に書くのはとても大事なんですね。

また参考書を購入して学習するのもいいでしょう。参考書ではfor文の詳しい解説も載っているだけでなく、配列などの様々な構文が学習できるためこれからJavaScriptを学習したい人におすすめです。

おすすめの参考書については以下の記事で詳しく紹介していますので、良ければ合わせて見てみてくださいね。

→【2021年最新】Javascriptの学習本・参考書おすすめ13選！初心者から経験者まで

まとめ

今回はJavaScript forについて解説しました。

この記事で挙げた実用例はほんの一部であり、実際にはもっと様々な面で使います。より高度なプログラムを掛けるようになるためにも、for文をしっかりと理解しておきましょう。

for文の凄いところは同じ処理なら何回でも、1つにまとめられるんですね。この記事で扱った配列は中身が5個のものを使っていましたが、中身が500個の配列があった時に同じ処理を500回も書いていられません。

for文を使うことで処理を1回だけ書くのに抑えられるのでコードが見やすくなるだけでなく、作業も減る役割を果たしているんですね。

コードの書く量を減らして効率よくプログラミングできるようにfor文をマスターしておきましょう。