JavaScriptでfor文を使ってループ処理する方法【初心者向け】

JavaScriptで【for文】を使ってループ処理する方法を初心者向けに解説した記事です。ループ処理を行えるwhile文との説明。応用編として、for文を配列で使う方法、ジャンプ文 (breakとcontinue)も解説。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptについてプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptでwhile文を使ってループ処理する方法について解説します。

また、入門向けのJavaScriptを学習サイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

目次

 

 

while文とfor文の違い

プログラムのなかでは、ある数値や数式、文字列を繰り返し用いるシーンは多く見られます。

JavaScriptでループ(繰り返し)処理をおこなうときは、用途に応じて for文と while文 という2種類を使い分けます。

 

ざっくり言えば、2つの違いはこのようになります。

  • 繰り返し回数が決まっている場合はfor文
  • 繰り返し回数が決まっていない場合はwhile文

 

この違いがわかったところで、for文の使い方を覚えていきましょう。

 

大石ゆかり

田島メンター!繰り返し文やループ処理というのは何でしょうか?

田島悠介

同じような処理を何度も書かないで、1文で繰り返して処理することが出来るんだ。

大石ゆかり

必要な回数だけ連続して処理してくれるんですか?

田島悠介

そうそう。繰り返し文は他のプログラミング言語でも使うので、覚えておきたいね。では、書き方などを見てみよう!

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

for文の構文

for (初期値; 条件式; 増減式) {
  繰り返し処理
}

for文は少し変わったかたちをしています。1つずつ説明していきましょう。

初期値、条件式、増減式とは、それぞれこのような意味を持ちます。

  • 初期値 – はじめに処理をおこなう値
  • 条件式 – 繰り返し処理をおこなうかどうかの判断をする
  • 増減式 –  処理ごとに、値をいくつ増やしたり減らしたりなど何かしらの更新をおこなう

 

 

for文を使って実際にプログラムを書いてみよう

では、実際にプログラムを書きながら見ていきましょう。

※変数はiと指定します

 

<!DOCTYPE html>
<html lang = “ja”>
<head>
<meta charset = “utf-8″>
<title>JavaScriptの練習</title>
</head>
<body>
<script>
for (var i = 0; i < 10; i++) {
document.write (i);
}
</script>
</body>
</html>

 

まず、初期値ですが、ここではiという変数を宣言して、そこに0を代入しています。これが繰り返し処理の一回目におこなう処理です。

次に、条件式のi < 10 は、iの値が10より小さいあいだ、処理を実行するという意味です。

最後の増減式の i++ は、処理一回ごとにiの値を1ずつ増やしていくという意味です。

 

そして、条件がおこなわれているあいだに実行する繰り返し処理をdocument.writeで指定します。

 

ブラウザで出力すると……。0から9までの値が出力されました。

for

 

 

応用編:for文を配列で使う

for文の構文は、配列を使ったプログラムを書く際によく使われます

例を挙げてやってみましょう。

listという配列の箱を作り、なかにTaro・Jiro・Harukaの複数の値を入れます。

 

var list = [“Taro”, “Jiro”, “Haruka”];

 

for文を使い、これらの値を1つひとつ処理していきます。

まず初期値をvar i = 0と指定します。変数iの値が配列の要素数を超えないあいだは、iの繰り返し処理をおこなっていきます。そして、繰り返しをおこなう度に、iに1を足していきます。

最後に、document.writeで要素を呼び出します。

for (var i = 0; i < list.length; i++){
document.write (list[i]);
}

※lengthプロパティによって、列の長さを取得することができます

 

変数iは、配列listの要素のインデックスに値します。ですので、0から要素数分までカウントアップしていって、各要素(Taro, Jiro, Haruka)にアクセスしていくというかたちになります。

※配列では、要素に0,1,2……と背番号のようなものが振られています

 

それでは、プログラムを実行してみます。

<!DOCTYPE html>
<html lang = “ja”>
<head>
<meta charset = “utf-8”>
<title>JavaScriptの練習</title>
</head>
<body>
<script>
var list = [“Taro”, “Jiro”, “Haruka”];
for (var i = 0; i < list.length; i++) {
document.write (list[i]);
}
</script>
</body>
</html>

 

ブラウザで出力してみると…… TaroJiroHaruka

 

このように、1つひとつ、0,1,2と要素にアクセスして出力しているのがわかると思います。

 

大石ゆかり

配列と繰り返し文は相性が良いんですか?

田島悠介

配列って[0]や[1]というふうに添え字を増やしていくと値にアクセス出来るよね。単純に増やしていけば良いっていうのは繰り返し文と親和性が高いと言えるよね。

大石ゆかり

なるほど、そうですね!

 

ジャンプ文 (breakとcontinue)

ジャンプ文とは、現在の処理を中断し、別の指定処理に移動するときなどに使う構文です。

主にループ処理で用いられ、for文、while文両方で使用することができます

 

break文 — 繰り返し処理を直ちに終了する

continue文 — 実行中の繰り返し処理を中断し、次の繰り返し処理に進む

 

今回は、for文で説明します。次のような、単純にカウントアップしていく構文をもとに試してみましょう。

<script>
for (var i = 0; i < 10; i++) {
document.write (i * 10);
}
</script>

 

break文

break文では、iが5までカウントアップしたタイミングでループ処理を抜け、それ以上実行されなくなります。

<script>
for (var i = 0; i < 10; i++) {
if (i == 5) {
break;
}
document.write (i * 10);
}
</script>

※「*」はJavaScriptの算術演算子で、乗算を意味します

 

iが4の時までしか実行されないので、40で処理が終了しています。

010203040

 

 

continue文

一方、continueでは、iが5の時のみ処理を中断します。

<script>
for (var i = 0; i < 10; i++) {
if (i == 5) {
continue;
}
document.write (i * 10);
}
</script>

 

50だけが出力されませんね。 01020304060708090今回の記事は以上です。

必要に応じて使ってみましょう。

 

JavaScriptのwindow.openメソッドの使い方も説明しているので、合わせてご覧ください。

 

大石ゆかり

breakやcontinueっていうのは何でしょうか?

田島悠介

breakは今いる繰り返し文から抜け出ることが出来るんだよね。今の繰り返し文から抜け出て、最初の繰り返し文に戻るような使い方もされるよ。

大石ゆかり

なるほど!

田島悠介

continueは、何らかの条件に適合する場合は、これ以上処理をしないで、次のループ処理に移行するって感じかな。

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。