JavaScript | 基礎構文：データ型 – オブジェクトの基本

JavaScript
2025.12.11
スポンサーリンク

オブジェクトを一言でいうと

オブジェクトは、
「ひとまとまりの情報を、“名前付きのペア”で整理して持てる入れ物」 です。

人
本
商品
設定

など、「何か1つの“もの”に、いくつかの性質（プロパティ）がくっついているもの」を表すときに使います。

ここが重要です。
配列が「順番で管理するたくさんの値」だとしたら、
オブジェクトは「名前で管理する、意味のある値の集まり」。
“誰の何の情報なのか” を一つのかたまりとして扱えるようにするのがオブジェクトです。

オブジェクトの見た目と作り方の基本

リテラル表記：{} の中に「名前: 値」を書く

もっともよく使う形は、{}（波かっこ）で囲んで
キー: 値 をカンマ区切りで並べる書き方です。

const user = {
  name: "Taro",
  age: 20,
  isAdmin: false,
};
JavaScript

この user には、
「name」「age」「isAdmin」という3つの“名前付きの情報”が入っています。

この「name」「age」などを プロパティ名（キー）、
それに対応する中身を プロパティ値（値） と呼びます。

値の中にはいろいろな型が入れられる

プロパティの値には、
ほぼ何でも入れられます。

const user = {
  name: "Taro",              // String
  age: 20,                   // Number
  isAdmin: false,            // Boolean
  favorites: ["JS", "CSS"],  // 配列
  address: {                 // オブジェクトの中にオブジェクト
    city: "Tokyo",
    zip: "100-0000",
  },
};
JavaScript

ここが重要です。
オブジェクトは「関連する情報の塊」を作るための型。
1人のユーザーに関するあらゆる情報を、バラバラの変数ではなく 1つの user の中にまとめるイメージです。

プロパティの読み書き：ドット記法とブラケット記法

一番よく使う「ドット記法」

オブジェクトのプロパティを読む（取得する）ときは、
まず ドット記法 を使います。

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

console.log(user.name); // "Taro"
console.log(user.age);  // 20
JavaScript

書き換え（代入）もできます。

user.age = 21;
console.log(user.age); // 21
JavaScript

「オブジェクト.プロパティ名」という形です。

文字列で指定する「ブラケット記法」

もうひとつの書き方が ブラケット記法 です。

console.log(user["name"]); // "Taro"
user["age"] = 30;
console.log(user["age"]);  // 30
JavaScript

プロパティ名を文字列で指定します。
user["name"] は user.name と同じ意味です。

いつブラケット記法を使うのか

次のようなときは、ドット記法ではなくブラケット記法が必要になります。

プロパティ名が変数で決まるとき

const key = "name";
console.log(user[key]); // user["name"] と同じ
JavaScript

プロパティ名にハイフンやスペースなどが入るとき

const item = {
  "unit-price": 1200,
};

console.log(item["unit-price"]); // OK
// item.unit-price はエラー（- が引き算と解釈される）
JavaScript

ここが重要です。
基本は「ドット記法」。
「プロパティ名が動的（変数）」「プロパティ名が特殊な文字を含む」ときだけブラケット記法を使う、という使い分けを覚えておくとスッキリします。

オブジェクトにプロパティを追加・削除する

後からプロパティを追加する

オブジェクトは後からいくらでもプロパティを足せます。

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

user.age = 20;               // ドット記法で追加
user["isAdmin"] = false;     // ブラケット記法で追加

console.log(user);
// { name: "Taro", age: 20, isAdmin: false }
JavaScript

「存在しないプロパティ名に代入すると、新しくプロパティが増える」 という動きです。

プロパティを削除する：delete 演算子

不要になったプロパティは delete で消せます。

delete user.isAdmin;
console.log(user);
// { name: "Taro", age: 20 }
JavaScript

ただし、実務では「むやみにプロパティを消す」より、
null を入れたり、別の状態で管理したりすることも多いです。
（「このフィールドは存在するが中身は空」を表現したいときなど）

ここが重要です。
オブジェクトは“固定の形”ではなく、「後から増やしたり減らしたりできる柔らかい入れ物」。
ただし、設計としては「プロパティの有無」も意味を持つので、消すのか null にするのかは意図を持って選ぶ必要があります。

オブジェクトと配列の違いを感覚でつかむ

配列：順番が命、番号でアクセス

配列は、こういうイメージでした。

const scores = [80, 90, 75];

console.log(scores[0]); // 80（0番目）
console.log(scores[1]); // 90
JavaScript

「何番目か（インデックス）」でアクセスします。
「順番に意味がある」集合に向いています。

例：テストの点数の一覧
例：履歴ログ
例：並び順が大事なリスト

オブジェクト：名前が命、キーでアクセス

オブジェクトは、「名前」でアクセスします。

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

console.log(user.name); // "Taro"
console.log(user.age);  // 20
JavaScript

順番ではなく、「どんな属性なのか」（名前）に意味があります。

例：1人のユーザーの情報
例：商品1つの詳細（価格・在庫・名前）
例：設定の集合（theme, language, debugMode など）

2つを組み合わせると「よく見る形」になる

配列とオブジェクトはよく組み合わさります。

「ユーザーがたくさんいる」＝「ユーザーオブジェクトの配列」が典型的です。

const users = [
  { id: 1, name: "Taro" },
  { id: 2, name: "Hanako" },
];

console.log(users[0].name); // "Taro"
console.log(users[1].id);   // 2
JavaScript

ここでは、

配列 → 何番目のユーザーか
オブジェクト → そのユーザーのどの情報か

を表しています。

ここが重要です。
配列は「たくさんのもの」、オブジェクトは「1つのものの中身」。
“1人のユーザーの情報” をオブジェクトで、“ユーザーたち” を配列で表す、という分担をイメージできると実務のデータ構造がグッと読めるようになります。

オブジェクトの繰り返し処理（for … in / Object.keys）

for…in で「プロパティ名」を順番にたどる

オブジェクトの中身を全部見たいときは、for...in が使えます。

const user = {
  name: "Taro",
  age: 20,
  isAdmin: false,
};

for (const key in user) {
  console.log(key, user[key]);
}
JavaScript

このループでは、

1回目：key = "name" → user["name"] → “Taro”
2回目：key = "age" → 20
3回目：key = "isAdmin" → false

のように、プロパティ名と値を順番に見ていけます。

Object.keys / values / entries で配列として扱う

オブジェクトのキーや値を配列として取り出せるメソッドもあります。

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

console.log(Object.keys(user));   // ["name", "age"]
console.log(Object.values(user)); // ["Taro", 20]
console.log(Object.entries(user)); // [["name", "Taro"], ["age", 20]]
JavaScript

例えば Object.keys(user) を使えば、「プロパティ名の配列」が手に入るので、
それを for...of や for 文で回すこともできます。

ここが重要です。
配列は for / for…of、オブジェクトは for…in や Object.keys。
“どんな形のデータなのか” に応じて、繰り返し処理の書き方が少し変わることを意識しておくと、データ構造の選び方も自然と変わっていきます。

オブジェクトは「参照型」：代入・コピーの落とし穴（重要）

ここは初心者がかなりハマりやすいポイントなので、少し深く説明します。

オブジェクトを別の変数に代入すると「同じものを指す」

次のコードを見てください。

const user1 = { name: "Taro" };
const user2 = user1;

user2.name = "Hanako";

console.log(user1.name); // "Hanako"
console.log(user2.name); // "Hanako"
JavaScript

「user2 を変えたのに user1 も変わっている」のが分かりますか？

これは、

user1 と user2 が「同じオブジェクトを共有している」からです。

オブジェクトは「値そのもの」をコピーするのではなく、
「そのオブジェクトが存在する場所（参照）」をコピーする イメージです。

つまり、

「user1 も user2 も、同じ“中身”を見ている」
という状態になります。

「別々のオブジェクト」にしたいなら「コピー」が必要

「user1 と user2 を別々のものにしたい」なら、
浅いコピー（shallow copy）を作る方法があります。

スプレッド構文（...）を使う例：

const user1 = { name: "Taro" };
const user2 = { ...user1 };   // 中身をコピーして新しいオブジェクトに

user2.name = "Hanako";

console.log(user1.name); // "Taro"
console.log(user2.name); // "Hanako"
JavaScript

この場合は、

user1 → { name: “Taro” }
user2 → { name: “Hanako” }

と「別々のオブジェクト」になっています。

ここが重要です。
オブジェクトは「参照」で扱われる。
代入すると“別名をつけただけ”状態になる。
独立したコピーが欲しいときは、自分でコピーを作る必要がある。

これは配列にも共通する考え方で、
複雑なデータ構造を扱うときの大事な感覚になります。

初心者向け：オブジェクトの本質をギュッとまとめる

最後に、オブジェクトについて本当に押さえてほしいポイントだけを整理します。

オブジェクトは、「1つのもの」に関する複数の情報を「名前付きのペア」でまとめる入れ物。
{ name: "Taro", age: 20 } のように {} の中に キー: 値 を書く。

プロパティの読み書きは obj.key（ドット記法）が基本。
キーが変数だったり特殊な文字を含むときは obj[key]（ブラケット記法）を使う。

プロパティは後から自由に追加・変更・削除できる。
「あるユーザー」「ある商品」「ある設定」など、「1つのものの状態」を表すのに向いている。

オブジェクトは「参照型」なので、const a = obj; const b = a; とすると a と b は同じ中身を共有する。
別々のオブジェクトにしたいときは、{ ...obj } などでコピーする必要がある。

ここが重要です。
“何か1つのもの”を考えたとき、その特徴や状態をぜんぶ 1 つのオブジェクトに入れてあげる。
そのオブジェクトたちを配列で並べる――
この発想ができるようになると、JavaScript のデータ設計が一気に楽しくなります。

もしよければ、次のような練習をしてみてください。

  1. book というオブジェクトを作り、title（タイトル）, author（著者）, price（価格）をプロパティとして持たせる
  2. console.log で「タイトル：◯◯ 著者：◯◯ 価格：◯◯円」と表示してみる
  3. book.price を書き換えてから、もう一度表示してみる

これを自分の手で書けるようになると、
「オブジェクトを“1つのものの情報のかたまり”として使う感覚」が、かなりしっかり身についてきます。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました