【徹底解説】JavaScriptでJSONオブジェクトを操作：属性の追加・更新・削除

2024-06-13

JavaScriptを使ってJSONオブジェクトに新しい属性（要素）を追加する方法

例

以下のJSONオブジェクトを見てみましょう。

{
  "name": "田中 太郎",
  "age": 30,
  "city": "東京"
}

このオブジェクトに、新しい属性 "job" を追加し、その値を "エンジニア" に設定したいとします。

方法1：ドット表記を使う

ドット表記を使って、新しい属性を直接オブジェクトに追加することができます。

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

person.job = "エンジニア";

console.log(person); // { name: "田中 太郎", age: 30, city: "東京", job: "エンジニア" }

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

person["job"] = "エンジニア";

console.log(person); // { name: "田中 太郎", age: 30, city: "東京", job: "エンジニア" }

補足

既存の属性を更新する場合、同じキー名の新しい値を指定するだけで、古い値が上書きされます。
新しい属性を追加する前に、オブジェクトにその属性が存在するかどうかを確認したい場合は、in オペレータを使うことができます。

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

if ("job" in person) {
  console.log("job属性はすでに存在します。");
} else {
  person.job = "エンジニア";
  console.log("job属性を追加しました。");
}

このチュートリアルで説明した方法は、基本的なJSONオブジェクト操作のほんの一例です。JavaScriptを使ってJSONオブジェクトをさらに活用するには、様々なメソッドやプロパティを習得することが重要です。

これらのリソースを活用して、JavaScriptとJSONオブジェクト操作のスキルを向上させてください。

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

// 方法1：ドット表記を使う
person.job = "エンジニア";
console.log(person); // { name: "田中 太郎", age: 30, city: "東京", job: "エンジニア" }

// 方法2：角括弧表記を使う
person["favoriteColor"] = "青";
console.log(person); // { name: "田中 太郎", age: 30, city: "東京", job: "エンジニア", favoriteColor: "青" }

説明

このコードでは、まず person という名前のJSONオブジェクトを作成します。このオブジェクトには、"name"、"age"、"city" という属性があります。

次に、2つの方法で新しい属性を追加します。

どちらの方法を使用しても、同じ結果が得られます。

このコードは、基本的な例です。実際のアプリケーションでは、より複雑なJSONオブジェクトを操作する必要がある場合があります。
JSONオブジェクトを操作する際には、常に有効なJSON形式であることを確認することが重要です。

JavaScriptでJSONオブジェクトに新しい属性を追加するその他の方法

Object.assign() メソッドは、ソースオブジェクトのプロパティをターゲットオブジェクトにコピーするために使用できます。新しい属性を追加するには、ソースオブジェクトとして新しいプロパティを含むオブジェクトを作成し、ターゲットオブジェクトとして元のJSONオブジェクトを渡します。

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

const newAttributes = {
  "job": "エンジニア",
  "favoriteColor": "青"
};

Object.assign(person, newAttributes);

console.log(person); // { name: "田中 太郎", age: 30, city: "東京", job: "エンジニア", favoriteColor: "青" }

スプレッド構文を使う

ES6以降では、スプレッド構文を使用して、オブジェクトのプロパティを新しいオブジェクトに簡単にコピーできます。新しい属性を追加するには、スプレッド構文を使用して元のJSONオブジェクトを新しいオブジェクトにコピーし、新しいプロパティを追加します。

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

const newPerson = {
  ...person,
  "job": "エンジニア",
  "favoriteColor": "青"
};

console.log(newPerson); // { name: "田中 太郎", age: 30, city: "東京", job: "エンジニア", favoriteColor: "青" }

デフォルト値オペレーターを使う

ES7以降では、デフォルト値オペレーターを使用して、プロパティが存在しない場合に新しいプロパティをオブジェクトに追加できます。

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

person.job = "エンジニア" || "無職";
person.favoriteColor = "青" ?? "未設定";

console.log(person); // { name: "田中 太郎", age: 30, city: "東京", job: "エンジニア", favoriteColor: "青" }

動的プロパティキーを使う

角括弧表記を使用して、動的に生成されたプロパティキーで新しい属性を追加できます。これにより、ランタイムに属性名を決定できる柔軟性が得られます。

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

const jobTitle = "エンジニア";
const favoriteColor = "青";

person[jobTitle] = "田中";
person["favoriteColor"] = favoriteColor;

console.log(person); // { name: "田中 太郎", age: 30, city: "東京", エンジニア: "田中", favoriteColor: "青" }