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

 これで、やっとできました。
 しかし、このプログラムには汎用性がありません。汎用性は変更に強いか、融通が利くかどうか、です。例えばメッセージを1つ追加してみましょう。
 
<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に直しています。メッセージを追加するたびに2か所も変更しなければいけないとなるとミスも発生しますし、何よりも面倒です。
 
 そこで次回は、このプログラムをさらに改良し汎用性を持たせてみましょう。
 
 



2002-2004 Copyright KaZuhiro FuRuhata (古籏一浩)