第24回 「関数の再利用とjsファイル（１）」
前回はエラー処理について説明しました。（前回は下記プログラム）
<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>
このページで使われているメッセージ表示部分が他で使われないならば、これで完成です。しかし、他のページでも同様にメッセージをランダムに表示し色を付けたい場合は、どうすれば良いのでしょうか。上記のHTMLファイルをコピーして複製を作り、それを利用するのが楽でしょう。そうして、どんどんとHTMLファイルが増えていった時に
「仕様変更で関数printMsg内の処理を修正しなければならなくなった」
場合は、どうなるでしょうか？
もし、100ファイルあれば当然の事ながら100ファイルとも関数printMsgの処理内容を修正する事になります。単純にコピー＆ペーストしていくだけでも手間がかかります。UNIXやMacOS Xなどで正規表現が利用できるソフトで一括して置換してしまう方法もありますが、そのような処理ができない場合、非常に時間がかかり、なおかつミスが発生しやすくなります。
このような事態に備えてJavaScriptの部分だけ別ファイルにして再利用する手段が用意されています。ただし、単純にファイルを用意すれば良いわけでなくいくつか注意点があります。
１：ファイルの拡張子はjsでなければならない
２：jsファイルにはJavaScriptのプログラムのみ記述
３：１ファイル読み込むためにscriptタグが１つ必要。つまり読み込むjsファイルの数だけ必要。
１は
myLibrary.js
のように拡張子jsが必要だという事です。
２は
<script>
function myFunc() {
alert(123);
}
</script>
のようにタグを含めてはいけない、という事です。つまり以下のように純粋にスクリプトのみを記述します。
function myFunc() {
alert(123);
}
３はjsファイルが複数ある場合、例えば
myLib.js
ieLib.js
nsLib.js
のように３つjsファイルがあればscriptタグは以下のように３つ記述しなければいけません。
<script language="JavaScript" src="myLib.js"></script>
<script language="JavaScript" src="ieLib.js"></script>
<script language="JavaScript" src="nsLib.js"></script>
次回は前回のプログラム内の関数printMsgをjsファイルにし、読み込んで処理してみます。