はじめようJavaScript第7回 JavaScriptの基本機能 繰り返し処理をする、for文 その2 〜配列を使ってみよう〜

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

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

さて、第6回では繰り返し処理のための「for文」を学習しました。次は、実践的な使い方の例を見ていきましょう。
まずはfor文の実践的な使い方を見る前に、少しだけ「配列」について説明しますが、kintoneのレコード一覧データも配列で扱われるため、今のうちに理解しましょう。

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

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

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

配列からデータを取り出し表示する

第3回 JavaScriptの文法 変数といろいろな値についてで少しだけ解説しましたが、for文は配列を扱うときに利用されることが多いです。

配列について

配列は、複数の値を一つの変数にまとめて格納することができます。格納された値は、番号（連番）を指定して扱うことができます。
例えば、配列を使わずにデータを変数に代入した場合は、

このように一つ一つ宣言しないといけないので面倒ですが、 配列を使うと、以下のようにシンプルに宣言することができます。

• 配列の宣言

また、配列の中に入れた果物は、各果物に自動的に連番で振られている「インデックス番号」を利用して呼び出すことができます。
「インデックス番号」とは、配列の中身を指定するための番号です。0番からのスタートなので、今回の場合は、「0: apple」、「1: orange」、「2: banana」になります。

この番号を利用して、指定した果物を呼び出すためには下記のように変数名[インデックス番号]という風に書きます。

• 配列の呼び出し
  
  サンプル実行環境: https://jsfiddle.net/kintone/axk3zL5p/2/

for文で配列を扱う

• 察しのよい方はお気づきかもしれませんが、配列のデータを取り出すときにfor文が役に立ちます。for文を使って配列を扱う方法を見ていきましょう。

配列について

• 配列の中身を先頭の5つだけ
  コンソールに表示するここからは、もうちょっと業務に使えそうな社員名簿を例に挙げて説明してみます。
  社員名簿配列から、先頭の5つのデータを「○○番目の社員: 社員名」の形式でコンソールに一行ずつ表示してみましょう。

• 5名だけコンソールに表示
  
  

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

for文の中にconsole.log((i+1) + '番目の社員:' + employees[i])とありますが、このiに、 0 ... 1 ... 2 ...と繰り返し数字が代入されていくので、console.log((0+1) + '番目の社員:' + employees[0]) ... console.log((1+1) + '番目の社員:' + employees[1]) ... console.log((2+1) + '番目の社員:' + employees[2])
という風に配列のデータを1つずつ扱うことになるというわけです。

※ここまでで、for文について難しいと思う場合は、ぜひ前回の章を復習してみてください。
繰り返し復習すると理解できるようになります。

配列の中身をすべてコンソールに表示する

すべてのデータを表示したいのに、fruits[0] ,fruits[1] , fruits[2] ...と愚直に書くのは、配列の数が増えていくと大変になります。
for文を使ってすべてのデータを一行ずつ表示してみましょう。

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

一つ前の例と違うのは、for文の終了条件である、 i < employees.length の部分です。すべての配列のデータを取り出すので、何回繰り返すか、ということをはっきりさせなければいけないので、配列の長さ(配列のデータ数)を指定する必要があるのです。
もちろん、数字でそのまま10と指定しても問題ありませんが配列変数.lengthとすることで配列の長さを取得できるので便利です。
今回のようにはっきりと配列の長さが10だと分かっていればどちらでもいいと思えるかも知れませんが、配列の長さが分からない場合（例えば、社員の出入りが激しかったり、社員数が多い場合など）もあるので、なるべく直接指定しないほうがいいでしょう。

今回はいかがだったでしょうか。if文やfor文の習得することによって、JavaScriptカスタマイズでできることの幅が広がります。
理解が難しいところは、繰り返し復習していただくか、質問をいただければお答えいたします。

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