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|ショートコードの作り方&使い方。確実に使いこなす為のガイド。

前回、WordPressで、特定のカテゴリ一覧を表示する方法について書きました。 改めまして、@It_is_Rです。 特定のカテゴリ一覧を表示したとき、ショートコードというものを使いましたが、

【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法

前にBootStrap4の記事を書いていましたが、日にちが空いてしまいましたね。@It_is_Rです。 前回は全体的な機能とアラートの使い方を紹介しました。 今回はバッジの使い方を紹介していき

キャラを決まった間隔ずつ動かすよ!

小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第8弾です。 前回は、キャラクターの画像(がぞう)をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔(かんかく)を短く

メインループを作ってみよう!

小学生からのJavaScript入門。ゲームのメインループを作ってみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第7弾です。 突然(とつぜん)ですが、ゲーム開発(かいはつ)の基本として大切なことってなんだったか覚えていますか? そうです。「変

HTML5とCanvasを使うべ!

小学生からのJavaScript。HTML5とCanvasを使ってみよう!

小学生からのプログラミング講座(こうざ)、第9弾です。 これまでの講座(こうざ)では、JavScriptの基本(きほん)について学び、キャラクターの操作(そうさ)ができるようになりました。 こ

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

文字を表示するクラスを作ろう!

小学生からのJavaScript。文字を表示するクラスを作ってみよう!

小学生からのJavaScript講座です。 このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 シリーズの一覧はこちらをご覧ください。 さて、ゲーム作成で重

【Gitの使い方 – その3】Gitで実際にバージョン管理してみよう!

お魚くわえた@It_is_Rです。 Gitの使い方第3回目の今回は、実際にGitを使ってバージョン管理をしてみようと思います。 [serif name="It is R"]りこ師匠

Scratchでピアノを 作ってみよう!

小学生から始めるScratch入門。ピアノ鍵盤を作って音を鳴らそう!

小学生から始めるScratch入門です。 前回はじゃんけんゲームを作りました。 今回はピアノの鍵盤を作って、音を鳴らしてみましょう。 プロローグ [serif icon="ar

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

何だか今日はトイレが近い。@It_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

コメントをどうぞ!

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