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

<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. 小学生からのプログラミング入門。JavaScriptでおみくじを作ろう!
  2. 小学生からのJavaScript入門。今月の残り日数を計算してみよう!
  3. 小学生からのJavaScript入門。画像の表示と移動をしてみよう!
  4. 小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!
  5. 小学生からのJavaScript入門。ファイルを分けて管理してみよう!
  6. 小学生からのJavaScript入門。オブジェクトを使ってみよう!
  7. 小学生からのJavaScript入門。ゲームのメインループを作ってみよう!
  8. 小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!
  9. 小学生からのJavaScript。HTML5とCanvasを使ってみよう!
  10. 小学生からのJavaScript。迷路やRPGで使えるマップを作ってみよう!
  11. 小学生からのJavaScript。マップでキャラを動かせるようにしよう!
  12. 小学生からのJavaScript。クラスの概念をしっかりと理解しよう!
  13. 小学生からのJavaScript。プログラム全体をクラスを使って作ってみよう!
  14. 小学生からのJavaScript。文字を表示するクラスを作ってみよう!
  15. 小学生からのJavaScript。改行と一文字ずつ画面に表示する方法!
  16. JavaScript|ノベルゲーム風にキー入力で文字を切り替える方法!

スポンサードリンク

関連コンテンツ

オススメ記事

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

カスタムロゴの使い方。 WordPress サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 今回はカスタムロゴの使い方を紹介したいと思います。 このシリーズの前回の記事はこちらです。 【 WordPres

【Android Studio】じゃんけんゲームの作り方(アプリ開発の基本)

限りなくじゃんけんが弱い@It_is_Rです。 Androidアプリ開発、11回目となりました。 そろそろ何かアプリを作ってみたいですよね。基本は大事ですが、一番つまらないですね。 そこ

VCCW

VCCW で、超簡単に WordPress のローカル開発環境を整える方法。

考えすぎて間違った方向へ進む、@It_is_Rです。 WordPress のローカル開発環境を作りたい時、 VCCW を使うと便利です。 今回は、 その方法を紹介します。 VCC

マップ上をキャラが移動できるようにしよう!

小学生からのJavaScript。マップでキャラを動かせるようにしよう!

小学生からのプログラミング講座(こうざ)、第11弾です。 前回は、JavaScriptでのマップの作り方を紹介(しょうかい)しました。 しかし、まだマップを配置(はいち)しただけで、キャラクタ

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

scratch

小学生から始めるScratch入門。使い方とゲーム開発の基礎知識

小学生から始めるプログラミング入門です。 前回の記事で、プログラミングってどういうものなのか何となく理解してもらえたでしょうか? 少しだけScratch(スクラッチ)についてもふれましたが、ま

enchant.js100行未満!!本格シューティングゲーム作り方。

昨日歩き回ったせいで、足がかなり痛い@It_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしま

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

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

fish shell

Fish shellの使い方。プラグインなしでもここまで可愛くできる!

先日、Macをフォーマットしたため、今まで構築したきた開発環境が消えました。 といっても、バックアップはとってあるので戻すことはできるのですが、せっかく綺麗に全部消えたので、もう一度作り直そうかな、

コメントをどうぞ!

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