JavaScriptにおけるconstructorの基本的な使い方7選

●constructorとは

JavaScriptでオブジェクト指向プログラミングを行う上で、constructorは非常に重要な役割を果たします。

constructorは、オブジェクトを生成する際に呼び出される特別なメソッドで、オブジェクトの初期化を行うことができます。

つまり、constructorを使うことで、オブジェクトの生成と同時に、プロパティの初期値を設定したり、必要な処理を実行したりすることが可能なのです。

○constructorの役割

constructorの主な役割は、オブジェクトの初期化です。

新しいオブジェクトを生成する際に、constructorが呼び出され、オブジェクトのプロパティに初期値を設定します。

これにより、オブジェクトを生成するたびに同じ初期化処理を繰り返す必要がなくなり、コードの可読性や保守性が向上します。

また、constructorを使えば、オブジェクトの生成時に引数を渡すことができるので、柔軟性のあるオブジェクト生成が可能になります。

○constructorの定義方法

constructorは、クラス内で定義します。

constructorの名前は、必ず「constructor」にする必要があります。

次のように、constructor関数を定義することで、オブジェクトの初期化処理を記述できます。

class MyClass {
  constructor() {
    // 初期化処理
  }
}

○サンプルコード1：constructorの基本的な定義

では、実際にconstructorを使ってみましょう。

下記のサンプルコードでは、「Person」クラスを定義し、constructorを使ってオブジェクトを初期化しています。

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

const person1 = new Person("太郎", 25);
console.log(person1.name); // "太郎"
console.log(person1.age); // 25

このサンプルコードでは、「Person」クラスのconstructorが「name」と「age」の2つの引数を受け取り、オブジェクトのプロパティに設定しています。

そして、「new」キーワードを使って新しいオブジェクトを生成し、引数に「太郎」と「25」を渡しています。

最後に、生成されたオブジェクト「person1」のプロパティにアクセスし、コンソールに出力しています。

実行結果

太郎
25

このように、constructorを使うことで、オブジェクトの生成と初期化を同時に行うことができます。

引数を受け取ることで、柔軟なオブジェクト生成が可能になり、コードの可読性や再利用性が向上します。

●constructorと引数

前回は、constructorの基本的な定義方法について解説ました。

今回は、constructorと引数について深掘りしていきましょう。

引数を使うことで、より柔軟でカスタマイズ性の高いオブジェクト生成が可能になります。

constructorに引数を渡すことで、オブジェクトの初期化時に必要な値を動的に設定できます。

例えば、人物の名前や年齢をconstructorの引数として受け取り、オブジェクトのプロパティに設定することができます。

これにより、同じクラスから異なる値を持つオブジェクトを簡単に生成できるようになります。

○サンプルコード2：引数を受け取る

では、constructorで引数を受け取る方法を見ていきましょう。

次のサンプルコードでは、「Rectangle」クラスを定義し、幅と高さを引数として受け取っています。

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  getArea() {
    return this.width * this.height;
  }
}

const rect1 = new Rectangle(5, 10);
console.log(rect1.getArea()); // 50

const rect2 = new Rectangle(3, 7);
console.log(rect2.getArea()); // 21

このサンプルコードでは、「Rectangle」クラスのconstructorが「width」と「height」の2つの引数を受け取り、オブジェクトのプロパティに設定しています。

また、「getArea」メソッドを定義し、幅と高さを掛け合わせて面積を計算しています。

そして、「new」キーワードを使って新しいオブジェクトを生成する際に、引数に値を渡しています。

「rect1」は幅が5、高さが10の長方形オブジェクトで、「rect2」は幅が3、高さが7の長方形オブジェクトです。

最後に、それぞれのオブジェクトの「getArea」メソッドを呼び出し、面積を計算した結果をコンソールに出力しています。

実行結果

50
21

このように、constructorで引数を受け取ることで、オブジェクトの初期化時に必要な値を動的に設定できます。

同じクラスから異なる値を持つオブジェクトを簡単に生成できるようになり、コードの再利用性が向上します。

○サンプルコード3：複数の引数を受け取る

constructorは、複数の引数を受け取ることもできます。

次のサンプルコードでは、「Person」クラスを定義し、名前、年齢、職業の3つの引数を受け取っています。

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

  introduce() {
    console.log(`私の名前は${this.name}です。年齢は${this.age}歳で、職業は${this.job}です。`);
  }
}

const person1 = new Person("山田太郎", 28, "エンジニア");
person1.introduce();

const person2 = new Person("鈴木花子", 35, "デザイナー");
person2.introduce();

このサンプルコードでは、「Person」クラスのconstructorが「name」、「age」、「job」の3つの引数を受け取り、オブジェクトのプロパティに設定しています。

また、「introduce」メソッドを定義し、各プロパティの値を使って自己紹介文を出力しています。

そして、「new」キーワードを使って新しいオブジェクトを生成する際に、引数に値を渡しています。

「person1」は名前が”山田太郎”、年齢が28歳、職業が”エンジニア”の人物オブジェクトで、「person2」は名前が”鈴木花子”、年齢が35歳、職業が”デザイナー”の人物オブジェクトです。

最後に、それぞれのオブジェクトの「introduce」メソッドを呼び出し、自己紹介文をコンソールに出力しています。

実行結果

私の名前は山田太郎です。年齢は28歳で、職業はエンジニアです。
私の名前は鈴木花子です。年齢は35歳で、職業はデザイナーです。

このように、constructorで複数の引数を受け取ることで、より詳細なオブジェクトの初期化が可能になります。

引数の数や順番に注意して、必要な値を渡すようにしましょう。

●constructorとプロパティ

オブジェクト指向プログラミングにおいて、プロパティはオブジェクトの状態を表す重要な要素です。

JavaScriptのconstructorを使うことで、オブジェクトのプロパティを簡単に設定できます。

プロパティを適切に管理することで、オブジェクトの振る舞いを制御し、より柔軟で再利用性の高いコードを書くことができます。

プロパティは、オブジェクトに関連付けられた変数のようなものです。

オブジェクトの内部状態を表現し、オブジェクトごとに異なる値を持つことができます。

constructorの中でプロパティを定義することで、オブジェクトの初期状態を設定できます。

また、オブジェクトの生成後にプロパティの値を変更することもできます。

○サンプルコード4：プロパティを設定する

それでは、constructorでプロパティを設定する方法を見ていきましょう。

先ほどの「Person」クラスを例に、プロパティの設定方法を説明します。

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

  addHobby(hobby) {
    this.hobbies.push(hobby);
  }

  introduce() {
    console.log(`私の名前は${this.name}です。年齢は${this.age}歳です。`);
    console.log(`趣味は${this.hobbies.join("、")}です。`);
  }
}

const person = new Person("山田太郎", 28);
person.addHobby("読書");
person.addHobby("旅行");
person.introduce();

このサンプルコードでは、「Person」クラスのconstructorで、「name」と「age」のプロパティを引数で受け取り、「hobbies」プロパティを空の配列で初期化しています。

また、「addHobby」メソッドを定義し、趣味を追加する機能を持たせています。

そして、「new」キーワードを使って新しいオブジェクトを生成し、「addHobby」メソッドを呼び出して趣味を追加しています。

最後に、「introduce」メソッドを呼び出して、自己紹介文をコンソールに出力しています。

実行結果

私の名前は山田太郎です。年齢は28歳です。
趣味は読書、旅行です。

このように、constructorでプロパティを設定し、メソッドを定義することで、オブジェクトの状態と振る舞いを管理できます。

プロパティは、オブジェクトごとに異なる値を持つことができるため、同じクラスから生成されたオブジェクトでも、それぞれ独自の状態を持つことができます。

○サンプルコード5：静的プロパティを定義する

プロパティには、インスタンスプロパティと静的プロパティの2種類があります。

インスタンスプロパティは、オブジェクトごとに独自の値を持ちますが、静的プロパティは、クラスに関連付けられた値で、すべてのインスタンスから共有されます。

静的プロパティを定義するには、クラスの外側で、クラス名とプロパティ名を使ってアクセスします。

次のサンプルコードでは、「Circle」クラスに静的プロパティ「PI」を定義しています。

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

  getArea() {
    return Circle.PI * this.radius ** 2;
  }
}

Circle.PI = 3.14159;

const circle = new Circle(5);
console.log(circle.getArea());

このサンプルコードでは、「Circle」クラスのconstructor内で、「radius」プロパティを設定しています。

また、「getArea」メソッドを定義し、面積を計算しています。

クラスの外側で、「Circle.PI」として静的プロパティ「PI」を定義しています。

この静的プロパティは、すべての「Circle」インスタンスから共有されます。

最後に、「new」キーワードを使って新しいオブジェクトを生成し、「getArea」メソッドを呼び出して、面積を計算した結果をコンソールに出力しています。

実行結果

78.53975

このように、静的プロパティを使うことで、クラスに関連する共通の値を定義できます。

静的プロパティは、インスタンス間で共有されるため、メモリの節約にもつながります。

●constructorとメソッド

オブジェクト指向プログラミングにおいて、メソッドはオブジェクトの振る舞いを定義する重要な要素です。

JavaScriptのconstructorを使うことで、オブジェクトのメソッドを簡単に定義できます。

メソッドを適切に設計することで、オブジェクトの操作を抽象化し、コードの可読性や再利用性を高めることができます。

メソッドは、オブジェクトに関連付けられた関数のようなものです。

オブジェクトの振る舞いを定義し、オブジェクトの状態を操作したり、特定の処理を実行したりします。

constructorの中でメソッドを定義することで、オブジェクトの生成時にメソッドが自動的に設定されます。

○サンプルコード6：メソッドを定義する

それでは、constructorでメソッドを定義する方法を見ていきましょう。

先ほどの「Person」クラスを例に、メソッドの定義方法を説明します。

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

  sayHello() {
    console.log(`こんにちは、私の名前は${this.name}です。`);
  }

  getAge() {
    return this.age;
  }
}

const person = new Person("山田太郎", 28);
person.sayHello();
console.log(person.getAge());

このサンプルコードでは、「Person」クラスのconstructorで、「name」と「age」のプロパティを設定しています。

また、「sayHello」メソッドと「getAge」メソッドを定義しています。

「sayHello」メソッドは、「name」プロパティを使って挨拶文をコンソールに出力します。

「getAge」メソッドは、「age」プロパティの値を返します。

そして、「new」キーワードを使って新しいオブジェクトを生成し、「sayHello」メソッドを呼び出して挨拶文を出力しています。

また、「getAge」メソッドを呼び出して、年齢を取得し、コンソールに出力しています。

実行結果

こんにちは、私の名前は山田太郎です。
28

このように、constructorでメソッドを定義することで、オブジェクトの振る舞いを設定できます。

メソッドは、オブジェクトの状態を操作したり、特定の処理を実行したりするために使用されます。

○サンプルコード7：静的メソッドを定義する

メソッドには、インスタンスメソッドと静的メソッドの2種類があります。

インスタンスメソッドは、オブジェクトごとに独自の振る舞いを定義しますが、静的メソッドは、クラスに関連付けられた振る舞いを定義します。

静的メソッドを定義するには、メソッド名の前に「static」キーワードを付けます。

次のサンプルコードでは、「Math」クラスに静的メソッド「sum」を定義しています。

class Math {
  static sum(a, b) {
    return a + b;
  }
}

console.log(Math.sum(3, 5));
console.log(Math.sum(10, 20));

このサンプルコードでは、「Math」クラスの静的メソッド「sum」を定義しています。

「sum」メソッドは、2つの引数を受け取り、それらを加算した結果を返します。

静的メソッドは、クラス名を使って直接呼び出すことができます。

「Math.sum(3, 5)」のように、クラス名とメソッド名を使って呼び出します。

実行結果

8
30

このように、静的メソッドを使うことで、クラスに関連する共通の処理を定義できます。

静的メソッドは、インスタンスを生成しなくても呼び出すことができるため、ユーティリティ関数などに適しています。

●よくあるエラーと対処法

JavaScriptのconstructorを使ったオブジェクト指向プログラミングを学ぶ過程で、初心者が陥りがちなエラーがいくつかあります。

このエラーを理解し、適切に対処することで、スムーズにオブジェクト指向プログラミングを習得できます。

ここでは、よくあるエラーとその対処法について、具体的なサンプルコードを交えながら解説していきます。

初心者の方も、これらのエラーを事前に知っておくことで、コーディング中に遭遇した場合に冷静に対処できるようになるでしょう。

○constructorの呼び出し忘れ

constructorを定義したクラスからオブジェクトを生成する際、「new」キーワードを使って呼び出すのを忘れてしまうことがあります。

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

const person = Person("山田太郎");
console.log(person.name);

このコードでは、「Person」クラスのオブジェクトを生成するために、「new」キーワードを使っていません。

その結果、次のようなエラーが発生します。

実行結果

Uncaught TypeError: Cannot set property 'name' of undefined

このエラーは、「new」キーワードを使わずにconstructorを呼び出したために、「this」が正しく参照できないことが原因です。

対処法としては、オブジェクトを生成する際に、必ず「new」キーワードを使ってconstructorを呼び出すようにします。

const person = new Person("山田太郎");

このように修正することで、エラーが解消され、正しくオブジェクトが生成されます。

○thisキーワードの参照ミス

constructorやメソッド内で、「this」キーワードを使ってオブジェクトのプロパティやメソッドを参照する際、「this」の参照先を間違えてしまうことがあります。

class Counter {
  constructor() {
    this.count = 0;
    const button = document.querySelector("button");
    button.addEventListener("click", function() {
      console.log(this.count);
    });
  }
}

const counter = new Counter();

このコードでは、「Counter」クラスのconstructorで、ボタンのクリックイベントにイベントリスナーを追加しています。

イベントリスナー内で、「this.count」を参照しようとしていますが、ここでの「this」はクラスのインスタンスではなく、イベントリスナー自体を指しているため、「undefined」になってしまいます。

対処法としては、アロー関数を使ってイベントリスナーを定義することで、「this」の参照先をクラスのインスタンスに固定できます。

button.addEventListener("click", () => {
  console.log(this.count);
});

このように修正することで、「this」がクラスのインスタンスを正しく参照し、エラーが解消されます。

○プロパティ名の重複

constructorでプロパティを設定する際、すでに存在するプロパティ名を使ってしまうと、意図しない上書きが発生することがあります。

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
    this.width = 10;
  }
}

const rect = new Rectangle(5, 3);
console.log(rect.width);

このコードでは、「Rectangle」クラスのconstructorで、「width」プロパティを2回設定しています。

2回目の設定で、「width」プロパティが上書きされてしまいます。

実行結果

10

対処法としては、プロパティ名の重複に注意し、意図しない上書きが発生しないようにします。

また、プロパティ名には分かりやすく意味のある名前を付けることをおすすめします。

class Rectangle {
  constructor(width, height) {
    this.rectWidth = width;
    this.rectHeight = height;
  }
}

このように、プロパティ名を変更することで、重複を避け、コードの可読性も向上します。

●constructorの応用例

ここまで、JavaScriptのconstructorの基本的な使い方や注意点について解説してきました。

基礎を押さえたところで、実践的なconstructorの応用例を見ていきましょう。

ここでは、実務でよく遭遇するシーンを想定し、ユーザー情報の管理、商品データの管理、ゲームキャラクターの生成などの具体的なサンプルコードを通して、constructorの活用方法を学びます。

これらの応用例を通して、オブジェクト指向プログラミングの利点を実感し、開発現場での課題解決にconstructorを役立てる方法を身につけましょう。

初心者の方も、サンプルコードを手がかりに、少しずつconstructorの活用イメージを膨らませてください。

それでは、実際のコードを見ていきましょう。

○サンプルコード8：ユーザー情報を管理する

Webアプリケーションでは、ユーザー情報を管理することがよくあります。

constructorを使って、ユーザー情報を表すクラスを定義し、ユーザーの追加や検索を行うサンプルコードを見てみましょう。

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

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

  addUser(user) {
    this.users.push(user);
  }

  findUserById(userId) {
    return this.users.find(user => user.id === userId);
  }
}

const userManager = new UserManager();

const user1 = new User(1, "山田太郎", "yamada@example.com");
const user2 = new User(2, "鈴木花子", "suzuki@example.com");

userManager.addUser(user1);
userManager.addUser(user2);

const foundUser = userManager.findUserById(2);
console.log(foundUser);

このサンプルコードでは、「User」クラスと「UserManager」クラスを定義しています。

「User」クラスは、ユーザーのID、名前、メールアドレスを表すプロパティを持ち、constructorで初期化します。

「UserManager」クラスは、ユーザーの管理を行うクラスです。

constructorで、ユーザーを格納する配列を初期化しています。

「addUser」メソッドでユーザーを追加し、「findUserById」メソッドでIDを指定してユーザーを検索します。

そして、「UserManager」のインスタンスを生成し、2人のユーザーを追加しています。

最後に、IDが2のユーザーを検索し、コンソールに出力しています。

実行結果

User {id: 2, name: "鈴木花子", email: "suzuki@example.com"}

このように、constructorを使ってユーザー情報を管理するクラスを定義することで、ユーザーデータの追加や検索を簡単に行うことができます。

実務では、データベースと連携させることで、より本格的なユーザー管理システムを構築できます。

○サンプルコード9：商品データを管理する

ECサイトなどでは、商品データを管理する必要があります。

constructorを使って、商品データを表すクラスを定義し、商品の追加や検索を行うサンプルコードを見てみましょう。

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

class ProductManager {
  constructor() {
    this.products = [];
  }

  addProduct(product) {
    this.products.push(product);
  }

  findProductsByCategory(category) {
    return this.products.filter(product => product.category === category);
  }
}

const productManager = new ProductManager();

const product1 = new Product(1, "Tシャツ", 2000, "衣類");
const product2 = new Product(2, "ジーンズ", 5000, "衣類");
const product3 = new Product(3, "キーボード", 3000, "家電");

productManager.addProduct(product1);
productManager.addProduct(product2);
productManager.addProduct(product3);

const clothingProducts = productManager.findProductsByCategory("衣類");
console.log(clothingProducts);

このサンプルコードでは、「Product」クラスと「ProductManager」クラスを定義しています。

「Product」クラスは、商品のID、名前、価格、カテゴリを表すプロパティを持ち、constructorで初期化します。

「ProductManager」クラスは、商品の管理を行うクラスです。

constructorで、商品を格納する配列を初期化しています。

「addProduct」メソッドで商品を追加し、「findProductsByCategory」メソッドでカテゴリを指定して商品を検索します。

そして、「ProductManager」のインスタンスを生成し、3つの商品を追加しています。

最後に、カテゴリが”衣類”の商品を検索し、コンソールに出力しています。

実行結果

[
  Product {id: 1, name: "Tシャツ", price: 2000, category: "衣類"},
  Product {id: 2, name: "ジーンズ", price: 5000, category: "衣類"}
]

このように、constructorを使って商品データを管理するクラスを定義することで、商品の追加や検索を簡単に行うことができます。

実務では、データベースと連携させることで、大規模な商品管理システムを構築できます。

○サンプルコード10：ゲームキャラクターを生成する

ゲーム開発では、キャラクターの生成や管理にconstructorを活用できます。

下記のサンプルコードでは、ゲームキャラクターを表すクラスを定義し、キャラクターの生成と戦闘シミュレーションを行います。

class Character {
  constructor(name, hp, attack) {
    this.name = name;
    this.hp = hp;
    this.attack = attack;
  }

  isAlive() {
    return this.hp > 0;
  }

  takeDamage(damage) {
    this.hp -= damage;
  }
}

function simulateBattle(character1, character2) {
  let currentAttacker = character1;
  let currentDefender = character2;

  while (character1.isAlive() && character2.isAlive()) {
    currentDefender.takeDamage(currentAttacker.attack);
    [currentAttacker, currentDefender] = [currentDefender, currentAttacker];
  }

  const winner = character1.isAlive() ? character1 : character2;
  console.log(`${winner.name}が勝利しました！`);
}

const char1 = new Character("勇者", 100, 20);
const char2 = new Character("魔王", 120, 15);

simulateBattle(char1, char2);

このサンプルコードでは、「Character」クラスを定義し、キャラクターの名前、HP、攻撃力を表すプロパティを持ち、constructorで初期化します。

また、「isAlive」メソッドでキャラクターが生存しているかを判定し、「takeDamage」メソッドでダメージを受けた際のHP減少処理を行います。

次に、「simulateBattle」関数を定義し、2つのキャラクターを引数として受け取り、バトルシミュレーションを行います。

while文を使って、どちらかのキャラクターのHPが0以下になるまで、交互に攻撃し合います。

最後に、勝利したキャラクターの名前をコンソールに出力します。

そして、「Character」クラスを使って、”勇者”と”魔王”のキャラクターを生成し、「simulateBattle」関数でバトルシミュレーションを行います。

実行結果

魔王が勝利しました！

このように、constructorを使ってゲームキャラクターを表すクラスを定義することで、キャラクターの生成や管理がスムーズに行えます。

実際のゲーム開発では、より複雑なキャラクター情報やバトルロジックを実装することになります。

まとめ

JavaScriptにおけるconstructorは、オブジェクト指向プログラミングの中核を担う重要な概念です。

この記事では、constructorの基本的な使い方から応用例まで、サンプルコードを交えながら丁寧に解説してきました。

constructorを使うことで、オブジェクトの初期化や、プロパティ、メソッドの設定を効率的に行うことができます。

この記事で学んだ知識を活かして、ぜひ皆さんのコーディングスキルを磨いていってください。