javascriptのオブジェクトの基本とその作り方

Table of Contents

javascript におけるオブジェクトがどういうものかということと、その作り方について紹介します。

javascriptのオブジェクトは辞書型の配列

javascript のオブジェクトは、他の言語でいう辞書型の配列（例えば、Swiftにおけるディクショナリ）です。

簡単に表現するならば、「キー」と「値」のペアを要素として持つ配列です。これをオブジェクトのプロパティと呼びます。

javascript のオブジェクトはプロパティの集まりからなり、またそのプロパティは名前（あるいはキー）と値との関連付けから成り立っています。
オブジェクトを利用する – JavaScript | MDN

具体的には、以下のような形をとります。


{
  key1: "値1",
  key2: "値2",
  key3: "値3",
  ...
  keyN: "値N",
}

この例では「key1: “値1″」の部分がプロパティです。プロパティはキーと値をコロン（:）で区切ったペアです。このような表記をオブジェクトリテラルと呼ぶこともあります。

オブジェクトリテラルでは、波括弧（{}）で囲まれた名前と値のペアをコンマ区切りで連ねた集合によってオブジェクトを表現します。名前とは、オブジェクト内部にあるコロンの前に置かれた文字列または識別子です。名前と値の最後のペアの後にコンマを付けてはいけません。エラーの原因となります。
オライリージャパン JavaScriptデザインパターン Addy Osmani

配列とは異なり、オブジェクトの要素であるプロパティを囲む括弧は、山括弧（{ と }）です。

プロパティの値には、数値や文字列、配列、関数（function）を設定することができます。さらに、オブジェクトの中に別のオブジェクトを値として持たせることもできます。プロパティの値として設定された関数はメソッドと呼ばれます。

プロパティの値を関数にすることもでき、これはいわゆるオブジェクトのメソッドとなります。JavaScript 実行環境に予め定義されているオブジェクトだけでなく、プログラマ自身がオブジェクトを定義することもできます。
オブジェクトを利用する – JavaScript | MDN

javascriptのオブジェクトを作成するサンプル

HTMLソース内の scriptタグの中で javascript のオブジェクトを作成し、その中身をログに出力するサンプルページです。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<title>javascriptのオブジェクト</title>
</head>

<body>
	<h1>ログに注目</h1>
</body>

<script>

	// オブジェクトを作成し、変数に代入
	var obj = {
		key1: "値1",
		key2: "値2",
		key3: "値3",
	}

	// オブジェクトの値をログに出力
	console.log(obj.key1);
	console.log(obj.key2);
	console.log(obj.key3);

</script>

</html>

このページをブラウザで開き、開発コンソールを見ると、以下のようにログが出力されていることが確認できます。

サンプルの解説

オブジェクトに名前を与える

オブジェクトは、変数に代入されることで名前を持ちます。

後からオブジェクトのプロパティを呼び出したり、オブジェクトに新しいプロパティを追加したりする場合は、サンプルのように変数に代入しておく必要があります。

変数の名前は自由です。今回のサンプルでは「obj」としています。

	// オブジェクトを作成し、変数に代入
	var obj = {
		key1: "値1",
		key2: "値2",
		key3: "値3",
	}

プロパティの値をキーで呼び出す

プロパティの値を呼び出す場合は、オブジェクトの名前の後にドット（．）を書いて、その後にキーの名前を書きます。

例えば、オブジェクト（を格納した変数）名 obj が持っている、キーが「key1」であるプロパティの値を呼び出す場合は、以下のように書きます。

obj.key1

キーを変えることで、同じように別のプロパティの値を呼び出すことができます。

javascriptのオブジェクトにメソッドを設定

前述のように、オブジェクトのプロパティの値として設定された関数はメソッドと呼ばれます。

実際にメソッドを利用するサンプルを見てみましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<title>javascriptのオブジェクト</title>
</head>

<body>
	<h1>ログに注目</h1>
</body>

<script>

	// オブジェクトを作成し、変数に代入
	var arithmetic = {
		add: function(a, b) {
			// 足し算の結果を返す
			return a + b;
		},
		sub: function(a, b) {
			// 引き算の結果を返す
			return a - b;
		},
	}

	console.log(arithmetic.add(5, 3));
	console.log(arithmetic.sub(5, 3));

</script>

</html>

2つのメソッドを持つオブジェクトを作り、 arithmetic という名前の変数に代入しています。

メソッドは2つの数値を受け取って、それらで足し算を行うものと引き算を行うものです。これらのメソッドを利用した結果をログに出力しています。

このページをブラウザで実行して開発コンソールを見ると、以下のような出力が得られます。

メソッドを呼び出す場合も、先ほど紹介した値の呼び出しと同じように書きます。

以上が基本的な javascript のオブジェクトの作り方と使い方です。JSON（JavaScript Object Notation）と呼ばれるデータをやり取りするためのフォーマットも、このオブジェクトを元に作られています。

JSONの公式サイト

次回は、オブジェクトへプロパティを追加したり削除したりする方法について紹介します。

JSONに関する詳しい話については、改めて紹介したいと思います。