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. 小学生からのプログラミング入門。プログラミングってなぁに?
  2. Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門
  3. Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門
  4. Scratchでシューティングゲームを作ろう! 小学生からのプログラミング入門
  5. Scratchでピアノ鍵盤を作って音を鳴らそう! 小学生からのプログラミング入門
  6. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
  7. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
  8. JavaScriptで画像の表示と移動をしてみよう! 小学生からのプログラミング入門
  9. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
  10. 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
  11. 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
  12. 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
  13. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  14. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  15. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  16. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  17. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  18. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  19. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  20. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  21. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

スポンサードリンク

関連コンテンツ

オススメ記事

Scratchで じゃんけんゲームを作ろう!

Scratchでじゃんけんゲームを作ろう! 小学生からのプログラミング入門

こんにちは! 今日(きょう)もプログラミングのお勉強(べんきょう)をはじめていきますよ! 前回の「Scratchの使い方と、ゲーム作りの基礎知識を学ぼう!」では、Scratch(スクラッチ)っ

HTML CSS

CSSでの円の作り方と、その上下左右中央に文字を表示する方法

サイトを作る時、円形のパーツを作りたい時ってよくありますよね。 円はCSSで簡単に作ることができます。 さらに今回はCSSで作成した円の中央に文字を置く方法も紹介します。 CSSでの

carousel

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

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

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

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

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

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

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

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

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

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

【Git】リモートリポジトリへPushする方法

こんにちは、@It_is_Rです。 前回「【Git】ブランチを使って履歴を分岐させる方法」では、ブランチを使うことの便利さを学びました。第五回目の今回は、GitHubのリモートリポジトリを作成

Docker Composeで自分のWordPressサイトをローカル開発環境に反映!

ローカルにWordPress開発環境を整えてテーマを作成することがあるのですが、単にローカルに環境を作っただけでは記事がなく、テーマのイメージが分かりません。@It_is_Rです。 かといって、te

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です