JavaScriptを学習するうえで避けて通れないのが「オブジェクト」の概念です。
オブジェクトは、関連するデータと機能をひとつにまとめて扱うことができる便利な入れ物のようなものです。
この記事では、JavaScriptにおけるオブジェクトの基本的な使い方について、初心者にもわかりやすく丁寧に解説していきます。
最後まで読めば、オブジェクトの作り方からプロパティやメソッドの使い方、さらには配列やJSONとの関係性まで理解できるはずです。
- 未経験からWebエンジニアとして転職成功（年収 30% アップ）
- 現役のフルスタックエンジニアとして活躍中
- 開発チームリーダーとして複数プロジェクトをリード
- 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
オブジェクトとは何か
オブジェクトは、複数のデータ（プロパティ）と機能（メソッド）をひとまとめにしたものです。
例えば、ユーザーの情報を表すオブジェクトは以下のように定義できます。
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の教科書まとめ
ここまで、JavaScriptのオブジェクトについて基本的な使い方を見てきました。
オブジェクトは関連するデータをまとめるのに最適な方法で、プログラムの見通しを良くしてくれます。プロパティとメソッド、作成方法、操作方法などをマスターすれば、より高度で実用的なプログラムが組めるようになるでしょう。
また、配列やJSONとの連携によって、オブジェクトの活用の幅はさらに広がります。今後もっと深く理解していくために、学んだ知識を実際のコーディングの中で使っていくことが大切です。
JavaScript を効率よく勉強するなら
この記事を読んでいる方は JavaScript の勉強を頑張っていることと思います！
しかし、JavaScript は学習範囲が広く、知識不足で苦労している方もいるかもしれませんね。
そんなときは本やプログラミングスクールを活用し、体系的な学習を検討してみてはいかがでしょうか？
