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

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

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

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

オブジェクト

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

オブジェクトの書き方

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

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

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

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

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

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

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

上の例では、: の左の、url、width、heightが名前です。
名前は文字なので、シングルクォートかダブルクォートで囲みます。
正確には、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の中に定義されているのは、url、width、heightの３つです。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/です。その値を変更しようとして、

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

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

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

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

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