第25回 「関数の再利用とjsファイル（２）」
前回はJavaScript部分のファイルを別（外部）ファイルにする方法について説明しました。今回は前々回のプログラムを外部ファイルとHTMLファイルの２つに分けてみます。（前回は下記プログラム）
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript"><!--
function printMsg(msgAry, col)
{
if (!col ) col = "yellow";
n = Math.floor(Math.random() * msgAry.length);
document.write("<font color='"+col+"'>");
document.write(msgAry[n],"<br>");
document.write("</font>");
}
msg = [ "こんにちは",
"いい天気",
"みたいですね",
"おしまい",
"やっぱり再開？" ];
printMsg(msg);
// --></script>
<hr>
■今日のことわざ<br>
<script language="JavaScript"><!--
kotowaza = [ "雨降って地固まる",
"人を見たら泥棒と思え",
"ただより高いものはない" ];
printMsg(kotowaza,"blue");
// --></script>
<hr>
</body>
</html>
前回説明したようにJavaScript部分のみ切り出して別ファイルにします。ここでは、このファイル名をprint.jsにします。このファイル内容は以下のようになります。
function printMsg(msgAry, col)
{
if (!col ) col = "yellow";
n = Math.floor(Math.random() * msgAry.length);
document.write("<font color='"+col+"'>");
document.write(msgAry[n],"<br>");
document.write("</font>");
}
外部JavaScriptファイルには純粋にスクリプトのみを記述します。このファイルをHTMLファイル側で読み込み利用するには<script>タグで読み込むファイル名を指定します。実際のプログラムは以下のようになります。
<html>
<head>
<title></title>
</head>
<body>
<script language="JavaScript" src="print.js"></script>
<script language="JavaScript"><!--
msg = [ "こんにちは",
"いい天気",
"みたいですね",
"おしまい",
"やっぱり再開？" ];
printMsg(msg,"red");
// --></script>
<hr>
■今日のことわざ<br>
<script language="JavaScript"><!--
kotowaza = [ "雨降って地固まる",
"人を見たら泥棒と思え",
"ただより高いものはない" ];
printMsg(kotowaza,"blue");
// --></script>
<hr>
</body>
</html>
よく使う関数を外部JavaScriptファイルにし、変更が多いかページ固有のものに関してはHTMLファイルに記述すれば良いでしょう。
外部JavaScriptファイルは複数読み込めますから「表示関係の関数」「スタイルに関する関数」「フォームに関する関数」を別ファイルにし必要に応じて読み込み利用できます。あと、別ファイルで同じ関数名を使って関数を定義した場合は「一番最後に定義（読み込まれた）された」ものが有効になります。これは外部ファイルだけでなく通常の<script>タグ内での定義でも同じです。例えば
<script language="JavaScript"><!--
function msg()
{
alert(1);
}
function msg()
{
alert(2);
}
msg();
// --></script>
のように二重に関数が定義されている場合は、最後に定義されたものが利用されるので上記スクリプトを実行するとアラートダイアログに2が表示されます。
よく利用する関数をどんどん作っておけば後々便利になります。が、ただ単純にスクリプトだけ書いてしまっては他の人が見て使う時や、自分が忘れてしまった場合に困ります。そのような場合は「コメント（注釈）」を入れておくと便利です。
次回は、コメントについて説明します。