クラスの定義とインスタンス化 | クラス構文の基本 | JavaScript 超完全入門 基本から発展までのすべて

2024.09.20
スポンサーリンク
スポンサーリンク
amazon
スマイルSALE
--:--:--
～
ad. 価格範囲を指定して商品を探せます

クラスとは？

JavaScriptでは、クラス（class）はオブジェクトを生成するための設計図（テンプレート）として利用されます。クラスを定義することで、同じ構造や機能を持つ複数のオブジェクトを効率よく作成できます。

クラス構文はES6（ECMAScript 2015）で導入され、従来のコンストラクタ関数よりも分かりやすく記述できるようになりました。現在のJavaScript開発では、オブジェクトを設計する際にクラス構文が広く利用されています。

クラスの定義

クラスはclassキーワードを使って定義します。クラス内には、インスタンスが作成されるときに自動で実行されるコンストラクタ（constructor）や、オブジェクトの動作を表すメソッドを定義できます。

クラス定義の基本例


class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

// クラスのインスタンスを作成
const person1 = new Person("Taro", 25);

person1.greet();

このコードでは、Personというクラスを定義しています。

  1. constructorで名前と年齢を受け取り、インスタンスのプロパティへ保存しています。
  2. greet()は自己紹介を表示するメソッドです。
  3. newを使って新しいインスタンスを作成しています。

なお、文字列の組み立てにはES6で追加されたテンプレートリテラル（`...${}）を使用すると、コードを読みやすく記述できます。

クラスのインスタンス化

インスタンス化とは、クラスをもとに実際のオブジェクトを作成することです。

クラスは設計図にすぎません。newキーワードを使用して初めて利用できるオブジェクト（インスタンス）が作成されます。

インスタンス化の例


const person2 = new Person("Hanako", 30);

console.log(person2.name);
console.log(person2.age);

person2.greet();

このコードでは、新しくperson2というインスタンスを作成しています。

  1. nameプロパティにアクセスして名前を取得しています。
  2. ageプロパティにアクセスして年齢を取得しています。
  3. greet()メソッドを呼び出して自己紹介を表示しています。

同じクラスから何個でもインスタンスを作成できます。それぞれのインスタンスは独自のデータを持ちながら、同じメソッドを利用できます。

コンストラクタの役割

constructorメソッドは、インスタンスが生成されるときに自動で呼び出されます。

主な役割は、インスタンスごとに異なる値を受け取り、プロパティを初期化することです。

なお、1つのクラスにはconstructorは1つしか定義できません。

コンストラクタの例


class Animal {
    constructor(type, sound) {
        this.type = type;
        this.sound = sound;
    }

    makeSound() {
        console.log(this.sound);
    }
}

const dog = new Animal("Dog", "Woof");

dog.makeSound();

このコードでは、Animalクラスのコンストラクタで動物の種類と鳴き声を設定しています。

makeSound()メソッドを呼び出すと、そのインスタンスに設定された鳴き声が表示されます。

クラスのプロトタイプ

JavaScriptのクラスは、新しい仕組みのように見えますが、内部では従来からあるプロトタイプベースの仕組みを利用しています。

クラス内で定義したメソッドは、各インスタンスごとにコピーされるのではなく、プロトタイプ上で共有されます。

プロトタイプ共有の例


class Car {
    constructor(brand) {
        this.brand = brand;
    }

    displayBrand() {
        console.log(this.brand);
    }
}

const car1 = new Car("Toyota");
const car2 = new Car("Honda");

car1.displayBrand();
car2.displayBrand();

この例では、displayBrand()は1つだけ作成され、すべてのインスタンスで共有されています。

一方、brandプロパティはインスタンスごとに個別の値を持っています。

この仕組みによって、メモリを効率よく利用でき、多数のインスタンスを作成しても無駄なコピーが増えません。

クラス構文の利便性

クラス構文を利用すると、オブジェクト指向プログラミングを分かりやすく記述できます。

また、継承やメソッドのオーバーライドなども自然な構文で記述できるため、大規模なプログラムでも保守しやすくなります。

クラス構文の主なメリット

  • オブジェクトの設計を整理しやすい。
  • コンストラクタやメソッドを見やすく記述できる。
  • 複数のインスタンスを簡単に作成できる。
  • extendsによる継承を分かりやすく記述できる。
  • コードの再利用性・保守性が向上する。

初心者が覚えておきたいポイント

  • クラスは「設計図」、インスタンスは「設計図から作られた実物」と考えると理解しやすくなります。
  • クラスだけでは利用できず、newでインスタンスを作成して初めて使用できます。
  • クラス内ではプロパティにアクセスする際にthisを使用します。
  • メソッドは各インスタンスではなくプロトタイプで共有されるため、効率よく利用できます。

まとめ

  • クラスはオブジェクトを作成するための設計図である。
  • classキーワードでクラスを定義できる。
  • constructorはインスタンス生成時に自動で実行される。
  • newを使ってインスタンスを作成する。
  • メソッドはプロトタイプで共有されるため効率的である。
  • ES6以降ではクラス構文が一般的に利用されている。

スポンサーリンク