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

【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門

小学生からのJavaScriptジャバスクリプト入門講座にゅうもんこうざ、今回もはじめていきましょう!
前回の講座こうざでは、HTMLやCSS、JavaScriptを分けて管理かんりする方法を紹介しました。

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

アル

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

りこ

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

アル

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

りこ

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

山田

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

りこ

きゃー、山田先生!

山田

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

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

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

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

アル

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

りこ

私もー。英語っぽいのはにがて

山田

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

りこ

もの?

山田

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

りこ

私のオブジェクト!?

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

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

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

var rico = new Object();

たったこれだけです。

アル

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

//画面に画像を表示する
document.write( '<img id="rico" src="rico.png">' );

//りこちゃんのオブジェクトを作成
var rico = new Object();
rico.x = 0;
rico.y = 0;

//なにかキーが押されたとき、keydownfuncという関数を呼び出す
addEventListener( "keydown", keydownfunc );

//キーが押されたときに呼び出される関数
function keydownfunc( event ) {

//押されたボタンに割り当てられた数値(すうち)を、key_codeに代入
	var key_code = event.keyCode;

	if( key_code === 37 ) rico.x -= 32;		//「左ボタン」が押されたとき、rico.xの値から32を引き算する
	if( key_code === 38 ) rico.y -= 32;		//「上ボタン」が押されたとき、rico.yの値から32を引き算する
	if( key_code === 39 ) rico.x += 32;		//「右ボタン」が押されたとき、rico.xの値に32を足し算する
	if( key_code === 40 ) rico.y += 32;		//「下ボタン」が押されたとき、rico.yの値に32を足し算する

	//りこちゃんの画像の位置(いち)を反映(はんえい)させる
	document.getElementById( 'rico' ).style.top = rico.y + "px";
	document.getElementById( 'rico' ).style.left = rico.x + "px";

}
アル

あ、5行目〜7行目! まえはxとyの変数を使ってて分かりにくかったのに、「rico.x」、「rico.y」になって、分かりやすくなってる!

りこ

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

山田

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

まとめ

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

アル

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

りこ

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

アル

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

りこ

な……なんでよ!

山田

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

アル

うん!

りこ

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

このシリーズの一覧はこちら

小学生からのJavaScript入門

  1. テキストエディタ(Visual Studio Code)をインストールしてみよう! 小学生からのプログラミング入門
  2. Visual Studio Codeを日本語化してみよう! 小学生からのプログラミング入門
  3. JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門
  4. JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門
  5. JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門
  6. JavaScriptで画像を移動してみよう! 小学生からのプログラミング入門
  7. 【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門
  8. 【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門
  9. 【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門
  10. 【JavaScript】ゲームのメインループを作ってみよう! 小学生からのプログラミング入門
  11. 【JavaScript】キャラを決まった間隔ずつ動かす! 小学生からのプログラミング入門
  12. HTML5とCanvasを使ってみよう! 小学生からのプログラミング入門
  13. 【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門
  14. 【JavaScript】マップでキャラを動かせるようにしよう! 小学生からのプログラミング入門
  15. 【JavaScript】クラスの概念をしっかりと理解しよう! 小学生からのプログラミング入門
  16. 【JavaScript】プログラム全体をクラスを使って作ってみよう! 小学生からのプログラミング入門
  17. 【JavaScript】文字を表示するクラスを作ってみよう! 小学生からのプログラミング入門
  18. 【JavaScript】改行と一文字ずつ画面に表示する方法! 小学生からのプログラミング入門
  19. 【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門
  20. JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方
  21. webpackを使ってゲームエンジンを作ろう!(JSライブラリの作り方)

小学生からのプログラミング入門

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

スポンサードリンク

関連コンテンツ

オススメ記事

Yarn

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

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

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい Gr

enchant.jsのロード画面を、好きな画像に変更する方法。

今日は爆睡していました。@It_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで

PythonでUSBメモリのパスワードを解析。総当たりでロック解除してみよう!

みなさんこんにちは。@It_is_Rです。今回はPythonを使って、総当たりでUSBメモリのパスワードを解析する方法を紹介します。(※このストーリーはフィクションです) Rりこ師匠、

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

Pug

PugでPHPが使える! gulpfile.jsをちょっと工夫するだけだよ

HTMLを書くときPugを使うととても便利なのですが、PHPを書きたいと思ったときは少し工夫が必要になります。 PugでPHPを書くためのプラグインを使う方法もありますが、使うプラグインが増えれば増

【Gulp4】gulpfile.jsを複数ファイルに分割して、作業効率を上げよう!

Gulpを使って開発を進めているいると、だんだんとgulpfile.jsが複雑になり、どこになにが書いてあったか分からなくなることがあります。そんなときは、gulpfile.jsを分割して管理すると

GitHubのアカウントを作成する方法

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

homebrew

Homebrewのインストール方法を分かりやすく解説(M1 Macも対応)

みなさんこんにちは。@It_is_Rです。 Homebrewは、Mac、Linuxで使うことができる、パッケージマネージャというものです。パッケージマネージャを使うことで、ソフトウェアのインス

Local by Flywheel

Local by Flywheelの使い方。かんたんWordPressローカル環境構築方法

考え事をしていると、目が上にいっている@It_is_Rです。 Local by FlywheelはWordPressのローカル開発環境を簡単に作れるツールです。 今回はこれを使って、ローカルに

コメントを残す(コメントは承認後に反映されます)

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