JavaScriptでクラスとコンストラクタの関係を理解しよう｜オブジェクト指向プログラミング入門

1. JavaScriptのクラスとは何か

1. JavaScriptのクラスとは何か

JavaScriptのクラスとは、オブジェクトを作るための設計図です。オブジェクトとは、データと処理をひとまとめにしたものです。たとえば、人というオブジェクトには名前や年齢といったデータがあり、あいさつするという動作も持たせることができます。

JavaScriptはもともとオブジェクトを直接作ることができる言語ですが、クラスという仕組みを使うことで、同じ形のオブジェクトを効率よく何度も作れるようになります。これがオブジェクト指向プログラミングの基本的な考え方です。

オブジェクト指向とは、物を中心に考える考え方です。現実世界の物をそのままプログラムに登場させるイメージです。人や車や商品などをクラスとして定義し、そこから具体的なデータを持つオブジェクトを作ります。

2. コンストラクタとは何か

2. コンストラクタとは何か

コンストラクタとは、クラスからオブジェクトを作るときに自動的に呼び出される特別なメソッドです。メソッドとは、クラスの中に書く処理のことです。

コンストラクタは、オブジェクトが生まれた直後に一度だけ実行されます。ここで名前や年齢などの初期値を設定します。初期値とは、最初に入れておく値のことです。

クラスとコンストラクタの関係は、設計図と準備作業の関係です。クラスという設計図があり、コンストラクタがその設計図をもとに中身を整える役割を持っています。

3. クラスとコンストラクタの基本的な書き方

3. クラスとコンストラクタの基本的な書き方

ここではJavaScriptでクラスとコンストラクタを書く方法を見てみましょう。とてもシンプルな例です。

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

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

const user = new Person("太郎", 20);
user.greet();

このコードでは、Personというクラスを定義しています。constructorがコンストラクタです。thisとは、そのオブジェクト自身を指す特別な言葉です。

newというキーワードを使うことで、クラスから新しいオブジェクトを作ります。このときにコンストラクタが実行されます。

こんにちは、太郎です。

4. コンストラクタで初期値を設定する意味

4. コンストラクタで初期値を設定する意味

なぜコンストラクタで初期値を設定するのでしょうか。それは、オブジェクトごとに違うデータを持たせるためです。

たとえば同じPersonクラスでも、名前や年齢が違う人を何人も作ることができます。

const user1 = new Person("花子", 25);
const user2 = new Person("次郎", 30);

console.log(user1.name);
console.log(user2.name);

花子
次郎

このように、コンストラクタを使うことで、それぞれ違う値を持つオブジェクトを簡単に作ることができます。これがJavaScriptのクラスとコンストラクタの大きなメリットです。

5. メソッドとコンストラクタの違い

5. メソッドとコンストラクタの違い

コンストラクタは特別なメソッドですが、通常のメソッドとは役割が異なります。コンストラクタはオブジェクト作成時に一度だけ実行されます。一方、通常のメソッドは必要なときに何度でも呼び出せます。

次の例では、計算を行うクラスを作っています。

class Calculator {
  constructor(initialValue) {
    this.value = initialValue;
  }

  add(number) {
    this.value += number;
  }

  getValue() {
    return this.value;
  }
}

const calc = new Calculator(10);
calc.add(5);
console.log(calc.getValue());

15

constructorは最初に値を設定するだけです。addやgetValueはあとから何度でも使えます。この違いを理解することが、JavaScriptのクラス設計では重要です。

6. クラスを使うメリットとオブジェクト指向の考え方

6. クラスを使うメリットとオブジェクト指向の考え方

JavaScriptでクラスを使うメリットは、コードを整理しやすくなることです。同じ形のオブジェクトを何度も作るときに、クラスがあると非常に便利です。

オブジェクト指向プログラミングでは、データと処理をひとまとめにします。これにより、プログラムの見通しが良くなり、修正もしやすくなります。

たとえば商品を管理するシステムでは、商品クラスを作り、価格や名前をコンストラクタで設定します。そして値引き計算などの処理をメソッドとして定義します。

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }

  discount(rate) {
    return this.price * (1 - rate);
  }
}

const item = new Product("りんご", 200);
console.log(item.discount(0.1));

180

このように、JavaScriptのクラスとコンストラクタを理解すると、実際のサービス開発やアプリ開発でも役立ちます。初心者の方は、まずは小さなクラスを自分で作ってみることが理解への近道です。

まとめ

まとめ

今回は、JavaScriptでクラスとコンストラクタの関係を理解することをテーマに、オブジェクト指向プログラミングの基礎をやさしく整理しました。JavaScriptのクラスはオブジェクトを作るための設計図であり、コンストラクタはその設計図からインスタンスを生成するときに最初に実行される特別なメソッドです。クラス構文を使うことで、同じ構造を持つオブジェクトを効率よく生成でき、コードの再利用性や保守性が高まります。

JavaScriptのクラスは、従来のプロトタイプベースの仕組みをわかりやすく書けるようにした構文です。constructorという名前のメソッドを定義することで、インスタンス生成時の初期化処理をまとめて記述できます。thisキーワードを使えば、そのオブジェクト自身のプロパティへアクセスできます。newキーワードによってクラスからインスタンスを生成すると、コンストラクタが自動的に実行され、プロパティに値が設定されます。

オブジェクト指向プログラミングでは、データと処理をひとまとめにして考えます。JavaScriptのクラスを活用することで、プロパティとメソッドを整理しながら設計できます。たとえば人クラスや商品クラスのように、現実世界の概念をそのままプログラムに落とし込むことが可能です。クラス設計を意識すると、複数人のユーザー管理や商品管理などのアプリケーション開発でも拡張しやすくなります。

コンストラクタは一度だけ実行される初期化処理であり、通常のメソッドは必要なときに何度でも呼び出せる処理です。この違いを理解することは、JavaScriptのクラス設計において非常に重要です。初期値を安全に設定し、インスタンスごとに異なるデータを持たせることで、柔軟なオブジェクト生成が可能になります。

クラスとコンストラクタの確認サンプル

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

  introduce() {
    console.log("名前は" + this.name + "で、年齢は" + this.age + "歳です。");
  }
}

const userA = new User("健太", 28);
const userB = new User("美咲", 22);

userA.introduce();
userB.introduce();

名前は健太で、年齢は28歳です。
名前は美咲で、年齢は22歳です。

上記のように、JavaScriptのクラスとコンストラクタを使うことで、複数のインスタンスを簡単に生成できます。オブジェクト指向プログラミングの基本である設計図と実体の関係を理解することで、より実践的なプログラムを書けるようになります。クラス設計を意識したコーディングは、可読性の向上、保守性の向上、拡張性の確保につながります。

JavaScript初心者の方は、まずは小さなクラスを作り、コンストラクタで初期値を設定し、メソッドで処理を実装する練習を重ねてください。クラスとコンストラクタの関係を正しく理解すれば、オブジェクト指向プログラミングの基礎がしっかり身につきます。これからフロントエンド開発やバックエンド開発を学ぶうえでも、JavaScriptのクラス構文は重要な知識になります。