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

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

目次

information

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

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

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

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

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

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

配列は、複数の値をひとつの変数にまとめて格納できます。
格納された値は、番号(連番)を指定して扱うことができます。

配列の宣言

たとえば、配列を使わずデータを変数に代入した場合は、1 つ 1 つ宣言する必要があって面倒です。

1
2
3
let fruits1 = 'apple';
let fruits2 = 'orange';
let fruits3 = 'banana';

配列を使うと、シンプルに宣言できます。

1
let fruits = ['apple', 'orange', 'banana'];

配列の呼び出し

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
let fruits = ['apple', 'orange', 'banana']; // データはカンマで区切る

// 1つ目をコンソールに表示
console.log(fruits[0]);

// 2つ目をコンソールに表示
console.log(fruits[1]);

// 3つ目をコンソールに表示
console.log(fruits[2]);

サンプルの実行環境

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

for 文で配列を扱う

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

配列の中身を先頭の 5 つだけ

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

1
2
3
4
5
6
7
// 社員名簿配列(10名)
let employees = ['松浦 博', '木曽 亮司', '天野 健太郎', '小牧 圭一', '西山 勝人', '大島 典子', '徳重 智之', '前川 千明', '三田村 彩', '深谷 英樹'];

// for文で繰り返し
for (let i = 0; i < 5; i++) {
  console.log((i + 1) + '番目の社員:' + employees[i]); // コンソールにデータ表示
}
サンプルの実行環境

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

解説

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

  • console.log((0+1) + '番目の社員:' + employees[0])
  • console.log((1+1) + '番目の社員:' + employee[1])
  • console.log((2+1) + '番目の社員:' + employees[2])

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

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

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

1
2
3
4
5
6
7
// 社員名簿配列(10名)
let employees = ['松浦 博', '木曽 亮司', '天野 健太郎', '小牧 圭一', '西山 勝人', '大島 典子', '徳重 智之', '前川 千明', '三田村 彩', '深谷 英樹'];

// for文で繰り返し
for (let i = 0; i < employees.length; i++) {
  console.log((i + 1) + '番目の社員:' + employees[i]); // コンソールにデータ表示
}

サンプル実行環境

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

解説

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

  • 社員の出入りが激しく、頻繁にデータ数が変わる。
  • 社員数が多く、配列の長さがわからない。

まとめ

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