はじめに

JavaScriptにおけるオブジェクト指向プログラミングに密接に関連している用語とそれぞれのつながりをまとめました。

1. クラス (Class)

クラスとは:
- オブジェクトの設計図です。
- プロパティ（データ）やメソッド（機能）を定義するためのひな形です。
- 実際に使うためには、クラスから「インスタンス」を作成します。

例

class Product {
    constructor(title, price) {
        this.title = title; // プロパティ
        this.price = price; // プロパティ
    }

    // メソッド
    displayInfo() {
        return `${this.title}: $${this.price}`;
    }
}

2. インスタンス (Instance)

インスタンスとは:
- クラスをもとに作成された具体的なオブジェクトのことです。
- インスタンスはクラスのプロパティやメソッドを引き継ぎます。
- new キーワードを使って作成します。

例

const product1 = new Product("Laptop", 1000); // クラスからインスタンスを作成
const product2 = new Product("Phone", 500); // 別のインスタンス

ポイント:
- product1 と product2 は、それぞれ Product クラスのインスタンスです。
- product1 と product2 は同じクラスを基にしているが、異なるデータを持つ独立したオブジェクトです。

3. オブジェクト (Object)

オブジェクトとは:
- プロパティ（データ） と メソッド（機能） を持つデータ構造のことです。
- JavaScriptではほぼすべてがオブジェクトであり、クラスのインスタンスもオブジェクトの一種です。

例

// クラスから作られたインスタンスはオブジェクト
console.log(product1 instanceof Object); // 出力: true

// 通常のオブジェクト
const obj = { key: "value" };
console.log(obj instanceof Object); // 出力: true

クラスとオブジェクトの違い:
- クラスはオブジェクトを作成するための「設計図」。
- オブジェクトはクラスから作成された「実体」。

4. プロパティ (Property)

プロパティとは:
- オブジェクトが持つデータのことです。
- クラスで定義されたプロパティは、インスタンスの中に保存されます。

例

console.log(product1.title); // 出力: Laptop
console.log(product2.price); // 出力: 500

プロパティの特徴:
- クラス内で定義されると、各インスタンスが独自の値を持つことができます。

5. メソッド (Method)

メソッドとは:
- オブジェクトに属する関数のことです。
- クラス内で定義されたメソッドは、インスタンスを通じて呼び出すことができます。

例

console.log(product1.displayInfo()); // 出力: Laptop: $1000
console.log(product2.displayInfo()); // 出力: Phone: $500

メソッドの特徴:
- メソッドはクラスやオブジェクトに関連した処理を定義します。
- インスタンスごとにメソッドを使って異なるデータを処理できます。

全体のつながり

クラスはオブジェクトを作成するための設計図です。
- プロパティ（データ）とメソッド（機能）を定義します。
インスタンスはクラスをもとに作られた具体的なオブジェクトです。
- 各インスタンスはクラスが定義するプロパティとメソッドを持ちます。
プロパティはオブジェクトが持つデータで、インスタンスごとに異なる値を持つことができます。
メソッドはオブジェクトが持つ機能で、インスタンスごとにプロパティの値に基づいて異なる結果を返します。

まとめ

以下の図でこれらの関係を示します：

クラス (設計図)
 └── プロパティ (title, price)
 └── メソッド (displayInfo)

↓ インスタンス化 (new)

インスタンス (具体例: product1)
 └── プロパティ (title: "Laptop", price: 1000)
 └── メソッド (displayInfo: "Laptop: $1000")

インスタンス (具体例: product2)
 └── プロパティ (title: "Phone", price: 500)
 └── メソッド (displayInfo: "Phone: $500")

このように、クラス → インスタンス → オブジェクト の関係性を理解することで、プロパティやメソッドを効果的に使えるようになります。