JavaScript基礎｜オブジェクトデータの取り出し方まとめ

プロパティアクセスの基本：ドット記法（user.name）

オブジェクト名に.(ドット)で取り出したいKeyを指定する。

リテラルとして決まったプロパティ名しか使えない。（リテラルとは、プログラムのソースコードで直接記述される値。変数値や式の結果ではなく、それ自体が値として扱われるもの）

変数を使って動的にプロパティを参照できない。

const user = { name: "Yamada", age: 30 };

const name = user.age
console.log(name);   // → 30

プロパティアクセスの基本：ブラケット記法（user["name"])

変数を使って動的にプロパティを参照する場合に使用される。[ ]の中は変数として扱われる。変数が定義されていなければ ReferenceError（未定義の変数） が起きます。

const user = { name: "Yamada", age: 30 };

const key = "age";
console.log(user[key]);  // → 30

もしくは、オブジェクト内のnameを指定したい場合は[]のブラケットの中を"name"のように文字列で指定する必要がある。

const user = { name: "Yamada", age: 30 };

console.log(user["name"]);  // "Yamada"

オブジェクトの分割代入（Destructuring Assignment）

Javascriptの構文でReactでもよく使用される。
オブジェクトの分割代入は {} の中に書く名前と、取り出したいオブジェクトのプロパティ名が完全に一致していないと取り出せない。

const user = { name: "Yamada", age: 30 };
const { name } = user;

console.log(name); // "Yamada"

userオブジェクトの中からnameプロパティを取り出して、同名の変数nameに代入する。

ネストしたプロパティの取り出し方

入れ子（ネスト）になったオブジェクトのプロパティも、それぞれの記法で取り出し可能。

✅ドット記法/ブラケット記法での取り出し

const user = {
  name: "Yamada",
  profile: {
    age: 30,
    location: "Tokyo"
  }
};

//ドット記法
const age = user.profile.age;
console.log(age); // 30

//ブラケット記法
const age = user["profile"]["age"];
console.log(age); // 30

✅分割代入で取り出し

// オブジェクト
const user = {
  name: "Yamada",
  profile: {
    age: 30,
    location: "Tokyo"
  }
};

// 分割代入で取り出す
const { profile: { age } } = user;

console.log(age);      // 30

ネスト部分に別名をつけることも可能

ネストしたオブジェクト自体を別の変数に入れることも可能。

// オブジェクト
const user = {
  name: "Yamada",
  profile: {
    age: 30,
    location: "Tokyo"
  }
};

// 別の変数に入れる
const { profile: userProfile } = user;

console.log(userProfile.age);      // 30
console.log(userProfile.location); // "Tokyo"

途中のプロパティが存在しない可能性がある場合（TypeScript/JS両方で注意）

Optional Chaining を使ってエラーを防ぐようにする。

下記ではprofileプロパティが存在しない場合、エラーにならないようにprofileのあとに?をつける。

const user = {
  name: "Yamada",
  // profileがないかもしれない場合
};

const age = user.profile?.age; // エラーを防げる（Optional Chaining）

✅ まとめ