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

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

小学生からのJavaScriptジャバスクリプト入門講座にゅうもんこうざ、第5弾です。

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

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

アル

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

りこ

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

山田

こまりのようだべな

りこ

あ、山田先生!

山田

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

アル

どうやるの!

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

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

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

りこ

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

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

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

アル

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

まとめ

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

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

アル

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

山田

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

りこ

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

山田

頑張るべよ!

りこ

うん!

アル

うん!

この企画の一覧はこちら

  1. 小学生からのプログラミング入門。プログラミングってなぁに?
  2. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門
  3. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門
  4. Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門
  5. Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門
  6. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
  7. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
  8. JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門
  9. JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門
  10. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
  11. 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
  12. 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
  13. 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
  14. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  15. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  17. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  18. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  19. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  20. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  21. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  22. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。【準備編】

いつもどうもです。@It_is_Rです。 少し前まで、私は FC2ブログ を使っていました。 やはり個性を大切にしたい私にとって、用意されたテンプレートを使うことに抵抗がありました。 「

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

おみくじゲームを作るべ!

JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門

さて、今日も楽しく、プログラミングを学んでいきましょう!今回はなんと、プログラミングでおみくじゲームを作ってみます。 そして今回から、Scratch(スクラッチ)より、少しレベルアップして、J

【Mac】ローカルにWebサーバを立ち上げる超簡単な方法!

JavaScriptを使ってWebページなどの開発をしていると、Google ChromeやSafariなどのブラウザでうまく開けない場合が稀にあります。 そんな時、ローカルにWebサーバを立ち上げ

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。 前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボ

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

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

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

Pug

PugでPHPが使える! gulpfile.jsをちょっと工夫するだけだよ

HTMLを書くときPugを使うととても便利なのですが、PHPを書きたいと思ったときは少し工夫が必要になります。 PugでPHPを書くためのプラグインを使う方法もありますが、使うプラグインが増えれば増

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です