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

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

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

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

アル

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


りこ

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


アル

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


りこ

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


山田

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


りこ

きゃー、山田先生!


山田

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

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

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

アル

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


りこ

私もー。英語はにがて


山田

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


アル

もの?


山田

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


りこ

私のオブジェクト!?

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

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

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

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。改行と一文字ずつ画面に表示する方法!

スポンサードリンク

関連コンテンツ

オススメ記事

Dockerでよく使うコマンドとオプション、その使い方を徹底解説!

人生に意味は求めない。それよりもDockerのコマンドの意味を理解する方が重要です。@It_is_Rです。 Dockerにはたくさんのコマンドがありますが、まずはよく使うコマンドを覚えていきまし

小学生からのJavaScript入門。画像の表示と移動をしてみよう!

小学生からのJavaScript入門、第3弾です。 今回はゲーム開発(かいはつ)へもう一歩踏み込んでみましょう! [serif icon="aru-s.jpg" name="アル"]うーん……

キャラクター

JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

プログラミングは奥が深い。。。@It_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、ブラウザ上でのアニメーションはJavaScriptが多く使われるように

Swift

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

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

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

Swift

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

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

【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法

※追記(2018/5/15) 殆ど意味のない例を使っての説明にのちのち後悔し、余分な部分を大幅に削除しました。 畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。背景を変更する。

三度の飯よりも好きなものが多すぎて比較にならない@It_is_Rです。 FC2ブログ"最強"カスタマイズ入門講座の続きですね。最強にカスタマイズしていきましょう。 今回は背景色の変更をメインに

今月の残り日数を計算するべ!

小学生からのJavaScript入門。今月の残り日数を計算してみよう!

小学生からのJavaScript入門、第2弾です。 今回はJavaScriptでの演算(えんざん)の方法を学び、今月の残り日数を計算してみましょう。 演算というのは、足したり、引いたり、割った

コメントをどうぞ!

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