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

スポンサードリンク

関連コンテンツ

オススメ記事

Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。 管理画面をカスタマイズする

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

iPhone持ってないみなさん、一緒にAndroidアプリ開発しましょう。@It_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

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

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

【Bootstrap 4】パンくずリスト(Breadcrumb)を作ってみよう!

Bootstrap4の使い方、第4回目となりました。 サイトを作っていると必然的に必要になるのがパンくずリストです。 パンくずリストは、サイト訪問者が今どのページにいるのかということを分かりや

MacでのAndroid Studioインストール手順

今回は Android Studio 3.4 をインストールする手順を解説します。 Android Studio のダウンロード Android Studio そのページから

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

JavaScriptを使ってゲームを作成するのが好きです。@It_is_Rです。 JavaScriptはWebページに動きを出すのによく使われ、ブラウザゲームなども作ることができます。 今回は

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

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

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

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。 今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと思い、その努力の割に何も得られないのが@It_is_Rです。やかましいわ。 今回の記事は初のWordPre

コメントをどうぞ!

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