JavaScriptオブジェクトの基礎と使い方 | プロパティとメソッドの操作方法

本日は、JavaScriptのオブジェクトを使う方法について、初心者向けに基本的な操作を解説します。

この記事では、JavaScriptのオブジェクトについての基礎知識を身につけ、実際にコードを書いて操作する方法を学ぶことができます。

オブジェクトは、データをまとめて管理するための便利な手段であり、プログラムの構造をより明確にすることができます。

JavaScriptオブジェクトは、プログラマーが作成、追加、削除、アクセス、プロパティとメソッドを操作するための重要な概念です。

Array「配列」の基礎は以下で詳しく解説しておりますので参照ください。

dev-k.hatenablog.com

JavaScript オブジェクト
- オブジェクト宣言

JavaScript オブジェクト

JavaScriptには8つのデータ型があります。

そのうち7つはプリミティブ型と呼ばれ、残りの1つはオブジェクト型です。

JavaScriptオブジェクトは、より複雑なデータやキー付きコレクションを格納するための非プリミティブ型です。

配列や関数でさえ、内部ではオブジェクトとして扱われます。

JavaScriptにおいて、オブジェクトは3つの方法で作成できます。

1つ目は、オブジェクトリテラルを使用した初期構文の方法です。

2つ目は、newキーワードを使用したオブジェクトの作成方法です。

3つ目は、オブジェクトコンストラクタを使用してJavaScriptオブジェクトを初期化する方法です。

本記事では、初期構文のオブジェクトリテラル構文を使用したオブジェクト作成方法について解説します。

オブジェクト宣言

JavaScriptにおいて、オブジェクトを宣言するための構文は中括弧{ }を用いたものです。

以下は、オブジェクトを定義する例です。

const myObj = {
  key1: "value1",
  key2: "value2"
};

このように、オブジェクトは変数に格納されます。

例えば、以下のように定義されたオブジェクトは、userという変数に格納されます。

let user = {
  name: "Taro",
  age: 30
};

オブジェクトは、複数のプロパティを含むことができます。

プロパティは、キーと値のペアであり、キーは文字列で指定されます。

javascriptオブジェクトのプロパティ

上記の画像での例をコードにすると以下のようになります。

const person = {
  name: 'Taro',
  age: 30
};

上記の例では、nameとageがキーであり、Taroと30が値となります。

プロパティはカンマ（ , ）で区切られ、中括弧{ }で囲まれた値のペアとして定義されます。

また、JavaScriptにおいて、オブジェクトのプロパティのキーは、文字列型またはシンボル型のいずれかになります。

シンボル型はES6で導入されたプリミティブデータ型であり、特殊な関数です。

以下は、シンボル型を用いたオブジェクトの定義例です。

const mySymbol = Symbol();
const obj = {
  [mySymbol]: 'value'
};

この例では、mySymbolというシンボル型の変数を定義し、それをキーとしてオブジェクトを定義しています。

オブジェクトのプロパティにアクセスする場合は、ドット記法またはブラケット記法を用いることができます。

console.log(person.name); // "Taro"
console.log(person['age']); // 30

オブジェクトは、ファイルの検索や追加、削除、値のアクセスなどに利用されます。

JavaScriptにおいては、オブジェクトが非常に重要な役割を果たしているため、しっかりと理解しておくことが必要です。

プロパティの属性

オブジェクトには、プロパティを格納するための名前と値のペアに加えて、3つの属性があります。

1つ目は「構成可能な属性」で、これはプロパティを削除、追加、または変更できるかどうかを指定します。

2つ目は「列挙可能」で、これはプロパティをfor…inループで返すことができるかどうかを指定します。

3つ目は「書き込み可能」で、これはプロパティを変更できるかどうかを指定します。

これらの属性は、プロパティへのアクセス方法を定義します。すべての属性を読み取ることができますが、変更できるのはプロパティが書き込み可能である場合のみであり、またvalue属性のみとなります。

プロパティ属性は、一般的に属性とプロパティは同じですが、これら3つの属性はすべてがデフォルトで有効となっています。また、オブジェクトには、プロトタイプ、クラス、拡張可能の3つの属性があります。これらはプロパティの属性とは別のオブジェクト属性となります。

以上を踏まえて、オブジェクトとプロパティにはそれぞれ異なった複数の属性があることに注意してください。

オブジェクトプロパティの操作

JavaScriptにおけるオブジェクトのプロパティにアクセスする方法

JavaScriptにおいて、オブジェクトのプロパティにアクセスする方法は、ドット表記または角括弧表記を使用することができます。

ドット表記を使用する場合は、オブジェクトが格納されている変数名に続けて、ドット( . )を付け、その後にアクセスしたいプロパティ名を指定します。

const person = { 
  name: '太郎', 
  age: 30 
};

console.log(person.name); // 太郎
console.log(person.age); // 30

角括弧表記を使用する場合は、オブジェクトが格納されている変数名に続けて、角括弧[ ]を付け、その中にアクセスしたいプロパティ名を文字列で指定します。

console.log(person["name"]); // 太郎

角括弧表記では、変数を使用してプロパティ名を指定することもできます。

この場合、変数に格納された文字列がプロパティ名として使用されます。

const propertyName = "name";
console.log(person[propertyName]); // 太郎

また、角括弧表記では、プロパティ名にドット表記で使用できない文字列を含めることができます。

JavaScriptにおけるオブジェクトのプロパティの追加方法

JavaScriptにおいて、オブジェクトに新しいプロパティを追加する方法は、ドット表記または角括弧表記を使用することができます。

const person = { 
  name: '太郎', 
  age: 30 
};

person.public = true;

console.log(person);

/*
{
  name: "太郎",
  age: 30,
  public: true //追加
}
*/

//または角括弧

person["public"] = true;

値は任意の型にすることができます。上記の例では、ブール値のtrueが追加されています。

角括弧を使用する場合、プロパティ名は文字列として指定する必要があります。

文字列を変数に格納してから、文字列の連結を行うこともできます。

const person = { 
  name: '太郎', 
  age: 30 
};

let propertyName = "public";
person[propertyName + "_status"] = true;

console.log(person["public_status"]); //true

JavaScriptにおけるオブジェクトのプロパティの削除方法

JavaScriptにおいて、オブジェクトからプロパティを削除する方法は、delete演算子を使用することができます。

delete person.age;

//または角括弧

delete person["age"];

console.log(person);

delete演算子は、指定したプロパティをオブジェクトから取り除きます。

削除に成功した場合はブール値である trueを返し、そうでなければ falseを返します。

プロパティの削除方法はdelete演算子以外でも様々な方法がありますので、適切な方法を選択してください。

JavaScriptにおけるマルチワードプロパティ名の扱い方

JavaScriptにおいて、マルチワードプロパティ名を使用することもできますが、引用符で囲む必要があります。

const person = { 
  name: '太郎', 
  age: 30,
  "public status": true //引用符で囲む
};

console.log(person);

ただし、マルチワードプロパティ名をドット表記でアクセスすることはできません。

ドット表記は、プロパティ名が有効な識別子である必要があるためです。

スペースが含まれている場合や、先頭が数字で始まっている場合、特殊文字が含まれている場合は、構文エラー（SyntaxError）をスローします。

マルチワードプロパティ名を使用する場合は、角括弧表記を使用することが推奨されます。

person["public status"] = true;
console.log(person["public status"]); // true

角括弧表記では、プロパティ名に任意の文字列を指定することができます。

変数を使用してプロパティ名を指定することもできます。

以上がJavaScriptにおけるオブジェクトのプロパティにアクセスする方法、プロパティの追加方法、プロパティの削除方法、マルチワードプロパティ名の扱い方についての解説です。

計算されたプロパティ名

計算されたプロパティとは、ECMAScript 2015（ES6）で導入された機能で、JavaScriptオブジェクトのプロパティ名を動的に計算できるようになり、オブジェクト構造の柔軟性が向上します。

オブジェクトリテラル内で、角括弧を使用してプロパティ名を計算することができます。

例えば、以下のように変数を使用してプロパティ名を計算することができます。

const key = 'name';
const value = 'Taro';

const user = {
    [key]: value
};

console.log(user.name); // Taro

この場合、オブジェクトのプロパティ名は、変数keyの値であるnameになります。

つまり、userオブジェクトには、nameという名前のプロパティが追加され、その値は変数valueの値であるTaroになります。

このように、計算されたプロパティは、オブジェクトリテラル内でプロパティ名を動的に計算することができるため、オブジェクト構造の柔軟性が向上します。

また、角括弧内で複雑な式も可能です。

let country = "country_";
 
let obj = {
    [ country + "name"]: 'Japan',
    [ country + "capital"]: "Tokyo",
    [ country + "code"]: 81
};

console.log(obj);

/*
{

country_name: 'Japan',
country_capital: "Tokyo",
country_code: 81

}

 */

上記では、オブジェクトのプロパティ名は、変数countryの値であるcountry_に、それぞれname、capital、codeという文字列を連結したものになります。

つまり、objオブジェクトには、country_name、country_capital、country_codeという名前のプロパティが追加され、それぞれの値は、Japan、Tokyo、81になります。

プロパティ名の式として、テンプレートリテラルを使用したい場合は以下のようにします。　　

const user = {
    [`${key}`]: value
};

角括弧表記は、ドット表記よりも強力で、任意のプロパティ名と変数を許可します。

しかし、プロパティ名が単純な場合はドット表記が一般的です。複雑なものが必要な場合に角括弧を使用し、そうでない場合はドット表記を使用することをお勧めします。

以上が計算されたプロパティについての解説です。

プロパティの値を省略

実際のコードでは、プロパティ名の値として既存の変数を使用することが多々あります。

const name = "Taro";

const obj = {
    name,
    age: 30
};
console.log(obj);  

/*
{
name: "Taro",
age: 30
}

 */

nameというプロパティ名でnameの変数を値に設定しています。

同じオブジェクトで通常のプロパティと省略形の両方を使用できるという事になります。

プロパティ名の制限

オブジェクトのプロパティ名には、変数で使用できない予約語を含めることができます。

以下の例では、予約語であるfor、let、const、returnをプロパティ名として使用しています。

let obj = {
  for: 1,
  let: 2,
  const: 3,
  return: 4
};

console.log(obj);

オブジェクトのプロパティ名には、任意の文字列や記号を使用することができます。

その他の型はJavaScriptによって自動的に文字列に変換されます。

定数宣言したオブジェクトのプロパティは変更可能

constで宣言したオブジェクトのプロパティは変更可能です。

JavaScriptのconstは変数への再代入を防ぐための定数であり、変数の再代入は防げますが、変数に代入された値であるオブジェクトの変更は防げません。

以下の例では、constで宣言されたオブジェクトのプロパティを変更しています。

const myObj = { 
  key: "value" 
};
myObj.key = "Hello!!";
console.log(myObj.key); // "Hello!!"

しかし、constで宣言されたオブジェクト自体を再代入することはできません。

以下の例では、constで宣言されたオブジェクト自体を再代入しようとしているため、SyntaxErrorが発生します。

const myObj = { 
  key: "value" 
};
myObj = {}; // SyntaxError

以上が、constで宣言されたオブジェクトのプロパティの変更についての解説です。

ネストされたオブジェクトとメソッド

JavaScriptでは、オブジェクトに別のオブジェクトを含めることができます。

これをネストされたオブジェクトと呼びます。

以下の例では、オブジェクトuserのプロパティに、オブジェクトuser2が含まれています。

let user = { 
    name: "Taro",
    age: 30,
    user2: {
        name: "Hanako",
        age: 20
    }
};

console.log(user.user2);
console.log(user.user2.name); // "Hanako"

ネストされたオブジェクトは、別のオブジェクトの内部にあるオブジェクトとなります。

ES6では、ネストされたオブジェクトを、計算されたプロパティ名で動的に作成することもできます。

JavaScriptでは、オブジェクトに関数を含めることもできます。オブジェクトメソッドは、関数宣言を含むプロパティです。

つまり、値が関数の場合は、プロパティはメソッドになります。

以下の例では、オブジェクトuserに、greetingという名前のメソッドが含まれています。

const user = {
    name: 'Taro',
    age: 30,
    greeting() { console.log('Hello') }
}

user.greeting(); // "Hello"

また、関数式（無名関数）を使用して関数を定義してから、それをオブジェクトのプロパティに割り当てることもできます。

以下の例では、オブジェクトuserに、greetingという名前のメソッドが含まれています。

let user = {
    name: 'Taro',
    age: 30
};

user.greeting = function () {
    console.log('Hello');
}

user.greeting(); // "Hello"

以上が、ネストされたオブジェクトとオブジェクトメソッドについての解説です。

参照によるコピー

オブジェクトには、プリミティブとは異なる特徴があります。その中でも、オブジェクトは参照によって格納およびコピーされることができます。

オブジェクトに割り当てられた変数は、オブジェクト自体ではなく、そのオブジェクトが格納されているメモリ内のアドレス、つまりオブジェクトへの参照を格納します。

一方、プリミティブ値である文字列、数値、ブール値は、値全体として割り当てまたはコピーすることができます。

以下に例を示します。

let user = {
  name: "Taro"
};

let copyName = user; // 参照元をコピー

copyName.name = "Hanako";

console.log(copyName.name); // Hanako
console.log(user.name); // Hanako

上記では、userオブジェクトをcopyName変数に代入すると、copyName変数はuserオブジェクトへの参照をコピーします。そのため、copyName変数を変更すると、userオブジェクトも変更されます。

オブジェクト変数をコピーする場合は、常に参照を複製しますが、オブジェクトそのものはコピーされません。つまり、コピーされるのは値の全体ではなく、オブジェクトへの参照のみです。