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

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

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

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

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

classとは

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

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

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

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

メソッドの種類

ゲッター・セッター

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を呼び出すための特別な関数で、継承時は必ず呼び出す必要があります。

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

注意点

まとめ

今回は、JavaScriptのclass構文について基礎から見てきました。
classを使うことで、オブジェクト指向的な設計が可能になります。再利用性が高く、継承によって柔軟に拡張できるコードを書けるようになります。

JavaScriptのclassはES2015以降の機能で、内部的には従来のプロトタイプベースが使われています。これまでJavaなどのクラスベースの言語を使っていた人には馴染みやすい書き方だと思います。

理解するのに少し時間がかかるかもしれませんが、使いこなせるようになれば、より保守性の高いコードが書けるはずです。
ぜひclassを活用して、モダンなJavaScriptプログラミングにチャレンジしてみてください！

JavaScriptを効率的に身につける勉強法は？

JavaScript には興味があっても、プログラミング学習をはじめたばかりであれば、以下のような疑問を持つかもしれません。

• JavaScript を身に付けてエンジニアになるには何をすればいい？
• 何から勉強すればいいんだろう？
• 効率よく勉強するには？

JavaScriptは学ぶべき内容が非常に多いため、勉強法の選び方を間違うと時間・労力・お金が無駄になってしまいます…。

そのため、こちらの記事を参考に、ご自身に最適な学習方法を選んでみませんか？

Muscle Coding

【初心者向け】JavaScriptの勉強法3選を現役エンジニアが比較・解説！ | Muscle Coding JavaScriptの効果的な学習方法を現役エンジニアが解説！本、動画教材（Udemy）、プログラミングスクールの特徴を比較し、最適な方法を提案します。初心者でも理解しやすい…