JavaScriptでクラスを使う方法！(コンストラクタなど)

JavaScriptでクラスを使う方法について書いています。
クラスを使った例について解説などと、下記の内容について記載しました。

JavaScriptでクラスを使う

JavaScriptでもclassキーワードを使うことで、クラスを作成することができます。
例えば、下記のように作れます。

class Character {
  name = '';
  age = 0;

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

Characterというクラスを作成して、名前(name)と年齢(age)のプロパティを持っています。

クラスのコンストラクタって？

コンストラクタはクラスをnewして、インスタンス化して使うときに処理されるメソッドです。
初期値を渡して、オブジェクトを作るのに使われることが多いです。

今回のCharacterクラスだと、名前と年齢を引数として渡して、インスタンス作成時に設定しています。

実際に使ってみる

このようにインスタンス化して使うことができます。

const user = new Character('yasuaki', 34);
console.log(`名前:${user.name} 年齢:${user.age}`);

Characterクラスをnewして、インスタンス化しています。
名前としてyasuaki、年齢として34歳が設定されました。

console.logで出力すると、下記のように設定されていることが確認できました。

名前:yasuaki 年齢:34

パブリック・プライベートプロパティについて

public(パブリック)・private(プライベート)なプロパティについてです。

パブリックプロパティを使う

先ほどのように、プロパティに何もついていない場合はパブリックなプロパティになります。

class Character {
  name = 'test';
  age = 20;
}

const user = new Character();
console.log(user.name); // test
console.log(user.age); // 20

名前(name)と年齢(age)に何もついていないので、パブリックなプロパティです。
インスタンス化したオブジェクトから、「.」をつけてアクセスすることができます。

プライベートプロパティを使う

プライベートなプロパティは「#」をつけることで作ることができます。

class Character {
  #name = 'test';
  #age = 20;
}

const user = new Character();
console.log(user.name); // undefined
console.log(user.age); // undefined

先ほどのCharacterクラスのプロパティをプライベートにしてみます。
どちらも「#」なしでアクセスしようとすると、undefinedになります。

また、#をつけてアクセスしようとすると…

const user = new Character();
console.log(user.#name);
console.log(user.#age);

下記のようにシンタックスエラーになります。

SyntaxError: Private field '#name' must be declared in an enclosing class

プライベートプロパティの活用

プライベートなプロパティを使うときには、get・setメソッドなどと一緒に使うと良いです。

class Character {
  #name = '';
  #age = 0;

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

  get name () {
    return this.#name;
  }

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

const user = new Character('yasuaki', 34);
console.log(`名前：${user.name} 年齢:${user.age}`); // 名前：yasuaki 年齢:34

名前(name)と年齢(age)のgetメソッドを通して、アクセスできるようになりました。
このようにカプセル化しておくことで、柔軟に仕様変更に対応したり、入るはずのない値を設定できないようにすることができます。

静的プロパティ・ 静的メソッドについて

静的なプロパティや、静的なメソッドについて書いています。
staticキーワードをつけると、インスタンス化しなくてもアクセスできるプロパティやメソッドを作成できます。
ユーティリティクラスを作成したり、ファクトリメソッドを作るときに使うことが多いのではないでしょうか。

静的プロパティを使う

プロパティの先頭にstaticを書くと、静的なプロパティになります。

class Character {
  static version = "1.0";
}

Characterクラスにversionプロパティを作って、静的なプロパティにしました。
使うときには、下記のようにクラスから直接アクセスできます。

console.log(Character.version); // 1.0

静的メソッドを使う

静的なメソッドも先頭にstaticを書くことで、作成することができます。

class Character {
  static version = "1.0";

  static test () {
    return "test!!!";
  }
}

静的なtestメソッドを作成しました。
下記のように、クラスから直接呼び出すことができます。

console.log(Character.test()); // test!!!