JavaScript入門 #11 - オブジェクトの基本

このシリーズについて

「JavaScript入門」第11回です。今回は、名前付きのデータをまとめるオブジェクトを扱います。

オブジェクトとは

オブジェクトは、キーと値の組み合わせでデータをまとめる仕組みです。

const user = {
  name: "Taro",
  age: 18,
  isStudent: true
};

配列は順番で管理し、オブジェクトは名前で管理します。この違いを押さえると、データ構造を選びやすくなります。

Step 1: プロパティを読む

オブジェクトの中の値をプロパティと呼びます。

const user = {
  name: "Taro",
  age: 18
};

console.log(user.name);
console.log(user.age);

user.name のような書き方をドット記法と呼びます。

Step 2: プロパティを変更する

オブジェクトのプロパティは後から変更できます。

const user = {
  name: "Taro",
  age: 18
};

user.age = 19;
user.city = "Tokyo";

console.log(user);

const で宣言していても、オブジェクトの中身は変更できます。

Step 3: ブラケット記法を使う

キー名を文字列として指定する時は、ブラケット記法を使います。

const user = {
  name: "Taro",
  age: 18
};

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

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

変数に入ったキー名でアクセスしたい時に便利です。

Step 4: 配列と組み合わせる

実際のデータでは、オブジェクトの配列をよく使います。

const users = [
  { name: "Taro", age: 18 },
  { name: "Yuki", age: 20 },
  { name: "Saki", age: 17 }
];

const adultUsers = users.filter((user) => {
  return user.age >= 18;
});

console.log(adultUsers);

配列メソッドと組み合わせると、実務でよく見る形になります。

Step 5: 分割代入を使う

オブジェクトから必要な値だけを取り出す時は、分割代入が使えます。

const user = {
  name: "Taro",
  age: 18
};

const { name, age } = user;

console.log(name);
console.log(age);

練習

objects.js を作り、商品データを扱います。

const product = {
  name: "キーボード",
  price: 5000,
  stock: 3
};

const total = product.price * product.stock;

console.log(`${product.name}の在庫金額は${total}円です`);

よくあるエラー

次のステップ

JavaScript入門 #12 - 関数の基本 で、処理に名前を付けて再利用する方法を学びます。

まとめ

オブジェクトは、関連する値を名前付きでまとめる仕組みです。ドット記法、ブラケット記法、オブジェクトの配列、分割代入を押さえると、実際のデータ処理に進みやすくなります。

参考リソース

• MDN: Object
• MDN: オブジェクトの基本

×

PR

×

PR