第 6 回 JavaScript の基本機能 JavaScript の基本機能 繰り返し処理をする for 文

著者名:村濱一樹(kintone エバンジェリスト)

目次

information

JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript

今回は、繰り返し処理に挑戦します。

以下のリンク先で実際に入力しながら試してみてください。
https://jsfiddle.net/kintone/x27p59nu/1/ (External link)

記述ミスなどでうまく動作しないときのために、下の方にサンプル実行環境も用意していますので必要に応じて利用してください。

繰り返し処理とは

ここでの「繰り返し」とは、同じような処理をコンピュータにさせることを指します。
1〜10 までの数値を、単純にコンソールに出力させたい場合は、以下のように入力します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);
console.log(6);
console.log(7);
console.log(8);
console.log(9);
console.log(10);

しかし、これでは同じことを何度も書くことになり煩雑です。
今回はまだ 10 個だけなのでそこまで手間ではないですが、これが 1〜1000 まで表示ということになるとたいへんです。
そこで、JavaScript には繰り返し処理をするための機能が用意されています。

for 文

for 文は、指定した回数を繰り返し処理させます。上記のように、コンソールに 1〜10 までを表示させたい場合は次のようになります。

1
2
3
for (let i = 1; i <= 10; i++) {
  console.log(i);
}

サンプルの実行環境

https://jsfiddle.net/kintone/rwn8fLuk/3/ (External link)

このように for 文を利用することで、かなり短く書くことができます。
ここからは for 文の書き方を詳しく見ていきましょう。

for 文の書き方

1
2
3
for(初期化; 繰り返し条件; 実行後の処理) {
処理内容
}

具体的に、先ほど挙げたサンプルを例に構文をみてみましょう。

1. 初期化

let i = 1 と書かれている部分です。
for 文スタート時の状態を定義します。
サンプルでは「変数 i に 1 を入れた状態からスタートします」ということが宣言されています。

2. 繰り返し条件

i <= 10 と書かれている部分です。
繰り返しのための条件を定義します。
サンプルでは「変数 i が 10 以下なら繰り返す」という定義がされています。

3. 実行後の処理

i++ と書かれている部分です。
実行後の処理(繰り返す際の処理)を定義します。
サンプルでは「i に 1 を足す」という定義がされています。
i++ と書くことによって、i に 1 を足すという意味になります。

MDN web docs: インクリメント (External link)

4. 処理実行

for 文の {} 内では、実際に行う処理を書きます。
サンプルではコンソールに出力しています。
1 行目に設定した変数 i を使えるので、1 回目の処理は 1、2 回目の処理は 2… のように、コンソール出力ができています。

5. 先頭に戻る

for 文の先頭に戻ります。 このとき、 1 の初期化はされませんが、3 の実行後の処理がされて、繰り返し処理が行われます。
このとき、2 の繰り返し条件で設定してある条件が満たされない場合は、繰り返し処理がされません。

サンプルコードにおける処理順序

あらためて、サンプルコードの処理順序を整理すると次のようになります。

for 文 1 周目
  1. 初期化:i = 1i1 を代入(慣例的に変数 i を使いますが、実際は任意の変数名で OK です)
  2. 繰り返し条件判定:i <= 10i は 10 以下なので(i = 1)繰り返し処理に入る。
  3. 処理実行:console.log(i) が実行され、コンソールに 1 と表示される。
  4. 実行後の処理が実行される:i++ が実行されて、i が 2 になる。
  5. 先頭に戻る。
for 文 2 周目
  1. 繰り返し条件判定:i <= 10i は 10 以下なので(i = 2)繰り返し処理に入る。
  2. 処理実行:console.log(i) が実行され、コンソールに 2 と表示される。
  3. 実行後の処理が実行される:i++ が実行されて i が 3 になる。
  4. 先頭に戻る。
for 文 3 周目 〜 9 周目

2 周目と同様に繰り返し実行され、i の数値が 1 ずつ増えてゆく。

for 文 10 周目
  1. 繰り返し条件判定:i <= 10i は 10 以下なので(i = 10)繰り返し処理に入る。
  2. 処理実行:console.log(i) が実行され、コンソールに 10 と表示される。
  3. 実行後の処理が実行される:i++ が実行されて、i が 11 になる。
  4. 先頭に戻る。
for 文 11 周目

繰り返し条件判定:i <= 10i は 10 以下でない(i = 11)ので繰り返し処理は終了される。

繰り返しパターン

さらに、他にも 1〜10 以外のパターンの繰り返しを試して理解を深めましょう。

1〜100 までを表示

実際に 1〜100 までを表示できるか試してみましょう。

1
2
3
for (let i = 1; i <= 100; i++) {
  console.log(i);
}

上記のように、繰り返し条件を「i が 100 以下」に設定することで、100 まで出力されます。

5〜15 までを表示

初期化の値を変更すれば、その数値から処理を開始できます。

1
2
3
for (let i = 5; i <= 15; i++) { // iを5に初期化し、iが15以下の間繰り返し処理を実行する
  console.log(i);
}

1〜10 まで 2 つおきに表示

今まで i++ と 1 つずつカウントアップしていたのを 2 つずつにすることによって、1,3,5,7…と出力できます。

1
2
3
for (let i = 1; i <= 10; i = i + 2) { // 繰り返し処理後、iに2を足す
  console.log(i);
}

サンプルの実行環境

https://jsfiddle.net/kintone/q8gzh513/2/ (External link)

変数 i について

今回 for 文では変数 i を利用していますが、変数名はもちろん i でなくても問題ありません。
ただ、毎回変数名を考えるのも面倒ですし、このような繰り返し処理のために変数名 i を使うことが業界的な常識になっています。
複数の繰り返し処理がある場合は、i 以外に j などが使われます。
逆に、変数名 i で分かりにくい場合は、分かりやすい変数名にすることもあります。

まとめ

  • for 文は繰り返し処理を行いたいときに活用できる。
  • for 文に必要なものは、初期化、繰り返し条件と繰り返し処理後の定義
  • 初期化、繰り返し条件、繰り返し処理後の定義によってさまざまな繰り返しが可能になる。

いかがでしたでしょうか。
これも慣れないうちは難しいですが、kintone の JavaScript カスタマイズでも複数のレコードを扱うときや、テーブルを扱うときに必須の技術ですので、ぜひマスターしてください。
次回はもう少し実用的な for 文の使い方を学んでいきます。