JavaScriptでクラスを極める！6個の実例で完璧に理解しよう

はじめに

JavaScriptのクラスは、オブジェクト指向プログラミングを実現するための仕組みです。

クラスの概念や使い方が分からないと、実践的なプログラミングが難しくなります。

この記事では、初心者向けにJavaScriptクラスの基本から応用までを徹底解説します。

サンプルコードを参考にしながら、実践的なクラスの作り方や使い方をマスターしましょう。

●JavaScriptクラスとは

JavaScriptのクラスは、オブジェクトの設計図とも言える存在です。

オブジェクト指向プログラミングにおいて、クラスは中心的な役割を果たします。

クラスを使うことで、プロパティ（状態）とメソッド（振る舞い）を定義し、それらをもとにオブジェクトを生成できます。

2015年にリリースされたECMAScript 2015（ES6）から、JavaScriptにクラス構文が導入されました。

これにより、より直感的かつ簡潔にクラスを定義できるようになりました。

●クラスの基本

JavaScriptのクラスは、オブジェクトを生成するための設計図です。

クラスの中でプロパティとメソッドを定義することで、オブジェクトの構造を決定します。

プロパティはオブジェクトが持つデータを表し、メソッドはオブジェクトが行う操作を定義します。

○クラスの作り方

クラスを定義する際には、コンストラクタ関数が重要な役割を果たします。

コンストラクタ関数は、新しいオブジェクトが作られる際に自動的に呼び出される特別な関数です。

オブジェクトの初期設定を行うのに適しています。

class MyClass {
  constructor() {
    // ここに初期化処理を記述します
  }
}

○プロパティとメソッド

クラス内でプロパティとメソッドを定義することで、オブジェクトの特性と機能を決定します。

プロパティはthisキーワードを使って定義し、メソッドは通常の関数として定義します。

class MyClass {
  constructor() {
    this.myProperty = '初期値'; // プロパティの定義
  }

  myMethod() {
    // メソッドの定義
    console.log('メソッドが呼び出されました');
  }
}

●クラスの使い方

クラスを定義したら、次はそれを使ってオブジェクトを作成し、操作する方法を見ていきましょう。

○インスタンスの生成

クラスからオブジェクト（インスタンス）を生成するには、newキーワードを使用します。

これにより、クラスの設計図を元に新しいオブジェクトが作られます。

const myInstance = new MyClass();

○メソッドの呼び出し

生成したオブジェクトのメソッドを呼び出すには、オブジェクト名の後にドット（.）を付け、続けてメソッド名を指定します。

myInstance.myMethod();

●継承を使ったクラスの拡張

JavaScriptでは、既存のクラスを基にして新しいクラスを作ることができます。この仕組みを継承と呼びます。継承を使うと、既存のクラスの機能を引き継ぎつつ、新たな機能を追加したり、既存の機能を変更したりできます。

class MyChildClass extends MyClass {
  constructor() {
    super(); // 親クラスのコンストラクタを呼び出します
  }

  childMethod() {
    // 子クラス独自のメソッドを定義できます
  }
}

●応用例とサンプルコード

ここからは、JavaScriptクラスを使った具体的な応用例を見ていきましょう。

実際のプログラミングでどのようにクラスを活用できるか、イメージが湧くはずです。

○サンプルコード1：ショッピングカートクラス

オンラインショップでよく見かけるショッピングカートの機能を、クラスを使って実装してみましょう。

class ShoppingCart {
  constructor() {
    this.items = [];
  }

  addItem(item) {
    this.items.push(item);
  }

  removeItem(index) {
    this.items.splice(index, 1);
  }

  getTotalPrice() {
    return this.items.reduce((total, item) => total + item.price, 0);
  }
}

このクラスを使えば、商品の追加、削除、合計金額の計算といった機能を簡単に実装できます。

○サンプルコード2：ToDoリストクラス

日々のタスク管理に便利なToDoリストも、クラスを使って実装できます。

class TodoList {
  constructor() {
    this.tasks = [];
  }

  addTask(task) {
    this.tasks.push({ text: task, completed: false });
  }

  removeTask(index) {
    this.tasks.splice(index, 1);
  }

  completeTask(index) {
    this.tasks[index].completed = true;
  }

  getIncompleteTasks() {
    return this.tasks.filter(task => !task.completed);
  }
}

このクラスを使えば、タスクの追加、削除、完了マークの付与、未完了タスクの取得などの機能を簡単に実装できます。

○サンプルコード3：ユーザー認証クラス

ウェブアプリケーションでよく必要になるユーザー認証の機能も、クラスを使って実装できます。

class UserAuth {
  constructor() {
    this.users = [];
  }

  register(username, password) {
    if (this.users.some(user => user.username === username)) {
      throw new Error('このユーザー名は既に使用されています');
    }
    this.users.push({ username, password });
  }

  login(username, password) {
    const user = this.users.find(user => user.username === username);
    if (!user || user.password !== password) {
      throw new Error('ユーザー名またはパスワードが正しくありません');
    }
    return true;
  }
}

このクラスを使えば、ユーザーの登録やログイン機能を簡単に実装できます。

○サンプルコード4：イベント管理クラス

JavaScriptでよく使用されるイベント駆動プログラミングのための、イベント管理クラスを実装してみましょう。

class EventManager {
  constructor() {
    this.listeners = {};
  }

  on(event, callback) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(callback);
  }

  off(event, callback) {
    if (this.listeners[event]) {
      this.listeners[event] = this.listeners[event].filter(listener => listener !== callback);
    }
  }

  emit(event, ...args) {
    if (this.listeners[event]) {
      this.listeners[event].forEach(listener => listener(...args));
    }
  }
}

このクラスを使えば、カスタムイベントの登録、解除、発火といった機能を簡単に実装できます。

●注意点と対処法

JavaScriptクラスを使う際には、いくつか注意すべき点があります。

これを理解しておくことで、より効果的にクラスを活用できるでしょう。

○thisの挙動

JavaScriptでは、thisキーワードの挙動が他の言語とは少し異なります。

thisの値は、関数がどのように呼び出されたかによって変わります。

クラスのメソッド内でthisを使う際は、特に注意が必要です。

対処法としては、アロー関数を使用するか、bindメソッドを使ってthisを固定する方法があります。

class MyClass {
  constructor() {
    this.myMethod = this.myMethod.bind(this);
  }

  myMethod() {
    console.log(this);
  }
}

○プライベートメンバー

JavaScriptのクラスでは、本来の意味でのプライベートメンバー（外部からアクセスできないプロパティやメソッド）を定義する方法が限られています。

一般的な対処法としては、名前の前にアンダースコア（_）を付けることで、プライベートメンバーであることを表す慣習があります。

class MyClass {
  constructor() {
    this._privateProperty = 'プライベート';
  }

  _privateMethod() {
    console.log('これはプライベートメソッドです');
  }
}

また、最新のJavaScriptでは、#を使用してプライベートフィールドを定義することもできますが、ブラウザの対応状況には注意が必要です。

class MyClass {
  #privateField = 'プライベート';

  getPrivateField() {
    return this.#privateField;
  }
}

●カスタマイズ

JavaScriptのクラスは非常に柔軟で、様々な方法でカスタマイズできます。

継承を使って既存のクラスを拡張したり、コンストラクタに引数を渡して初期状態を設定したりできます。

○サンプルコード5：パラメータ付きコンストラクタ

コンストラクタに引数を渡すことで、クラスのインスタンス化時に初期値を設定できます。

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

  introduce() {
    console.log(`私の名前は${this.name}です。${this.age}歳です。`);
  }
}

const john = new Person('John', 30);
john.introduce(); // "私の名前はJohnです。30歳です。"

○サンプルコード6：メソッドのオーバーライド

継承を使う際、親クラスのメソッドを子クラスで上書き（オーバーライド）することができます。

class Animal {
  speak() {
    console.log('動物が鳴きます');
  }
}

class Dog extends Animal {
  speak() {
    console.log('ワンワン！');
  }
}

const dog = new Dog();
dog.speak(); // "ワンワン！"