JavaScriptのクラス入門【オブジェクト指向をわかりやすく】

JavaScript クラスとは？

JavaScriptの クラス（class） は、同じ構造を持つオブジェクトを効率よく作るための「設計図」です。

たとえば「ユーザー」というクラスを作ると、同じ構造（名前・年齢・メール）を持つユーザーオブジェクトを何個でも作れます。クラスを使わなくてもオブジェクトは作れますが、10人分のユーザーを1つずつ手書きすると、プロパティ名のタイプミスや書き漏れが起きやすくなります。クラスにまとめておけば、newするだけで同じ形のオブジェクトを安全に量産できます。

なお、classという書き方はES2015（ES6）というJavaScriptの仕様で導入されたものです。中身は「関数＋プロトタイプ」という以前からの仕組みを分かりやすく書けるようにしたもので、まったく新しい仕組みが追加されたわけではありません。まずは「見た目がシンプルになった書き方」として捉えれば十分です。

クラスの基本的な書き方

class User {
  // コンストラクター：インスタンス作成時に実行される
  constructor(name, age) {
    this.name = name;
    this.age  = age;
  }

  // メソッド
  greet() {
    console.log('こんにちは、' + this.name + 'です！');
  }

  getInfo() {
    return this.name + '（' + this.age + '歳）';
  }
}

// インスタンスを作成
const user1 = new User('田中', 15);
const user2 = new User('鈴木', 14);

user1.greet(); // こんにちは、田中です！
console.log(user2.getInfo()); // 鈴木（14歳）

コードの流れを追ってみましょう。new User('田中', 15)を実行すると、まずconstructorが呼ばれ、this.nameとthis.ageにそれぞれ'田中'と15が代入されます。この時点でuser1という1つのオブジェクトが完成し、user1.greet()を呼ぶとconstructorで設定された名前を使ってあいさつが表示されます。user2も同じclassから作られていますが、constructorに渡した値が違うため、中身の異なる別のオブジェクトになります。

📖 詳しくはJavaScriptとは？初心者向け解説で解説しています。

継承（extends）

既存のクラスを元に新しいクラスを作ることを 継承（けいしょう） といいます。

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + 'が鳴きます');
  }
}

// Animalを継承したDogクラス
class Dog extends Animal {
  speak() {
    console.log(this.name + '：ワン！');
  }
}

const dog = new Dog('ポチ');
dog.speak(); // ポチ：ワン！

共通の処理は親クラス（Animal）に、固有の処理は子クラス（Dog）に書きます。上の例ではDogがconstructorを書いていないので、Animalのconstructorがそのまま使われています。もしDog独自のプロパティ（犬種など）を追加したい場合は、Dogにもconstructorを書き、super(name)で親クラスのconstructorを先に呼び出す必要があります。super()を書き忘れると、thisを使う前にエラーになるので注意しましょう。

同じ構造のオブジェクトを複数作る場合や、状態と振る舞いをまとめたい場合にクラスを使うと便利です。1〜2個しか作らないなら、普通のオブジェクトリテラルで十分です。

👉 配列入門も参考にしてください。

staticメソッド

static をつけたメソッドは、インスタンスを作らずにクラスから直接呼び出せます。

class MathHelper {
  static add(a, b) { return a + b; }
  static multiply(a, b) { return a * b; }
}

console.log(MathHelper.add(3, 5));      // 8
console.log(MathHelper.multiply(3, 5)); // 15

getterとsetter

getter（ゲッター） と setter（セッター） を使うと、メソッドをまるで普通のプロパティのように呼び出せます。値を取得するときの処理や、設定するときのチェックをこっそり挟みたいときに便利です。

class Temperature {
  constructor(celsius) {
    this._celsius = celsius;
  }

  // getter：プロパティのように値を取得できる
  get fahrenheit() {
    return this._celsius * 9 / 5 + 32;
  }

  // setter：プロパティのように値を設定できる
  set fahrenheit(f) {
    this._celsius = (f - 32) * 5 / 9;
  }
}

const temp = new Temperature(20);
console.log(temp.fahrenheit); // 68（()をつけずに呼べる）

temp.fahrenheit = 86;
console.log(temp._celsius); // 30

ポイントは、fahrenheit を呼ぶときに temp.fahrenheit() のように丸かっこをつけない点です。get をつけたメソッドは「プロパティを読み取る」形で、set をつけたメソッドは「プロパティに代入する」形で呼び出されます。裏側では計算やチェックが行われていても、使う側からは普通のプロパティに見えるのがgetter/setterのメリットです。

クラスを使う場面

クラスはどんなときに使うのでしょうか。具体的な場面を紹介します。

場面1：同じ構造のデータを複数作るとき

たとえば「生徒」のデータを10人分作りたいとき、毎回オブジェクトを手書きするのは大変です。Studentクラスを作っておけば、new Student("太郎", 15)のように簡単に生徒オブジェクトを量産できます。

場面2：データと処理をセットにしたいとき

「生徒」には名前や年齢というデータと、「自己紹介する」「テストの点数を記録する」という処理があります。クラスを使えば、データ（プロパティ）と処理（メソッド）を1つにまとめられます。

場面3：ゲームのキャラクターを管理するとき

ゲームでは敵キャラクターや味方キャラクターをクラスで定義することが多いです。HP、攻撃力、防御力などのプロパティと、攻撃する、回復するなどのメソッドをまとめます。

クラスを使う前に、オブジェクトの基本を理解しておくとスムーズです。「JavaScriptオブジェクト入門」でプロパティやメソッドの基本を確認しておきましょう。

クラスの構成要素

クラスには主に3つの構成要素があります。

コンストラクタ（constructor）

クラスからオブジェクトを作るとき（new するとき）に自動で実行される特別なメソッドです。プロパティの初期値を設定するために使います。引数で受け取った値をthis.プロパティ名に代入します。

プロパティ

オブジェクトが持つデータです。this.nameやthis.ageのように、thisをつけて定義します。各オブジェクトが独自の値を持ちます。

メソッド

オブジェクトが持つ関数です。クラスの中に関数を書くだけで定義できます。functionキーワードは不要です。メソッドの中ではthisを使って、そのオブジェクト自身のプロパティにアクセスできます。

関数の基本を復習したい人は「JavaScript関数入門」を読んでみてください。

クラスでよくあるミス

ミス1：newを忘れる

クラスからオブジェクトを作るときは、必ずnewをつけます。newを忘れるとエラーになります。

ミス2：thisを忘れる

コンストラクタやメソッドの中でプロパティにアクセスするとき、thisを忘れると別の変数として扱われます。「this.name」と書くべきところを「name」だけにすると、プロパティに値が入りません。

ミス3：メソッドにfunctionをつける

クラスの中でメソッドを定義するとき、functionキーワードは不要です。「greet() { ... }」のように、メソッド名と丸かっこだけで書きます。

ミス4：コンストラクタを複数書く

1つのクラスにコンストラクタは1つだけです。2つ書くとエラーになります。

クラスは最初は難しく感じるかもしれません。でも「同じ構造のオブジェクトを簡単に作るための設計図」と考えれば、シンプルです。まずは簡単なクラス（名前と年齢だけ持つPersonクラスなど）から作ってみましょう。

力試し：出力を予想してみよう

ここまでの内容を使って、次のコードの出力を予想してみましょう。

class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  // getter：面積を計算して返す
  get area() {
    return Math.floor(this.radius * this.radius * 3.14);
  }
}

const c = new Circle(10);
console.log(c.area);

半径10の円なので、面積は「半径 × 半径 × 3.14」で計算されます。10 × 10 × 3.14 = 314 となり、Math.floorで小数点以下を切り捨てても314のままなので、出力は 314 です。areaはgetterなので、c.area()ではなくc.areaだけで呼び出せる点も確認しておきましょう。

まとめ

クラスを使いこなせるようになると、Player・Enemy・Itemのように役割ごとにコードをまとめられ、大規模なプログラムも整理しやすくなります。React・Vue・Angularなどのフレームワークでもクラスの考え方が使われているので、今のうちに基本を押さえておくと将来スムーズです。レッスンでさらに実践的な使い方を学んでみましょう。