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



ゼロから始めるJavaScript講座Vol09 配列とは
目次
  1. ゼロから始めるJavaScript講座配列とは
  2. 配列とは
  3. 配列の書き方
  4. 配列の展開
  5. 配列の使用例

ゼロから始める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>

javascript-array1-639

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

javascript-array2-639

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

配列の書き方

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

javascript-array3-639

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

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

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

javascript-array4-639

箱の名前

キー

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

javascript-array5-639

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

配列の展開

配列は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>

javascript-array6-639

javascript-array7-639

「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>

javascript-array8-639

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

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>

javascript-array9-639

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


<!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>

javascript-array10-639

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>

javascript-array11-639

このように配列はループ処理と組み合わせる利用することで、より短く、より変更に強いプログラムとなります。

また今回作成した2つは「結果は同じでもソースコードの品質に差がある」例であり、規模が大きくなるほど、いかに効率的なプログラムを書くかが、重要になってきます。

NEXTLESSON連想配列とは連想配列とは

PREVLESSONwhile文を使った繰り返し処理while文を使った繰り返し処理

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp