JavaScriptでクラスメソッドとインスタンスメソッドの違いを初心者向けにわかりやすく解説！

1. JavaScriptのクラスとは？

1. JavaScriptのクラスとは？

JavaScriptのクラスは、オブジェクトを作るための設計図のようなものです。クラスを使うと、同じ形のオブジェクトを簡単に作ることができます。例えば、車や犬、商品など、同じ種類の情報をまとめたいときに便利です。

class Car {
  constructor(color, model) {
    this.color = color;
    this.model = model;
  }
}
const myCar = new Car("赤", "スポーツカー");
console.log(myCar.color); // 赤

2. インスタンスメソッドとは？

2. インスタンスメソッドとは？

インスタンスメソッドは、クラスから作られたオブジェクト（インスタンス）専用のメソッドです。オブジェクトごとに異なる情報を扱うときに使います。

class Car {
  constructor(color, model) {
    this.color = color;
    this.model = model;
  }
  showInfo() {
    return `この車は${this.color}色の${this.model}です。`;
  }
}
const car1 = new Car("青", "セダン");
console.log(car1.showInfo()); // この車は青色のセダンです。

このように、showInfoメソッドはオブジェクトcar1の情報を使っています。オブジェクトごとに色やモデルが違う場合でも正しい情報を返してくれます。

3. クラスメソッドとは？

3. クラスメソッドとは？

クラスメソッドは、オブジェクトではなくクラス自体から呼び出すことができるメソッドです。オブジェクト個別の情報ではなく、クラス全体に関わる処理を行うときに使います。

class Car {
  static totalCars() {
    return "Carクラスから全体情報を取得しました。";
  }
}
console.log(Car.totalCars()); // Carクラスから全体情報を取得しました。

このようにstaticキーワードをつけると、クラスメソッドになり、オブジェクトを作らなくても呼び出せます。

4. インスタンスメソッドとクラスメソッドの違いまとめ

4. インスタンスメソッドとクラスメソッドの違いまとめ

簡単にまとめると次のようになります。

• インスタンスメソッド：オブジェクトごとの情報を扱う。thisでオブジェクト自身にアクセス。
• クラスメソッド：クラス全体の情報を扱う。staticを使う。

class Car {
  constructor(color) {
    this.color = color;
  }
  showColor() {
    return `車の色は${this.color}です。`;
  }
  static info() {
    return "Carクラスは車を管理するクラスです。";
  }
}
const carA = new Car("赤");
console.log(carA.showColor()); // 車の色は赤です。
console.log(Car.info());       // Carクラスは車を管理するクラスです。

5. インスタンスメソッドで複数オブジェクトを管理する例

5. インスタンスメソッドで複数オブジェクトを管理する例

複数のオブジェクトを作って、それぞれの情報をインスタンスメソッドで管理できます。

class Dog {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    return `${this.name}は${this.age}歳です。`;
  }
}
const dog1 = new Dog("ポチ", 3);
const dog2 = new Dog("タロー", 5);
console.log(dog1.greet()); // ポチは3歳です。
console.log(dog2.greet()); // タローは5歳です。

6. クラスメソッドで全体情報を管理する例

6. クラスメソッドで全体情報を管理する例

クラスメソッドを使えば、オブジェクトを作らなくてもクラス全体の情報をまとめて管理できます。

class Dog {
  static species() {
    return "犬は哺乳類です。";
  }
}
console.log(Dog.species()); // 犬は哺乳類です。

このように、クラスメソッドは全体情報や統計、設定などをまとめるときに便利です。

7. まとめに向けてのポイント

7. まとめに向けてのポイント

JavaScriptのクラスメソッドとインスタンスメソッドは用途によって使い分けます。オブジェクトごとの情報を扱うときはインスタンスメソッド、クラス全体の情報や共通処理はクラスメソッドです。初心者でも、この違いを理解すればクラス設計がずっと分かりやすくなります。

ポイントを整理すると次の通りです：

• thisを使うメソッドはインスタンスメソッド
• staticをつけるとクラスメソッド
• 複数オブジェクトを作る場合はインスタンスメソッドで個別情報を管理
• クラス全体で共通の情報をまとめたい場合はクラスメソッドを使用

まとめ

まとめ

今回の記事では、JavaScriptにおけるクラスメソッドとインスタンスメソッドの違いについて、初心者向けにわかりやすく解説しました。クラスメソッドとインスタンスメソッドはどちらもクラス内で定義されるメソッドですが、呼び出す対象や扱う情報が異なる点がポイントです。インスタンスメソッドはオブジェクトごとの固有情報を扱うために使用し、thisキーワードでそのオブジェクト自身にアクセスします。一方でクラスメソッドは、クラス全体の共通情報や統計、設定などを扱う場合に使用し、staticキーワードを使うことでオブジェクトを作成せずに呼び出すことができます。

また、複数のオブジェクトを管理する場合はインスタンスメソッドを使うことで個別のデータを正確に扱えるため、オブジェクト指向設計において重要な役割を果たします。さらに、クラスメソッドを使えばクラス全体の情報や共通処理をまとめて管理できるので、プログラムの可読性や保守性も向上します。JavaScriptのクラス設計では、インスタンスメソッドとクラスメソッドの使い分けを理解することが、効率的でバグの少ないコードを書く鍵となります。

ここで改めて整理すると、次のように考えると理解が深まります。インスタンスメソッドは「このオブジェクトの情報を操作するメソッド」、クラスメソッドは「クラス全体の情報を操作するメソッド」という区別です。この区別を意識することで、同じクラス内でも個別処理と共通処理を明確に分けることができ、後からコードを見直したときも非常に分かりやすくなります。

例えば、次のように複数のオブジェクトを作成してインスタンスメソッドで個別情報を扱い、クラスメソッドで全体情報を管理することができます。

 class Product { constructor(name, price) { this.name = name; this.price = price; } showInfo() { return `${this.name}は価格${this.price}円です。`; } static category() { return "商品クラスは全体のカテゴリー情報を管理します。"; } } const product1 = new Product("ノートパソコン", 120000); const product2 = new Product("スマートフォン", 80000); console.log(product1.showInfo()); // ノートパソコンは価格120000円です。 console.log(product2.showInfo()); // スマートフォンは価格80000円です。 console.log(Product.category()); // 商品クラスは全体のカテゴリー情報を管理します。

このようにインスタンスごとの情報とクラス全体の情報を整理しておくことで、複雑なアプリケーションや管理画面などでも効率よく情報を扱えます。また、インスタンスメソッドとクラスメソッドを正しく使い分けることで、プログラムの拡張や保守も容易になります。

最後にポイントをまとめると次の通りです：

• インスタンスメソッド：オブジェクトごとの固有情報を扱う。thisでオブジェクト自身にアクセス。
• クラスメソッド：クラス全体の共通情報を扱う。staticをつけてオブジェクトなしで呼び出せる。
• 複数オブジェクトを作る場合は、インスタンスメソッドで個別情報を管理。
• 全体情報や統計、設定をまとめたい場合は、クラスメソッドを使用。
• 適切な使い分けで、コードの可読性・保守性・拡張性が向上。