第9回 javascriptのファイル分け

解説

ファイルを分けることで、ソースコードがかなり見やすくなる。それと同時に、ファイルが増えるため管理が大変になってしまうかもしれない。

c.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>歩行</title>
</head>
<body>

<div id="trim">
<img src="./img/girl.png">
</div>

<script type="text/javascript" src="./c.js"></script>
</body>
</html>

<style>
#trim{
	top:10px;
	left:10px;
	position:absolute;
}
</style>

HTMLファイルに関しては特に変化はない。

c.js

/*外部jsファイルの読み込み*/
document.write("<script type='text/javascript' src='./d.js'></script>");//キー判定
document.write("<script type='text/javascript' src='./e.js'></script>");//歩行速度

var count=0;
var rect=[0,0,48,-32];	//上右下左の順
var margin=[0,0,0,32];	//上右下左の順

//押されたキーによってこの値が1になったり0になったりする
var left=0;
var up=0;
var right=0;
var down=0;

window.onload=loop;	//ページ読み込み時に発動

/*メインループ*/
function loop(){
	if(left==1)
	{
		rect[0]=48;
		rect[2]=96;
		margin[0]=-48;
	}
	else if(up==1)
	{
		rect[0]=144;
		rect[2]=192;
		margin[0]=-144;
	}
	else if(right==1)
	{
		rect[0]=96;
		rect[2]=144;
		margin[0]=-98;
	}
	else if(down==1)
	{
		rect[0]=0;
		rect[2]=48;
		margin[0]=0;
	}
	
	//向きの初期化
	re="rect("+rect[0]+"px,"+rect[1]+"px,"+rect[2]+"px,"+rect[3]+"px)";
	ma=margin[0]+"px "+margin[1]+"px "+margin[2]+"px "+margin[3]+"px";
	document.getElementById("trim").style.clip= re;
	document.getElementById("trim").style.margin=ma;
	//座標
	document.getElementById("trim").style.left=x+"px";
	document.getElementById("trim").style.top=y+"px";
}

setInterval("loop()",20);

c.jsはメインループが書かれている。ここで特に重要となるのは、

/*外部jsファイルの読み込み*/
document.write("<script type='text/javascript' src='./d.js'></script>");//キー判定
document.write("<script type='text/javascript' src='./e.js'></script>");//歩行速度

というところだ。c.jsが今回の面ファイルとなるので、ここで他の二つのファイルをインクルードする。（jsファイルから読み込むというよりは、HTMLファイルに書き込んで、それを使えるようにするという感じだ。）

ここで注意してほしいのは、読み込む相対パスを間違えないことだ。今の時点では正しく実行できるのに、他のjsファイルの場所を変更すると実行できなくなる、なんてことがたまにある。

その他の場所に変化はない。

d.js


document.onkeydown=kdown;	//キーが押されたらdown関数を実行
document.onkeyup=kup;		//キーが話されたらup関数を実行

var x=10;	//画像のx座標
var y=10;	//画像のy座標
var move=32;	//移動量

function kdown(e)
{

	//押されたキーの判別
	if(e.keyCode==37){ left=1;}
	if(e.keyCode==38){ up=1;}
	if(e.keyCode==39){ right=1;}
	if(e.keyCode==40){ down=1;}
	
	//x軸,y軸の更新
	if(left==1){x=x-move;}
	if(right==1){x=x+move;}
	if(up==1){y=y-move;}
	if(down==1){y=y+move;}

}

function kup(e)
{
	left=0;
	up=0;
	right=0;
	down=0;
}

e.js

function ch_move(){
	if(count==4)
	{
		rect[1]=32;
		rect[3]=0;
		margin[3]=0;
		count=0;
	}
	else{
		rect[1]=rect[1]+32;
		rect[3]=rect[3]+32;
		margin[3]=margin[3]-32;
	}
	count++;
	
	//取得画像
	re="rect("+rect[0]+"px,"+rect[1]+"px,"+rect[2]+"px,"+rect[3]+"px)";
	ma=margin[0]+"px "+margin[1]+"px "+margin[2]+"px "+margin[3]+"px";
	document.getElementById("trim").style.clip= re;
	document.getElementById("trim").style.margin=ma;

	console.log(up,right,down,left);
}

setInterval("ch_move()",500);

この二つのファイルは、前回の記事から変更する部分はない。d.jsというような名前でなく、もっとわかりやすい名前にしたほうがいいだろう。その時もファイルの名前が変更されたことに注意して相対パスを記述する必要がある。

さいごに

ファイルを分けるときの注意点は、読み込み元のファイルに依存しないということだ。汎用性を持たせることで、さまざまなプログラムにも利用することができる。この部分においては、上記のプログラムではまだ不完全なので、最適化していく必要がある。