先生と生徒の会話形式で理解しよう

生徒

「JavaScriptのオブジェクトって難しそうですが、便利に使うコツってありますか？」

先生

「もちろんです！オブジェクトはプログラミングでとても大切なデータのかたまりで、いくつかの便利なテクニックを知っておくと使いやすくなりますよ。」

生徒

「ぜひ教えてください！初心者でもわかるようにお願いします。」

先生

「わかりました！基本から順に便利なオブジェクト操作のテクニックを解説しますね。」

1. オブジェクトの基本的な操作とは？

JavaScriptのオブジェクトは「名前（キー）」と「値」のセットでデータを管理します。例えば、人物の情報をオブジェクトで表すと次のようになります。


const person = {
  name: "太郎",
  age: 25,
  city: "東京"
};

このように、nameやageは「プロパティ」と呼ばれます。

2. プロパティの追加・更新・削除のテクニック

オブジェクトに新しいプロパティを追加したり、値を変えたり、不要なプロパティを削除したりできます。

追加・更新：object.key = value; または object["key"] = value;
削除：delete object.key;


// 追加
person.job = "エンジニア";

// 更新
person.age = 26;

// 削除
delete person.city;

このように簡単にオブジェクトの内容を変えられます。

3. オブジェクトの中身を確認する方法

オブジェクトのすべてのキーや値を知りたいときに便利なメソッドがあります。

Object.keys(object)：すべてのキーの配列を返す
Object.values(object)：すべての値の配列を返す
Object.entries(object)：キーと値のペアの配列を返す


console.log(Object.keys(person));   // ["name", "age", "job"]
console.log(Object.values(person)); // ["太郎", 26, "エンジニア"]
console.log(Object.entries(person)); 
// [["name", "太郎"], ["age", 26], ["job", "エンジニア"]]

これらを使うと、オブジェクトの内容を簡単に調べられます。

4. オブジェクトのコピー（浅いコピー）

オブジェクトを別の変数にコピーしたいときに便利な方法があります。ただし、これは「浅いコピー」といって、オブジェクト内に別のオブジェクトがある場合は注意が必要です。


const copyPerson = Object.assign({}, person);

また、ES6以降はスプレッド構文でも同じことができます。


const copyPerson2 = {...person};

これで元のオブジェクトを壊さずに操作が可能です。

5. オブジェクトのプロパティをループで処理する

オブジェクトのすべてのプロパティを一つずつ処理したいときは、for...inループを使います。


for (let key in person) {
  console.log(key + " : " + person[key]);
}

これで「name : 太郎」など順番に表示できます。

6. オブジェクトの値を簡単に比較する方法

オブジェクト同士を比較するのは難しいですが、キーと値の配列に変換して比較すると便利です。


function isEqual(obj1, obj2) {
  return JSON.stringify(obj1) === JSON.stringify(obj2);
}

console.log(isEqual({a:1}, {a:1})); // true
console.log(isEqual({a:1}, {a:2})); // false

JSON.stringifyはオブジェクトを文字列に変換するメソッドです。

7. オブジェクトを配列に変換する便利な方法

データを扱いやすくするためにオブジェクトを配列に変換することがあります。Object.entries()を使うとキーと値のペアが配列になります。


const entries = Object.entries(person);
console.log(entries);
// [["name", "太郎"], ["age", 26], ["job", "エンジニア"]]

これを活用して配列の便利なメソッドを使いやすくなります。

8. オブジェクトのマージ（結合）方法

複数のオブジェクトを一つにまとめたいときは、Object.assign()やスプレッド構文を使います。


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

// Object.assign
const merged1 = Object.assign({}, obj1, obj2);

// スプレッド構文
const merged2 = {...obj1, ...obj2};

console.log(merged1); // {a:1, b:3, c:4}
console.log(merged2); // {a:1, b:3, c:4}

同じキーは後ろのオブジェクトの値で上書きされます。

9. オブジェクトの安全なアクセス（Optional Chaining）

オブジェクトの中のさらに深いプロパティにアクセスするとき、存在しない場合にエラーになることがあります。?.という「オプショナルチェイニング」を使うと安全にアクセスできます。


const user = {
  profile: {
    name: "花子"
  }
};

console.log(user.profile?.name);  // 花子
console.log(user.address?.city);  // undefined（エラーにならない）

このように存在しない場合は自動でundefinedになります。

10. オブジェクトの値を簡単に並べ替える方法

オブジェクトの内容を並べ替えたいときは、一旦Object.entries()で配列に変換し、配列の並べ替えを使います。


const sortedEntries = Object.entries(person).sort((a, b) => {
  return a[0].localeCompare(b[0]); // キー名で昇順にソート
});
console.log(sortedEntries);

必要に応じてまたオブジェクトに戻すこともできます。

JavaScriptの便利なオブジェクト操作テクニック集｜初心者でもわかる基本と応用