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

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

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

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

ここでの「繰り返し」とは、同じような処理をコンピュータにさせることを指します。
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文は、指定した回数を繰り返し処理させます。上記のように、コンソールに1〜10までを表示させたい場合は次のようになります。

1
2
3

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

https://jsfiddle.net/kintone/rwn8fLuk/3/

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

1
2
3

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

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

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

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

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

MDN web docs： インクリメント

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

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

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

for文1周目

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

for文2周目

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

for文3周目〜9周目

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

for文10周目

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

for文11周目

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

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

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

1
2
3

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

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

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

1
2
3

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

今まで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/

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

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

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