●目次
JavaScriptのオブジェクトは、複数の関連データを1つにまとめて管理できる基本構文です。
オブジェクトを使うことで、より効率的で見やすいコードを書くことができ、Webアプリ開発やAPIのデータ処理でも頻繁に登場します。
本記事では、JavaScriptのオブジェクトの基本構造からプロパティの操作方法、実用的なコード例まで、初心者でも理解しやすいように詳しく解説します。
オブジェクトの基本構造
JavaScriptでの「オブジェクト（object）」は、キー（名前）と値のセット＝プロパティを使ってデータを表現する構造です。
実世界の「人」や「商品」のように、1つのオブジェクトに複数の情報（属性）をまとめることが可能です。
オブジェクトを使った場合
name、age、genderがキー（プロパティの名前）"山田"、25、"male"がそれぞれのキーに対応する値です。
JS
const person = {
name: "山田",
age: 25,
gender: "male"
};オブジェクトを使わない場合
オブジェクトを使わない場合、以下のように別々の変数で管理する必要があります
JS
const name = "山田";
const age = 25;
const gender = "male";オブジェクトのプロパティへのアクセス方法
オブジェクトのプロパティにアクセスする方法には2つあります。
- ドット記法
- ブランケット記法
ドット記法
キーが文字列リテラルの場合→ドット記法が簡潔
JS
console.log(person.name);
// "山田"ブラケット記法
キーが変数、スペース付き、動的な名前→ブラケット記法が便利
JS
console.log(person["age"]);
// 25オブジェクトのプロパティの追加・削除
プロパティの追加
オブジェクトに新しいプロパティを追加することもできます。
JS
person.address = "東京";
console.log(person.address);
// "東京"プロパティの削除
プロパティを削除するには、deleteを使います。
JS
delete person.gender;
console.log(person.gender);
// undefinedオブジェクトを使った例：簡単なアプリの作成
たとえば、オブジェクトを使って簡単な「プロフィール管理」アプリを作ることができます。
greetというプロパティに関数（メソッド）が設定されています。thisを使うことで、そのオブジェクト自身のプロパティ（nameなど）にアクセスでき、動的に挨拶文を出力します。
JS
const user = {
name: "佐藤",
age: 30,
greet: function() {
console.log(`こんにちは、私は${this.name}です。`);
}
};
user.greet();
// "こんにちは、私は佐藤です。"まとめ
- オブジェクトはデータの集まりで、キーと値のペアで構成されています。
- ドット記法とブラケット記法でプロパティにアクセスできます。
- オブジェクトにデータを追加したり、削除したりすることができ、データ管理が容易になります。
オブジェクトを理解すると、JavaScriptでより複雑なデータ管理が可能になります。