JavaScriptのオブジェクトとは？実例付きで丁寧に解説

（最終更新月：2023年11月）

✔以下のような方に向けて書かれています

✔当記事から学べること

• JavaScriptオブジェクトの基本概念
• JavaScriptオブジェクトの書き方やその具体的な利用方法
• JavaScriptオブジェクトを用いた実践的なケーススタディ

当記事では、JavaScriptオブジェクトの基本理論から、その操作法、応用まで、実例を通じて詳細に解説します。

どうぞ最後までお読みいただき、JavaScriptオブジェクトの可能性を最大限に引き出すための知識を手に入れてください。

JavaScriptとオブジェクトとは？

こちらでは、JavaScriptとオブジェクトの基本についてお伝えしていきます。

JavaScriptとオブジェクトの理解を深めることで、効率的なコード作成に役立つでしょう。

• JavaScriptの基本
• オブジェクトを理解する

JavaScriptの基本

JavaScriptは、ウェブブラウザで動作するスクリプト言語です。

HTMLとCSSと組み合わせて、ウェブページに動的な機能を追加できます。

例えば以下のようなコードで、ブラウザに”Hello, World!”というメッセージを表示します。

alert("Hello, World!");

オブジェクトを理解する

オブジェクトは、キーと値のペアの集合です。

nameとageというキーにそれぞれ”John”と30という値を持つオブジェクトを作成します。

let person = {name: "John", age: 30};

オブジェクトの生成と利用

こちらでは、オブジェクトの生成方法とその利用方法について詳しく説明します。

オブジェクトの適切な生成と利用を学ぶことで、データ管理がスムーズになるでしょう。

• 清潔なオブジェクトの作り方
• 初めてのオブジェクト： {}を使用した例
• コンストラクタを利用したオブジェクト生成

清潔なオブジェクトの作り方

オブジェクトを作成する際には、{}というリテラルを使用するのが一般的です。

この方法で作成されるオブジェクトは、プロトタイプチェーンが存在しないため、清潔で安全。

let obj = {};

初めてのオブジェクト： {}を使用した例

オブジェクトリテラルを使用して、簡単にオブジェクトを作成できます。

例えば以下のコードで、車に関する情報を持つオブジェクトを作成可能です。

let car = {brand: "Toyota", model: "Corolla", year: 2020};

コンストラクタを利用したオブジェクト生成

コンストラクタ関数を使用して、オブジェクトを生成できます。

以下は、Personというコンストラクタ関数を定義し、新しいオブジェクトを生成する例です。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
let takashi = new Person("Takashi", 30);

オブジェクトのプロパティについて

こちらでは、オブジェクトのプロパティのアクセス方法や管理方法について詳しく説明します。

プロパティの適切な管理を学ぶことで、データの取り扱いが容易になるでしょう。

• ドット記法：基本のプロパティアクセス法
• ブラケット記法：動的なプロパティアクセス法
• プロパティの追加と削除
• JavaScriptオブジェクトのプロパティ管理

ドット記法：基本のプロパティアクセス法

オブジェクトのプロパティにアクセスする基本的な方法は、ドット記法を使用すること。

let person = {name: "Takashi", age: 30};

上のようなというオブジェクトがある場合、以下のようにすることで、”name”プロパティの値を取得できます。

person.name//Takashi

ブラケット記法：動的なプロパティアクセス法

ブラケット記法は、動的にプロパティ名を指定してアクセスする場合に使用します。

let key = "name"; 
let value = person[key];

変数keyの値に基づいてプロパティの値を取得します。

プロパティの追加と削除

オブジェクトに新しいプロパティを追加するには、単純に新しいキーと値を指定します。

person.job = "Engineer";

プロパティを削除するには、deleteキーワードです。

delete person.job;

JavaScriptオブジェクトのプロパティ管理

オブジェクトのプロパティは、`Object.keys(obj)やObject.values(obj)などのメソッドを使用し、一覧表示や値の取得が可能です。

Object.freeze(obj)`を使用すると、オブジェクトのプロパティの変更を防げます。

‘this’キーワードとは？

‘this’キーワードは、現在の実行コンテキストに関連するオブジェクトを参照するもの。

オブジェクトのメソッド内で’this’を使用すると、そのメソッドを持つオブジェクトを指します。

以下の例では、personオブジェクトのintroduceメソッド内で’this’を使用しています。

let person = {
  name: "Satoshi",
  introduce: function() {
    console.log("Hello, my name is " + this.name);
  }
};
person.introduce(); // "Hello, my name is Satoshi"

オブジェクトメソッド入門：定義と使い方

こちらでは、オブジェクトのメソッドの定義方法や使い方について詳しく説明します。

メソッドの適切な定義と利用を学ぶことで、オブジェクト指向のコード作成が効果的になるでしょう。

• toStringメソッドについて
• オブジェクトやメソッドが存在するかを確認する

toStringメソッドについて

toStringメソッドは、オブジェクトを文字列形式に変換するためのメソッドです。

デフォルトでは、[object Object]という文字列を返しますが、オーバーライドして独自の文字列を返せます。

例：

let person = {
  name: "Yuta",
  age: 30,
  toString: function() {
    return "Name: " + this.name + ", Age: " + this.age;
  }
};
console.log(person.toString()); // "Name: Yuta, Age: 30"

オブジェクトやメソッドが存在するかを確認する

オブジェクトやメソッドの存在確認には、typeofやinキーワードを使用します。

if ("name" in person)

personオブジェクトにnameプロパティが存在するかどうかを確認するものです。

ES2015以降のオブジェクトに対する便利な機能

こちらでは、ES2015以降に追加されたオブジェクトに関する便利な機能について詳しく説明します。

新しい機能の理解を深めることで、より効率的なコード作成が可能になるでしょう。

• 分割代入：オブジェクトの値を簡単に取得
• Optional chaining：サクッとnullチェック
• Objectの静的メソッド活用：オブジェクトの複製とマージ

分割代入：オブジェクトの値を簡単に取得

分割代入を使用すると、オブジェクトのプロパティを簡単に変数に代入できます。

以下のコードでは、personオブジェクトのnameとageプロパティの値をそれぞれnとa変数に代入しています。

let person = {name: "John", age: 30};
let {name: n, age: a} = person;
console.log(n, a); // "John" 30

Optional chaining：サクッとnullチェック

Optional chainingを使用すると、オブジェクトのプロパティやメソッドが存在するかどうかを簡単に確認できます。

以下は、personオブジェクトが存在し、nameプロパティも存在する場合にのみ、その値をname変数に代入する例です。

let name = person?.name;

Objectの静的メソッド活用：オブジェクトの複製とマージ

Object.assign()メソッドを使用すると、複数のオブジェクトをマージしたり、オブジェクトのシャローコピーを作成できます。

以下のコードでは、obj1とobj2のプロパティをマージして、新しいオブジェクトを作成可能です。

let obj1 = {a: 1, b: 2};
let obj2 = {b: 3, c: 4};
let merged = Object.assign({}, obj1, obj2);
console.log(merged); // {a: 1, b: 3, c: 4}

まとめ：オブジェクトとJavaScript

当記事では、JavaScriptとオブジェクトの基本についてご覧いただきました。

オブジェクトの理解を深めることで、JavaScriptのコード作成がより効果的になるでしょう。

実は、JavaScriptを使用している皆さんは、意識していないかもしれませんが、オブジェクトを頻繁に使用しています。

DOM要素の操作やイベントの取り扱い、外部APIとの通信など、さまざまな場面でオブジェクトが活躍しています。

ぜひその使用を意識して、知識を深めていってください。