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|ノベルゲーム風にキー入力で文字を切り替える方法!

スポンサードリンク

関連コンテンツ

オススメ記事

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

Local by Flywheel

一瞬でWordPressローカル環境を作成! Local by Flywheelの使い方

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

【Gitの使い方 – その5】リモートリポジトリ(GitHub)へPushしてみよう!

現在、新曲熱意制作中の@It_is_Rです。 さて、Gitの使い方5回目の今回は、GitHubのリモートリポジトリを作成し、そこにローカルリポジトリをPushする方法を紹介します。 [se

Swift

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

喧嘩するほど仲がいいとは言いますが、喧嘩する相手がいません。友達がいないということでしょうか。@It_is_Rです。 前回、StoryboardでMacのウィンドウに文字を表示しました。しかし、

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

WordPress テーマ自作 | サイト全体のレイアウトを整える。

水を飲む時、口に入れすぎてしまう@It_is_Rです。 WordPressテーマ自作シリーズ第11回目です。 今回は、サイト全体のレイアウトを整えてみましょう。 このシリーズの前回の記事

Android アプリ開発入門! Android Studio のインストール手順。

人の笑顔が大嫌い。 @It_is_R です。 Android アプリ開発では、 Eclipse や Android Studio を使ってアプリを開発するのが一般的です。 一般的に言語は Ja

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

コメントをどうぞ!

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