メインコンテンツまでスキップ

オブジェクト

関連するデータと機能をまとめるための構造です。

オブジェクトリテラル​

const student = {
  // プロパティ
  id: 1,
  name: "鈴木",
  age: 20,

  // メソッドの短縮記法 (ES6)
  introduce() {
    return `私の名前は${this.name}、${this.age}歳です。`;
  }
};

// プロパティへのアクセス
console.log(student.name);    // 鈴木
console.log(student["age"]);  // 20

// メソッドの呼び出し
console.log(student.introduce()); // 私の名前は鈴木、20歳です。

プロパティの省略記法と計算プロパティ名​

const name = "山田";
const age = 30;

// 変数名とプロパティ名が同じなら省略できる (ショートハンド)
const user = { name, age };
console.log(user); // { name: '山田', age: 30 }

// [ ] で囲むとキーを動的に決められる (計算プロパティ名)
const key = "score";
const result = { [key]: 100 };
console.log(result); // { score: 100 }

オブジェクトの分割代入（ES6）​

オブジェクトから必要なプロパティを取り出して変数に代入できます。

const student = { name: "鈴木", age: 20 };

const { name, age } = student;
console.log(name); // 鈴木
console.log(age);  // 20

スプレッド構文（ES2018）​

// オブジェクトのコピーと結合
const person = { name: "山田", age: 35 };
const job = { position: "エンジニア", years: 5 };

// 新しいオブジェクトを作成
const employeeInfo = { ...person, ...job };
console.log(employeeInfo);
// { name: '山田', age: 35, position: 'エンジニア', years: 5 }

オブジェクト操作メソッド​

const user = { id: 101, username: "user1", email: "user1@example.com" };

// オブジェクトのキーを配列として取得
console.log(Object.keys(user));   // ['id', 'username', 'email']

// オブジェクトの値を配列として取得
console.log(Object.values(user)); // [101, 'user1', 'user1@example.com']

// キーと値のペアを配列として取得
console.log(Object.entries(user));
// [['id', 101], ['username', 'user1'], ['email', 'user1@example.com']]

ネストした値への安全なアクセス​

オブジェクトの深い階層にアクセスするとき、途中のプロパティが存在しないとエラーになります。オプショナルチェイニング ?.（ES2020）を使うと安全にアクセスできます。

const user = {
  name: "鈴木",
  address: { city: "東京" }
};

// ?. なし: 途中が undefined だとエラーになる
// console.log(user.company.name); // ❌ TypeError

// ?. あり: 途中が無ければ undefined を返す (エラーにならない)
console.log(user.company?.name); // undefined
console.log(user.address?.city); // 東京

// ?? と組み合わせてデフォルト値を指定
const city = user.address?.city ?? "未設定";
console.log(city); // 東京
初級者向け解説

?. は「左側が null か undefined ならそこで止めて undefined を返す」演算子です。user.company?.name は「company があれば name を、無ければ undefined」という意味になり、深い階層へのアクセスでエラーを防げます。

次に読む​

  • 配列 — 順序付きでデータを並べて扱う