【JavaScript】オブジェクトの書き方と使い方の基本

JavaScriptでデータを管理する上で欠かせない「オブジェクト」の基本を解説します。オブジェクトの作成方法から、値の追加・取得・更新・削除といった基本的な操作、さらに結合や検索、ループ処理までをサンプルコード付きで丁寧に説明します。システム開発で必須の知識を基礎から学べます。

作成日: 2025年12月21日更新日: 2025年12月21日

開発環境

OS: Windows10
Editor: Visual Studio Code
JavaScript: ES6以降

JavaScriptのオブジェクト（オブジェクトリテラル）とは

JavaScriptのオブジェクトとは、「キー」と呼ばれる名前と、それに対応する「値」を1セットにして、データを管理するための仕組みです。関連する複数の情報を、ひとつのまとまりとして扱うことができます。

配列が 0, 1, 2 といったインデックス番号でデータにアクセスするのに対し、オブジェクトでは自分で決めた分かりやすい名前（キー）を使ってデータにアクセスします。これにより、それぞれのデータが何を表しているのかが直感的に理解しやすくなります。

オブジェクトは、以下の2つの要素で構成されています。

キー（key）: 値に付ける「ラベル」や「名前」の役割をします。プロパティ名とも呼ばれ、通常は文字列で指定します。
値（value）: キーとペアになる実際のデータです。文字列、数値、配列など、様々なデータ型を格納できます。

オブジェクトの基本的な書き方

JavaScriptにおけるオブジェクトは、関連する複数のデータをひとまとめにして管理するためのデータ構造です。例えば、人の情報（名前、年齢、都市など）をそれぞれ別の変数で管理するのではなく、「人」という一つのまとまりとして扱うことができます。

オブジェクトは「キー」と「値」のペアでデータを保持します。

リテラルを使う場合

オブジェクトを作成する最も一般的で推奨される方法です。 {}（波括弧）を使い、その中に キー: 値 の形式でデータを記述します。キーと値のペアはカンマ(,)で区切ります。この書き方を「オブジェクトリテラル」と呼びます。


1const person = {
2  name: "John",
3  age: 30,
4  city: "New York"
5};

上記の例では、personというオブジェクトにname、age、cityという3つのキーと、それに対応する値が設定されています。

コンストラクタを使う場合

new Object() を使ってオブジェクトを生成する方法です。この方法では、まず空のオブジェクトを作成し、その後 .（ドット）を使ってキーを指定し、値を代入していきます。


1const person = new Object();
2person.name = "John";
3person.age = 30;
4person.city = "New York";

リテラルを使う場合と結果的に同じオブジェクトが作成されますが、特別な理由がない限り、リテラル記法を使うのが一般的です。

初期化だけする例（空のオブジェクト）

プログラムの実行中に後からデータを追加するために、最初は中身が何もない「空のオブジェクト」を作成することがあります。空のオブジェクトは、プロパティを一つも持たないオブジェクトのことです。


1const person = {};                // リテラル
2const person = new Object();      // コンストラクタ（非推奨だが可能）

ここでもリテラル記法 ({}) とコンストラクタ記法 (new Object()) の両方が使えます。しかし、簡潔で分かりやすいため、リテラル記法 (const person = {};) を使用することが強く推奨されます。

サンプルコード

この章では、JavaScriptの「オブジェクト」という、関連するデータをまとめて管理するための基本的な使い方を学びます。オブジェクトは、システム開発において非常に重要なデータ構造です。

javascript/chapter04/index.html

まずは、各JavaScriptファイルを実行するための土台となるHTMLファイルです。<script>タグを使って、これから作成する13個のJavaScriptファイルを読み込んでいます。defer属性は、HTMLの読み込みを妨げずにスクリプトを実行するためのものです。


1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>JavaScriptチュートリアル</title>
7  </head>
8
9  <body>
10    <h1>JavaScriptチュートリアル</h1>
11    <script src="./script01.js" defer></script>
12    <script src="./script02.js" defer></script>
13    <script src="./script03.js" defer></script>
14    <script src="./script04.js" defer></script>
15    <script src="./script05.js" defer></script>
16    <script src="./script06.js" defer></script>
17    <script src="./script07.js" defer></script>
18    <script src="./script08.js" defer></script>
19    <script src="./script09.js" defer></script>
20    <script src="./script10.js" defer></script>
21    <script src="./script11.js" defer></script>
22    <script src="./script12.js" defer></script>
23    <script src="./script13.js" defer></script>
24  </body>
25</html>
26

javascript/chapter04/script01.js

オブジェクトは、「キー」と「値」をペアで管理するデータの集合です。ここではpersonというオブジェクトを作成しています。

オブジェクト内の値にアクセスするには、主に2つの方法があります。

ドット記法: オブジェクト名.キー名 の形式でアクセスします。コードの可読性が高く、一般的に使われます。
ブラケット記法: オブジェクト名["キー名"] の形式でアクセスします。キー名に変数を使いたい場合などに便利です。


1// -----------------------------
2// 要素の取得
3// -----------------------------
4const person = {
5  name: "John",
6  age: 30,
7  city: "New York"
8};
9
10// ドット記法
11console.log(person.name);
12
13// ブラケット記法
14console.log(person["age"]);

javascript/chapter04/script02.js

作成済みのオブジェクトに、新しいキーと値のペア（プロパティと呼びます）を追加することができます。オブジェクト名.新しいキー名 = 値; のように記述します。ここではcountryという新しいプロパティを追加しています。


1// -----------------------------
2// 要素の追加
3// -----------------------------
4const person = {
5  name: "John",
6  age: 30,
7  city: "New York"
8};
9
10person.country = "USA";
11console.log(person);

javascript/chapter04/script03.js

既存のプロパティの値を更新するには、新しい値を代入します。ここではageキーの値を30から31に更新しています。


1// -----------------------------
2// 要素の更新
3// -----------------------------
4const person = {
5  name: "John",
6  age: 30,
7  city: "New York"
8};
9
10person.age = 31;
11console.log(person);

javascript/chapter04/script04.js

オブジェクトからプロパティを削除するには、delete演算子を使います。delete オブジェクト名.キー名; のように記述します。ここではcityプロパティを削除しています。


1// -----------------------------
2// 要素の削除
3// -----------------------------
4const person = {
5  name: "John",
6  age: 30,
7  city: "New York"
8};
9
10delete person.city;
11console.log(person);

javascript/chapter04/script05.js

2つのオブジェクトを1つに結合することができます。ここではスプレッド構文 (...) を使用しています。{ ...オブジェクト1, ...オブジェクト2 } と記述することで、各オブジェクトのプロパティをすべて含んだ新しいオブジェクトを作成できます。


1// -----------------------------
2// オブジェクトの結合
3// -----------------------------
4const person1 = {
5  name: "John",
6  age: 30
7};
8
9const person2 = {
10  city: "New York",
11  country: "USA"
12};
13
14const mergedPerson = { ...person1, ...person2 };
15console.log(mergedPerson);

javascript/chapter04/script06.js

オブジェクトに含まれるプロパティの数を取得する方法です。Object.keys()メソッドを使うと、オブジェクトのキーをすべて配列として取得できます。その配列のlengthプロパティを調べることで、要素数を数えられます。


1// -----------------------------
2// 要素数の取得（キーの数）
3// -----------------------------
4const person = {
5  name: "John",
6  age: 30,
7  city: "New York"
8};
9
10const keys = Object.keys(person);
11console.log("要素数:", keys.length);

javascript/chapter04/script07.js

オブジェクトのキー、値、またはその両方を配列として取得するための便利なメソッドです。

Object.keys(オブジェクト): キーの一覧を配列で返します。
Object.values(オブジェクト): 値の一覧を配列で返します。
Object.entries(オブジェクト): [キー, 値]というペアの配列を返します。


1// -----------------------------
2// キーの一覧・値の一覧・エントリ（キーと値のセット）
3// -----------------------------
4const person = {
5  name: "John",
6  age: 30,
7  city: "New York"
8};
9
10console.log(Object.keys(person));
11console.log(Object.values(person));
12console.log(Object.entries(person));

javascript/chapter04/script08.js

オブジェクトに特定のキーが存在するかどうかを確認するには、in演算子かhasOwnProperty()メソッドを使います。どちらも、キーが存在すればtrue、存在しなければfalseを返します。


1// -----------------------------
2// キーの存在確認
3// -----------------------------
4const person = {
5  name: "John",
6  age: 30,
7  city: "New York"
8};
9
10console.log("city" in person);
11console.log(person.hasOwnProperty("name"));

javascript/chapter04/script09.js

オブジェクトに特定の値が含まれているかを確認する方法です。まずObject.values()で全ての値を取得して配列にし、その配列に対してincludes()メソッドを使うことで、値の存在を確認できます。


1// -----------------------------
2// 値の検索
3// -----------------------------
4const person = {
5  name: "John",
6  age: 30,
7  city: "New York"
8};
9
10const values = Object.values(person);
11console.log(values.includes("John"));

javascript/chapter04/script10.js

値から対応するキーを探す（逆引きする）方法です。Object.keys()でキーの配列を取得し、配列のfind()メソッドを使って、指定した値を持つキーを探し出します。ここでは、値が"John"であるキーを探しています。


1// -----------------------------
2// キーの取得（値から逆引き）
3// -----------------------------
4const person = {
5  name: "John",
6  age: 30,
7  city: "New York"
8};
9
10const keyForValue = Object.keys(person).find(key => person[key] === "John");
11console.log(keyForValue);

javascript/chapter04/script11.js

オブジェクトの値をソート（並べ替え）する方法です。Object.values()で値の配列を取得し、その配列に対してsort()メソッドを適用することで、値をアルファベット順や数値の昇順に並べ替えることができます。


1// -----------------------------
2// 値のソート（値だけをソートして表示）
3// -----------------------------
4const person = {
5  name: "John",
6  age: 30,
7  city: "New York"
8};
9
10const sortedValues = Object.values(person).sort();
11console.log(sortedValues);

javascript/chapter04/script12.js

for...in文を使うと、オブジェクトの各プロパティに対して繰り返し処理を行うことができます。ループの各処理で、変数keyにキー名が順番に格納されます。person[key]とすることで、そのキーに対応する値を取得できます。


1// -----------------------------
2// ループ処理（for...in）
3// -----------------------------
4const person = {
5  name: "John",
6  age: 30,
7  city: "New York"
8};
9
10for (const key in person) {
11  console.log(`${key}: ${person[key]}`);
12}

javascript/chapter04/script13.js

最後に、これまでの知識を応用した練習問題です。複数の注文情報をオブジェクトで表現し、それらを配列に格納しています。

for...ofループ（配列の要素を順番に取り出すための構文）を使って、各注文オブジェクトを取り出します。そして、各注文のquantity（数量）とprice（単価）を掛け合わせて小計を算出し、totalAmount変数に加算していくことで、最終的な合計金額を計算しています。


1// -----------------------------
2// 練習問題：注文情報の合計を求める
3// -----------------------------
4const orders = [
5  {
6    order_id: 1,
7    item: "Laptop",
8    quantity: 1,
9    price: 1000
10  },
11  {
12    order_id: 2,
13    item: "Mouse",
14    quantity: 2,
15    price: 50
16  },
17  {
18    order_id: 3,
19    item: "Keyboard",
20    quantity: 1,
21    price: 80
22  }
23];
24
25let totalAmount = 0;
26
27for (const order of orders) {
28  const orderTotal = order.quantity * order.price;
29  totalAmount += orderTotal;
30}
31
32console.log(`合計金額は: ${totalAmount} 円です。`);

おわりに

この記事では、JavaScriptで関連するデータをひとまとめに管理する「オブジェクト」の基本を学びました。{}を使ってキーと値のペアでデータを作成し、値の追加・取得・更新・削除といった基本的な操作をサンプルコードで確認しました。さらにfor...inループで繰り返し処理を行ったり、Object.keys()でキーの一覧を取得したりと、オブジェクトを便利に扱うための様々な機能も紹介しました。オブジェクトは実際のシステム開発で頻繁に登場する重要な知識ですので、ぜひ何度も復習して身につけてください。