更新日: 2017年2月27日
公開日: 2015年12月5日

ゼロから始めるJavaScript講座Vol09　配列とは

ゼロから始めるJavaScript講座配列とは
配列とは
配列の書き方
配列の展開
配列の使用例

ゼロから始めるJavaScript講座配列とは

配列とは

以前変数はデータを入れる箱と例えましたが、配列はその箱を複数集めた、大きい箱のようなものです。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>配列</title>
</head>
<body>
    <script>
        // 配列宣言
        var fruits = new Array();

        fruits[0] = 'apple';
        fruits[1] = 'grape';
        fruits[2] = 'melon';

        document.write(fruits[0]);
        document.write(fruits[1]);
        document.write(fruits[2]);
    </script>
</body>
</html>

配列を図で例えると、fruitsという大きい箱(配列)の中には箱が3つあり、それぞれの箱の名前と中身は「箱0の中身がapple」「箱1の中身がgrape」「箱2の中身がmelon」となっています。

このように、配列とは複数の箱と値を1つにまとめて扱うことができ、配列という大きい箱の中にある1つ1つの箱のことを「要素」と呼び、箱の名前のことを「キー

配列の書き方

JavaScriptにおける配列の書き方は以下となります。

「varfruits=newArray();」と書いて配列の宣言をします。この宣言により、中身が空っぽな配列が作成されます。

配列の中に新しい箱を作るには、配列名の後にを記入し、その中に配列の番号(キー)を入力します。そして作成したキー値

配列には様々な書き方があります。例えば下記のように配列を書くこともでき、書き方1と書き方2で、配列fruitsの中身は同一になります。

値

箱の名前

キー

箱の中身(値)を取り出すには、配列名とどの箱(キー)かを指定する必要があります。

配列はどの書き方でも、キー値

配列の展開

配列はfor文のようなループ処理と組み合わせて利用することで、効果的に利用することができます。お手本にある通りプログラムを書いてみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>配列&amp;for</title>
</head>
<body>
<script>
    var fruits = ['apple', 'grape', 'melon'];

    for (var i = 0; i < fruits.length; i++) {
        document.write(fruits[i]);
    }
</script>
</body>
</html>

「fruits.length」と配列名の後ろに「.length」をつけると、「配列の中で一番大きいキーの数値+1」を取得することができます。今回の場合は2がキー最大数値のため3となります。

「配列」「for」「.length」を組み合わせて利用すると、for文は配列の要素の数だけループが行われるため、配列の要素が増減した際、for文に関しては何も手を加えなくても自動でループの数が調節されるのが、魅力の1つです。

配列の使用例

配列は効率的なプログラムを書くためには欠かせないものです。例として、5人にテストを行い、各点数と全体の平均点を表示するプログラムについて考えてみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>配列の使用例(配列非利用)</title>
</head>
<body>
    <script>
        var data1 = 55;
        var data2 = 100;
        var data3 = 38;
        var data4 = 40;
        var data5 = 83;

        document.write('<p>各点数: ' + data1 + '点</p>');
        document.write('<p>各点数: ' + data2 + '点</p>');
        document.write('<p>各点数: ' + data3 + '点</p>');
        document.write('<p>各点数: ' + data4 + '点</p>');
        document.write('<p>各点数: ' + data5 + '点</p>');

        var ave = (data1 + data2 + data3 + data4 + data5) / 5;
        document.write('<p>平均点' + ave + '点</p>');
    </script>
</body>
</html>

配列を利用しないで作成した場合、上記のようになります。

5人の点数を別々な変数で定義しており、内容に対しかなり長いコードとなっています。また仮にテストを行う人数を6人に増やした場合、


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>配列の使用例(配列非利用)</title>
</head>
<body>
    <script>
        var data1 = 55;
        var data2 = 100;
        var data3 = 38;
        var data4 = 40;
        var data5 = 83;
        var data6 = 95;

        document.write('<p>各点数: ' + data1 + '点</p>');
        document.write('<p>各点数: ' + data2 + '点</p>');
        document.write('<p>各点数: ' + data3 + '点</p>');
        document.write('<p>各点数: ' + data4 + '点</p>');
        document.write('<p>各点数: ' + data5 + '点</p>');
        document.write('<p>各点数: ' + data6 + '点</p>');

        var ave = (data1 + data2 + data3 + data4 + data5 + data6) / 6;
        document.write('<p>平均点' + ave + '点</p>');
    </script>
</body>
</html>

同じものを、配列を利用したプログラムで書いてみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>配列の使用例(配列利用)</title>
</head>
<body>
    <script>
        var data = [55, 100, 38, 40, 83];
        var sum = 0;

        for (var i = 0; i < data.length; i++) {
            document.write('<p>各点数: ' + data[i] + '点</p>');
            sum += data[i];
        }

        var ave = sum / data.length;
        document.write('<p>平均点' + ave + '点</p>');
    </script>
</body>
</html>

5人分の点数を配列dataにまとめ、for文により配列dataの要素数(data.length)だけループを行い、各点数の表示と合計値sumの計算をしています。

計算した合計値sumを人数(data.length)で割ることで、平均点aveを算出しています。

仮にテストを行う人数を6人に増やした場合、


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>配列の使用例(配列利用)</title>
</head>
<body>
    <script>
        var data = [55, 100, 38, 40, 83];
        var sum = 0;

        for (var i = 0; i < data.length; i++) {
            document.write('<p>各点数: ' + data[i] + '点</p>');
            sum += data[i];
        }

        var ave = sum / data.length;
        document.write('<p>平均点' + ave + '点</p>');
    </script>
</body>
</html>