オブジェクト – 猫のスライドショーを作る4

スポンサーリンク


「猫のスライドショーを作る」4回目。

前回は、配列の書き方をやりました。

今回は、「オブジェクト」を説明します。

オブジェクト

オブジェクトは日本語にすると、物体です。
モノという風に覚えておけばいいでしょう。車もモノだし、本もモノ、
広い意味では、お金もモノだし、人もモノです。それがオブジェクトです。

オブジェクトの書き方

配列はデータを、[]で囲みました。

オブジェクトはデータを、{}で囲みます。

これは関数と同じ書き方です。(「配列 – 猫のスライドショーを作る その2」)
JavaScriptでは関数もオブジェクトです。つまり、関数もモノです。

URLが’http://hoge.com/’、横幅が100、高さが200のデータを配列では


[‘http://hoge.com/‘,100,200]

と書きました。これをオブジェクトで書くと下のようになります。

{
	'url':'http://hoge.com/',
	'width':100,
	'height':200
}

オブジェクトの中身には、名前でアクセスします。そのため、各項目に名前をつけます。

上の例では、: の左の、urlwidthheightが名前です。
名前は文字なので、シングルクォートダブルクォートで囲みます。
正確には、JavaScriptだけなら、囲まなくても動くのですが、
将来JSONPなどが出てくると混乱するので、このブログではいつも囲むようにします。

: の右に書いてあるのが、その名前に対する値です。
こちらも文字の場合はシングルクォートダブルクォートで囲みます。

上の例では、見やすくするために、項目ごとに改行していますが、項目が複数ある場合は、配列と同じように,(カンマ)で区切ります。

オブジェクトへのアクセス方法

オブジェクトへアクセスする時は、オブジェクトの名前と、取り出したい値の名前を
.(ドット)でつなぎます。

たとえば、上のオブジェクトがobjという名前で定義されている時、urlの値はobj.urlで取り出せます。

オブジェクトの中身の値は、変更することができます。
(以降はすべて、上のオブジェクトがobjという名前で定義されているものとします)
objのwidthが100の時に、

a = obj.width;
obj.width = 500;

という処理を行なうと、aの値は100、obj.widthの値は500になります。

JavaScriptの特殊性

では、下の処理を実行するとどうなるでしょう?

obj.option = 0;

objの中に定義されているのは、urlwidthheightの3つです。optionという名前は存在しません。

JavaScriptでない、プログラミングの場合、存在しない名前を指定した、これはエラーとなります。
ところが、JavaScriptの場合は、これが成立します。

上の式の後、objは下のようになります。

{
	'url':'http://hoge.com/',
	'width':100,
	'height':200,
	'option':0
}

JavaScriptでは、後からオブジェクトの中身を追加できます。つまり、最初は空のオブジェクトを作って、

obj = {}; //空のオブジェクト
obj.url = 'http://hoge.com/';
obj.width = 100;
obj.height = 200;

としても、最初に書いた定義と同じものが作られます。

これは、便利な反面、非常に危険です。なぜかと言うと、バグが発見しにくいからです。
上のobj.urlの値はhttp://hoge.com/です。その値を変更しようとして、

obj.url = ‘http://hogehoge.com/’;

と打つつもりで、下のように打ってしまったら

obj.uri = ‘http://hogehoge.com/’;

JavaScriptでない、プログラムの場合、存在しないuriという名前を指定すれば、エラーになります。

ところが、JavaScriptでは、新しいuriという項目を作り、urlの値は変更されずに、そのまま残ります。

変更したつもりが、変更されていない。それにエラーが出ないのですから、
プログラムは正しく動きません。そういう、プログラムミスをバグと呼びますが、
JavaScriptではバグが発見しにくいと言えます。それだけ、便利なJavaScriptは、非常に危険です。

次回は、オブジェクトのひとつである、関数について説明します。


関連コンテンツ

スポンサーリンク

「オブジェクト – 猫のスライドショーを作る4」への2件のフィードバック

  1. すごく興味しんしんな事ばかりです。
    初心者のわたしには、覚えるのに時間が
    掛かりそうなので、ちょくちょく足跡残るかもです^^;
    参考にさせていただきます。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください