JavaScriptのオブジェクトを作成する方法（リテラル表記とObjectコンストラクタ）

1. JavaScriptのオブジェクト作成とは？

1. JavaScriptのオブジェクト作成とは？

JavaScriptのオブジェクト（Object）とは、関連する複数のデータを「名前（キー）」と「値（バリュー）」のペアとして、ひとつの変数にまとめて管理できる非常に便利な仕組みです。プログラミング未経験の方には、「名前付きの仕切りがある整理ボックス」をイメージすると分かりやすいでしょう。

たとえば、一人のユーザーの情報を管理する場合、バラバラの変数で管理するよりも、オブジェクトとしてまとめることでデータの関連性が明確になります。

イメージで理解するオブジェクト

オブジェクトは、よく「引き出し」や「ラベル付きのファイル」に例えられます。それぞれの引き出しには「名前」や「年齢」といったラベル（キー）が貼られており、その中には具体的なデータ（値）が入っています。この構造により、大量の情報の中から必要なものをすぐに見つけ出し、取り出すことができるのです。

具体的なデータ管理の例

例えば、「田中さん」という人物の情報を管理したいとき、オブジェクトを使わない場合と使う場合では、以下のような違いがあります。

・オブジェクトを使わない場合（管理が大変）

const userName = "田中太郎";
const userAge = 25;
const userAddress = "東京都";
// 誰のデータか分かりにくく、人数が増えると混乱します

・オブジェクトを使う場合（スッキリまとまる）

const user = {
  name: "田中太郎",
  age: 25,
  address: "東京都"
};
// 「user」という箱の中に、田中さんの情報がすべて詰まっています

このように、JavaScriptのオブジェクトは「意味のあるデータのかたまり」を作るために欠かせない要素です。これを使うことで、複雑なプログラムも整理整頓され、読みやすく、ミスの少ないコードを書くことが可能になります。

2. リテラル表記によるオブジェクトの作成

2. リテラル表記によるオブジェクトの作成

JavaScriptで最も一般的かつ推奨される作成方法が、このオブジェクトリテラル表記です。波括弧 { } を使って、その場でデータの中身を定義します。コードが非常にシンプルで読みやすいため、プログラミング初心者の方はまずこの書き方をマスターしましょう。

オブジェクトリテラルは、複数の「プロパティ（属性）」を一度に記述できるのが特徴です。プロパティは キー（情報の名前）: 値（データ本体） という形式で書き、複数の情報を入れたいときはカンマ , で区切ります。

例えば、あるRPGゲームのキャラクター情報を管理するプログラムをイメージしてみましょう。

// オブジェクトリテラルでキャラクター情報を作成
const player = {
  name: "勇者たかし", // キーがname、値が"勇者たかし"
  level: 10,           // キーがlevel、値が10
  job: "戦士"          // キーがjob、値が"戦士"
};

// コンソールに表示して確認
console.log(player);

実行結果

{ name: "勇者たかし", level: 10, job: "戦士" }

この書き方のメリットは、「何についてのデータなのか」が一目でわかる点にあります。上記の例では player という一つの変数の中に、名前、レベル、職業がセットになって保存されています。これにより、大量の変数を個別に作る手間が省け、コードの管理が格段に楽になります。

また、リテラル表記は記述量が少ないため、Googleの検索エンジンが好む「構造化されたクリーンなコード」を実現しやすく、開発現場でもデファクトスタンダード（標準的な手法）として広く利用されています。

3. オブジェクトから値を取り出す2つの方法

3. オブジェクトから値を取り出す2つの方法

オブジェクトの中に保存したデータ（値）を使いたいときは、対応する「キー」を指定して呼び出します。JavaScriptには、主に「ドット記法」と「ブラケット記法」という2つの取り出し方があります。それぞれの特徴を、初心者の方にも分かりやすく解説します。

方法1：ドット記法（もっとも一般的な書き方）

オブジェクト名のあとにピリオド（ドット）を打ち、その後にキーの名前を書く方法です。非常にシンプルで読みやすいため、普段の開発ではこちらがメインで使われます。イメージとしては、「〇〇さんの、名前」というふうに、階層を掘り下げていく感覚です。

const user = {
  name: "山田太郎",
  age: 30,
  city: "大阪"
};

// ドット記法で取り出す
console.log(user.name); // "山田太郎"
console.log(user.age);  // 30

実行結果

山田太郎
30

方法2：ブラケット記法（柔軟な書き方）

オブジェクト名のあとに大括弧 [ ] を使い、その中にキーの名前を文字列（クォーテーションで囲む）として記述する方法です。一見するとドット記法より面倒に見えますが、「キーの名前を変数で指定できる」という強力なメリットがあります。

const user = {
  name: "山田太郎",
  age: 30,
  city: "大阪"
};

// ブラケット記法で取り出す
console.log(user["city"]); // "大阪"

// 変数を使って取り出す（これがブラケット記法の強み！）
const keyName = "name";
console.log(user[keyName]); // "山田太郎"

実行結果

大阪
山田太郎

基本的には、コードがスッキリする「ドット記法」を使い、ユーザーの入力によって取り出す項目を変えたい場合や、キーの名前にハイフンなどが含まれる特殊な場合のみ「ブラケット記法」を使う、と覚えておけば完璧です。

4. Objectコンストラクタでの作成方法

4. Objectコンストラクタでの作成方法

JavaScriptには、リテラル表記以外にもObjectコンストラクタという機能を使ってオブジェクトを作る方法があります。これは new Object() という命令を使い、「これから新しいオブジェクト（箱）を作ります」と宣言する書き方です。

リテラル表記が「中身を最初から決めて作る」のに対し、Objectコンストラクタは「まず空の箱を用意して、あとから中身を一つずつ丁寧に入れていく」という手順を踏みます。プログラムの途中で、条件に合わせて少しずつデータを追加したい場合に役立ちます。

例えば、空のプロフィール帳を用意して、あとから「名前」や「年齢」を書き込んでいくシーンをイメージしてみましょう。

// 1. まずは「空のオブジェクト（箱）」を作成する
const user2 = new Object();

// 2. 作成したオブジェクトに、プロパティ（情報）を一つずつ追加する
user2.name = "佐藤花子"; // 名前を追加
user2.age = 28;         // 年齢を追加
user2.city = "東京";     // 住んでいる場所を追加

// コンソールで中身を確認
console.log(user2);

実行結果

{ name: "佐藤花子", age: 28, city: "東京" }

この書き方では、new Object() で生成した直後の user2 は中身が何もない「空っぽ」の状態です。そのあと、.（ドット） を使って user2.name のように指定することで、後出しで情報をセットできるのが最大の特徴です。

初心者の方は、基本的にはシンプルな「リテラル表記」を使いつつ、システムが自動でデータを後から付け加えるような高度な処理が必要になった際に、この「Objectコンストラクタ」という選択肢があることを思い出せるようになればバッチリです。

5. リテラル表記とObjectコンストラクタの違い

5. リテラル表記とObjectコンストラクタの違い

JavaScriptでオブジェクトを作成する際、どちらの方法を使っても最終的な結果は同じですが、「書きやすさ」と「実行スピード」に明確な違いがあります。2026年現在のモダンな開発現場では、特別な理由がない限り「リテラル表記」が推奨されています。

どちらを使うべき？判断のポイント

未経験者の方が迷ったときは、「リテラル表記」一択と考えて問題ありません。なぜなら、リテラル表記はコードが読みやすくなるだけでなく、Googleなどの検索エンジンや開発ツールにとっても、データの構造を解析しやすい「クリーンなコード」とみなされるからです。

例えば、同じ「リンゴ」のデータを作る場合を比較してみましょう。

// 推奨：リテラル表記（直感的で分かりやすい）
const apple = { color: "赤", price: 150 };

// 非推奨：Objectコンストラクタ（手順が多く複雑）
const apple2 = new Object();
apple2.color = "赤";
apple2.price = 150;

リテラル表記は「中身が何であるか」を宣言と同時に定義するため、後からコードを見返したときに、そのオブジェクトがどんな役割を持っているのかが瞬時に理解できます。一方でObjectコンストラクタは、プログラミングが進むにつれて中身がどう変化するかを追う必要があり、管理が少し大変になります。

このように、「読みやすさ＝ミスの少なさ」に直結するため、まずはリテラル表記を使いこなし、エンジニアとしての基礎を固めていきましょう。

6. オブジェクトの初期状態を空にして作る方法

6. オブジェクトの初期状態を空にして作る方法

プログラミングをしていると、「最初は中身が分からないけれど、後からデータを追加したい」という場面がよくあります。例えば、ユーザーがアンケートに入力した内容を順番に保存していくようなケースです。JavaScriptでは、まず「空の箱（空のオブジェクト）」だけを準備しておき、必要なタイミングで情報を入れることができます。

方法1：リテラル表記で空のオブジェクトを作る（推奨）

最もシンプルで、実際の開発現場でも多用される方法です。波括弧 { } の中身を空にして宣言します。直感的で分かりやすく、初心者の方におすすめです。

// 1. まずは空のオブジェクト（空の箱）を作る
const myAlbum = {};

// 2. あとから好きなタイミングで情報を追加する
myAlbum.title = "夏の思い出";
myAlbum.count = 24;

console.log(myAlbum);

実行結果

{ title: "夏の思い出", count: 24 }

方法2：Objectコンストラクタで空のオブジェクトを作る

new Object() という命令を使います。意味としては「新しいオブジェクトを生成せよ」という指示になり、リテラル表記と同じ結果が得られます。

// 1. 明示的に新しいオブジェクトを生成する
const userStatus = new Object();

// 2. プロパティ（情報）を追加していく
userStatus.isOnline = true;
userStatus.lastLogin = "2026-02-05";

console.log(userStatus);

実行結果

{ isOnline: true, lastLogin: "2026-02-05" }

どちらの方法を使っても、作成した後に オブジェクト名.新しいキー = 値 と書くだけで、自由自在にデータを拡張できます。まずは記述が簡単なリテラル表記 {} を使いこなし、データの整理に慣れていきましょう。

7. オブジェクトを使うと何が便利なの？

7. オブジェクトを使うと何が便利なの？

たとえば、ユーザーの情報、商品の詳細、天気のデータなど、名前ごとにデータを分類したいときにとても役立ちます。

以下のように、わかりやすくデータを整理できるのがオブジェクトの魅力です。

const book = {
  title: "JavaScript入門",
  author: "中村一郎",
  pages: 300
};

このようにオブジェクトを活用すれば、データを「意味のあるかたまり」として扱えます。

まとめ

まとめ

ここまでJavaScriptにおけるオブジェクトの作成方法について詳しく解説してきました。プログラムを書く上で、データを整理して管理することは非常に重要です。今回学んだ「リテラル表記」と「Objectコンストラクタ」は、どちらもオブジェクトを生成するための基本的な手法ですが、現場で開発を行う際にはその使い分けがポイントになります。

オブジェクトの基本構造をおさらい

JavaScriptのオブジェクトは、キー（名前）と値（データ）のペアを保持するデータ構造です。これをプロパティと呼びます。プロパティを適切に設定することで、単なる変数の羅列よりも直感的で構造的なコードを書くことができるようになります。

リテラル表記のメリットと書き方

リテラル表記は、波括弧 {} を使用して記述する方法です。この手法は非常にシンプルであり、宣言と同時に初期値を設定できるため、ソースコードの可読性が飛躍的に向上します。現代のフロントエンド開発（ReactやVue.jsなど）においても、特別な理由がない限りはこのリテラル表記が推奨されています。

const smartphone = {
  brand: "Apple",
  model: "iPhone 15",
  storage: "256GB",
  isAvailable: true
};

このように、複数の属性を持つ情報を一つの変数 smartphone として定義することで、データの関連性が一目でわかります。実行結果を確認すると、各プロパティにアクセスして値を取得できることがわかります。

Apple
iPhone 15

Objectコンストラクタの活用シーン

一方で、new Object() を用いるObjectコンストラクタは、明示的にオブジェクトのインスタンスを生成する手法です。リテラル表記に比べると記述量は増えますが、プログラムの実行過程で条件に応じてプロパティを動的に追加していきたい場合や、古いライブラリとの互換性を保つ必要がある場合などに利用されます。

const laptop = new Object();
laptop.maker = "DELL";
laptop.cpu = "Core i7";
laptop.ram = "16GB";

このように空のオブジェクトを生成した後に、ドット記法を用いて後から情報を継ぎ足していくことが可能です。どちらの方法を使っても、最終的に生成されるオブジェクトの型や挙動に大きな違いはありませんが、チーム開発や保守性の観点からは、記述が簡潔なリテラル表記を優先して使用するのが一般的です。

プロパティの操作と柔軟なデータ管理

オブジェクトを作成した後は、その中身を更新したり削除したりすることも自由自在です。既存のプロパティに新しい値を代入すれば上書きされ、新しいキーを指定すれば新しい項目が増えます。

const member = {
  id: 101,
  rank: "Gold"
};

// 値の更新
member.rank = "Platinum";

// 値の追加
member.point = 5000;

console.log(member);

実行結果は以下のようになります。

{ id: 101, rank: 'Platinum', point: 5000 }

JavaScriptでは、このように柔軟なデータ操作が可能です。特にJSON形式のデータを扱うAPI通信などでは、オブジェクトの知識が不可欠です。リテラル表記とコンストラクタ、それぞれの特徴を理解して、状況に応じた最適なコーディングを心がけましょう。