JavaScriptクラス編

SHARE

JavaScriptのクラスは、オブジェクト指向プログラミングを効果的に実現するための強力な機能です。

クラスを使用することで、関連するデータとメソッドを一つの単位にまとめ、再利用性と保守性を大幅に向上させることができます。

クラスの導入により、コードの設計がより直感的かつ整理されたものとなり、開発プロセスを効率化できます。

本記事では、JavaScriptのクラスの基本概念から始めて、コンストラクタ、メソッド、継承、そしてアクセス修飾子など、クラスに関連する重要なトピックを詳しく解説します。

クラスの理解を深めることで、より高度なオブジェクト指向プログラミングを実践し、堅牢でメンテナブルなコードを書くための基盤を築くことができるでしょう。

それでは、JavaScriptのクラスの世界へ踏み出していきましょう。

タップできる目次
  1. 1. JavaScriptのクラスとは？
  2. プロパティとアクセサメソッド
  3. クラスのフィールド
  4. 継承とサブクラス
  5. クラスとモジュール
  6. まとめ

1. JavaScriptのクラスとは？

JavaScriptのクラスは、オブジェクト指向プログラミングの概念を取り入れた構文であり、オブジェクトの作成と管理をより簡単かつ効率的に行うための仕組みです。

クラスは関連するデータとメソッドを一つの構造体にまとめることができ、再利用性や保守性を向上させます。

JavaScriptは元々、クラスベースのオブジェクト指向言語ではなく、プロトタイプベースのオブジェクト指向言語として設計されました。

しかし、クラスベースの構文が他の多くのプログラミング言語（例えば、JavaやC++など）で一般的であり、開発者にとって馴染み深いものであるため、ECMAScript 2015（ES6）でクラス構文が導入されました。

クラスのメリット

構造の明確化

クラスを使うことで、オブジェクト指向プログラミングの概念を取り入れやすくなり、コードの構造が明確になります。

各クラスは特定の責任を持ち、データとメソッドを一元管理できます。

再利用性の向上

クラスは一度定義すれば、他の部分で再利用可能です。

継承を通じて、コードの再利用性が高まり、新しいクラスを簡単に作成できます。

保守性の向上

クラスを使用することで、コードの分割が容易になり、保守性が向上します。

特定のクラスに変更を加えても、その変更が他の部分に影響を及ぼすことが少なくなります。

継承とポリモーフィズム

クラスは継承をサポートしており、親クラスの機能を子クラスが拡張することができます。

ポリモーフィズムにより、異なるクラス間で同じインターフェースを使って操作を行うことができます。

モジュール化

クラスはモジュール化しやすく、他のファイルやプロジェクトで簡単にインポートして使用できます。

これにより、コードの再利用性と管理が容易になります。

クラスのデメリット

柔軟性の欠如

クラスベースの構造は、プロトタイプベースのアプローチに比べて柔軟性が低い場合があります。

動的にプロパティやメソッドを追加することが難しいことがあります。

オーバーヘッドの増加

クラスを多用すると、場合によっては過剰な抽象化が発生し、理解やデバッグが難しくなることがあります。

また、インスタンス化のオーバーヘッドが増えることもあります。

学習コスト

クラスベースのオブジェクト指向プログラミングは、特に初心者にとって学習コストが高いことがあります。

クラス、継承、ポリモーフィズムなどの概念を理解するのに時間がかかる場合があります。

ES6以降のサポート

クラス構文はES6（ECMAScript 2015）で導入されたため、それ以前の環境では使用できません。

古いブラウザや環境での互換性を考慮する必要があります。

クラスの基本構造

JavaScriptにおけるクラスの基本構造は、クラス宣言とクラス式の2つの方法で定義できます。

ここでは、それぞれの方法について詳しく説明します。

クラス宣言

クラス宣言は、class キーワードを使用してクラスを定義する方法です。

クラス宣言は関数宣言と似た構文を持ち、クラス名を指定してクラスを定義します。

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

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

const alice = new Person('Alice', 30);
alice.greet(); // 'Hello, my name is Alice and I am 30 years old.' が出力される

class Person という形でクラスを定義しています。このクラスは Person という名前を持ちます。

constructor メソッドはクラスのインスタンスを初期化するために使用されます。

このメソッドはクラスがインスタンス化される際に自動的に呼び出され、 コンストラクタ内でプロパティを初期化しています（this.name と this.age）。

クラス内にメソッドを定義できます。この例では、greet メソッドを定義しています。

greet メソッドは、インスタンスの名前と年齢を出力する機能を持っています。

クラス式

クラス式は、クラスを式として定義する方法です。

この方法では、無名クラスを定義することも、名前付きクラスを定義することもできます。

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

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
};

const bob = new Person('Bob', 25);
bob.greet(); // 'Hello, my name is Bob and I am 25 years old.' が出力される

const Person = class { ... }; という形でクラス式を使ってクラスを定義しています。

これは無名クラスを Person という変数に代入している例です。

クラス宣言と同様に、コンストラクタメソッドはインスタンスを初期化するために使用されます。

クラス宣言と同じ方法でメソッドを定義できます。この例では greet メソッドを定義しています。

コンストラクタについて

先ほどから何度も出てきてはいますが、コンストラクタについてみていきます。

コンストラクタは、クラスがインスタンス化される際に呼び出される特別なメソッドです。

コンストラクタは、クラスのインスタンスに必要な初期設定を行うために使用されます。

constructor という名前で定義され、クラス内に1つだけ定義することができます。

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

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

この例では、Person クラスのコンストラクタが name と age の2つの引数を受け取り、インスタンスのプロパティとして this.name と this.age に設定しています。

インスタンス化について

インスタンス化とは、クラスを基に新しいオブジェクトを作成するプロセスを指します。

インスタンス化には new キーワードを使用します。

const alice = new Person('Alice', 30);
console.log(alice.name); // 'Alice'
console.log(alice.age);  // 30
alice.greet();           // 'Hello, my name is Alice and I am 30 years old.' が出力される

この例では、new Person('Alice', 30) によって alice という新しい Person インスタンスが作成されます。

コンストラクタはインスタンス化の際に自動的に呼び出され、alice インスタンスのプロパティ name と age が初期化されます。

コンストラクタとインスタンス化のポイント

コンストラクタはクラスのインスタンスを初期化するために使用され、 必要なプロパティや状態を設定できます。

コンストラクタは引数を受け取り、インスタンスごとに異なる初期設定を行うことができます。

new キーワードを使って簡単にインスタンスを作成でき、クラスの再利用性が向上します。

インスタンスメソッドについて

インスタンスメソッドは、クラスの各インスタンスで使用されるメソッドです。

インスタンスメソッドは、クラス定義内で宣言され、this キーワードを使ってインスタンスのプロパティや他のメソッドにアクセスします。

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

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

const alice = new Person('Alice', 30);
alice.greet(); // 'Hello, my name is Alice and I am 30 years old.' が出力される

この例では、greet メソッドが Person クラス内で定義されており、各インスタンス（この場合は alice）で使用できます。

静的メソッド

静的メソッド（static メソッド）は、クラス自体に関連付けられたメソッドです。

静的メソッドはインスタンスではなく、クラス自体を対象に操作を行います。

static キーワードを使って定義されます。

class MathUtil {
    static add(a, b) {
        return a + b;
    }
}

console.log(MathUtil.add(2, 3)); // 5 が出力される

この例では、add メソッドが MathUtil クラスの静的メソッドとして定義されており、MathUtil クラス自体から呼び出されます。

インスタンスメソッドと静的メソッドの違い

呼び出し方の違い

インスタンスメソッドはクラスのインスタンスから呼び出されます。例：alice.greet()

静的メソッドはクラス自体から呼び出されます。例：MathUtil.add(2, 3)

アクセス範囲の違い

インスタンスメソッドは、this キーワードを使ってインスタンスのプロパティや他のメソッドにアクセスできます。

静的メソッドはインスタンスのプロパティにはアクセスできませんが、クラス自体のプロパティや他の静的メソッドにはアクセスできます。

プロパティとアクセサメソッド

クラス内でプロパティを定義する場合、通常はコンストラクタメソッド内で初期化します。

プロパティはクラスのインスタンスに対するデータを保持します。

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

const alice = new Person('Alice', 30);
console.log(alice.name); // 'Alice'
console.log(alice.age);  // 30

この例では、name と age のプロパティが Person クラスのインスタンスである alice に定義されており、コンストラクタで初期化されています。

アクセサメソッド（ゲッターとセッター）

アクセサメソッドは、オブジェクトのプロパティにアクセスするための特別なメソッドです。

ゲッター（getter）はプロパティの値を取得するために使用され、セッター（setter）はプロパティの値を設定するために使用されます。

class Person {
    constructor(name, age) {
        this._name = name; // プライベートプロパティのように扱う
        this._age = age;
    }

    // ゲッターメソッド
    get name() {
        return this._name;
    }

    get age() {
        return this._age;
    }

    // セッターメソッド
    set name(newName) {
        this._name = newName;
    }

    set age(newAge) {
        if (newAge > 0) {
            this._age = newAge;
        } else {
            console.log('年齢は正の数でなければなりません');
        }
    }

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

const bob = new Person('Bob', 25);
console.log(bob.name); // 'Bob'
bob.age = 26;          // セッターメソッドで年齢を更新
console.log(bob.age);  // 26
bob.greet();           // 'Hello, my name is Bob and I am 26 years old.' が出力される

プロパティの定義:

クラスのコンストラクタ内でプロパティを初期化します。

この例では、_name と _age プロパティが設定されています。

ここで、先頭にアンダースコアを付けることで、これらのプロパティが外部から直接アクセスされないようにする意図を示しています
（JavaScriptには本当のプライベートプロパティの概念はありませんが、ES6のクラスフィールドのプライベートフィールド構文 # を使うこともできます）。

ゲッターメソッド:

get キーワードを使ってゲッターメソッドを定義します。

これにより、プロパティにアクセスするときに特定のロジックを実行できます。

セッターメソッド:

set キーワードを使ってセッターメソッドを定義します。

これにより、プロパティの値を設定するときに特定のロジックを実行できます。

この例では、年齢が正の数であることをチェックしています。

クラスのフィールド

クラスフィールドは、クラスのインスタンスプロパティとして直接定義されるプロパティです。

JavaScriptでは、クラスフィールドをクラス内で直接定義することができます。

この機能は、クラス内のプロパティの初期化をシンプルにし、コードの可読性を向上させます

class Person {
    name = 'Default Name';
    age = 0;

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

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

const alice = new Person('Alice', 30);
console.log(alice.name); // 'Alice'
console.log(alice.age);  // 30
alice.greet(); // 'Hello, my name is Alice and I am 30 years old.' が出力される

クラスフィールドの定義:

name と age のフィールドがクラス内で直接定義されています。これらのフィールドはパブリッククラスフィールドと呼ばれ、クラスのインスタンスで直接アクセスできます。

コンストラクタ内での初期化:

コンストラクタ内で this.name と this.age を使用してフィールドの値を初期化しています。

プライベートクラスフィールド

プライベートクラスフィールドは、クラスの外部から直接アクセスできないフィールドです。

プライベートフィールドを定義するには、フィールド名の前に # を付けます。

これにより、そのフィールドはクラスの内部でのみアクセス可能になります。

class Person {
    #name = 'Default Name';
    #age = 0;

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

    greet() {
        console.log(`Hello, my name is ${this.#name} and I am ${this.#age} years old.`);
    }

    getName() {
        return this.#name;
    }

    getAge() {
        return this.#age;
    }
}

const bob = new Person('Bob', 25);
console.log(bob.getName()); // 'Bob'
console.log(bob.getAge());  // 25
bob.greet(); // 'Hello, my name is Bob and I am 25 years old.' が出力される

プライベートクラスフィールドの定義:

#name と #age のフィールドがプライベートフィールドとして定義されています。これらのフィールドは # を付けることでプライベートになります。

コンストラクタ内での初期化:

コンストラクタ内で this.#name と this.#age を使用してフィールドの値を初期化しています。

アクセサメソッド:

プライベートフィールドにアクセスするために、getName と getAge のようなパブリックメソッドを定義することが一般的です。これにより、クラスの外部からプライベートフィールドにアクセスすることができます。

アクセス修飾子について(クラスフィールドと統合する)

JavaScriptでは、特にES6（ECMAScript 2015）以降、アクセス修飾子の概念をクラスフィールドに適用できるようになりました。アクセス修飾子は、クラスのプロパティやメソッドのアクセス権を制御するためのものです。以下に、パブリック、プライベート、およびプロテクテッドの各アクセス修飾子について解説します。

パブリック（Public）

パブリックフィールドやメソッドは、クラスの外部からでもアクセス可能です。JavaScriptでは、特別な修飾子を使わずに定義されたフィールドやメソッドはすべてパブリックとして扱われます。

プライベート（Private）

プライベートフィールドやメソッドは、クラスの外部から直接アクセスすることができません。プライベートフィールドは、フィールド名の前に # を付けて定義します。

プロテクテッド（Protected）

JavaScriptにはネイティブなプロテクテッドアクセス修飾子はありませんが、プロテクテッドフィールドとメソッドの概念は他の言語からの影響を受けています。プロテクテッドフィールドやメソッドは、クラス自体およびそのサブクラスからアクセス可能ですが、クラスの外部からはアクセスできません。

JavaScriptでプロテクテッドのような動作を実現するには、名前の前にアンダースコア（_）を付けて、暗黙的に「プロテクテッド」として扱う慣習があります。

class Person {
    constructor(name, age) {
        this._name = name; // プロテクテッド風フィールド
        this._age = age;   // プロテクテッド風フィールド
    }

    _getDetails() { // プロテクテッド風メソッド
        return `${this._name} is ${this._age} years old.`;
    }

    greet() { // パブリックメソッド
        console.log(`Hello, my name is ${this._name}.`);
    }
}

class Employee extends Person {
    constructor(name, age, job) {
        super(name, age);
        this.job = job;
    }

    getJobDetails() {
        console.log(`${this._name} is a ${this.job}.`);
        console.log(this._getDetails()); // サブクラスからプロテクテッド風メソッドにアクセス
    }
}

const charlie = new Employee('Charlie', 28, 'Engineer');
charlie.greet(); // 'Hello, my name is Charlie.' が出力される
charlie.getJobDetails(); // 'Charlie is a Engineer.' と 'Charlie is 28 years old.' が出力される

継承とサブクラス

継承は、既存のクラス（親クラス、スーパークラス）の機能を拡張し、新しいクラス（子クラス、サブクラス）を作成するための方法です。

JavaScriptでは、extends キーワードを使ってクラスの継承を行います。

サブクラスの作成

サブクラスは親クラスを継承し、追加のプロパティやメソッドを定義することができます。

これにより、既存のクラスの機能を再利用しながら、特定の機能を追加できます。

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // スーパークラスのコンストラクタを呼び出す
        this.breed = breed;
    }

    speak() {
        console.log(`${this.name} barks.`);
    }
}

const dog = new Dog('Rex', 'Labrador');
dog.speak(); // 'Rex barks.' が出力される
  • 親クラスの定義:
    • Animal クラスは name プロパティを持ち、speak メソッドを定義しています。
  • extends キーワード:
    • Dog クラスは Animal クラスを継承しています。これにより、Dog クラスは Animal クラスのプロパティとメソッドを利用できます。
  • super キーワード:
    • super キーワードを使って、親クラスのコンストラクタを呼び出し、name プロパティを初期化しています。
    • Dog クラスのコンストラクタで super(name) を呼び出すことで、Animal クラスのコンストラクタが実行されます。
  • メソッドのオーバーライド:
    • Dog クラスは speak メソッドをオーバーライドしています。これにより、Dog クラスのインスタンスは独自の speak メソッドを持ちます。

サブクラスの利点

  1. コードの再利用:
    • 継承により、親クラスのプロパティとメソッドを再利用できます。これにより、冗長なコードを避け、メンテナンスが容易になります。
  2. 機能の拡張:
    • サブクラスを使って、親クラスの基本機能に加えて新しい機能を追加できます。これにより、クラスの機能を柔軟に拡張できます。
  3. 多態性（ポリモーフィズム）:
    • 継承を利用することで、同じメソッド名を持つ異なるクラスのオブジェクトを同一の方法で扱うことができます。これにより、コードの柔軟性が向上します。

7. スーパークラスのメソッド呼び出し

super キーワードの基本

super キーワードは、親クラス（スーパークラス）のコンストラクタやメソッドを呼び出すために使用されます。

サブクラス内で親クラスのメソッドをオーバーライドした場合でも、super を使って元のメソッドにアクセスすることができます。

super を使ったコンストラクタの呼び出し

サブクラスのコンストラクタで super を呼び出すことで、親クラスのコンストラクタを実行し、親クラスのプロパティや初期設定を引き継ぐことができます。これは、サブクラスのコンストラクタ内で必須のステップです。

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // スーパークラスのコンストラクタを呼び出し
        this.breed = breed;
    }

    speak() {
        console.log(`${this.name} barks.`);
    }
}

const rex = new Dog('Rex', 'Labrador');
rex.speak(); // 'Rex barks.' が出力される
  1. コンストラクタでの super の呼び出し:
    • Dog クラスのコンストラクタ内で super(name) を呼び出しています。これにより、Animal クラスのコンストラクタが実行され、name プロパティが初期化されます。
    • サブクラスのコンストラクタ内で super を呼び出すことで、親クラスのプロパティや初期設定を継承できます。
  2. メソッドのオーバーライド:
    • Dog クラスは Animal クラスの speak メソッドをオーバーライドしています。しかし、必要に応じて super.speak() を使って元のメソッドにアクセスすることも可能です。

スーパークラスのメソッドへのアクセス

super を使ってサブクラス内から親クラスのメソッドにアクセスすることができます。これにより、オーバーライドされたメソッド内で親クラスのメソッドの動作を再利用したり、拡張したりすることができます。

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }

    speak() {
        super.speak(); // スーパークラスの speak メソッドを呼び出し
        console.log(`${this.name} barks.`);
    }
}

const max = new Dog('Max', 'Beagle');
max.speak(); // 'Max makes a noise.' と 'Max barks.' が出力される

メソッド内での super の呼び出し:

  • Dog クラスの speak メソッド内で super.speak() を呼び出しています。これにより、Animal クラスの speak メソッドが実行されます。
  • 親クラスのメソッドを呼び出した後に、追加の処理を行うことで、機能の拡張が可能になります。

クラスとモジュール

JavaScriptでは、モジュールを使ってコードを分割し、再利用性や保守性を向上させることができます。モジュールを使うことで、クラスを含むさまざまな要素を別々のファイルに分けて管理することが可能になります。

モジュールの基本概念

モジュールは、ES6（ECMAScript 2015）で導入された構文を使用して定義されます。export キーワードを使って特定のクラスや関数をモジュールからエクスポートし、import キーワードを使って他のモジュールからエクスポートされたクラスや関数をインポートすることができます。

クラスをモジュールとしてエクスポートする

クラスをモジュールとしてエクスポートすることで、他のファイルやモジュールからそのクラスを再利用することができます。

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

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

この例では、Person クラスが定義され、export キーワードを使ってモジュールからエクスポートされています。

クラスをモジュールとしてインポートする

エクスポートされたクラスを他のファイルでインポートすることで、そのクラスを使用することができます。

例：クラスのインポート

main.js ファイル

import { Person } from './person.js';

const alice = new Person('Alice', 30);
alice.greet(); // 'Hello, my name is Alice and I am 30 years old.' が出力される

この例では、person.js から Person クラスをインポートし、新しいインスタンスを作成してメソッドを呼び出しています。

モジュールの利点

  1. コードの分割:
    • モジュールを使うことで、コードを機能ごとに分割できます。これにより、大規模なプロジェクトでもコードが整理され、理解しやすくなります。
  2. 再利用性:
    • モジュールとしてエクスポートされたクラスや関数は、他のファイルやプロジェクトで再利用できます。これにより、コードの重複を避け、開発効率が向上します。
  3. 依存関係の管理:
    • モジュールを使うことで、依存関係を明確に管理できます。どのファイルがどのモジュールに依存しているかを明確に把握できるため、変更があっても影響範囲を把握しやすくなります。

まとめ

JavaScriptのクラスは、オブジェクト指向プログラミングをシンプルに実現するための強力なツールです。

クラスを使用することで、関連するデータとメソッドを一つにまとめ、コードの再利用性と保守性を向上させることができます。

クラスの基本構造は、コンストラクタによる初期化やメソッドの定義、そしてプロパティの管理を簡便にします。

さらに、継承を利用することで既存のクラスを拡張し、新しい機能を追加することが可能です。

また、アクセス修飾子を使ってクラス内部のデータを適切にカプセル化し、データの保護と管理を強化できます。

クラスを通じて、モジュール化されたコードは他のプロジェクトでも簡単に再利用でき、開発の効率化と品質向上を実現します。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

JavaScript非同期通信編