JavaScriptのオブジェクト入門｜プロパティの作成・アクセス・操作方法

JavaScriptのオブジェクトは、キーと値のペアでデータを管理するデータ構造です。ユーザー情報、設定値、APIレスポンスなど、関連するデータをひとまとめに扱いたいときに使います。配列が「順序付きリスト」なら、オブジェクトは「名前付きデータの集まり」です。

この記事では、オブジェクトの作成方法からプロパティのアクセス・追加・削除、ループ処理、さらにネストしたオブジェクトの扱い方まで、基本操作を実践的なコード例で解説します。

基本的な使い方

オブジェクトは波括弧 {} で作成し、キー: 値 の形式でデータを格納します。プロパティへのアクセスにはドット記法とブラケット記法の2種類があります。

JavaScript

// オブジェクトの作成
const user = {
  name: '田中太郎',
  age: 30,
  email: 'tanaka@example.com',
  isAdmin: false
};

// ドット記法でアクセス
console.log(user.name);
console.log(user.age);

// ブラケット記法でアクセス
console.log(user['email']);

// 変数をキーとして使う場合はブラケット記法
const key = 'isAdmin';
console.log(user[key]);

実行結果

田中太郎
30
tanaka@example.com
false

ドット記法はシンプルで読みやすいですが、キー名にハイフンやスペースが含まれる場合、または変数でキーを指定する場合はブラケット記法を使う必要があります。通常はドット記法を優先し、必要に応じてブラケット記法に切り替えるのが一般的です。

プロパティの追加・変更・削除

オブジェクトのプロパティは動的に追加・変更・削除できます。const で宣言したオブジェクトでも、プロパティの変更は可能です（再代入はできません）。

JavaScript

const product = {
  name: 'ノートパソコン',
  price: 98000
};

// プロパティの追加
product.brand = 'ABC社';
product.stock = 15;
console.log('追加後:', product);

// プロパティの変更
product.price = 89800;
console.log('変更後の価格:', product.price);

// プロパティの削除
delete product.stock;
console.log('削除後:', product);

// プロパティの存在確認
console.log('name' in product);
console.log('stock' in product);
console.log(product.hasOwnProperty('brand'));

実行結果

追加後: { name: 'ノートパソコン', price: 98000, brand: 'ABC社', stock: 15 }
変更後の価格: 89800
削除後: { name: 'ノートパソコン', price: 89800, brand: 'ABC社' }
true
false
true

プロパティの存在確認には in 演算子または hasOwnProperty() メソッドを使います。in はプロトタイプチェーン上のプロパティも検出しますが、hasOwnProperty() はオブジェクト自身のプロパティのみを検出します。

オブジェクトのループ処理

JavaScript

const scores = {
  math: 85,
  english: 92,
  science: 78,
  history: 95
};

// for...in でキーをループ
for (const subject in scores) {
  console.log(subject + ': ' + scores[subject] + '点');
}

// Object.keys() でキーの配列を取得
const subjects = Object.keys(scores);
console.log('科目一覧:', subjects);

// Object.values() で値の配列を取得
const values = Object.values(scores);
console.log('点数一覧:', values);

// Object.entries() で [キー, 値] の配列を取得
Object.entries(scores).forEach(([subject, score]) => {
  console.log(subject + 'は' + score + '点');
});

実行結果

math: 85点
english: 92点
science: 78点
history: 95点
科目一覧: ['math', 'english', 'science', 'history']
点数一覧: [85, 92, 78, 95]
mathは85点
englishは92点
scienceは78点
historyは95点

Object.entries() は分割代入と組み合わせることで、キーと値の両方を簡潔に扱えます。配列のメソッド（map、filter など）と組み合わせれば、オブジェクトに対しても柔軟な変換・絞り込みが可能です。

実践例：ネストしたオブジェクト

JavaScript

const company = {
  name: 'テック株式会社',
  address: {
    prefecture: '東京都',
    city: '渋谷区',
    building: 'テックビル5F'
  },
  employees: [
    { name: '佐藤', role: 'エンジニア' },
    { name: '鈴木', role: 'デザイナー' },
    { name: '高橋', role: 'マネージャー' }
  ]
};

// ネストしたプロパティへのアクセス
console.log(company.address.city);
console.log(company.employees[0].name);
console.log(company.employees.length + '名在籍');

// オプショナルチェーン（存在しないプロパティへの安全なアクセス）
console.log(company.address?.zipCode);
console.log(company.branch?.name);

実行結果

渋谷区
佐藤
3名在籍
undefined
undefined

オブジェクトのコピー

const copy = obj は参照のコピーであり、同じオブジェクトを指します。独立したコピーを作るには Object.assign({}, obj) やスプレッド構文 {...obj} を使います。ただし、これらは浅いコピー（shallow copy）なので、ネストしたオブジェクトは参照が共有されます。

const でもプロパティは変更できる

const はオブジェクトの再代入を禁止するだけで、プロパティの追加・変更・削除は可能です。プロパティの変更も禁止したい場合は Object.freeze(obj) を使いますが、ネストしたオブジェクトには効果がない（浅い凍結）点に注意してください。

まとめ

オブジェクトは {} で作成し、キー: 値 のペアでデータを管理する
ドット記法 obj.key とブラケット記法 obj['key'] でアクセスする
プロパティは動的に追加・変更・削除でき、in で存在確認できる
Object.keys()、Object.values()、Object.entries() でループ処理ができる
オプショナルチェーン ?. でネストしたプロパティに安全にアクセスできる