JavaScriptオブジェクト：ガイド

リストはデータを保存するための便利な方法ですが、リスト内の特定のオブジェクトに関する複数のプロパティを保存する場合に使用すると不便です。たとえば、Cookieストアで販売されているすべてのCookieにデータを保存する場合は、データを保存するために複数のリストを作成する必要があります。

そこでオブジェクトが登場します。オブジェクトを使用すると、データを名前と値のペアで保存できます。つまり、アプリケーションに保存したデータにラベルを追加できます。

このガイドでは、オブジェクトとは何か、およびコードでそれらをどのように使用できるかについて説明します。 JavaScriptプログラミング言語でのオブジェクトの作成、オブジェクトの変更、オブジェクトの削除について説明します。

オブジェクトとは何ですか？

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

値には、文字列、数値、その他のオブジェクトなど、あらゆる種類のデータを含めることができます。値には、特定のオブジェクトに適用される関数であるプロパティとメソッドを含めることもできます。

キーと値は一緒にマップされ、JSオブジェクトにキーと値のペアを作成します。

JavaScriptオブジェクトは、JSON（JavaScript Object Notationの略）が構築された概念です。 JSONはJavaScriptとは少し異なりますが、これらのデータ構造はどちらもname：valueペアアプローチを使用してデータを格納します。

オブジェクトの作成方法

オブジェクトを作成する方法は2つあります。オブジェクトコンストラクタアプローチを使用するか、オブジェクトリテラルを宣言できます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

オブジェクトコンストラクタは、「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_choc」、ドット、値を取得するプロパティの名前を参照しています。これがドット表記と呼ばれる理由です。オブジェクトとプロパティ名の間にドットがあります。

角かっこ表記を使用してオブジェクトを読み取ることもできます：

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

コードはtrueを返します。角かっこ表記は、オブジェクトの名前を指定してから、取得する値の名前を指定する場所です。取得する値の名前は、引用符で囲み、次に角かっこで囲む必要があります。

オブジェクトを変更する方法

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

• オブジェクトにアイテムを追加する
• 既存のオブジェクトアイテムを変更する
• オブジェクトからアイテムを削除する

以前のCookieの例を参照して、これらを1つずつ説明しましょう。

オブジェクトにアイテムを追加する

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

オブジェクトに「gluten_free」という値を追加したいとします。次のステートメントのいずれかを使用してこれを行うことができます。

// Using bracket notation
raspberry_white_choc["gluten_free"] = false;
console.log(raspberry_white_choc.gluten_free);

// Using dot notation
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オブジェクト構造により、関連データを簡単に保存できます。この記事では、オブジェクトがCookieストアのCookieに情報を格納する方法について説明しました。オブジェクトを使用して、ユーザーアカウント、パン屋のレシピ、カレンダーのエンゲージメントを保存することもできます。