JavaScriptオブジェクト徹底解説：作成から読み取り、変更・削除まで

リスト（配列）はデータを格納するのに便利な方法ですが、特定の対象に関する複数の属性をまとめて保存したい場合には不便です。例えば、クッキーショップで販売しているすべてのクッキーのデータを保存したい場合、複数のリストを作成しなければなりません。

そこで役立つのがオブジェクトです。オブジェクトを使うと、データを「名前：値」のペアで保存できるため、アプリケーション内のデータにラベルを付けて管理できます。

このガイドでは、オブジェクトとは何か、そしてコード内でどのように活用するのかを解説します。JavaScriptにおけるオブジェクトの作成、読み取り、変更、削除の方法まで、実例を交えて詳しく見ていきましょう。

オブジェクトとは？

オブジェクトはJavaScriptのデータ型の一つで、0個以上の「名前」と「値」がペアになって構成されています。各名前は値のラベルとして機能し、オブジェクト内の特定の値にアクセスしたいときは、そのラベルを参照するだけで済みます。なお、名前は「キー」と呼ばれることもあります。

値には、文字列、数値、さらには別のオブジェクトまで、あらゆる型のデータを格納できます。また、値にはプロパティやメソッド（特定のオブジェクトに適用される関数）を含めることも可能です。

JavaScriptオブジェクトでは、キーと値がマッピングされ、「キー：値」のペアが形成されます。

ちなみに、JavaScriptのオブジェクトはJSON（JavaScript Object Notation）の基盤となった概念です。JSONはJavaScriptと完全に同じではありませんが、どちらのデータ構造も「名前：値」ペアのアプローチでデータを保存するという共通点があります。

オブジェクトの作成方法

オブジェクトを作成する方法は2つあります。オブジェクトコンストラクターを使う方法と、オブジェクトリテラルを宣言する方法です。

オブジェクトコンストラクターは、「new」キーワードを使って新しいオブジェクトを生成します：

const cookie = new Object();

これにより、後から値を追加できる空のオブジェクトが作成されます。一方、波括弧（中括弧）だけで表現されるオブジェクトリテラルを使って宣言することもできます：

const cookie = {};

どちらの例でも結果は同じ空のオブジェクトです。実際のJavaScriptアプリケーションでは、両方の書き方が使われていますが、波括弧を書くだけというシンプルさから、オブジェクトリテラルの方がより一般的に使われています。

データを持つオブジェクトを作成するには、オブジェクトリテラル構文を次のように使用します：

const raspberry_white_choc = {
	name: "Raspberry White Chocolate Chip",
	price: 1.50,
	available: true,
	stock: 42
}

このオブジェクトには4つの名前と値が含まれています。例えば、「price」というラベルには浮動小数点数の1.50が関連付けられ、「available」というラベルには真偽値の「true」が関連付けられています。

オブジェクトの読み取り方法

ここまでオブジェクトの作成方法を見てきましたが、内容にアクセスできなければオブジェクトはあまり意味がありません。オブジェクトの内容を読み取る方法は2つあります。ドット記法（.）とブラケット記法（[]）です。

例えば、ラズベリーホワイトチョコチップクッキーの名前を取得したい場合は、次のコードで実現できます：

console.log(raspberry_white_choc.name);

このコードは「Raspberry White Chocolate Chip」を返します。オブジェクト名「raspberry_white_choc」の後にドットを付け、取得したい値を持つプロパティ名を指定しています。オブジェクトとプロパティ名の間にドットがあることから、「ドット記法」と呼ばれています。

ブラケット記法を使ってオブジェクトを読み取ることもできます：

console.log(raspberry_white_choc["available"]);

このコードは「true」を返します。ブラケット記法では、オブジェクト名を指定した後に、取得したい値の名前を引用符で囲み、さらに角括弧で囲んで指定します。

オブジェクトの変更方法

オブジェクトを変更する方法は主に3つあります：

• オブジェクトに項目を追加する
• 既存のオブジェクト項目を変更する
• オブジェクトから項目を削除する

それぞれ順番に、先ほどのクッキーの例を使って確認していきましょう。

オブジェクトへの項目追加

リストとは異なり、オブジェクトにはpush()やappend()のような専用の追加関数はありません。代入演算子を使ってプロパティに新しい値を割り当てるだけで、項目を追加できます。

例えば、オブジェクトに「gluten_free」という項目を追加したい場合は、次のいずれかのステートメントを使用します：

// ブラケット記法を使用
raspberry_white_choc["gluten_free"] = false;
console.log(raspberry_white_choc.gluten_free);

// ドット記法を使用
raspberry_white_choc.gluten_free = false;
console.log(raspberry_white_choc.gluten_free);

このコードは以下を出力します：

false
false

どちらの例でも、オブジェクトに「gluten_free」という新しい項目が作成され、その値として「false」が割り当てられています。

既存のオブジェクト項目の変更

オブジェクトの内容を変更する仕組みは、新しい値を割り当てる場合とまったく同じです。どちらの場合も、代入演算子を使ってオブジェクトを更新します。

例えば、ラズベリーホワイトチョコチップクッキーのレシピを改良して、グルテンフリーになったとしましょう。次のコードでオブジェクトの「gluten_free」項目を変更できます：

raspberry_white_choc.gluten_free = true;
console.log(raspberry_white_choc.gluten_free);

このコードは「true」を返します。好みに応じて、ブラケット記法を使って同様の変更を行うことも可能です。

オブジェクトからの項目削除

「delete」キーワードを使うと、オブジェクトからプロパティを削除できます。次のコードで、オブジェクトから「gluten_free」プロパティを削除してみましょう：

delete raspberry_white_choc.gluten_free;
console.log(raspberry_white_choc);

このコードは以下を出力します：

{ available: true, name: "Raspberry White Chocolate Chip", price: 1.5, stock: 42 }

ご覧のとおり、「gluten_free」という項目はもうオブジェクト内に存在しません。deleteキーワードによって削除されたためです。

まとめ

JavaScriptのオブジェクト構造を使うと、関連性のあるデータをひとまとめにして簡単に保存できます。この記事では、クッキーショップの商品情報をオブジェクトで管理する例を紹介しました。同じ考え方は、ユーザーアカウント、ベーカリーのレシピ、カレンダーの予定など、さまざまなデータの管理にも応用できます。ぜひ実際のコードで試してみてください。