第16回 「配列変数を使ってランダムにメッセージを表示する」
今回は配列変数を使ってランダムにメッセージを表示することにします。これまでのプログラムは以下のものでした。（これはswitch〜caseを使わないものです）
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
n = Math.floor(Math.random() * 4);
if (n == 0) document.write("こんにちは<br>");
if (n == 1) document.write("いい天気<br>");
if (n == 2) document.write("みたいですね<br>");
if (n == 3) document.write("おしまい<br>");
// --></script>
</body>
</html>
ここで前回やった配列を思い出しましょう。配列を参照するには
配列変数名[ 参照番号 ]
のように指定します。参照番号は数字を直接書くだけでなく変数を指定して、その値も利用できると書きました。そこで、乱数を生成したら、その値を配列変数の参照番号として使うようにします。そして、配列には、あらかじめ表示するメッセージを入れておきます。実際のプログラムは以下のようになります。
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
msg = new Array();
msg[0] = "こんにちは<br>";
msg[1] = "いい天気<br>";
msg[2] = "みたいですね<br>";
msg[3] = "おしまい<br>";
n = Math.floor(Math.random() * 4);
document.write(msg[n]);
// --></script>
</body>
</html>
今までの説明で、だいたい分かる範囲ではないかと思います。でも、よく見ると表示するメッセージ全部の最後に<br>タグが書かれています。メッセージを変更したり、追加するたびに<br>タグを入力していたのでは面倒です。そこで以前に説明したdocument.write()に複数のパラメータを記述するようにしてみます。実際のプログラムは以下のようになります。
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
msg = new Array();
msg[0] = "こんにちは";
msg[1] = "いい天気";
msg[2] = "みたいですね";
msg[3] = "おしまい";
n = Math.floor(Math.random() * 4);
document.write(msg[n],"<br>");
// --></script>
</body>
</html>
これで、やっとできました。
しかし、このプログラムには汎用性がありません。汎用性は変更に強いか、融通が利くかどうか、です。例えばメッセージを１つ追加してみましょう。
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
msg = new Array();
msg[0] = "こんにちは";
msg[1] = "いい天気";
msg[2] = "みたいですね";
msg[3] = "おしまい";
msg[4] = "やっぱり再開？";
n = Math.floor(Math.random() * 5);
document.write(msg[n],"<br>");
// --></script>
</body>
</html>
msg[4]〜の行を追加しただけでなく、その下の行の数字が4だったのを5に直しています。メッセージを追加するたびに２か所も変更しなければいけないとなるとミスも発生しますし、何よりも面倒です。
そこで次回は、このプログラムをさらに改良し汎用性を持たせてみましょう。