1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. 小学生からのJavaScript入門。オブジェクトを使ってみよう!

小学生からのJavaScript入門。オブジェクトを使ってみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第6弾です。
前回の講座(こうざ)では、HTMLやCSS、JavaScriptを分けて管理(かんり)する方法を紹介しました。

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

アル

アル

前々回の講座(こうざ)、覚えてる?


りこ

りこ

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


アル

アル

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


りこ

りこ

あ、変数が大量(たいりょう)に必要(ひつよう)になっちゃう!


山田

山田

そんな時は、オブジェクトを使うと便利(べんり)だべ!


りこ

りこ

きゃー、山田先生!


山田

山田

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

目次
  1. オブジェクトってなぁに?
  2. りこちゃん移動のプログラムを、オブジェクトを使って書いてみよう!
  3. まとめ

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

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

アル

アル

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


りこ

りこ

私もー。英語はにがて


山田

山田

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


アル

アル

もの?


山田

山田

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


りこ

りこ

私のオブジェクト!?

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

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

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

var rico = new Object();

たったこれだけです。

アル

アル

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


りこ

りこ

あれだよ、日にちを取得(しゅとく)したとき!


山田

山田

そうだべ。オブジェクトをつくるときは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);

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

りこ

りこ

こうやって、私についての情報(じょうほう)を覚えさせておくことができるのね!


山田

山田

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

rico.name = 'りこ';

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

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

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

script.js

var rico = new Object();
rico.x = 0;
rico.y = 0;

addEventListener("keydown", keydownfunc, false);
 
function keydownfunc( event ) {
	var key_code = event.keyCode;
	if( key_code === 37 ) rico.x -= 32;
	if( key_code === 38 ) rico.y -= 32;
	if( key_code === 39 ) rico.x += 32;
	if( key_code === 40 ) rico.y += 32;
	document.getElementById( 'rico' ).style.top = rico.y + "px";
	document.getElementById( 'rico' ).style.left = rico.x + "px";
}

アル

アル

あ、1行目〜3行目! まえはxとyの変数を使ってて分かりにくかったのに、「rico.x」、「rico.y」を使って分かりやすくなってる! 9行目〜14行目も書きかえたんだね!


りこ

りこ

これなら他のキャラクターが登場しても、そのキャラクターのオブジェクトを作って、xとyのプロパティで場所を管理(かんり)すればいいのね! 分かりやすい!


山田

山田

そうだべ。これで色んな情報(じょうほう)を管理(かんり)しやすくなるんだべ

まとめ

今回はJavaScriptでのオブジェクトの使い方について、紹介しました。
オブジェクトを使うと、様々(さまざま)な情報(じょうほう)を管理(かんり)しやすくなり、とても便利です。

アル

アル

オブジェクトって聞いた時はむずかしそうだなって思ったけど、実際(じっさい)につかってみるとすごく便利だね


りこ

りこ

私もびっくりした! 私、今から錦戸くんのオブジェクトを作る!


アル

アル

ガクガク……。なんか、寒気(さむけ)がした


りこ

りこ

な……なんでよ!


山田

山田

まぁまぁ、とにかくプログラムの中ででてくる「もの」は、オブジェクトを使うといいべ。わだずは今からネコ会議(かいぎ)に出かけるから、頑張ってプログラミングの勉強するだべよ!


アル

アル

うん!


りこ

りこ

うん! ネコ会議、頑張ってね! (……ねこかいぎ?)

この企画の一覧はこちら

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

スポンサードリンク

関連コンテンツ

オススメ記事

WordPress テーマ自作 | 本格的に作りたい人が揃えるべきツールや知識。

時計を見るとなぜか悲しくなります。@It_is_Rです。 今回から、いくつかの記事に渡って、 WordPress のテーマ(テンプレート)を自作する方法を紹介していきたいと思います。 しかし、

enchant.js

enchant.js でキャラクターのアニメーションを作ってみよう

前回の記事では、キャラが移動する時のアニメーションがありませんでした。 突っ立ったまま進んで行く、まるで幽霊の様な状態です。 これでは、キャラが生きてるのか死んでるのか分からない! というこ

JavaScriptマンガ講座。条件分岐(if文)の真偽値による使い方。(実践編)

生まれも育ちもド田舎、@It_is_Rです。 JavaScriptマンガ講座、第3回目です。 笑いあり、涙あり(?)のマンガで、JavaScriptを覚えようというものです。 今回は条件

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

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

carousel

【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

Bootstrap4の使い方、第8回目です。 サイトをみていると、画像を横並びにしてくるくると回転するカルーセル機能を実装しているサイトがありますよね。 Bootstrap4には、カルーセルを

【Gitの使い方 – その1】GitHubのアカウントを取得する方法!

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。 まず今回は

キーボードで画像を動かすよ!

小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第4弾です。 前回はHTMLでりこちゃんの画像を表示し、クリックすると前に一歩動くというのをJavaScriptで作りました。 J

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

gulp

gulpでsassをcssにコンパイル。インストール&便利な使い方。

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回は、gulpを使ってsassをcssに

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

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

コメントをどうぞ!

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