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

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

（著者：kintone エバンジェリスト 村濱 一樹）

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

ぜひ、以下のリンク先で実際に入力しながら試してみてください。

https://jsfiddle.net/kintone/x27p59nu/1/

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

繰り返し処理とは

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

しかし、これでは同じことを何度も書くことになり煩雑ですし、今回はまだ10個だけなので、そこまで手間ではないですが、これが1から1000まで表示、ということになると大変なことになります。

そこで、JavaScriptには繰り返し処理をするための機能が用意されています。

for文

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

サンプル実行環境: https://jsfiddle.net/kintone/rwn8fLuk/3/

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

• for文の書き方

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

1. 初期化
   let i = 1と書かれている部分です。for文スタート時の状態を定義します。サンプルでは「変数iに1を入れた状態からスタートします」ということが宣言されています。
2. 繰り返し条件
   i <= 10と書かれている部分です。繰り返しのための条件を定義します。サンプルでは「変数iが10以下なら繰り返す」という定義がされています。
3. 実行後の処理
   i++と書かれている部分です。実行後の処理（繰り返す際の処理)を定義します。サンプルでは「iに1を足す」という定義がされています。
   (i++と書くことによって、iに1を足すという意味になります: インクリメント)
4. 処理実行
   for文の {}内では、実際に行う処理を書きます。サンプルではコンソール出力を行っています。なお、1行目に設定した変数 iを使えるので、
   1回目の処理は1, 2回目の処理は2...という風にコンソールに出力することができています。
5. 先頭に戻る
   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周目
  1. 繰り返し条件判定: i <= 10、iは10以下でない(i = 11)ので繰り返し処理は終了される

繰り返しパターン

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

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

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

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

• 1から10まで2つおきに表示
  今までi++と1つずつカウントアップしていたのを2つずつにすることによって、1,3,5,7....と出力することもできます。

サンプル実行環境: https://jsfiddle.net/kintone/q8gzh513/2/

変数iについて

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

まとめ

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

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

<<はじめようJavaScript第5回 JavaScriptの基本機能 条件分岐が書けるif文 その2 | 第7回 JavaScriptの基本機能 繰り返し処理をする、for文 その2 〜配列を使ってみよう〜>>