JavaScript のクラス

クラスは class キーワードを使用して宣言することができます。ここでは、前回記事で紹介した Person のクラス宣言を紹介します。

class Person {
  name;

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

  introduceSelf() {
    console.log(`Hi! I'm ${this.name}`);
  }
}

これは Person というクラスを次のように宣言しています。

• name プロパティ。
• 新しいオブジェクトの name プロパティを初期化するために使用する name 引数を受け取るコンストラクター。
• this を用いてオブジェクトのプロパティを参照することができる introduceSelf() メソッド。

name; 宣言はオプションです。除外しても、コンストラクターの this.name = name; という行は、初期化する前に name プロパティを作成します。しかし、クラス宣言の中でプロパティを明示的に記載しておくと、コードを読む人がどのプロパティがこのクラスの一部であるかを容易に知ることができるかもしれません。

また、プロパティを宣言するときに、name = ''; のような行で、プロパティを既定値に初期化することも可能です。

コンストラクターは constructor キーワードを使って定義します。クラス定義外のコンストラクターと同じように、次のようになります。

• 新しいオブジェクトを生成する
• 新しいオブジェクトに this を結びつけ、コンストラクターのコードで this を参照することができるようにする
• コンストラクターでコードを実行する
• 新しいオブジェクトを返す

上記のクラス宣言コードを指定された場合、次のように新しい Person インスタンスを作成して使用することができます。

const giles = new Person("Giles");

giles.introduceSelf(); // Hi! I'm Giles

この例では、クラスの名前 Person を用いてコンストラクターを呼び出していることに注意してください。

特別な初期化をする必要がない場合は、コンストラクターを省略することができ、既定のコンストラクターが生成されます。

class Animal {
  sleep() {
    console.log("zzzzzzz");
  }
}

const spot = new Animal();

spot.sleep(); // 'zzzzzzz'

上記の Person クラスを指定されたので、Professor サブクラスを定義してみましょう。

class Professor extends Person {
  teaches;

  constructor(name, teaches) {
    super(name);
    this.teaches = teaches;
  }

  introduceSelf() {
    console.log(
      `My name is ${this.name}, and I will be your ${this.teaches} professor.`,
    );
  }

  grade(paper) {
    const grade = Math.floor(Math.random() * (5 - 1) + 1);
    console.log(grade);
  }
}

このクラスが他のクラスを継承していることを表すために extends キーワードを使用しています。

Professor クラスは新しいプロパティ teaches を追加しているので、それを宣言しています。

新しい Professor が作成されたときに teaches を設定したいので、name と teaches を引数に取るコンストラクターを定義します。このコンストラクターが最初に行うことは、super() を使ってスーパークラスのコンストラクターを呼び出すことで、name の引数を渡す。スーパークラスのコンストラクターは name を設定する処理を行います。その後、Professor コンストラクターは、teaches プロパティを設定します。

また、スーパークラスの introduceSelf() メソッドをオーバーライドし、新しいメソッド grade() を追加して、論文を採点するようにしました（この教授はとても優秀ではなく、論文にランダムに成績を割り当てるだけです）。

この宣言により、これで教授を作成し、使用することができるようになりました。

const walsh = new Professor("Walsh", "Psychology");
walsh.introduceSelf(); // 'My name is Walsh, and I will be your Psychology professor'

walsh.grade("my paper"); // some random grade

最後に、JavaScript でカプセル化を実装するために、どのようにすればよいかを見てみましょう。前の記事では、Student の year プロパティを非公開にすることで、Student クラスを使用するコードを壊すことなく、アーチェリークラスに関するルールを変更したいことを説明しました。

ここでは、それを実現する Student クラスの宣言を示します。

class Student extends Person {
  #year;

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

  introduceSelf() {
    console.log(`Hi! I'm ${this.name}, and I'm in year ${this.#year}.`);
  }

  canStudyArchery() {
    return this.#year > 1;
  }
}

このクラス宣言では、#year は プライベートデータプロパティです。Student オブジェクトを作成し、内部で #year を使用することができますが、オブジェクトの外のコードが #year にアクセスしようとすると、ブラウザーはエラーを報告します。

const summers = new Student("Summers", 2);

summers.introduceSelf(); // Hi! I'm Summers, and I'm in year 2.
summers.canStudyArchery(); // true

summers.#year; // SyntaxError

プライベートデータプロパティはクラス宣言で宣言する必要があり、その名前は # で始まります。

プライベートデータプロパティと同様に、プライベートメソッドも持つことができます。プライベートデータプロパティと同様に、その名前は # で始まり、オブジェクト自身のメソッドによってのみ呼び出すことができます。

class Example {
  somePublicMethod() {
    this.#somePrivateMethod();
  }

  #somePrivateMethod() {
    console.log("You called me?");
  }
}

const myExample = new Example();

myExample.somePublicMethod(); // 'You called me?'

myExample.#somePrivateMethod(); // SyntaxError

この記事の終わりまで来ましたが、最も重要な情報を覚えていますか？次に行く前に、この情報を覚えているかどうかを確認するためのテストがいくつかあります - Test your skills: Object-oriented JavaScript を参照してください。

この記事では、オブジェクト指向のプログラムを書くために JavaScript で利用できる主なツールについて説明しました。ここですべてを網羅したわけではありませんが、始めるには十分でしょう。この記事で紹介したクラスの記事は、さらに詳しく学ぶには良い場所です。

• 前のページ
• Overview: JavaScript オブジェクト入門
• 次のページ