【JavaScript】classって何？

クラスとは

JavaScriptはオブジェクト指向プログラミングができます。

オブジェクト指向プログラミングは、非常に簡単に言うと「設計図をもとにオブジェクトを作る」手法です。
設計図には「どんなことができるか」「どんな値を持っているか」なんかを書き、これをクラスと呼びます。

オブジェクト指向の詳細はこちらの記事が参考になると思います。

用語

• クラス: 設計図のようなもの、オブジェクト指向の要
• インスタンス（オブジェクト）: クラスを実際に使えるよう具現化したもの
• フィールド: クラスで定義できる、値を持っておく場所
• メソッド: クラスでできる動作の実装、関数と似ている

例

ここでは、例として本（Book）を示すクラスを作ってみます。
本には以下の要素があります。

• タイトル（title）: 文字列
• 著者（authors）: 文字列が入った配列
  • 著者は複数いる場合もある
• 読み終わったか（isRead）: 真偽値
  • あなたがその本を読み終わったか
  • 読み取り専用にするため、getterとして実装する

また、本には以下の機能を用意します。

• toJSON: 本が持っている情報をJSON形式にする
• read: 本を読み終わる、ここではisReadをtrueにする

---

では、さっそく実装していきます。

新しくクラスを定義する

新しくクラスを定義するにはclassキーワードを使います。
これはclass クラス名 { 実装 }という形式です。

class Book {
  // ...
}

フィールドを定義する

次に、フィールドを定義します。
ここではtitle、authors、そして#isReadが必要です。

フィールドはクラスの{}の中にフィールド名という形で書けます。
また、フィールド名 = 初期値という形で初期値を設定できます。

class Book {
  title
  authors
  #isRead = false // デフォルトでは本は読み終わっていない
}

#isReadはプライベートプロパティという構文を使っています。
これはフィールドをクラスの外からアクセスできなくするものです。

JavaScriptではフィールドは書かなくても使用できます。
ですが、書いておくことでこのクラスにはどのフィールドがあるかわかりやすくなるので、基本は書いておくことをお勧めします。

コンストラクタを実装する

コンストラクタは、インスタンスの作成時に一度だけ自動で実行される特別なメソッドです。
主にインスタンスの初期化に使われます。

JavaScriptではconstructorいう名前のメソッドがコンストラクタになります。
ここでは以下のように実装してみました。

class Book {
  title
  authors
  #isRead = false

  constructor(title, authors) {
    this.title = title
    this.authors = authors
  }
}

今回のBookクラスのコンストラクタでは、titleとauthorsを受け取って初期化します。
ここでの初期化はフィールドに受け取った値をセットすることです。

フィールドに値をセットするには、this変数を用います。
これは特別な変数で、自身のインスタンスにアクセスするのに使えます。

インスタンス化してみる

クラスのインスタンスを作るには、new演算子が使えます。
これはnew クラス名(コンストラクタの引数)という形式です。

const book = new Book('本のタイトル', ['著者1'])

// フィールドにアクセス
book.title // '本のタイトル'
book.authors // ['著者1']

readメソッドを実装する

readメソッドは、呼び出すとisReadをtrueに設定します。

class Book {
  title
  authors
  #isRead = false

  constructor(title, authors) {
    this.title = title
    this.authors = authors
  }

  read() {
    this.#isRead = true
  }
}

toJSONメソッドを実装する

toJSONは以下の情報をJSON文字列に変換して返すメソッドです。

• title
• authors
• isRead

実装にはJSON.stringifyが使えます。

class Book {
  title
  authors
  #isRead = false

  // 略

  toJSON() {
    const obj = { // JSONに変換するオブジェクト
      title: this.title,
      authors: this.authors,
      isRead: this.#isRead
    }
    return JSON.stringify(obj)
  }
}

isReadゲッターを実装する

ゲッターは簡単に言うと、プロパティにアクセスすると呼び出される関数です。

ゲッターとプライベートフィールドを組み合わせることで、外部から直接変更できないフィールドを実装できます。

ゲッターはget 名前() {処理}という構文で定義できます。

class Book {
  #isRead = false

  // 略
  
  get isRead() {
    return this.#isRead // プライベートフィールドを返す
  }
}

プロパティの場合

もし普通にisReadをプロパティとして実装した場合、これは外部から簡単に変更できてしまいます。

const book = new Book('本', ['著者'])
book.isRead // false

// 簡単に変更できる
book.isRead = true
book.isRead // true

本来、isReadを変更するためにはreadメソッドを呼び出す必要があります。
にも関わらずこのように変更できてしまうのは問題なので、ゲッターとして実装しています。

使用例

ここまでで作成したBookクラスは、以下のように使用できます。

const book = new Book('読みたい本のタイトル', ['著者1'])

book.title // '読みたい本のタイトル'
book.isRead // false

// isReadに直接代入することはできない
book.isRead = true
book.isRead // falseのまま

book.read()
book.isRead // true

book.toJSON() // { title: '読みたい本のタイトル', author: ... }

クラスの詳細や他の機能はMDNをご覧ください。