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

更新 : 2022/01/06

カテゴリー : JavaScript, プログラミング・Web

by : It is R

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう！

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

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

アル

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

りこ

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

山田

お困《こま》りのようだべな

りこ

あ、山田先生！

山田

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

アル

どうやるの！

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

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

ではまず、今までのものをHTML《エイチティーエムエル》ファイル、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の４行目と７行目だべ

りこ

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

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

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

アル

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

まとめ

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

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

アル

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

山田

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

りこ

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

山田

頑張るべよ！

りこ

うん！

アル

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

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

まとめ

このシリーズの一覧はこちら

小学生からのJavaScript入門

小学生からのプログラミング入門

オススメ記事

【WordPress】パンくずリストをプラグイン無しで自作する方法

小学校プログラミング必修化。どんなことを学べばいいの？

【初心者向けJavaScrip入門】変数を使いこなすための、かなり詳しい解説

【Git】リモートリポジトリへPushする方法

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

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

Windows10にPythonをインストールする方法

FC2でブログを始めよう！誰でも簡単にできるブログの作り方

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

Unityのダウンロードとインストールの方法【Windows】

コメントを残す（コメントは承認後に反映されます）コメントをキャンセル

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

まとめ

このシリーズの一覧はこちら

小学生からのJavaScript入門

小学生からのプログラミング入門

オススメ記事

【WordPress】パンくずリストをプラグイン無しで自作する方法

小学校プログラミング必修化。どんなことを学べばいいの？

【初心者向けJavaScrip入門】変数を使いこなすための、かなり詳しい解説

【Git】リモートリポジトリへPushする方法

【Android Studio】アプリ開発の基本とそれぞれのファイルの役割を覚える。

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

Windows10にPythonをインストールする方法

FC2でブログを始めよう！誰でも簡単にできるブログの作り方

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

Unityのダウンロードとインストールの方法【Windows】

コメントを残す（コメントは承認後に反映されます） コメントをキャンセル

コメントを残す（コメントは承認後に反映されます）コメントをキャンセル