第20回　「関数(2)」

前回は関数の基礎について勉強しました。今回は前々回作成したランダムにメッセージを表示するプログラムを関数を使ったものに書き換えてみます（前々回は下記プログラム）
　
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"></script>
<hr>
■今日のことわざ<br>
<script language="JavaScript"></script>
<hr>
</body>
</html>

　ランダムにメッセージを表示する部分で似ているところを探すと以下の部分が似ていることがわかります。

n = Math.floor(Math.random() * msg.length);
document.write(msg[n],"<br>");

n = Math.floor(Math.random() * kotowaza.length);
document.write(kotowaza[n],"<br>");

　違う点と言えば配列名です。この配列名部分をなんとかすれば２つの部分が関数にまとめることができます。このような場合は配列名を関数の引数として渡してやることができますので、それを利用します。
　関数名はprintMsgとします。

function printMsg(msgAry)
{
n = Math.floor(Math.random() * msgAry.length);
document.write(msgAry[n],"<br>");
}

　msgAryが引き数で関数が呼び出される時に渡される配列名です*1。この関数を呼び出して使ってみましょう。

msg = [ "こんにちは",
"いい天気",
"みたいですね",
"おしまい",
"やっぱり再開？" ];
printMsg(msg);

　こんな具合になります。ランダムにメッセージを表示するプログラムを、この関数を使ったものに変更したのが以下のスクリプトです。

<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"></script>
<hr>
■今日のことわざ<br>
<script language="JavaScript"></script>
<hr>
</body>
</html>

　「なんだ、呼び出す部分は１、２行しか減っていないし、関数部分で長くなってしまっているじゃないか。これじゃあ、かえって面倒じゃないのか？」

　そう思う人がいるかもしれません。
　確かにスクリプトは長くなってしまいましたし、呼び出す部分の行数もほとんど変わっていません。
　しかし、関数の良いところは他にもあるのです。
　それについては、また次回説明します。

*1　実際は配列への参照（ポインタ）が渡されます。

第20回 「関数(2)」

第20回　「関数(2)」