作成日：2026/4/5,最終更新日：2026/4/10

目次⇒ オブジェクトとは？ 宣言と値の取得 追加・更新・削除 繰り返し処理 分割代入とスプレッド構文 実践：配列の中のオブジェクトを扱う よくある注意点 まとめ TOP 　　　　

JavaScript / TypeScriptのオブジェクト操作について

オブジェクトの基本と実践的な使い方をわかりやすく解説

この記事では、JavaScript / TypeScriptでよく使われる オブジェクト について詳しく解説します。
配列が「順番つきで値を並べる」ための仕組みだとすると、オブジェクトは名前つきで値をまとめるための仕組みです。


実務では、ユーザー情報や商品情報、設定値などを扱うときにオブジェクトが頻繁に登場します。
この記事では、宣言方法、値の取得、追加・更新・削除、繰り返し処理、さらに分割代入やスプレッド構文、配列の中のオブジェクト操作まで順番に見ていきます。


1. オブジェクトとは？

解説： オブジェクトは、キー（名前）と値をセットで管理するデータ構造です。
配列が「0番目、1番目、2番目...」と番号で値を管理するのに対して、オブジェクトは「name」「age」のように意味のある名前で値を管理できます。



● 配列との違い

// 配列
const fruits = ['りんご', 'みかん', 'バナナ'];
console.log(fruits[0]); // 結果 : りんご

// オブジェクト
const user = {
  name: '太郎',
  age: 20
};
console.log(user.name); // 結果 : 太郎

配列は順番つきデータ、オブジェクトは意味のある項目ごとにデータを管理したいときに向いています。


● どんな場面で使う？

  • ✅ ユーザー情報（名前、年齢、メールアドレス）
  • ✅ 商品情報（商品名、価格、在庫数）
  • ✅ 設定値（テーマ、言語、通知ON/OFF）

値が1つだけではなく、「1人のユーザーに関する複数の情報」のように、関連するデータをまとめて扱いたいときにとても便利です。


2. 宣言と値の取得

解説： オブジェクトは、{ } を使って宣言します。
中には キー: 値 の形でデータを書いていきます。



● 基本の宣言方法

const user = {
  name: '花子',
  age: 25,
  isMember: true
};

console.log(user);

このように、1つのオブジェクトの中に複数の情報をまとめて持たせることができます。


● ドット記法で取得する

console.log(user.name);     // 結果 : 花子
console.log(user.age);      // 結果 : 25
console.log(user.isMember); // 結果 : true

もっともよく使うのが ドット記法 です。
キー名がわかっている場合は、これが最もシンプルで読みやすいです。


● ブラケット記法で取得する

console.log(user['name']); // 結果 : 花子

const keyName = 'age';
console.log(user[keyName]); // 結果 : 25

ブラケット記法は、キー名を変数で指定したいときに便利です。
また、キーにハイフンやスペースが含まれている場合もブラケット記法を使います。


3. 追加・更新・削除

解説： オブジェクトは、作ったあとでもキーを追加したり、値を更新したり、不要なプロパティを削除したりできます。
実務では「取得したデータに項目を足す」「設定値を更新する」などの場面でよく使います。



● プロパティを追加する

const user = {
  name: '太郎'
};

user.age = 20;
console.log(user);
// 結果 : { name: '太郎', age: 20 }

● 値を更新する

user.age = 21;
console.log(user.age); // 結果 : 21

既にあるキーに新しい値を代入すると、値を上書きできます。


● deleteで削除する

delete user.age;
console.log(user);
// 結果 : { name: '太郎' }

delete を使うと、プロパティそのものを削除できます。
ただし、削除を多用するとデータ構造が追いにくくなることもあるため、使いどころは考えたいです。


● constでも中身は変更できる

const settings = {
  theme: 'light'
};

settings.theme = 'dark'; // OK
console.log(settings.theme); // 結果 : dark

constで宣言していても、オブジェクトの中身は変更可能です。
ただし、オブジェクト全体を別のオブジェクトに再代入するのはできません。


4. 繰り返し処理

解説： 配列のようにオブジェクトをそのまま forEach で回すことはできません。
その代わり、Object.keys()、Object.values()、Object.entries() などを使って繰り返し処理を行います。



● Object.keys()：キー一覧を取得

const user = {
  name: '次郎',
  age: 30,
  job: 'engineer'
};

console.log(Object.keys(user));
// 結果 : ['name', 'age', 'job']

● Object.values()：値一覧を取得

console.log(Object.values(user));
// 結果 : ['次郎', 30, 'engineer']

● Object.entries()：キーと値を同時に扱う

Object.entries(user).forEach(([key, value]) => {
  console.log(key, value);
});

// 結果 :
// name 次郎
// age 30
// job engineer

Object.entries() は、キーと値の両方を使いたいときにとても便利です。
画面に一覧表示するときや、設定値を一括確認するときによく使われます。


5. 分割代入とスプレッド構文

解説： オブジェクト操作に慣れてきたら、分割代入 と スプレッド構文 も覚えておくと便利です。
どちらも、実務やモダンなコードでよく登場します。



● 分割代入：必要な値だけ取り出す

const user = {
  name: 'さくら',
  age: 22,
  city: '東京'
};

const { name, age } = user;

console.log(name); // 結果 : さくら
console.log(age);  // 結果 : 22

必要なプロパティだけを変数として取り出せるので、コードがすっきりします。


● 別名をつけることもできる

const { name: userName } = user;
console.log(userName); // 結果 : さくら

● スプレッド構文：コピーや上書きに便利

const original = {
  name: '健太',
  age: 18
};

const copied = {
  ...original,
  age: 19,
  school: 'Web高校'
};

console.log(copied);
// 結果 : { name: '健太', age: 19, school: 'Web高校' }

スプレッド構文を使うと、元のオブジェクトを残しつつ、新しいオブジェクトを作ることができます。
Reactなどのフロントエンド開発でも非常によく使われる書き方です。


6. 実践：配列の中のオブジェクトを扱う

解説： 実務では、オブジェクト単体よりも、配列の中にオブジェクトが並んでいる形を扱うことがとても多いです。
たとえばユーザー一覧や商品一覧は、この形で表現されることがよくあります。



● 例：ユーザー一覧データ

const users = [
  { id: 1, name: '太郎', age: 20 },
  { id: 2, name: '花子', age: 25 },
  { id: 3, name: '次郎', age: 17 }
];

● mapで名前一覧を作る

const names = users.map(user => user.name);
console.log(names);
// 結果 : ['太郎', '花子', '次郎']

● filterで条件に合うデータだけ取り出す

const adults = users.filter(user => user.age >= 20);
console.log(adults);
// 結果 : id:1 と id:2 のユーザーが入る

● findで特定の1件を探す

const targetUser = users.find(user => user.id === 2);
console.log(targetUser);
// 結果 : { id: 2, name: '花子', age: 25 }

このように、配列操作の知識とオブジェクト操作の知識を組み合わせると、扱えるデータの幅が一気に広がります。


7. よくある注意点

解説： オブジェクト操作では、初学者の方がつまずきやすいポイントがいくつかあります。
ここで、特によくあるものを整理しておきましょう。



● 存在しないキーを読むと undefined

const user = { name: '太郎' };
console.log(user.age); // 結果 : undefined

存在しないキーを読んでもエラーではなく undefined になることがあります。
そのため、「値が入っている前提」で処理を書くときは注意が必要です。


● = で代入すると同じ参照を持つ

const user1 = { name: '太郎' };
const user2 = user1;

user2.name = '花子';
console.log(user1.name); // 結果 : 花子

オブジェクトは値そのものではなく、参照がコピーされる点が重要です。
別物として扱いたい場合は、スプレッド構文などでコピーを作る必要があります。


● キーの有無を確認したいとき

console.log('name' in user1); // 結果 : true
console.log('age' in user1);  // 結果 : false

キーが存在するか確認したいときは、in演算子 を使うと便利です。


8. まとめ

オブジェクトは、JavaScript / TypeScriptで意味のある情報をまとめて扱うための基本データ構造です。
配列と並んで非常に重要なので、早めに慣れておくとその後の学習がかなりスムーズになります。


● 本記事のポイント

  • オブジェクト は キーと値のセットでデータを管理する
  • ドット記法 と ブラケット記法 で値を取得できる
  • プロパティの 追加・更新・削除 ができる
  • Object.keys / values / entries で繰り返し処理ができる
  • 分割代入 と スプレッド構文 は実務でよく使う
  • 配列の中のオブジェクトを扱えるようになると、実践力が一気に上がる

次に進むなら、オブジェクトをさらに活用するテーマとして、Date / 日時処理 や 例外処理、あるいは 正規表現 なども相性がよいです。
配列とオブジェクトを自在に扱えるようになると、Webアプリのコードがかなり読みやすくなってきます。ぜひ少しずつ慣れていきましょう！