JavaScriptのオブジェクト

ITエンジニアやプログラマを目指して学習されている方であれば、「オブジェクト指向」というワードを聞いたことがあるかと思います。

オブジェクト指向とはプログラムの設計・開発手法のひとつなのですが、「オブジェクト」とは何なのかをある程度分かっていないと理解が難しくなります。

そこで本記事では、JavaScriptのオブジェクトについての基本的な内容を説明していきます。

オブジェクトとは

オブジェクト（object）とは、「モノ」という意味です。
その文字通り、JavaScriptに登場するモノは、ほとんどがオブジェクトであると言えます。
具体的には、文字列や配列、関数などが該当します。

JavaScriptのオブジェクトを文章で説明するならば、「関連する属性（情報）と機能（動作）の集合体」です。 
関連する属性（情報）をプロパティと呼び、機能（動作）をメソッドと呼びます。

新たに学んだ用語を使って先ほどの文章を更新すると、次のようになります。

オブジェクトを作成する

まずは空のオブジェクトを作成してみます。

{}

👆JavaScriptのオブジェクトは、このように波カッコで括って作成します。

オブジェクトにプロパティを追加する

中身が空のままでは使い道がないので、手始めにプロパティをひとつ追加してみましょう。

{ name: "Luke" }

👆オブジェクトのプロパティは、このようにプロパティ名と値をコロン「:」で対にして定義していきます。

「年齢」のプロパティも追加してみます。

{ name: "Luke", age: 20 }

👆プロパティやメソッドが複数ある場合は、このようにカンマ「,」で区切ります。

しかし、このままプロパティやメソッドが追加されていくと、どんどん横長になって見づらくなるため、次のように記述することでオブジェクトを見やすくできます。

{
  name: "Luke",
  age: 20
}

それでは、作成したオブジェクトをコンソールに表示させてみましょう。

// オブジェクトを定数「obj」に代入
const obj = {
  name: "Luke",
  age: 20
};

console.log( obj );
console.log( obj.name );

▶ {name: 'Luke', age: 20}
> Luke

オブジェクトにメソッドを追加する

作成したオブジェクトに、メソッドを追加してみましょう。

今回のオブジェクトには、nameとageの2つのプロパティがあるので、それらを使って自己紹介するメソッドです。

// オブジェクトを定数「obj」に代入
const obj = {
  name: "Luke",
  age: 20,
  introduce: function() {
    console.log(`My name is ${this.name}.`);
    console.log(`I am ${this.age} years old.`);
  }
};

// オブジェクトのメソッドを呼び出している
obj.introduce();

> My name is Luke.
> I am 20 years old.

プロパティへのアクセス方法

オブジェクトのプロパティやメソッドにはドット「.」記号を使ってアクセスできます。これを「ドット記法」と呼びます。

プロパティへのアクセスは「ドット記法」以外にもうひとつ「ブラケット記法」があります。

// オブジェクトを定数「obj」に代入
const obj = {
  name: "Luke",
  age: 20,
  introduce: function() {
    console.log(`My name is ${this.name}.`);
    console.log(`I am ${this.age} years old.`);
  }
};

// ドット記法でのアクセス
console.log( obj.name );
// ブラケット記法でのアクセス
console.log( obj[name] );

プロパティの入れ子（ネスト）

オブジェクトのプロパティは入れ子（ネスト）することができます。

次のサンプルは、nameプロパティが、ネストしたオブジェクトを持っている例です。

// オブジェクトを定数「obj」に代入
const obj = {
  name: {
    firstName: "Luke",
    familyName: "Skywalker"
  }
};

console.log( obj.name );

オブジェクトのメンバー

オブジェクトが持つプロパティやメソッドのことを「オブジェクトのメンバー」と言います。

この項では、オブジェクトのメンバーを更新する方法と、新たなメンバーを追加する方法を学びます。

メンバーの更新

オブジェクトメンバーの更新は、ドット記法、ブラケット記法ともに使用可能です。

分かりやすくするため、サンプルをもう少し簡潔なプログラムに戻します。

// オブジェクトを定数「obj」に代入
const obj = {
  age: 20
};

// ドット記法で「age」を20から21に更新
obj.age = 21;
console.log( obj.age);

// ブラケット記法で「age」を21から22に更新
obj["age"] = 22;
console.log( obj.age);

> 21
> 22

新規メンバーの追加

オブジェクトに新たなメンバーを追加するには、ブラケット記法を使用します。

// オブジェクトを定数「obj」に代入
const obj = {
  age: 20
};

// ブラケット記法で新規メンバー「newMember」を追加
obj["newMember"] = 1;
console.log( obj["newMember"]);

> 1

オブジェクトのスプレッド構文

JavaScriptのスプレッド構文（spread syntax）は、配列やオブジェクトの要素を展開するための便利な機能で、EcmaScript 2015（ES6）で導入されました。

スプレッド構文は、配列変数やオブジェクト変数の前にドット3つ（…）を記述します。

この項ではオブジェクトでのスプレッド構文について、様々な使い方をサンプルプログラムを用いて紹介します。

スプレッド構文によるオブジェクトのコピー

オブジェクトをコピーする際に、Object.assign()の代わりにスプレッド構文を使用すると、より簡潔に記述できます。

この方法では、新しいオブジェクトobj2が作成され、obj1のプロパティがコピーされます。
ただし、浅いコピー（shallow copy）となるため、ネストされたオブジェクトの場合は注意が必要です。

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };

console.log(obj2);

> { a: 1, b: 2 }

スプレッド構文によるオブジェクトの結合（マージ）

複数のオブジェクトを結合する場合にもスプレッド構文が便利です。

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj);

> { a: 1, b: 3, c: 4 }

スプレッド構文によるプロパティの追加・上書き

const obj = { a: 1, b: 2 };
const updatedObj = { ...obj, b: 42, c: 3 };

console.log(updatedObj);

> { a: 1, b: 42, c: 3 }

まとめ

本記事では、JavaScriptのオブジェクトについて、以下の基本的な内容を学習しました。

• オブジェクトの作成
• オブジェクトのプロパティへのアクセス
• オブジェクトのメソッドへのアクセス
• オブジェクトの変更
  • オブジェクトメンバーの更新
  • 新規メンバーの追加

これらの知識は、オブジェクト指向を理解するための土台となります。

本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。

最後までお読みいただき、ありがとうございます。

『詳説 JavaScript』メニューに戻る