JavaScriptのclassとは？クラスの書き方・使い方を解説

PR JavaScript

JavaScriptのclassとは？クラスの書き方・使い方を解説

💡 この記事でわかること

  • class構文とは何か
  • constructorとプロパティの書き方
  • メソッドの定義方法
  • newを使ったインスタンスの作り方
  • extendsを使った継承の基本

1. class構文とは？

class構文とは、
👉 「同じ形のデータ(オブジェクト)」を何個も簡単に作れるようにするための、設計図(ひな形)を定義する構文です。

👉 JavaScriptのオブジェクトについての記事はこちら

💡 例えば「ユーザー」を表すオブジェクトをいくつも作りたいとき、1つずつ手作業で書く代わりに、classで設計図を1つ作っておけば、そこから同じ形のオブジェクトを何個でも生成できます。

2. クラスの基本的な書き方

クラスはclassキーワードを使って定義します。中に書くconstructorは、インスタンス(実体)を作るときに自動的に呼ばれる特別な関数です。

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

👉 constructorの引数として受け取った値を、this.プロパティ名 = 値という形で自分自身(this)に書き込むのが基本パターンです。thisは「これから作られるインスタンス自身」を指しています。

3. メソッドの定義

クラスの中には、そのクラス専用の関数(メソッド)も定義できます。

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

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

👉 メソッドの中でも、そのインスタンス自身のプロパティにアクセスするにはthisを使います。function キーワードやカンマは不要で、メソッド名の後に直接()と{}を書きます。

4. newを使ったインスタンスの作成

クラスはあくまで「設計図」なので、実際に使うにはnewキーワードを使って実体(インスタンス)を作ります。

const tanaka = new User("田中", 25);
const suzuki = new User("鈴木", 30);

tanaka.greet(); // "こんにちは、田中です。"
suzuki.greet(); // "こんにちは、鈴木です。"

console.log(tanaka.age); // 25

👉 new User(...)と書くたびに、constructorが実行されて新しいインスタンスが1つ作られます。同じクラスから作っても、tanakaとsuzukiはそれぞれ別々のデータを持つ独立したオブジェクトです。

5. extendsを使った継承の基本

extendsを使うと、既存のクラスの機能を引き継いだ新しいクラスを作れます。

class AdminUser extends User {
  constructor(name, age, role) {
    super(name, age); // 親クラス(User)のconstructorを呼ぶ
    this.role = role;
  }

  greet() {
    super.greet(); // 親クラスのgreet()も呼びつつ
    console.log(`権限:${this.role}`);
  }
}

const admin = new AdminUser("佐藤", 40, "管理者");
admin.greet();
// "こんにちは、佐藤です。"
// "権限:管理者"

💡 super()は「親クラスのconstructorを呼び出す」という意味で、子クラスのconstructor内で必ず最初に呼ぶ必要があります。super.メソッド名()とすれば、親クラスのメソッドも呼び出せます。

6. 初心者がつまずきやすいポイント

  • newを付け忘れる:User("田中", 25)のようにnewを付けずに呼ぶとエラーになります。クラスは必ずnewとセットで使います
  • thisの指す先を見失う:メソッドを変数に代入したりコールバックとして渡したりすると、thisの指す先がインスタンスからずれてしまうことがあります
  • 子クラスでsuper()を忘れる:extendsで継承したクラスのconstructorでは、super()を呼ぶまでthisを使えません

まとめ

  • classは「同じ形のオブジェクトを作るための設計図」
  • constructorはインスタンス作成時に自動で呼ばれる初期化処理
  • メソッドはクラスの中に直接書ける
  • newでインスタンスを作り、クラスごとに独立したデータを持たせられる
  • extendsとsuperを使うと、既存クラスの機能を引き継いだクラスを作れる

class構文は、複数の似たオブジェクトを扱う場面で特に威力を発揮します。まずはconstructorとメソッドの基本形を書けるようになり、慣れてきたら継承にも挑戦してみましょう。

-JavaScript
-, ,