【JavaScript】オブジェクトを使ってみよう！　小学生からのプログラミング入門

更新 : 2024/05/02

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

by : It is R

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう！
前回の講座《こうざ》では、HTMLやCSS、JavaScriptを分けて管理《かんり》する方法を紹介しました。

今回はオブジェクトの作り方について紹介していきたいと思います。

アル

前々回の講座《こうざ》、覚えてる？

りこ

えっと、私のイラストがキーボードの入力で動いたのでしょ？

アル

あれって、りこちゃんの位置を変数《へんすう》xと変数yで管理してたよね。でも、RPG作ろうとしたら、色んなキャラがいるわけで……

りこ

あ、変数が大量《たいりょう》に必要《ひつよう》になっちゃう！

山田

そんな時は、オブジェクトを使うと便利《べんり》だべ！

りこ

きゃー、山田先生！

山田

そんな悲鳴《ひめい》をあげたら、わだずがおばけみたいだべ……

オブジェクトってなぁに？
りこちゃん移動のプログラムを、オブジェクトを使って書いてみよう！
まとめ

オブジェクトってなぁに？

オブジェクトといわれても、むずかしそうに思えますが、使い方を見ればすぐに理解《りかい》できる簡単《かんたん》なものです。
ではオブジェクトとはなんなのでしょうか。

アル

オブジェクトって言われても、難しすぎて分かんないよー

りこ

私もー。英語っぽいのはにがて

山田

そんなに難しく考えることはないべ。オブジェクトは「もの」だと思えばいいべ

りこ

もの？

山田

りこちゃんの画像を動かしたときを例《れい》にすると、りこちゃん自身のオブジェクトを作ればいいんだべ

りこ

私のオブジェクト！？

では、オブジェクトについて紹介《しょうかい》していきます。
オブジェクトはかんたんにいうと「もの」です。
「物《もの》」でもありますし、「者《もの》」でもあります。

だから、りこちゃんのオブジェクトも作れます。
ここで、りこちゃんのオブジェクトを作ってみましょう！

オブジェクトは次のようにつくることができます。
以下のように、りこちゃんのオブジェクトをつくってみましょう！

var rico = new Object();

たったこれだけです。

アル

newってどこかで見たことがあるような……

りこ

あれよ、日にちを取得《しゅとく》したとき！

山田

そうだべ。日にちを取得するDate()もオブジェクトだべ

りこ

でも、私のオブジェクトを作るとなにができるの？

山田

そうだべな……ちょっと極端《きょくたん》な話《はなし》になってしまうべけど、必死に頑張ればりこちゃん自身ができるべ！

りこ

ど、どういうこと！？

ここで、実際《じっさい》にりこちゃんのオブジェクトを作ってみましょう！
まず、りこちゃんの特徴《とくちょう》をまとめてみます。

名前 : りこ
国 : 日本
好きなもの : 錦戸くん
嫌いなもの : おばけ
得意な言語 : JavaScript

では、これをオブジェクトにまとめてみます。

var rico = new Object();

//name（名前）
rico.name = 'りこ';
//country（国）
rico.country = '日本';
//like（好き）
rico.like = '錦戸くん';
//dislike（嫌い）
rico.dislike = 'おばけ';
//language（言語）
rico.language = 'JavaScript';

alert(rico.name);
alert(rico.country);
alert(rico.like);
alert(rico.dislike);
alert(rico.language);

ブラウザで確認《かくにん》してみると、名前から得意《とくい》な言語まで、順《じゅん》にアラートで表示されます。

りこ

こうやって、私についての情報じょうほうを、覚えておいてもらうことができるのね！

山田

ドット(.)の後ろは、プロパティといって、好きなプロパティ名をつけれるんだべ

りこちゃん移動のプログラムを、オブジェクトを使って書いてみよう！

前々回、キーボードの入力でりこちゃんを移動するプログラムを作りました。
さらに前回、そのファイルを分けて分かりやすくしました。

そこで作ったものを、今回学んだオブジェクトを使って書きかえてみましょう。

script.js

//画面に画像を表示する
document.write( '<img id="rico" src="rico.png">' );

//りこちゃんのオブジェクトを作成
var rico = new Object();
rico.x = 0;
rico.y = 0;

//なにかキーが押されたとき、keydownfuncという関数を呼び出す
addEventListener( "keydown", keydownfunc );

//キーが押されたときに呼び出される関数
function keydownfunc( event ) {

//押されたボタンに割り当てられた数値（すうち）を、key_codeに代入
	var key_code = event.keyCode;

	if( key_code === 37 ) rico.x -= 32;		//「左ボタン」が押されたとき、rico.xの値から32を引き算する
	if( key_code === 38 ) rico.y -= 32;		//「上ボタン」が押されたとき、rico.yの値から32を引き算する
	if( key_code === 39 ) rico.x += 32;		//「右ボタン」が押されたとき、rico.xの値に32を足し算する
	if( key_code === 40 ) rico.y += 32;		//「下ボタン」が押されたとき、rico.yの値に32を足し算する

	//りこちゃんの画像の位置（いち）を反映（はんえい）させる
	document.getElementById( 'rico' ).style.top = rico.y + "px";
	document.getElementById( 'rico' ).style.left = rico.x + "px";

}

アル