JavaScriptのオブジェクト入門【初心者向け】

JavaScript オブジェクトとは？

配列が「同じ種類のデータのリスト」なら、オブジェクト（object）は「関連するデータをまとめた箱」です。

たとえば、1人のユーザー情報（名前・年齢・メール）をまとめて管理したいとき、オブジェクトを使います。

// 変数を3つ使う場合
const name  = '田中';
const age   = 15;
const email = '[email protected]';

// オブジェクトなら1つにまとめられる
const user = {
  name:  '田中',
  age:   15,
  email: '[email protected]'
};

オブジェクトの作り方

オブジェクトは （波かっこ）の中に キー: 値 の形で書きます。

const user = {
  name:  '田中太郎',
  age:   15,
  grade: '中学3年生',
  isActive: true
};

キー（key）はプロパティ名、値（value）はそのデータです。

プロパティの取得・変更・追加

const user = { name: '田中', age: 15 };

// 取得（ドット記法）
console.log(user.name); // 田中
console.log(user.age);  // 15

// 取得（ブラケット記法）
console.log(user['name']); // 田中

// 変更
user.age = 16;
console.log(user.age); // 16

// 追加
user.email = '[email protected]';
console.log(user.email); // [email protected]

🔥 関数入門で実践してみましょう。

メソッド：オブジェクトの中に関数を入れる

オブジェクトの値に関数を入れることができます。これを メソッド といいます。

const user = {
  name: '田中',
  greet: function() {
    console.log('こんにちは、' + this.name + 'です！');
  }
};

user.greet(); // こんにちは、田中です！

💡 文字列操作入門で基礎を確認できます。

オブジェクトの配列

複数のオブジェクトを配列にまとめると、ユーザー一覧などのデータを管理しやすくなります。

const users = [
  { name: '田中', age: 15 },
  { name: '鈴木', age: 14 },
  { name: '佐藤', age: 16 }
];

users.forEach(function(user) {
  console.log(user.name + '：' + user.age + '歳');
});

🔗 あわせてPromise入門もチェックしてみましょう。

オブジェクトの実践的な使い方

オブジェクトを使った実践的な例を紹介します。

使い方1：ユーザー情報をまとめる

名前、年齢、メールアドレスなど、1人のユーザーに関する情報をオブジェクトにまとめます。バラバラの変数で管理するよりも、「この情報はこのユーザーのもの」とわかりやすくなります。

使い方2：設定値をまとめる

ゲームの設定（難易度、音量、画面サイズなど）をオブジェクトにまとめます。設定を変更するときも、オブジェクトのプロパティを書き換えるだけで済みます。

使い方3：APIのレスポンスを扱う

ウェブサービスからデータを取得すると、多くの場合オブジェクト形式（JSON）で返ってきます。天気予報のデータなら「temperature: 25, weather: "晴れ"」のような形です。オブジェクトの扱いに慣れておくと、外部データの処理がスムーズになります。

オブジェクトの操作テクニック

プロパティの追加と削除

オブジェクトを作ったあとでも、プロパティを追加できます。「オブジェクト名.新しいプロパティ名 = 値」と書くだけです。削除したいときはdelete演算子を使います。

プロパティの存在確認

「プロパティ名 in オブジェクト名」と書くと、そのプロパティが存在するかどうかをtrue/falseで確認できます。存在しないプロパティにアクセスするとundefinedが返るので、事前に確認しておくと安全です。

プロパティの一覧を取得する

Object.keys()を使うと、オブジェクトのプロパティ名を配列で取得できます。Object.values()を使うと、値だけを配列で取得できます。ループと組み合わせて、すべてのプロパティを処理するときに便利です。

オブジェクトでよくあるミス

ミス1：ドット記法とブラケット記法の使い分け

プロパティにアクセスする方法は2つあります。「オブジェクト.プロパティ名」（ドット記法）と「オブジェクト["プロパティ名"]」（ブラケット記法）です。プロパティ名に変数を使いたいときは、ブラケット記法を使う必要があります。

ミス2：オブジェクトのコピーが参照になる

オブジェクトを別の変数に代入すると、コピーではなく「同じオブジェクトを指す参照」になります。片方を変更すると、もう片方も変わってしまいます。独立したコピーを作りたいときは、スプレッド構文（{...元のオブジェクト}）を使いましょう。

ミス3：プロパティ名のスペルミス

存在しないプロパティにアクセスしてもエラーにはなりません。undefinedが返るだけです。「値がundefinedになる」というときは、プロパティ名のスペルを確認しましょう。

オブジェクトはJavaScriptの中心的なデータ構造です。配列と並んで最もよく使います。最初は「関連するデータをまとめる箱」として使うことから始めましょう。慣れてきたらメソッドを追加して、データと処理をセットにする書き方にも挑戦してみてください。オブジェクトを使いこなせれば、複雑なアプリケーションも整理して書けるようになります。

まとめ

JavaScriptの基礎はJavaScript入門で復習できます。

あわせて読みたい記事

• JavaScriptとは？初心者向け解説 — JS基礎に戻る
• JavaScript配列入門 — 配列との使い分け
• JavaScript変数入門 — 変数の基本
• JavaScript関数入門 — メソッドと関数の関係
• JavaScript fetch入門 — APIレスポンスのJSONオブジェクト
• JavaScriptループ入門 — オブジェクトのループ処理