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

By | 2016年12月12日

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

オブジェクトの括弧

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

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

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

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

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


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

この例では「key1: "値1"」の部分がプロパティです。プロパティはキーと値をコロン(:)で区切ったペアです。

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

プロパティの値には、数値や文字列、配列、関数(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>

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

javascriptのオブジェクトの値をブラウザのログに表示するサンプル

サンプルの解説

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

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

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

変数の名前は自由です。今回のサンプルでは「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のオブジェクトのメソッドを利用した結果

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

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

JSONの公式サイト

オブジェクトへプロパティを追加したり削除したりする方法や、JSONに関する詳しい話については、改めて紹介したいと思います。

コメントを残す

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