JavaScript入門 繰り返し処理を行うfor文の使い方

スポンサーリンク

JavaScript

前回の記事(JavaScript入門 配列の使い方(追加/取得/検索/結合/分割/削除))では、JavaScriptの配列の使い方を確認しました。
基本操作だけでもかなり方法がありますので、少しずつ覚えていきましょう。

今回は、JavaScriptで繰り返し処理を行うfor文の使い方を見ていきます。
同じ処理を複数回繰り返したい時に、for文は威力を発揮しますよ。

スポンサーリンク

for文とは?

for文というのは、決められた処理を複数回繰り返したい時に使います。
事前に繰り返す回数が分かっている場合に使うことが多いです。

別の繰り返し方法には、while文があります。
こちらは、繰り返す回数が分からない場合に主に使います。

for文の基本的な使い方

それでは、for文の基本的な使い方を見ていきましょう。
for文の基本形は以下のようになります。

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

for文では、基本的には引数として3つを与えます。
初期値は、繰り返しのはじめに処理を行う値。
条件式は、繰り返し処理を行うかどうかを判断する式。
増減式は、繰り返し処理後に行う、値を更新するための式。

例として、何かの処理を10回繰り返すプログラムは、for文を使って以下のように書けます。

for(var i = 0; i < 10; i++) {
  // 繰り返したい処理
}

初期値には、初期値が0の変数iを設定しています。
繰り返しの前に、毎回iが10未満かどうかをチェックして、trueなら繰り返しを実行します。
繰り返したい処理を1回行うと、増減式が実行されます。
その後は、条件式のチェック、繰り返したい処理の実行、増減式の実行、条件式のチェック…という流れになります。

配列のループ処理

for文を使った繰り返しをよく使う場面の1つに配列があります。

まずは、for文無しで処理を行った場合を見てみます。
配列の全ての要素を出力するという処理です。

var items = ['伊藤', '鈴木', '佐藤', '田中', '井上'];
console.log(items[0]);
console.log(items[1]);
console.log(items[2]);
console.log(items[3]);
console.log(items[4]);

いかがでしょうか?
配列の要素が5つなので、これで済んでいますが…。
もし要素数が100、1000となったらどうしますか?
大変なことになってしまいますよね。

上記の処理をfor文を使ったものに書き換えると、以下のようになります。

var items = ['伊藤', '鈴木', '佐藤', '田中', '井上'];
for(var i = 0; i < items.length; i++) {
  console.log(items[i]);
}

このように書くと、もし配列の要素数が変化したとしても、同じコードで大丈夫です。
見た目にもスッキリしていてとても良いですよね。

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

場合によっては、繰り返しの途中でループを抜けたい時があるかと思います。
そんな時に使えるのが、continuebreakです。

continue: その後の処理をスキップする

continueは、実行されるとその後の処理をスキップして、次の繰り返し処理に移ります。

以下のサンプルプログラムを見てください。

var items = [1, 2, 3, 4, 5];
for(var i = 0; i < items.length; i++) {
  if(items[i] % 2 === 1) {
    continue;
  }
  console.log(items[i]);
}

この場合、配列要素の値が奇数の時にcontinueが実行されます。
その結果、配列要素の値が奇数の時だけ、後の処理であるconsole.log()が実行されません。
つまり、これは偶数のみを出力するプログラムということになります。

2
4

break: 繰り返し処理を中断する

breakは、実行されるとその後の繰り返し処理を中断してfor文から抜けます。

以下のサンプルプログラムを見てください。

var items = [1, 2, 3, 4, 5];
for(var i = 0; i < items.length; i++) {
  if(i == 2) {
    break;
  }
  console.log(items[i]);
}

この例の場合、iが2になった時にbreakが実行されます。
その結果、その後の処理が全て中断されます。
すなわち、iが1までの繰り返し処理と同じになります。

1
2

for-in文でオブジェクトの中身を繰り返す

繰り返し処理の中には、for-in文を使った方法もよく使います。
この方法は、主にオブジェクトの中身を取り出して繰り返し処理したい場合に用いられます。

for-in文を使って、繰り返し処理を行う場合の基本形は以下の通り。
オブジェクトのプロパティが順番に変数に代入されますので、後はその変数を参照して処理を書くだけです。

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

簡単なオブジェクトを作成して、動作を確認してみましょう。
以下のサンプルプログラムを見てください。

var person = {
  name: "鈴木俊吾",
  age: 31,
  hobby: "読書"
};
for(var item in person) {
  console.log(item + ':' + person[item]);
}

ここでは、人のデータを表すオブジェクトを作成しています。
繰り返し処理では、itemを参照しながらデータを表示させています。
きちんとオブジェクトの中身が取り出せているのが分かりますね。

name:鈴木俊吾
age:31
hobby:読書

練習問題

それでは、以上を踏まえて練習問題を解いてみましょう。

1から10までの和を計算して、その結果をコンソールに表示するプログラムを作成してください。

練習問題の解答例

for文を使うのは分かりますね。
初期値と条件式をどうするかが肝になります。
この問題の場合、初期値は「var i = 1」、条件式は「i <= 10」とするのが分かりやすいですよ。

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

まとめ

今回の記事では、JavaScriptでfor文を使った繰り返し方法を見てきました。
いかがでしょうか、うまく理解できたでしょうか?
繰り返し処理は頻繁に使いますので、よく覚えておきましょうね。

次回は、while文を使った繰り返し処理を扱います。
ぜひ楽しみにしていてくださいね。

前回 ≫ JavaScript入門 配列の使い方(追加/取得/検索/結合/分割/削除)
次回 ≫ 準備中…。

コメント