小学生からのプログラミング入門講座（にゅうもんこうざ）、第８弾です。
前回はりこちゃんを方向キーで操作（そうさ）することができるようになりました。
しかしプログラムを作ってくと、コンピュータへのお願いが増えていき、管理（かんり）が大変になってしまいます。
そこで今回はindex.htmlファイルを、HTMLファイル、JavaScriptファイル、CSSファイルに分けてみようと思います。
アル
あー、HTMLとかCSSとか、JavaScriptとか、全部一緒に書かれてるから、どこまでがなんだったのか混乱（こんらん）しちゃうよ
りこ
うーん、このままプログラムが長くなると、分かりにくくなりそうね
山田
お困（こま）りのようだべな
りこ
あ、山田先生！
山田
書いているプログラムの量（りょう）が長くなりそうな場合、ファイルを分割（ぶんかつ）しておくと管理（かんり）がしやすくなるからおすすめだべ
アル
どうやるの！
HTMLファイル、CSSファイル、JavaScriptファイルに分けてみよう
ではまず、今までのものをHTMLファイル、CSSファイル、JavaScriptファイルに分けてみましょう。
画像のように、スタイルシート（CSS)と、JavaScriptの部分をカット＆ペースト（切り取りして貼り付けること）で、CSSファイルとJavaScriptファイルを作成します。
game ├ index.html ├ style.css ├ script.js └ rico.png
少し修正（しゅうせい）して、以下のようにします。
index.html
<html>
<head>
<title>キー入力</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img id="rico" src="rico.png">
<script type="text/javascript" src="script.js"></script>
</body>
</html>
style.css
#rico {
position: absolute;
top: 0;
left: 0;
}
script.js
var y = 0;
var x = 0;
addEventListener("keydown", keydownfunc, false);
function keydownfunc( event ) {
var key_code = event.keyCode;
if( key_code === 37 ) x -= 32;
if( key_code === 38 ) y -= 32;
if( key_code === 39 ) x += 32;
if( key_code === 40 ) y += 32;
document.getElementById( 'rico' ).style.top = y + "px";
document.getElementById( 'rico' ).style.left = x + "px";
}
山田
注目して欲しいのはindex.htmlの４行目と８行目だべ
りこ
あっ、これでCSSやJavaScriptのファイルを読み込んでいるのね！
index.htmlの４行目、<link rel="stylesheet" type="text/css" href="style.css">は、スタイルシート（CSS）を読み込んでいます。
ここで読み込んでいるスタイルシート（CSS）は、style.cssというファイルです。
またindex.htmlの８行目、<script type="text/javascript" src="script.js"></script>では、JavaScriptファイル、ここではscript.jsファイルを読み込んでいます。
アル
一つのファイルが短くなって、分かりやすくなった！
まとめ
今回は、HTMLファイルとCSSファイル、JavaScriptファイルを分けて書く方法を紹介（しょうかい）しました。
簡単（かんたん）なものを作る時は、ファイルを分けずにそのまま作ってしまえば早いのですが、複雑（ふくざつ）になるにつれて、頭が混乱（こんらん）してきてしまいます。
そんな時はファイルを分けることで、頭の中を整理（せいり）することができます。
アル
たすかったぁ。index.htmlにいっぱい画像読み込んで、動かして遊んでたら、何が書いてあるかさっぱりになっちゃってたんだ
山田
それはよかったべな。もっとプログラムが複雑（ふくざつ）になってきたら、機能（きのう）ごとにファイルを分割（ぶんかつ）してもまた分かりやすくなるんだべけれども、それはまたの話だべな
りこ
もっといっぱいプログラミングの勉強しなきゃ！
山田
頑張るべよ！
りこ
うん！
アル
うん！
この企画の一覧はこちら
- 小学生から始めるプログラミング入門。プログラミングってなぁに？
- 小学生から始めるScratch入門。使い方とゲーム開発の基礎知識
- 小学生から始めるScratch入門。シューティングゲームを作ろう！
- 小学生からのプログラミング入門。JavaScriptでおみくじを作ろう！
- 小学生からのJavaScript入門。今月の残り日数を計算してみよう！
- 小学生からのJavaScript入門。画像の表示と移動をしてみよう！
- 小学生からのJavaScript入門。キー入力でキャラを動かしてみよう！
- 小学生からのJavaScript入門。ファイルを分けて管理してみよう！
- 小学生からのJavaScript入門。オブジェクトを使ってみよう！
- 小学生からのJavaScript入門。ゲームのメインループを作ってみよう！
- 小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす！
- 小学生からのJavaScript。HTML5とCanvasを使ってみよう！
- 小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう！
- 小学生からのJavaScript。マップでキャラを動かせるようにしよう！
