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

JavaScript クラスとは？

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

たとえば「ユーザー」というクラスを作ると、同じ構造（名前・年齢・メール）を持つユーザーオブジェクトを何個でも作れます。

クラスの基本的な書き方

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歳）

📖 詳しくは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(); // ポチ：ワン！

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

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

🔥 スコープとはで実践してみましょう。

クラスを使う場面

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

場面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クラスなど）から作ってみましょう。

クラスを使いこなせるようになると、大規模なプログラムも整理して書けるようになります。たとえばゲームを作るとき、Player、Enemy、Itemなどのクラスを定義すれば、それぞれの動きや状態を独立して管理できます。コードが増えても混乱しにくくなるのがクラスの最大のメリットです。

また、React、Vue、Angularなどのフレームワークでもクラスの考え方が使われています。今のうちにクラスの基本を理解しておけば、将来フレームワークを学ぶときにスムーズに入れます。焦らず、一つずつ概念を積み上げていきましょう。プログラミングの世界が広がります。

まとめ

クラスを使いこなすと、大規模なプログラムが整理しやすくなります。レッスンでさらに実践的な使い方を学んでみましょう。