速効！図解プログラミング

中級編　Chapter 01　「配列を使って計算させよう（中級編）」

■野菜の個数を自動的に求めるようにする
　３章で野菜を買った時の合計の金額＋消費税の計算を行うプログラムを作成しました。ここでは、改良して使いやすいものにします。
　３章で作成したプログラムは野菜が増えるたびに

for (i=0; i<3; i++) goukei = goukei + yasai[i];

の野菜の配列の数を示す3の部分を変更する必要がありました。この数を間違えてしまうと計算が合わなくなってしまいます。また、野菜をいくつ買ったかも数えなければなりません。このような場合に野菜の配列要素の個数を自動的に求めてくれる方法があります。それは「配列名.length」と指定する方法です。つまり野菜の金額が入っているyasaiという配列に入っている要素の個数は

yasai.length

になります。これをfor命令の繰り返し回数に入れます。つまり以下のようになります。

for (i=0; i<yasai.length; i++) goukei = goukei + yasai[i];

yasaiの個数を変えてもプログラムで自動的に何個あるか調べて処理してくれます。
これで、野菜が増えるたびに修正する手間が１つ減りました。リスト１が実際のプログラムです。

■野菜の金額だけ追加するようにする
　野菜の個数が増えても自動的に計算するので楽になりましたが、野菜が増えるたびに

yasai[番号] = 金額;

として入力するのは面倒です。面倒なだけでなく番号が同じだったりすると前の金額が上書きされてしまって計算が合わなくなります。

yasai[0] = 148;
yasai[1] = 31;
yasai[2] = 98;
yasai[1] = 135;

同じ配列に同じ番号があると後で書いた金額になってしまいます。この場合、31円が135円になってしまいます。

これでは、計算するたびに番号が間違っていないか確認しないといけません。これではコンピューターを使うよりも電卓か暗算で計算した方が良さそうです。
　しかし、JavaScriptでは毎回「yasai[番号] = 金額;」と書かなくても以下のように簡単に書くことができます。

配列名 = [金額, 金額, 金額, ..., 金額];

購入した野菜の金額だけ,（コンマ）で区切って書くだけです。配列を作成するnew Array()も不要です。
リスト１では

yasai[0] = 148;
yasai[1] = 31;
yasai[2] = 98;

となっていますが、これは

yasai = [148,31,98];

となります。これならば金額を間違えない限りは大丈夫でしょう。初級編で作成したプログラムもよりも使いやすく、修正時のミスも減るはずです。

●３章で作成したプログラムリスト
<html>
<head>
<title>消費税計算</title>
<script language="JavaScript"></script>
</head>
<body>
</body>
</html>

●リスト１
<html>
<head>
<title>消費税計算</title>
<script language="JavaScript"></script>
</head>
<body>
</body>
</html>

●リスト２
<html>
<head>
<title>消費税計算</title>
<script language="JavaScript"></script>
</head>
<body>
</body>
</html>