JavaScriptのオブジェクト：作成と操作

2025-07-28

オブジェクトの基本概念

JavaScriptのオブジェクトは、プロパティ（キーと値のペア）の集合です。オブジェクトは現実世界の「もの」をモデル化するのに最適で、JavaScriptプログラミングの中心的な要素です。

オブジェクトの特徴

キーと値のペアで構成
動的にプロパティを追加/削除可能
参照型のデータ構造
メソッド（関数プロパティ）を持つことができる

オブジェクトの作成方法

1. オブジェクトリテラル（最も一般的）

const person = {
  name: '山田太郎',
  age: 30,
  greet: function() {
    console.log(`こんにちは、${this.name}です！`);
  }
};

2. new Object() コンストラクタ

const car = new Object();
car.make = 'Toyota';
car.model = 'Corolla';
car.year = 2020;

3. コンストラクタ関数

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`こんにちは、${this.name}です！`);
  };
}

const person = new Person('山田太郎', 30);

4. Object.create() メソッド

const personPrototype = {
  greet() {
    console.log(`こんにちは、${this.name}です！`);
  }
};

const person = Object.create(personPrototype);
person.name = '山田太郎';
person.age = 30;

5. ES6クラス

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`こんにちは、${this.name}です！`);
  }
}

const person = new Person('山田太郎', 30);

プロパティへのアクセス

ドット記法

console.log(person.name); // '山田太郎'
person.greet(); // メソッド呼び出し

ブラケット記法

console.log(person['name']); // '山田太郎'
const prop = 'age';
console.log(person[prop]); // 30

動的なプロパティ名（ES6）

const dynamicKey = 'email';
const user = {
  name: '太郎',
  [dynamicKey]: 'taro@example.com'
};

プロパティの操作

プロパティの追加

person.job = 'エンジニア';
person['hobby'] = '読書';

プロパティの更新

person.age = 31;
person['age'] = 31;

プロパティの削除

delete person.hobby;

プロパティの存在確認

console.log('name' in person); // true
console.log(person.hasOwnProperty('name')); // true

オブジェクトのメソッド

オブジェクト内の関数

const calculator = {
  add: function(a, b) {
    return a + b;
  },
  // ES6メソッド短縮記法
  subtract(a, b) {
    return a - b;
  }
};

thisキーワード

const person = {
  name: '太郎',
  greet() {
    console.log(`こんにちは、${this.name}です！`);
  }
};

オブジェクトの反復処理

for…inループ

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

Object.keys(), Object.values(), Object.entries()

const keys = Object.keys(person); // キーの配列
const values = Object.values(person); // 値の配列
const entries = Object.entries(person); // [key, value]の配列

スプレッド演算子とオブジェクト（ES2018）

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

オブジェクトの複製

浅いコピー

const copy = { ...original };
// または
const copy = Object.assign({}, original);

深いコピー

const deepCopy = JSON.parse(JSON.stringify(original));

オブジェクトの凍結と封印

const obj = { prop: 42 };

Object.freeze(obj); // 変更不可
Object.seal(obj); // プロパティの追加/削除不可（値の変更は可）

プロパティ記述子

const obj = {};

Object.defineProperty(obj, 'property', {
  value: 42,
  writable: false, // 書き込み不可
  enumerable: true, // 列挙可能
  configurable: false // 削除/変更不可
});

演習問題

初級問題（3問）

次のオブジェクトを作成し、nameプロパティにアクセスするコードを2通りの方法で書きなさい。

   const person = {
     name: '山田太郎',
     age: 30
   };

次のオブジェクトに新しいプロパティemailを追加しなさい。

   const user = {
     username: 'js_user',
     password: 'secure123'
   };

次のコードの出力結果は？

   const obj = { a: 1, b: 2 };
   const copy = obj;
   copy.a = 3;
   console.log(obj.a);

中級問題（6問）

次のオブジェクトのすべてのプロパティ名を配列として取得しなさい。

   const car = {
     make: 'Toyota',
     model: 'Corolla',
     year: 2020
   };

2つのオブジェクトをマージするコードを書きなさい（スプレッド演算子を使用）。

   const obj1 = { a: 1, b: 2 };
   const obj2 = { b: 3, c: 4 };

次のオブジェクトからpasswordプロパティを削除しなさい。

   const user = {
     username: 'admin',
     password: 'secret',
     role: 'admin'
   };

次のオブジェクトのディープコピーを作成するコードを書きなさい。

   const original = {
     name: 'Test',
     nested: {
       value: 10
     }
   };

次の動作をするcreateUser関数を実装しなさい。

   const user = createUser('太郎', 25);
   console.log(user.name); // '太郎'
   console.log(user.age); // 25
   user.greet(); // 'こんにちは、太郎です！'

次のコードの出力結果とその理由を説明しなさい。

   const obj = {
     value: 10,
     getValue() {
       return this.value;
     },
     getValueArrow: () => this.value
   };

   console.log(obj.getValue());
   console.log(obj.getValueArrow());

上級問題（3問）

次のような動作をするcreateImmutableObject関数を実装しなさい。

const person = createImmutableObject({ name: '太郎', age: 30 });
person.name = '花子'; // エラーまたは変更されない 
delete person.age; // エラーまたは削除されない 
person.job = 'エンジニア'; // エラーまたは追加されない

オブジェクトの変更を監視するobserveObject関数を実装しなさい。

const user = { name: '太郎' }; 
const observed = observeObject(user, (prop, oldVal, newVal) => { 
    console.log(`プロパティ ${prop} が ${oldVal} から ${newVal} に変更されました`); 
}); 
observed.name = '花子'; // コンソールに変更を出力 
observed.age = 25; // コンソールに変更を出力

プロキシを使用して、次のような動作をするcreatePrivateProperties関数を実装しなさい。

const obj = createPrivateProperties({ publicProp: '公開プロパティ', _privateProp: '秘密プロパティ' }); 
console.log(obj.publicProp); // '公開プロパティ' 
console.log(obj._privateProp); // undefined

解答例

初級問題解答

2通りのプロパティアクセス

   const person = {
     name: '山田太郎',
     age: 30
   };

   console.log(person.name);    // ドット記法
   console.log(person['name']); // ブラケット記法

2通りのプロパティ追加

   const user = {
     username: 'js_user',
     password: 'secure123'
   };

   user.email = 'user@example.com';
   // または
   user['email'] = 'user@example.com';

出力結果

    const obj = { a: 1, b: 2 };
    const copy = obj;
    copy.a = 3;
    console.log(obj.a); // シャロウコピーの影響を受けるため、3が出力される

中級問題解答

プロパティ名の取得

   const car = {
     make: 'Toyota',
     model: 'Corolla',
     year: 2020
   };
   const properties = Object.keys(car);

オブジェクトのマージ

   const obj1 = { a: 1, b: 2 };
   const obj2 = { b: 3, c: 4 };
   const merged = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 }

プロパティ削除

   const user = {
     username: 'admin',
     password: 'secret',
     role: 'admin'
   };
   delete user.password;

深いコピー

   const original = {
     name: 'Test',
     nested: {
       value: 10
     }
   };
   const deepCopy = JSON.parse(JSON.stringify(original));

createUser関数

   function createUser(name, age) {
     return {
       name,
       age,
       greet() {
         console.log(`こんにちは、${this.name}です！`);
       }
     };
   }

出力結果と理由

   10
   undefined
   // アロー関数はthisをレキシカルスコープで解決するため

    const obj = {
        value: 10,
        getValue() {
            return this.value;
        },
        getValueArrow: () => this.value
    };

    console.log(obj.getValue());        // obj.valueの値を取得
    console.log(obj.getValueArrow());   // アロー関数はthisを持たないため、undefinedを返す

上級問題解答

createImmutableObject関数

function createImmutableObject(obj) { 
    return Object.freeze(Object.seal(obj)); 
}

observeObject関数

function observeObject(obj, callback) { 
    return new Proxy(obj, { set(target, prop, value) { const oldVal = target[prop]; target[prop] = value; callback(prop, oldVal, value); return true; } }); 
}

createPrivateProperties関数

javascript function createPrivateProperties(obj) { 
    return new Proxy(obj, { get(target, prop) { if (prop.startsWith('_')) { return undefined; } 
    return target[prop]; }, has(target, prop) { return !prop.startsWith('_') && prop in target; } }); 
}

同じカテゴリーの記事

JavaScriptのオブジェクト：作成と操作

オブジェクトの基本概念

オブジェクトの特徴

オブジェクトの作成方法

1. オブジェクトリテラル（最も一般的）

2. new Object() コンストラクタ

3. コンストラクタ関数

4. Object.create() メソッド

5. ES6クラス

プロパティへのアクセス

ドット記法

ブラケット記法

動的なプロパティ名（ES6）

プロパティの操作

プロパティの追加

プロパティの更新

プロパティの削除

プロパティの存在確認

オブジェクトのメソッド

オブジェクト内の関数

thisキーワード

オブジェクトの反復処理

for…inループ

Object.keys(), Object.values(), Object.entries()

スプレッド演算子とオブジェクト（ES2018）

オブジェクトの複製

浅いコピー

深いコピー

オブジェクトの凍結と封印

プロパティ記述子

演習問題

初級問題（3問）

中級問題（6問）

上級問題（3問）

解答例

初級問題解答

中級問題解答

上級問題解答

同じカテゴリーの記事

JavaScriptのイベント処理：クリック、フォーム入力からバブリング・デリゲーションまで

JavaScript学習に必要なHTML/CSSの基本

JavaScriptのループ処理（for, while）

JavaScriptの演算子と条件分岐（if, switch）