JavaScriptの「class」を理解しよう！初心者でも使い方がわかるように解説

2024-05-06

当サイトでは一部リンクに広告が含まれています

JavaScriptを使う上で避けては通れないオブジェクト指向プログラミングの概念。その中心となるのがclass構文です。

従来、JavaScriptにはクラスという概念がなく、オブジェクト指向的な書き方がしづらいという声も多くありました。しかし、ES2015(ES6)からclass構文が導入され、より簡潔で直感的なオブジェクト指向プログラミングが可能になりました。

そこで今回は、JavaScriptのclass構文について、基本的な使い方から発展的な内容まで幅広く解説していきます！初心者の方にもわかりやすいよう、丁寧に説明していきますので、ぜひ最後までご覧ください。

また、本記事の著者は以下のような経験を持っており、わかりやすくプログラミングを教えるプロですのでご安心ください！

現役のフルスタックWebエンジニアとして活躍中
プログラミングスクールで教材を執筆した経験アリ
副業でプログラミングスクール講師をしている教育のプロ

classとは

classは、オブジェクト指向プログラミングの基本的な概念の1つです。
classはオブジェクトの設計図のようなもので、同じ機能や特徴を持つオブジェクトを効率的に生成するための仕組みと言えます。

classを定義することで、オブジェクトがどのようなプロパティやメソッドを持つのかを指定できます。そして、classから実際にオブジェクトを生成する際はnew演算子を使ってインスタンス化します。

class = オブジェクトの設計図(型)
オブジェクト = classを元に生成された実体(インスタンス)

classを使うメリットは大きく分けて3つあります。

コードの再利用性が高まる
継承によって既存のclassを拡張できる
メンテナンス性が向上する

このようにclassを使うことで、オブジェクト指向的な設計が行えるようになります。ではさっそく、classの基本的な使い方から見ていきましょう。

classの基本的な書き方

クラス宣言

classを定義する方法は大きく分けて2つあります。
1つ目はクラス宣言です。これはclassキーワードを使って以下のように書きます。

class クラス名 {
 // ここにプロパティやメソッドを定義する
}

クラス宣言の場合、クラス名は必ず指定する必要があります。一般的にクラス名は大文字から始めるのが慣習です。

class式

もう1つの方法が、class式と呼ばれるものです。
class式では、クラスを変数に代入する形で定義します。

const MyClass = class {
 // プロパティやメソッドを定義
};

class式の場合、クラス名は省略できます。省略した場合は、変数名がクラス名として扱われます。

コンストラクタ

classの中で特別なメソッドとしてconstructorがあります。
constructorは、インスタンスを生成する際に呼び出されるメソッドで、主にプロパティの初期化などを行います。

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

constructorを定義しなかった場合は、デフォルトのconstructorが使われます。デフォルトのconstructorは引数を取らず、空のオブジェクトを生成します。

メソッド

classの中で定義する関数をメソッドと呼びます。
メソッドの定義方法は以下のようになります。

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

 greet() {
   console.log(`こんにちは、${this.name}さん`);
 }
}

ここではgreetというメソッドを定義しています。メソッドの中ではthisキーワードを使って、インスタンスのプロパティにアクセスできます。

classの使い方

classを定義したら、次はそのclassを使ってオブジェクトを生成してみましょう。
オブジェクトを生成するには、new演算子を使います。

const taro = new User('太郎', 20);
console.log(taro.name); // 太郎
console.log(taro.age);  // 20

taro.greet(); // こんにちは、太郎さん

newの後にクラス名を指定し、必要な引数をコンストラクタに渡します。これにより、インスタンスが生成されます。
生成したインスタンスは変数に代入して使います。ドット記法を使えば、プロパティの参照やメソッドの呼び出しができます。

インスタンス生成には、new演算子を使う
インスタンスのプロパティやメソッドにアクセスするには、ドット記法を使う

メソッドの種類

ゲッター・セッター

classの中で、特別な種類のメソッドとしてゲッターとセッターがあります。
ゲッターとセッターは、プロパティの値を読み書きするためのメソッドです。

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

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

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

ゲッターはgetキーワードを使って定義し、セッターはsetキーワードを使って定義します。
ゲッターはプロパティの値を返し、セッターはプロパティに値をセットします。ゲッターとセッターを使うと、プロパティに対して値の検証やログ出力などの処理を挟むことができます。

静的メソッド

インスタンスに依存しない、クラスレベルのメソッドを静的メソッド(static method)と言います。
静的メソッドを定義するには、メソッド名の前にstaticキーワードをつけます。

class User {
 static getRandomId() {
   return Math.random().toString(36).slice(-8);
 }
}

console.log(User.getRandomId()); // ランダムな8文字のID

静的メソッドはクラス名を使って呼び出します。インスタンスからは呼び出せません。
ユーティリティ的な処理を切り出すのに便利です。

継承

classの大きな特徴の1つに継承があります。
継承を使うと、既存のclassを拡張して新しいclassを定義できます。

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

 greet() {
  console.log(私は${this.name}です);
}
}
class Dog extends Animal {
constructor(name, breed) {
super(name);
this.breed = breed;
}
bark() {
console.log('ワンワン！');
}
}
const pochi = new Dog('ポチ', '柴犬');
pochi.greet(); // 私はポチです
pochi.bark();  // ワンワン！

継承するには、extendsキーワードを使います。ここでは、Animalクラスを継承してDogクラスを定義しています。

Dogクラスのconstructor内でsuper()を呼び出しているのがポイントです。これは親クラス(スーパークラス)のconstructorを呼び出すための特別な関数で、継承時は必ず呼び出す必要があります。

継承すると、子クラス(サブクラス)は親クラスのプロパティやメソッドを引き継ぎます。親クラスにあるメソッドを子クラスで上書き(オーバーライド)することもできます。