1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. 小学生からのJavaScript入門。ファイルを分けて管理してみよう!

小学生からのJavaScript入門。ファイルを分けて管理してみよう!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第8弾です。

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

そこで今回はindex.htmlファイルを、HTMLファイル、JavaScriptファイル、CSSファイルに分けてみようと思います。

アル

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


りこ

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


山田

お困(こま)りのようだべな


りこ

あ、山田先生!


山田

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


アル

どうやるの!

HTMLファイル、CSSファイル、JavaScriptファイルに分けてみよう

ではまず、今までのものをHTMLファイル、CSSファイル、JavaScriptファイルに分けてみましょう。
画像のように、スタイルシート(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の4行目と8行目だべ


りこ

あっ、これでCSSやJavaScriptのファイルを読み込んでいるのね!

index.htmlの4行目、<link rel="stylesheet" type="text/css" href="style.css">は、スタイルシート(CSS)を読み込んでいます。
ここで読み込んでいるスタイルシート(CSS)は、style.cssというファイルです。

またindex.htmlの8行目、<script type="text/javascript" src="script.js"></script>では、JavaScriptファイル、ここではscript.jsファイルを読み込んでいます。

アル

一つのファイルが短くなって、分かりやすくなった!

まとめ

今回は、HTMLファイルとCSSファイル、JavaScriptファイルを分けて書く方法を紹介(しょうかい)しました。
簡単(かんたん)なものを作る時は、ファイルを分けずにそのまま作ってしまえば早いのですが、複雑(ふくざつ)になるにつれて、頭が混乱(こんらん)してきてしまいます。

そんな時はファイルを分けることで、頭の中を整理(せいり)することができます。

アル

たすかったぁ。index.htmlにいっぱい画像読み込んで、動かして遊んでたら、何が書いてあるかさっぱりになっちゃってたんだ


山田

それはよかったべな。もっとプログラムが複雑(ふくざつ)になってきたら、機能(きのう)ごとにファイルを分割(ぶんかつ)してもまた分かりやすくなるんだべけれども、それはまたの話だべな


りこ

もっといっぱいプログラミングの勉強しなきゃ!


山田

頑張るべよ!


りこ

うん!


アル

うん!


この企画の一覧はこちら

  1. 小学生から始めるプログラミング入門。プログラミングってなぁに?
  2. 小学生から始めるScratch入門。使い方とゲーム開発の基礎知識
  3. 小学生から始めるScratch入門。シューティングゲームを作ろう!
  4. 小学生からのプログラミング入門。JavaScriptでおみくじを作ろう!
  5. 小学生からのJavaScript入門。今月の残り日数を計算してみよう!
  6. 小学生からのJavaScript入門。画像の表示と移動をしてみよう!
  7. 小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!
  8. 小学生からのJavaScript入門。ファイルを分けて管理してみよう!
  9. 小学生からのJavaScript入門。オブジェクトを使ってみよう!
  10. 小学生からのJavaScript入門。ゲームのメインループを作ってみよう!
  11. 小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!
  12. 小学生からのJavaScript。HTML5とCanvasを使ってみよう!
  13. 小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!
  14. 小学生からのJavaScript。マップでキャラを動かせるようにしよう!

スポンサードリンク

関連コンテンツ

オススメ記事

キャラを決まった間隔ずつ動かすよ!

小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第11弾です。 前回は、キャラクターの画像(がぞう)をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔(かんかく)を短

WordPress|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

HTML CSS

CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

体重が50キロを切りました。@It_is_Rです。身長は171あります。 骨っていうなー! サイトを作る時、円形のパーツを作りたい時ってよくありますよね。画像を丸くして。。。なんてやっている人

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

押入れが部屋になっている@It_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

オブジェクトを使ってみよう!

小学生からのJavaScript入門。オブジェクトを使ってみよう!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第9弾です。 前回の講座(こうざ)では、HTMLやCSS、JavaScriptを分けて管理(かんり)する方法を紹介しました。 今回はオブ

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

【Android Studio】Button(ボタン)を作る基本中の基本。

ボタンを作る基本中の基本ですが、ボタンを作ること自体が基本中の基本です。@It_is_Rです。 タイトルなんてどうだっていいんです。肝心のなのは真心です。 Androidアプリ開発、7回目とな

WordPress テーマ自作 | functions.php から CSS を読み込む方法。

ふぁ……ふぁ……、ファンクションッ!! あ、どうも@It_is_Rです。 なに笑ってるんですか? WordPress テーマ自作シリーズ第10回目です。 今回は、 functions.php

Homebrew

Homebrewのインストール&使い方。すぐに使える詳しい解説!

※追記 この記事は2018/04/30に最新の情報に書き直しました。 人生をもう一度やり直したいとつくづく思う@It_is_Rです。 今回はHomebrewについての記事を書いて

コメントをどうぞ!

メールアドレスが公開されることはありません。