作成日: 2023/04/21
0

JavaScriptのオブジェクト

JavaScriptは、オブジェクト指向プログラミング言語です。オブジェクト指向プログラミングとは、データとそれに関連するメソッドを、個別のオブジェクトにまとめることで、プログラムの再利用性、保守性、拡張性を高めるプログラミング手法のことです。JavaScriptでは、オブジェクトは基本的なデータ型の1つであり、他のデータ型と同様にリテラルで作成することができます。ここでは、JavaScriptのオブジェクトについて、よく使われる機能について解説します。

オブジェクトリテラル

JavaScriptのオブジェクトは、中括弧{}を使ってオブジェクトリテラルとして作成することができます。オブジェクトリテラルは、キーと値のペアを中括弧で囲んで表現されます。

const student = { name: "山田太郎", age: 20, score: [80, 70, 90] };

上記の例では、studentという名前のオブジェクトを作成しています。このオブジェクトには、nameagescoreという3つのキーがあります。それぞれの値は、"山田太郎"20[80, 70, 90]という値が設定されています。

オブジェクトリテラルを使えば、簡単にオブジェクトを作成することができます。また、オブジェクトの値を取り出す場合は、「.」または「[]」を使います。

console.log(student.name); // 結果: 山田太郎
console.log(student['age']); // 結果: 20

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

JavaScriptのオブジェクトには、プロパティがあります。プロパティは、オブジェクトに含まれる変数のことで、キーと値のペアで表現されます。オブジェクトのプロパティには、以下のような種類があります。

データプロパティ

オブジェクトのプロパティには、データプロパティとアクセサプロパティがあります。データプロパティは、キーと値のペアがそのまま代入されたものです。以下は、データプロパティの例です。

const student = {
  name: "山田太郎",
  age: 20,
  score: [80, 70, 90],
  totalScore: 0,
  get total() {
    return this.totalScore;
  },
  set total(value) {
    this.totalScore = value;
  },
};

console.log(student.name); // 結果: 山田太郎
console.log(student.age); // 結果: 20
console.log(student.score); // 結果: [80, 70, 90]

上記の例では、nameagescoreというデータプロパティがあります。データプロパティには、通常、値を再代入できます。

アクセサプロパティ

アクセサプロパティは、JavaScriptオブジェクトのプロパティのうち、ゲッターやセッターを実行するプロパティです。アクセサプロパティには、ゲッター、セッター、両方を持つプロパティがあります。

const student = {
  name: "山田太郎",
  age: 20,
  score: [80, 70, 90],
  totalScore: 0,
  get total() {
    return this.totalScore;
  },
  set total(value) {
    this.totalScore = value;
  },
};

console.log(student.total); // 結果: 0
student.total = 240;
console.log(student.total); // 結果: 240

上記の例では、totalというアクセサプロパティを定義しています。totalプロパティのゲッターでは、totalScoreプロパティを返します。totalプロパティのセッターでは、totalScoreプロパティに引数として渡された値を設定します。

オブジェクトのメソッド

オブジェクトは、データとメソッドの集まりです。JavaScriptのオブジェクトは、オブジェクトリテラルまたはコンストラクター関数で作成できます。オブジェクトを作成した後、新しいメソッドをオブジェクトに追加することができます。

オブジェクトにメソッドを追加するためには、以下のようにします。

const student = {
  name: "山田太郎",
  age: 20,
  score: [80, 70, 90],
  printScore: function () {
    console.log(this.score.join(", "));
  },
};

student.printScore(); // 結果: 80, 70, 90

上記の例では、printScoreというメソッドをオブジェクトに追加しています。printScoreメソッドは、scoreプロパティをコンマで区切った文字列を返します。

オブジェクトの継承

JavaScriptには、継承機能があります。継承を使うことで、共通の機能を持つオブジェクトを簡単に作成できます。JavaScriptでは、継承をするオブジェクトを親オブジェクト、継承されるオブジェクトを子オブジェクトと呼びます。

継承をする場合、子オブジェクトには新しいプロパティやメソッドを追加することができます。また、子オブジェクトは、親オブジェクトのプロパティやメソッドを使用することができます。

// 親オブジェクト
const Person = {
  name: "",
  age: "",
  hello: function () {
    console.log(`こんにちは、私は${this.name}です。`);
  },
};

// 子オブジェクト
const student = Object.create(Person);
student.name = "山田太郎";
student.age = 20;
student.grade = "B";

student.hello(); // 結果: こんにちは、私は山田太郎です。
console.log(student.grade); // 結果: B

上記の例では、Personという親オブジェクトを定義しています。Personオブジェクトには、nameagehelloというプロパティがあります。Studentオブジェクトは、Object.createメソッドを使って、Personオブジェクトを継承しています。また、Studentオブジェクトには、gradeというプロパティが追加されています。

結論

JavaScriptのオブジェクトは、オブジェクト指向プログラミングの基本的な考え方に基づいています。オブジェクトは、プロパティとメソッドのグループです。プロパティは、データプロパティとアクセサプロパティの2種類があります。JavaScriptのオブジェクトは、継承を使って派生オブジェクトを作成することができます。オブジェクトの継承は、コードの再利用性と保守性を高めるのに役立ちます。

参考


フルスタックエンジニア。徒然なるままに記事を投稿していきます。日々学習。