オブジェクトを作成する

オブジェクトを新しく作成する方法について解説します。 JavaScript ではオブジェクトリテラルを使って作成する方法と、 Object オブジェクトのコンストラクタを使って作成する方法があります。

(Last modified: 2023年02月03日)

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

オブジェクトリテラルを使ってオブジェクトを生成する場合は次の書式を使用します。

オブジェクトに含まれるデータは一つ一つをプロパティといい、プロパティはプロパティ名(キー)と値のペアを使って「プロパティ名:値」のようにコロン(:)で区切って記述します。複数のプロパティが含まれる場合はカンマ(,)で区切って記述し、全体を {} で囲います。例えば次のように記述します。

let mybox = {'width':400, 'height':300};

let user = {
  'name':'山田太郎',
  'address':'東京都'
}

複数のプロパティが含まれる場合は続けて記述してもいいですし、見やすいようにプロパティ毎に改行して記述しても構いません。

空のオブジェクトを作成する場合は次のように記述してください。作成済のオブジェクトに対してあとからプロパティを追加することができます。

let colors = {};

オブジェクトのプロパティの値には任意のデータ型の値を指定できます。またそれぞれのプロパティに異なるデータ型の値を指定できます。

let mybox = {
  'width':400, 
  'height':300, 
  'color':"#FF0000",
  'border':[0, 10, 0, 10]
};

プロパティ名の記述方法

プロパティ名は文字列または Symbol オブジェクトを使って記述します。( Sysmbol を使う方法は別途解説します)。プロパティ名には任意の文字列を記述することができますが、文字列が変数名などと同じルールに従った値になっている場合は文字列を表すシングルクォーテーションなどを省略して次のように記述することができます。

{width:400, height:300};

※ 変数名の付け方のルールについては「変数名のルールとよく使われる命名記法」を参照して下さい。

プロパティ名が 1 文字目が数字で始まっていたり、途中に空白などがあるなど変数名のルールに従っていない場合は通常の文字列と同じようにシングルクォーテーションまたはダブルクォーテーションで囲んで記述してください。

myprofile = {
  '1stName':'Yamada',       // プロパティ名の1文字目が数字
  'Favorite color':'Blue'   // プロパティ名に空白が含まれる
};

プロパティ名が数字から始まる値なのにシングルクォーテーションなどを省略して記述するとエラーが発生します。

let myprofile = {
  1stName:'Yamada', 
};

>> Uncaught SyntaxError: Invalid or unexpected token

プロパティの値として式を指定する

オブジェクトリテラルを記述するときに、オブジェクトの値に変数や式を記述することができます。次のサンプルをみてください。

let base = 1000;
let mybox = {
  width:base, 
  height:base * 0.5
};

console.log(mybox);
>> {width: 1000, height: 500}

プロパティの値として変数や式を指定しています。変数を指定した場合は変数に格納されている値、式を指定した場合は式を評価した値がそれぞれプロパティの値として保管されます。

Objectオブジェクトからオブジェクトを作成する

Object オブジェクトは JavaScript で用意されている組み込みオブジェクトのひとつです。オブジェクトの作成には先ほど解説したオブジェクトリテラルを使って作成することもできますが、 Object オブジェクトのコンストラクタを使って作成することもできます。書式は次の通りです。

プロパティがない空のオブジェクトを作成します。これはオブジェクトリテラルで {} と記述した場合と同じです。

let obj = new Object();

console.log(obj);
>> {}

空のオブジェクトを作成したあとで、プロパティを追加していくことになります。

-- --

JavaScript でオブジェクトを新しく作成する方法について解説しました。

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。