配列の使い方

広告

まず配列の使い方について簡単に確認します。

例として5人分の成績を変数に格納する場合を考えてみます。 

var result1, result2, result3, result4, result5;

result1 = 85;
result2 = 78;
result3 = 92;
result4 = 62;
result5 = 69;

変数は1つにつき1つの値しか格納できませんので5人分の成績を格納するには5つの変数が必要です。では各成績を画面に表示させてみます。 

var result1, result2, result3, result4, result5;

result1 = 85;
result2 = 78;
result3 = 92;
result4 = 62;
result5 = 69;

alert(result1);
alert(result2);
alert(result3);
alert(result4);
alert(result5);

変数の場合、一つ一つ処理するしかありません。5人であればまだ大丈夫ですがこれが50人分となると同じような文がずっと続くような読みにくいスクリプトとなってしまいます。

配列を使う

このように同じような目的に値を数多く格納したい場合に配列を使うと便利です。例えば先ほどのサンプルを配列を使って書き直してみます。 

var result = new Array(5);

result[0] = 85;
result[1] = 78;
result[2] = 92;
result[3] = 62;
result[4] = 69;

または次のように記述することもできます。 

var result = [85, 78, 92, 62, 69];

配列は任意の数の値を管理することができます。先ほどの例では5人分の成績の値を管理しましたが、これが50人分であっても可能です。まったく利用目的が異なる値を全て配列に入れてしまっても逆に分かりにくくなりますが、今回のように同じような意味を持つ複数の値を管理する時に便利です。

また配列の大きなメリットは繰り返し処理と組み合わせて利用できることです。配列に格納された値を順に出力する場合は次のように記述することができます。 

var result = [85, 78, 92, 62, 69];

for (var i = 0; i < 5; i++){
  alert(result[i]);
}

配列の場合はインデックスと呼ばれる番号を指定すると配列に格納されている各値を参照することができます。インデックスは数値なので繰り返し処理を使ってインデックスの値を変化させて配列に格納されている各値を順に処理させています。

では次のページ以降で配列の詳しい使い方を確認していきます。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script1_1.js">
</script>

</body>
</html>

var result = [85, 78, 92, 62, 69];
var name = ['加藤', '武田', '小田', '毛利', '遠藤'];

document.write("<p>");

for (var i = 0; i < 5; i++){
  document.write(name[i] + "さんの成績は" + result[i] + "です<br />");
}

document.write("</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p1-1

( Written by Tatsuo Ikura )