【JavaScript】ファイルを分けて管理してみよう！　小学生からのプログラミング入門

更新 : 2022/01/06

カテゴリー : JavaScript, プログラミング・Web

by : It is R

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう！

前回はりこちゃんを方向キーで操作《そうさ》することができるようになりました。
しかしプログラムを作ってくと、コンピュータへのお願いが増えていき、管理《かんり》が大変になってしまいます。

そこで今回はindex.htmlファイルを、HTML《エイチティーエムエル》ファイル、JavaScript《ジャバスクリプト》ファイル、CSS《シーエスエス》ファイルに分けてみようと思います。

アル

あー、HTMLとかCSSとか、JavaScriptとか、全部一緒に書かれてるから、どこまでがなんだったのか混乱《こんらん》しちゃうよ

りこ

うーん、このままプログラムが長くなると、分かりにくくなりそうね

山田

お困《こま》りのようだべな

りこ

あ、山田先生！

山田

書いているプログラムの量《りょう》が長くなりそうな場合、ファイルを分割《ぶんかつ》しておくと管理《かんり》がしやすくなるからおすすめだべ

アル

どうやるの！

HTML《エイチティーエムエル》ファイル、CSS《シーエスエス》ファイル、JavaScript《ジャバスクリプト》ファイルに分けてみよう
まとめ

HTML《エイチティーエムエル》ファイル、CSS《シーエスエス》ファイル、JavaScript《ジャバスクリプト》ファイルに分けてみよう

ではまず、今までのものをHTML《エイチティーエムエル》ファイル、CSS《シーエスエス》ファイル、JavaScript《ジャバスクリプト》ファイルに分けてみましょう。
画像のように、スタイルシート（CSS)と、JavaScriptの部分をカット＆ペースト（切り取りして貼り付けること）で、CSSファイルとJavaScript ファイルを作成します。

game
├ index.html
├ style.css
├ script.js
└ rico.png

少し修正《しゅうせい》して、以下のようにします。

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>キー入力</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<script src="script.js"></script>
</body>
</html>

style.css

#rico {
	position: absolute;
	top: 0;
	left: 0;
}

script.js

//画面に画像を表示する
document.write( '<img id="rico" src="rico.png">' );

//キャラクターの位置
var y = 0;
var x = 0;

//なにかキーが押されたとき、keydownfuncという関数を呼び出す
addEventListener( "keydown", keydownfunc );

//キーが押されたときに呼び出される関数
function keydownfunc( event ) {

	//押されたボタンに割り当てられた数値（すうち）を、key_codeに代入
	var key_code = event.keyCode;

	if( key_code === 37 ) x -= 32;		//「左ボタン」が押されたとき、xの値から32を引き算する
	if( key_code === 38 ) y -= 32;		//「上ボタン」が押されたとき、yの値から32を引き算する
	if( key_code === 39 ) x += 32;		//「右ボタン」が押されたとき、xの値に32を足し算する
	if( key_code === 40 ) y += 32;		//「下ボタン」が押されたとき、yの値に32を足し算する

	//りこちゃんの画像の位置（いち）を反映（はんえい）させる
	document.getElementById( 'rico' ).style.top = y + "px";
	document.getElementById( 'rico' ).style.left = x + "px";

}

山田

注目して欲しいのはindex.htmlの４行目と７行目だべ

りこ