JavaScriptにおけるオブジェクト(object)の基本的な使い方

2024-07-14

当サイトでは一部リンクに広告が含まれています

JavaScriptを学習するうえで避けて通れないのが「オブジェクト」の概念です。

オブジェクトは、関連するデータと機能をひとつにまとめて扱うことができる便利な入れ物のようなものです。

この記事では、JavaScriptにおけるオブジェクトの基本的な使い方について、初心者にもわかりやすく丁寧に解説していきます。

最後まで読めば、オブジェクトの作り方からプロパティやメソッドの使い方、さらには配列やJSONとの関係性まで理解できるはずです。

この記事を書いた人

現役のフルスタックエンジニアとして活躍中
開発チームリーダーとして複数プロジェクトをリード
副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
プログラミングスクールのカリキュラム執筆経験あり

オブジェクトとは何か

オブジェクトは、複数のデータ（プロパティ）と機能（メソッド）をひとまとめにしたものです。
例えば、ユーザーの情報を表すオブジェクトは以下のように定義できます。

const user = {
  name: '鈴木太郎',
  age: 30,
  greet: function() {
    console.log('こんにちは！ ' + this.name + 'です。');
  }
};

このオブジェクトには、nameとageというプロパティと、greetというメソッドが定義されています。オブジェクトを使うことで、ユーザーに関する複数の情報をバラバラに管理するのではなく、構造化されたひとかたまりのデータとして扱えるようになります。

プロパティとメソッド

オブジェクトを構成する要素には、大きく分けて「プロパティ」と「メソッド」の2種類があります。

プロパティ

プロパティは「キー: 値」のペアで表現され、オブジェクトに関連づけられたデータを保持します。先の例でいうと、nameとageがプロパティです。

プロパティの値には、文字列や数値、真偽値、配列、他のオブジェクトなど、さまざまな型のデータを設定できます。プロパティへのアクセスは、ドット記法(user.name)やブラケット記法(user['name'])を使って行います。

メソッド

メソッドは、オブジェクトに関連づけられた関数のことを指します。メソッドを呼び出すと、オブジェクトに対して何らかの処理を実行します。先の例でいうと、greetがメソッドです。

thisというキーワードを使うと、メソッドの中からオブジェクト自身のプロパティにアクセスできます。上記のgreetメソッドでは、this.nameとすることで、そのオブジェクトのnameプロパティを参照しています。

オブジェクトの作成方法

オブジェクトを作成する基本的な方法は主に2つあります。「オブジェクトリテラル」と「コンストラクター関数」です。

オブジェクトリテラル

オブジェクトリテラルは、{}（中括弧）を使ってオブジェクトを作成する方法です。プロパティやメソッドは、{}の中に「キー: 値」の形式で定義します。

const book = {
  title: 'JavaScriptの教科書',
  author: '山田太郎',
  price: 2500,
  buyDate: '2023-05-10'
};

コンストラクター関数

コンストラクター関数は、同じ形式のオブジェクトを複数生成するのに便利です。関数の中でthisキーワードを使ってプロパティやメソッドを定義し、new演算子を使って新しいオブジェクトを作ります。

function Book(title, author, price) {
  this.title = title;
  this.author = author;
  this.price = price;
}

const book1 = new Book('JavaScript入門', '佐藤一郎', 1800);
const book2 = new Book('JavaScriptの極意', '高橋二郎', 2800);

オブジェクトの操作

オブジェクトを操作する主なメソッドとして、Object.keys()、Object.values()、Object.entries()などがあります。それぞれ、オブジェクトからキーの配列、値の配列、キーと値のペアの配列を取得します。

const book = {
  title: 'JavaScriptの教科書',
  author: '山田太郎',
  price: 2500
};

console.log(Object.keys(book));    // ["title", "author", "price"]
console.log(Object.values(book));  // ["JavaScriptの教科書", "山田太郎", 2500]
console.log(Object.entries(book)); // [["title", "JavaScriptの教科書"], ["author", "山田太郎"], ["price", 2500]]

オブジェクトと配列

オブジェクトの配列を作ると、複数のオブジェクトをまとめて扱うことができて便利です。

const books = [
  { title: 'JavaScript入門', author: '佐藤一郎', price: 1800 },
  { title: 'JavaScriptの極意', author: '高橋二郎', price: 2800 },
  { title: 'JavaScriptマスター', author: '田中三郎', price: 3200 }
];

for (const book of books) {
  console.log(`${book.title}（${book.author} 著）${book.price}円`);
}

上記のコードは、書籍の情報を持つオブジェクトの配列から、各書籍の情報を整形して出力する例です。このように、オブジェクトと配列を組み合わせると、データを構造化してプログラムの処理を分かりやすくできます。

オブジェクトとJSON

JSONはJavaScriptのオブジェクト記法から派生したデータフォーマットで、言語に依存しないデータのやり取りに使われます。JavaScriptではオブジェクトとJSONの変換が簡単にできます。

JSON.stringify()でオブジェクトをJSON文字列に変換し、JSON.parse()でJSON文字列をオブジェクトに変換できます。サーバーとのデータのやり取りなどで使われることが多いです。

const book = {
  title: 'JavaScriptの教科書',
  author: '山田太郎',
  price: 2500
};

const bookJson = JSON.stringify(book);
console.log(bookJson); // {"title":"JavaScriptの教科書","author":"山田太郎","price":2500}

const bookObj = JSON.parse(bookJson);
console.log(bookObj.title); // JavaScriptの教科書