💡 この記事でわかること
- JavaScriptのオブジェクトとは何か
- オブジェクトの作り方
- プロパティの取得・追加・変更・削除の方法
- メソッド(オブジェクトの中に関数を入れる方法)
- 配列との違い
1. JavaScriptのオブジェクトとは？
オブジェクト(Object)とは、
👉 「名前(キー)」と「値」をセットで管理できるデータ構造です。
例えば「1人のユーザー情報」をまとめたいとき、名前・年齢・メールアドレスのようにバラバラの値を1つにまとめて扱えます。
イメージ
{
name: "山田太郎",
age: 20,
email: "yamada@example.com"
}
💡 「キー: 値」の組み合わせをプロパティと呼びます。
2. オブジェクトの作り方
オブジェクトは{}(波かっこ)を使って作ります。
const user = {
name: "山田太郎",
age: 20,
email: "yamada@example.com"
};👉 変数への代入には基本的にconstを使うのがおすすめです(プロパティの値自体は後から変更できます)。
3. プロパティの取得・追加・変更・削除
取得する
プロパティの値は「ドット記法」か「ブラケット記法」で取り出せます。
console.log(user.name); // "山田太郎"(ドット記法)
console.log(user["age"]); // 20(ブラケット記法)💡 キーの名前が変数に入っている場合や、キーに空白・記号が含まれる場合はブラケット記法を使います。
追加・変更する
存在しないキーに値を代入すると新しいプロパティが追加され、既存のキーに代入すると値が上書きされます。
user.job = "エンジニア"; // 新しいプロパティを追加
user.age = 21; // 既存のプロパティを変更
console.log(user);
// { name: "山田太郎", age: 21, email: "yamada@example.com", job: "エンジニア" }削除する
deleteを使うとプロパティを削除できます。
delete user.job;
console.log(user);
// { name: "山田太郎", age: 21, email: "yamada@example.com" }4. メソッド(オブジェクトの中に関数を入れる)
プロパティの値には関数を入れることもできます。オブジェクトの中に入っている関数のことをメソッドと呼びます。
const user = {
name: "山田太郎",
greet: function () {
console.log("こんにちは、" + this.name + "です。");
}
};
user.greet(); // "こんにちは、山田太郎です。"⚠️ 注意: メソッドの中で自分自身のプロパティを参照するときはthisを使います。thisは「そのメソッドを呼び出したオブジェクト自身」を指します。
5. 配列との違い
配列とオブジェクトはどちらも複数の値をまとめられますが、使い分けのポイントは次の通りです。
- 配列: 値に「順番」があるとき(例: 買い物リスト)
- オブジェクト: 値に「名前」を付けて管理したいとき(例: ユーザー情報)
すべてのプロパティを順番に処理したい場合は、for...in文が使えます。
for (const key in user) {
console.log(key + ": " + user[key]);
}
// name: 山田太郎
// age: 21
// email: yamada@example.com👉 配列のようにインデックス番号ではなく、キーの名前でアクセスしたいときはオブジェクトを使いましょう。
まとめ
- オブジェクトは「キー」と「値」をセットで管理できるデータ構造
{}で作成し、ドット記法・ブラケット記法でプロパティにアクセスする- 代入で追加・変更、
deleteで削除できる - プロパティの値に関数を入れたものを「メソッド」と呼ぶ
- 「順番」で管理するなら配列、「名前」で管理するならオブジェクト
オブジェクトは配列と並んでJavaScriptの基礎となるデータ構造です。プロパティやメソッドの使い方に慣れておくと、この後に学ぶクラスやAPIレスポンスの扱いもスムーズになります。