【JavaScript入門】for文を使って繰り返し処理をマスターしよう！

Javascriptでプログラムを書いているとき、同じ処理を何度も書くのに疲れていませんか？同じ処理を一つにまとめられたら楽だと思ったことはありませんか？

こんな時はfor文という繰り返し構文を利用しましょう。
これを用いると、具体的には以下のような利点があります。

• コードが短くて綺麗！
• 書き方が簡単！

for文により、繰り返したい処理を簡単に実装できます。100回同じ処理を繰り返すとしたら、全て書き出すよりもコードが100分の1の長さで済む、夢のような繰り返し構文です。

本記事では、for文の基本的な書き方に加え、少し応用的な書き方や便利なメソッドまでを学習していきます。
最後に練習問題も通して、実際に身についたか確認してみましょう！

Javascriptでfor文を利用しよう

最初に、for文の定義について少し触れたいと思います。for文とは、処理を一定回数だけ繰り返したい時に利用する制御構文を指します。この段階では、for文を利用することで同じ処理を一つにまとめて書くことが出来るようになる、という認識を持っていただければ大丈夫です。

for文を利用して繰り返し処理を書く事にはどのような利点があるのでしょうか。それには、以下のような事柄が挙げられます。

• 短く、綺麗でわかりやすいコードが書ける。
• 何回繰り返すかを明示出来る。
• 同じコードをコピー&ペーストする処理を省略することができる。

とはいっても、言葉で説明するだけではいまいち実感が湧かないと思うので、ここからは実際にfor文をプログラムを使いながら説明していきます。

まず、for文の書き方について簡単に説明していきます。

for (初期値; 条件式;繰り返し後の処理) {
    反復処理
 }

for文は上記のような形式を取りますが、これだけではよくわからないと思うのでfor文の引数の中身を１つずつ説明していきます。

• 初期値 − 繰り返し回数を決めるための最初の値の設定
• 条件式 – 繰り返しを抜けるための条件を決める式
• 繰り返し後の処理 – 処理が終わるごとに初期値に与える増減を決める式

条件式を記述する際には、数字の大小関係を表す比較演算子というものを使います。頻繁に使われる比較演算子の記号と意味について以下の表にまとめてみました。

比較演算子の記号と意味

記号	意味（どういう時にtrueを返すか）
==	左辺の値と右辺の値が等しい
!=	左辺の値と右辺の値が異なる
>	左辺の値の方が右辺の値よりも大きい
<	左辺の値の方が右辺の値よりも小さい
>=	左辺の値の方が右辺の値よりも大きいもしくは等しい
<=	左辺の値の方が右辺の値よりも小さいもしくは等しい

それでは実際にfor文を使ってみましょう。今回は、”Hello World!”という文字列を５回コンソールに表示するスクリプトを書いてみましょう。

for (var i = 0; i < 5; i++){
    console.log ("Hello World!");
}

このプログラムが行う処理を順を追って説明していきます。
最初に先程説明したfor文の引数について、この具体例で見ていきましょう。

• 初期値 − 変数iを定義し、値をゼロに設定
• 条件式 – iが5未満の時に処理を実行
• 繰り返し後の処理 – 処理が終了するごとにiの値を1増加させる

最初に、iが初期値ゼロのときは条件式を満たすので、コンソールに”Hello World!”という文字列が表示されます。それが終わると、iに１が足されてiの値が1になります。iが1の状態でも条件式は満たされているので、再び処理が繰り返されます。こういった流れが5回繰り返されます。最終的にiが5になったときに条件式に当てはまらなくなり、ループを抜けることになります。

このようにしてJavascriptのfor文は利用されます。

for文とwhile文の違い

Javascriptにはfor文の他にwhile文という繰り返し構文が存在します。この二つの繰り返し構文の違いについて説明します。

• for文 – 処理の繰り返し回数が決まっている時に利用
• while文 – 処理の繰り返し回数が決まっていない時に利用

for文は初期値、条件式、増減式を利用するため、繰り返し回数を指定できます。一方、そういった引数が存在しないwhile文では決まった回数だけ同じ処理を繰り返すことには向いていません。

while文を用いる一例として、無限に数字を表示したい場合が挙げられます。こういった場合は以下のように記述します。

var i = 0;
while (true){
    console.log (i);
    i++;
}

while文は引数である条件式がtrueである時に繰り返し処理が行われます。細かい説明は省きますが、ここではwhile文の引数をtrueとすることで無限ループを可能にしています。これによって、iを0から無限まで1ずつ足しながらコンソールに出力させています。

ここでいちばん大事なのは、「while文の引数をtrueに設定すると、無限ループが可能になる」ということです。

for文における３つの繰り返し処理

for文には３つの種類があります。ここでは、その３つの種類のfor文について具体例を用いて説明していきます。

for in文

最初に、for in文について説明します。for in文とは、「指定されたオブジェクトのプロパティに対して、同じ処理を順不同で行いたい時に使う制御構文」です。しかし、このような説明ではどういった時に使うかは分からないと思うので、実際にfor in文を使ってみましょう。

はじめに、for in文の書き方は以下のようになります。

for (プロパティ名を入れる変数 in オブジェクト) {
    反復処理
 }

設定したオブジェクトの各プロパティのプロパティ名を取得して、プロパティ名を入れる変数に代入して反復処理を行います。

では、実際にコードを書いてみましょう。今回はfor in文を使って連想配列objectの各値をコンソール上に出力してみましょう。

var object = {a:1, b:2, c:3}; 

for (var property in object) { 
    console.log(property + " = " + object[property]);
}

// 実行結果
// "a = 1"
// "b = 2"
// "c = 3"

ここでは、連想配列objectを1行目で定義しました。次に、連想配列objectで定義した各プロパティのプロパティ名を変数名propertyに代入して取り出しました。

さらに、各プロパティに対応する値をobject[property]という記述で取り出し、コンソールに出力しました。同様な行程を各プロパティについて反復処理を行いました。

for of文

for of文はfor in文と同じように反復処理を行いますが、for in文のようにプロパティ名を取得するのではなく、プロパティの値を取得して利用します。

ここで気をつける必要があるのが、for of文は列挙が可能なオブジェク卜でしか使えないということと、それぞれのオブジェクトの種類で繰り返し処理の仕方が異なるということです。

それでは、最初にfor of文の基本的な書き方について説明します。

for(プロパティの値を入れる変数 of オブジェクト) {
    反復処理
}

このように、オブジェクトの各プロパティの値をプロパティの値を入れる変数に代入して反復処理をします。

前述した様に、for of文はオブジェクトの種類によって反復の仕方が変わるので、ここでは配列と文字列を用いた反復について紹介します。

配列を用いる場合

let array = [1,2,3];
for(let property of array) {
    console.log(property);
}

// 実行結果
// "1"
// "2"
// "3"

for of文で配列を用いる場合は、配列の各要素の値をpropertyという変数に代入しています。

文字列を用いる場合

let string = "hello";
for(let property of string) {
   console.log(property);
}

// 実行結果
// "h"
// "e"
// "l"
// "l"
// "o"

for of文で文字列を用いる場合は、文字列の文字一つ一つを変数propertyに代入して反復処理を行っています。

for each文

次に、for文を使う時に便利な二つの処理について説明します。この制御構文を用いると、配列の各要素を取り出して処理を行えます。for of文と基本的には同じ機能を持ちますが、for each文は配列のみに使えるという点です。

ここで、for each文の書き方について最初に触れていきます。

配列名.forEach(コールバック関数, オブジェクト)

コールバック関数とは繰り返しを行いたい処理内容を記述した関数で、オブジェクトはコールバック関数におけるthisであり、省略可能です。

次に、for each文を利用して実際にコードを書いてみましょう。今回は、数字が入った配列の各要素を足し合わせるためのコードを書いてみましょう。

var sum = 0;
var array = [1, 2, 3];
array.forEach(function(property) {
    sum += property;
});
console.log(sum);

//実行結果
//"6"

配列の合計を表す変数sumおよび配列arrayを定義し、コールバック関数をfor each文の引数内に定義しています。そして、一つ一つの要素を足し合わせる処理を記述しています。

最後に、コンソールに合計を表すsumを出力する処理を書いていきます。ここではオブジェクトは省略されていることに気をつけましょう。

for文におけるcontinueとbreak

次に、for文中に使うと便利なbreak文とcontinue文についてここで説明します。

continue文

for文中にcontinue文を記述すると、処理はそこで実行されなくなり、次の繰り返し処理が行われます。

イメージとしては、以下のような処理になります。

for (初期値; 条件式;繰り返し後の処理) {
    反復処理
    実行
    実行
    continue;
    実行されない
    実行されない、次の繰り返し処理へ
}

それでは、実際にコードを書いてみましょう。初期値iが奇数のときのみiをコンソール上に出力するようなコードを書いてみましょう。

for (i = 1; i < 10;i++) {
    if (i % 2 == 0) {
        continue;
    }
    console.log(i);
}

// 実行結果
// "1"
// "3"
// "5"
// "7"
// "9"

このコードを詳しく見ていきましょう。まず、iの初期値として1を代入し、iが10未満のときに処理を繰り返すようにfor文を設定しました。また、if文はiが偶数のときはtrue、iが奇数のときはfalseになるよう設定しました。

iが偶数の場合はiが2で割り切れるので、if文がtrueとなりcontinue文が実行されます。そのため、5行目のconsole.log(i);は実行されず、コンソール上に数字が表示されなくなります。すると、すぐにi++が実行され、iの値に1が足されて再びfor文が実行されます。

iが奇数の場合はiが2で割り切れないため、if文はfalseとなります。そのため、if文内の処理は行われることなく、continue文が実行されません。こうして、5行目のconsole.log(i);が実行されてコンソール上にiの値が表示されます。

このようにfor文内にcontinue文を利用することで、奇数のみをコンソール上に表示させる事ができます。

break文

次に、break文について説明します。break文とは、for文やwhile文などの繰り返し構文の中で用い、ループから完全に抜けたい時に使う関数です。

処理の流れのイメージとしては、以下のようになります。

for (初期値; 条件式;繰り返し後の処理) {
    反復処理
    実行
    実行
    break;
    実行されない
    実行されない、for文から抜ける
}

console.log("Hello World!"); //実行

for文で反復処理が始まりますが、break;という記述に差し掛かるとそれ以降の処理は実行されず、for文から抜けます。
その後、for文の中括弧の外にあるconsole.log(“Hello World!”);が実行されて、コンソールに”Hello World!”と出力されます。

では、実際にどういった場面でbreak文を使うと便利なのでしょうか。ここでは、初期値iに4ずつ足していって、iの値が10を超えた時に処理を抜けるというコードを書いてみましょう。

for (var i = 0; i < 100; i += 4) {
    console.log(i);
    if (i < 10) {
    console.log("Go to next number!");
    } else {
    console.log("i is larger than 10. End of loop.");
    break;
    }
    console.log("Add 4 to i");
}

// 実行結果
// "0"
// "Go to next number!"
// "Add 4 to i"
// "4"
// "Go to next number!"
// "Add 4 to i"
// "8"
// "Go to next number!"
// "Add 4 to i"
// "12"
// "i is larger than 10. End of loop."

このコードでは、iの初期値を0に設定して、処理が反復されるごとにiに4が足されるという処理を行うfor文となっています。

最初に、2行目の記述でiの値がコンソール上に出力されます。次に、if文での条件分岐があり、10未満だった場合には、”Go to next number!”という文字列が4行目でコンソールに出力されます。そして、if文の分岐の下に書いてある”Add 4 to i”もコンソールに出力されます。

しかし、この処理でiが12に達したとき、if文のelse文に処理が飛び、コンソールに”i is larger than 10. End of loop.”と出力した上でbreakされます。結果として”Add 4 to i”は表示されずに、処理が終了します。

for文の使用例・練習問題

次に、復習も兼ねてfor文を使う練習をしてみましょう。

数字を足し合わせる

Q. for文を用いて1から10までの数を足し合わせて、コンソールに出力しなさい。
[wpex more=”解答・解説を見る” less=”閉じる”]

var sum = 0;
for (var i = 1; i <= 10; i++){
    sum += i
}
console.log(sum);

// 実行結果
// "55"

1行目で合計を表すsumという変数を定義し、for文ではiが初期値1から10以下の間で、iに1ずつ足して、sumに加算していっています。最後に、for文を抜けた後にconsoleにsumを出力させることが出来ます。
[/wpex]

複数の実行文を繰り返す

Q. for文を用いて、1から５までの数およびそれらを自乗した数をコンソールに出力させなさい。
[wpex more=”解答・解説を見る” less=”閉じる”]

for (var i = 1; i <= 5; i++){
    console.log(i);
    console.log(i * i);
}

// 実行結果
// "1"
// "1"
// "2"
// "4"
// "3"
// "9"
// "4"
// "16"
// "5"
// "25"

ここでは、console.logを２行にわけて処理を行っています。for文は複数行を一気に処理する事ができるのでとても便利だということが理解できますね。今回は、iを初期値1から5まで1ずつ増加させ、自信とその自乗を２行に分けてコンソールに出力しています。
[/wpex]

文字列をの文字一つ一つを出力する

Q. for of文を用いて文字列”Happy”の文字を一つ一つコンソールに表示させなさい。
[wpex more=”解答・解説を見る” less=”閉じる”]

let string = "happy";
for(let property of string) {
   console.log(property);
}

// 実行結果
// "h"
// "a"
// "p"
// "p"
// "y"

ここでは、”happy”という文字列を定義した変数stringの一つ一つの文字を変数propertyの中に代入して、3行目でpropertyをコンソールに出力しています。
[/wpex]

for文の中にfor文を記述する

Q. for文の中にfor文を記述することで、九九の1の段から3の段までを出力しなさい。
[wpex more=”解答・解説を見る” less=”閉じる”]

for (var i = 1; i <= 3; i++){
  for (var j = 1; j <= 9; j++){
    console.log(i + " × " + j + " = " + (i * j));
  }
}


// 実行結果
// "1 × 1 = 1"
// "1 × 2 = 2"
// "1 × 3 = 3"
// "1 × 4 = 4"
// "1 × 5 = 5"
// "1 × 6 = 6"
// "1 × 7 = 7"
// "1 × 8 = 8"
// "1 × 9 = 9"
// "2 × 1 = 2"
// "2 × 2 = 4"
// "2 × 3 = 6"
// "2 × 4 = 8"
// "2 × 5 = 10"
// "2 × 6 = 12"
// "2 × 7 = 14"
// "2 × 8 = 16"
// "2 × 9 = 18"
// "3 × 1 = 3"
// "3 × 2 = 6"
// "3 × 3 = 9"
// "3 × 4 = 12"
// "3 × 5 = 15"
// "3 × 6 = 18"
// "3 × 7 = 21"
// "3 × 8 = 24"
// "3 × 9 = 27"

ここでは、for文を二重にして、コードを書いています。
イメージとしては内側のfor文で1から9まで掛け算を遷移させ、外側のfor文で1の段から3の段まで遷移させていくと思っていただければ良いです。

ぞれでは、詳しく説明していきます。まず、外側のfor文でiに初期値1を設定し、内側のfor文でjを初期値1で設定します。iとjを掛け合わせる数、かけた計算結果を九九の結果としてコンソールに表示させます。次に、内側のfor文のみが働くことでjに1が足されて、2になったときの計算結果をコンソールに表示させます。このようにしてjが9まで行ったら、iに1が足されて2になり、jは1に戻ります。

ここからはiが2の状態で同様の処理を行います。jが再び9になって処理が終わった後、iが3になって同様な処理が行われます。このようにして、九九における3の段までをコンソールに出力させます。
[/wpex]

 

 

まとめ

for文を使えるようになりましたでしょうか？
これからは、for文で繰り返し処理は綺麗に短く書いていきましょう。
この記事を読んで更に鍛錬を積んでいけば、上級プログラマーも夢ではありません！

そのほかJavaScriptや、JavaScriptの配列に関しても解説をしておりますので、こちら是非ご覧ください。

【書きながら学べる！】JavaScript配列入門

【JavaScript入門】初心者でも実践！HTMLやCSSと違う？

 

↑目次へ戻る