JavaScriptでネストしたJSONを簡単に操作する方法！初心者向け完全ガイド

1. JSONとは？JavaScriptでの基本的な扱い方

1. JSONとは？JavaScriptでの基本的な扱い方

JSON（JavaScript Object Notation）は、文字列としてデータを整理する形式です。JavaScriptではオブジェクトとして扱うことができ、データの読み書きが簡単になります。基本的には{ }で囲まれたキーと値の組み合わせで表現します。

const person = {
  name: "山田太郎",
  age: 25
};
console.log(person.name); // 山田太郎

2. ネストしたJSONの作り方

2. ネストしたJSONの作り方

ネストしたJSONは、オブジェクトの中にオブジェクトや配列を入れることで作れます。例えば、住所や趣味などの情報をまとめるときに便利です。

const person = {
  name: "山田太郎",
  age: 25,
  address: {
    city: "東京",
    street: "中央区1-2-3"
  },
  hobbies: ["読書", "サッカー"]
};
console.log(person.address.city); // 東京
console.log(person.hobbies[1]);  // サッカー

3. ネストしたJSONの値を取得する方法

3. ネストしたJSONの値を取得する方法

ネストされたJSONの値を取り出すには、ドット（.）や角括弧（[]）を使います。配列の場合はインデックスで指定します。

const data = {
  user: {
    id: 1,
    profile: {
      username: "taro123",
      email: "taro@example.com"
    }
  }
};

console.log(data.user.profile.username); // taro123
console.log(data["user"]["profile"]["email"]); // taro@example.com

4. ネストしたJSONの値を更新する方法

4. ネストしたJSONの値を更新する方法

ネストしたJSONの値を変更したい場合も、取得と同じ方法で指定して新しい値を代入できます。

const user = {
  name: "花子",
  settings: {
    theme: "light",
    notifications: true
  }
};

// 値を変更
user.settings.theme = "dark";
user.settings.notifications = false;

console.log(user.settings.theme); // dark
console.log(user.settings.notifications); // false

5. ネストしたJSONに新しいキーや値を追加する方法

5. ネストしたJSONに新しいキーや値を追加する方法

JavaScriptでは、存在しないキーに値を代入すると自動で追加されます。ネストしている場合も同様です。

const product = {
  name: "ノートパソコン",
  specs: {
    cpu: "i5",
    memory: "8GB"
  }
};

// 新しい値を追加
product.specs.storage = "256GB";
product.price = 120000;

console.log(product.specs.storage); // 256GB
console.log(product.price); // 120000

6. ネストしたJSONの配列を操作する方法

6. ネストしたJSONの配列を操作する方法

JSONの中に配列がある場合、ループを使って中身を取り出すことができます。forEachを使うと簡単です。

const data = {
  users: [
    { name: "太郎", age: 25 },
    { name: "花子", age: 22 },
    { name: "次郎", age: 30 }
  ]
};

// ループで名前を表示
data.users.forEach(user => {
  console.log(user.name);
});
// 太郎
// 花子
// 次郎

7. JSON文字列をJavaScriptオブジェクトに変換する方法

7. JSON文字列をJavaScriptオブジェクトに変換する方法

外部から取得したJSONは文字列として扱われる場合があります。そのままでは操作できないので、JSON.parse()でオブジェクトに変換します。

const jsonString = '{"name":"太郎","age":25,"hobbies":["読書","映画"]}';
const obj = JSON.parse(jsonString);

console.log(obj.name); // 太郎
console.log(obj.hobbies[0]); // 読書

8. JavaScriptオブジェクトをJSON文字列に変換する方法

8. JavaScriptオブジェクトをJSON文字列に変換する方法

逆にJavaScriptオブジェクトを文字列として保存したい場合は、JSON.stringify()を使います。ファイルに保存したり、APIに送信するときに便利です。

const obj = {
  name: "花子",
  age: 22,
  hobbies: ["音楽","旅行"]
};

const jsonString = JSON.stringify(obj);
console.log(jsonString);
// {"name":"花子","age":22,"hobbies":["音楽","旅行"]}

9. ネストしたJSONを安全に操作するテクニック

9. ネストしたJSONを安全に操作するテクニック

ネストが深いJSONを扱うと、存在しないキーにアクセスしてエラーになることがあります。その場合はオプショナルチェイニング（?.）を使うと安全にアクセスできます。

const data = {
  user: {
    profile: {
      username: "taro123"
    }
  }
};

console.log(data.user?.profile?.username); // taro123
console.log(data.user?.settings?.theme);  // undefined（エラーにならない）

まとめ

まとめ

今回の記事では、JavaScriptでネストしたJSONを扱う基本から応用までを順番に学びました。JSONはJavaScriptでデータを整理して扱う際に非常に便利なフォーマットであり、オブジェクトや配列を組み合わせることで複雑な情報も整理して管理できます。まず、基本的なJSONの書き方やオブジェクトとしての扱い方を理解しました。
次に、ネストしたJSONの作り方として、オブジェクトの中にオブジェクトや配列を入れる方法を紹介しました。住所や趣味、ユーザー情報など、複数の情報をひとつのオブジェクトでまとめる際に役立ちます。また、ネストしたJSONから値を取得する方法も学び、ドット記法と角括弧記法の使い分けや、配列のインデックス指定による取り出し方を理解しました。
さらに、ネストしたJSONの値を更新する方法や、新しいキーや値を追加する方法も紹介しました。JavaScriptでは存在しないキーに値を代入するだけで自動的に追加できるため、データ構造を柔軟に変更可能です。また、JSON内に配列がある場合は、forEachやmapなどのループ処理を使って要素を順番に取り出すことができます。これにより、複雑なネスト構造のデータも効率的に操作できます。
外部から取得するJSONデータは文字列として渡されることがあります。その場合はJSON.parse()でJavaScriptオブジェクトに変換し、操作可能にします。逆に、JavaScriptオブジェクトをJSON文字列として保存したりAPIに送信する場合はJSON.stringify()を使うことができます。
最後に、ネストが深くなるJSONを扱うと存在しないキーにアクセスしてエラーになることがあります。この問題を防ぐために、オプショナルチェイニング（?.）を活用すると安全に値を取得できます。このテクニックを覚えておくことで、エラーを防ぎつつネストしたJSONを効率的に操作できるようになります。

サンプルまとめコード

const userData = {
  name: "太郎",
  profile: {
    age: 25,
    hobbies: ["読書","映画"],
    address: {
      city: "東京",
      zip: "100-0001"
    }
  }
};

// 値を取得
console.log(userData.profile.hobbies[0]); // 読書

// 値を更新
userData.profile.age = 26;

// 新しいキーを追加
userData.profile.address.street = "中央区1-2-3";

// 安全にネストを取得
console.log(userData.profile?.address?.city); // 東京
console.log(userData.profile?.job?.title);    // undefined