オブジェクトリテラル

広告

このページからJavaScriptにおけるオブジェクトの使い方を確認していきます。まずはオブジェクトリテラルの記述方法です。

オブジェクトの基本知識

オブジェクトは複数の値をまとめたものです。似たものとして配列がありますが配列は各値に順番を付けて管理しているのに対してオブジェクトでは値に対する順番はありません。その為、オブジェクトで管理している値を何かルールに従って順番に取り出すといったことは行えません。

オブジェクトにおける各値はプロパティと呼ばれるもので管理されています。オブジェクトは複数の値をまとめて管理しているものですのでオブジェクトには複数のプロパティが含まれます。そして各プロパティにはプロパティを区別するための名前が付けられています。つまりプロパティはプロパティを区別するための名前と、実際に格納される値を持っています。

オブジェクトのプロパティには様々なデータ型の値を格納できますし、そして同じオブジェクトに異なるデータ型の値を格納できます。

オブジェクトリテラルの記述

数値は「10」、文字列は「'Hello'」のように記述することができました。オブジェクトも同じようにスクリプトの中で値として記述することができます。数値の値を数値リテラルと呼びこともあるように、オブジェクトの値はオブジェクトリテラルと呼びます。

オブジェクトを値として記述する場合は、「{」から「}」の中にプロパティ名と値をセットにして「名前:値」の形式で並べて記述します。複数記述する場合はカンマで区切って下さい。 

{プロパティ名1:値1, プロパティ名2:値2, ...};

具体的には次のように記述します。 

{width:100, height:80}
{fdcolor:'#ff0000', bgcoloe:'#ffffff', width:3}
{'name':'高橋', 'old':30}

オブジェクトはプロパティと呼ばれるもので各値を管理しています。最初のオブジェクトには2つのプロパティがあり、名前が「width」のプロパティには数値の100が格納されており、名前が「height」のプロパティには数値の80が格納されています。

プロパティ名には変数などと同じく識別子を使用することができます。(識別子については「変数名のつけ方(識別子)」を参照して下さい)。また識別子の代わりに任意の文字列を使用することもできます。

ただし文字列を使う場合にはドット演算子を使ったプロパティへのアクセスができない場合があります。詳しくは「ドット演算子を使ったプロパティへの値の代入と参照」を参照して下さい。

オブジェクトリテラルは数値や文字列などと同じく変数に代入することができます。 

var obj = {width:100, height:80};
なおオブジェクトリテラルのような参照型のデータを変数に代入する時は数値などを変数に代入する場合と扱いが異なります。詳しくは「参照型の値を変数へ代入」を参照して下さい。

プロパティが空のオブジェクトを作成することもできます。その場合は次のように記述します。 

{}

空のオブジェクトや、プロパティが含まれるオブジェクトであっても後からプロパティを追加することもできますし削除することも出来ます。 

var obj = {};
obj.width = 100;
obj.height = 80;

※別のページで詳しく確認します。

オブジェクトの値に式を記述する

オブジェクトリテラルを記述する場合、数値や文字列などの値の代わりに式を記述することもできます。次の例を見て下さい。 

var ini = 100;
var obj = {width:ini, height:ini - 20};

これは次のように記述した場合と同じです。 

var obj = {width:100, height:80};

ただあまりオブジェクトリテラルを定義する時に値の代わりに式を使う機会は少ないと思います。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script2_1.js">
</script>

</body>
</html>

var obj = {width:100, height:80};

document.write("<p>");

document.write("width = " + obj.width + ", height = " + obj.height);

document.write("</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p2-1

今回のサンプルではまだ解説していない事項も含まれています。ここでは参考程度に見ておいて下さい。

( Written by Tatsuo Ikura )