TypeScriptのコンストラクターとは？実例付きで徹底解説

（最終更新月：2023年12月）

✔当記事は以下のような読者に最適です

「TypeScriptのコンストラクタとは何か知りたい」

「コンストラクタの使い方をマスターしたい」

「コンストラクタを使った実践的なコード例をみたい」

✔当記事でご紹介する内容

TypeScriptのコンストラクタの概要
コンストラクタの定義方法と応用
実際のコード例を通じたコンストラクタの使い方

当記事では、TypeScriptにおけるコンストラクタの基本概念から始めて、その定義の仕方や使い方のテクニックに至るまで、実用的なサンプルコードとともに深く掘り下げてご説明します。

最後まで読んでいただければ、TypeScriptにおけるコンストラクタの理解が一層深まるはずです。

それでは、一緒に見ていきましょう。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

TypeScriptコンストラクターの基盤

こちらでは、TypeScriptのコンストラクターについてお伝えしていきます。

コンストラクターを理解しマスターすることで、TypeScriptにおける効果的なクラス設計が実現可能です。

コンストラクター基本理論
コンストラクターの実装パターン
コンストラクターの利点を知ろう

コンストラクター基本理論

TypeScriptにおけるコンストラクターは、クラスのインスタンスを生成する際に一回だけ呼び出される特別なメソッドです。

以下のようにconstructorキーワードを使用して定義します。

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

この例ではPersonクラスにnameというパラメータを持つコンストラクターを宣言しています。

新しいPersonオブジェクトを作成する際に名前を指定できるのです。

コンストラクターの実装パターン

コンストラクターにはいくつかの実装パターンがあります。

例えば、パラメータをオプショナルにすることで、提供されなかった場合のデフォルト値を設定できます。

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

上記のコードはnameパラメータが提供されなかった場合に、デフォルトで"Unnamed"を設定するコンストラクターです。

コンストラクターの利点を知ろう

コンストラクターを活用すると、オブジェクトの初期化時に必要な設定を一元管理できます。

これにより、オブジェクトが一貫した状態で生成されることを保証し、プログラムの安全性が向上するでしょう。

また、必要なパラメータがコンストラクターに集約されているので、オブジェクトの使用方法が明確になります。

コンストラクターの高度な応用

TypeScriptのコンストラクターは基本的な使い方だけでなく、さまざまな応用が可能です。

今後の高度なプログラミングにつながるテクニックを習得しましょう。

パラメータの選択性
Partialを使った柔軟なコンストラクター引数
プロパティ宣言の簡素化

パラメータの選択性

コンストラクターのパラメータは、問題なくオプショナル（任意）にできます。

オプショナルパラメーターは、その名の通り必ずしも提供する必要がないパラメータです。

こうすることで、より柔軟なクラスのインスタンス化が可能となります。

class Person {
  constructor(public name: string, public age?: number) {}
}

上記のコードではageパラメータはオプショナルとして定義されており、ageが提供されていない時はそのプロパティがundefinedとなります。

Partialを使った柔軟なコンストラクター引数

Partial<T>はTypeScriptのユーティリティタイプのひとつであり、すべてのプロパティをオプショナルにした型を作成します。

これを利用すると、部分的なオブジェクト構成が可能になるなど適用範囲を広げることが可能です。

class Person {
  constructor(data: Partial<Person>) {
    Object.assign(this, data);
  }
}

ここではPartial<Person>をコンストラクターの引数に取り、dataオブジェクトのプロパティを現在のインスタンスに割り当てています。

プロパティ宣言の簡素化

コンストラクター内でプロパティを宣言し、同時に初期化することも可能です。

これにより、クラスのコード量が減少し、可読性が向上します。

これはアクセス修飾子を使って以下のように実装できます。

class Person {
  constructor(public name: string, public age?: number) {}
}

この例では、nameとageプロパティは自動的にクラスに追加され、コンストラクターの引数を直接プロパティとして宣言しています。

コンストラクターの実践Tips

コンストラクターはエレガントで強力なクラス設計に欠かせない要素です。

より実践的な利用方法を紹介することで、実際のプロジェクトでの活躍が期待できます。

アクセス修飾子を使った変数の制御
コンストラクターでの依存性注入
テストの容易さを高めるコンストラクター戦略

アクセス修飾子を使った変数の制御

アクセス修飾子を使用することで、クラス内変数の可視性を制御できます。

一般的な修飾子には、以下のようなものがあります。

public
private
protected

privateを使うことで、クラスの外部からアクセスできない変数を作成できます。

class Person {
  private id: number;
  constructor(id: number, public name: string) {
    this.id = id;
  }
}

このコードではidをprivate修飾子を使って定義しており、Personクラスの外部からはアクセスできません。

コンストラクターでの依存性注入

依存性注入は、高いレベルのモジュール性とテストのしやすさを実現するプログラミング手法です。

コンストラクターを利用して依存オブジェクトを注入できます。

class Database {
  connect() {
    // Database connection logic
  }
}
class User {
  constructor(private db: Database) {}
  save() {
    this.db.connect();
    // Save user logic
  }
}

上記のUserクラスはDatabaseクラスのインスタンスをコンストラクターで受け取ります。

これによって、Userはデータベースとの接続について知識を持つ必要がなくなるのです。

テストの容易さを高めるコンストラクター戦略

コンストラクターを適切に設計することで、ユニットテストが容易になるでしょう。

依存しているオブジェクトをコンストラクター経由で注入し、モックやスタブを使用したテストがおこないやすくなるからです。

class Logger {
  log(message: string) {
    // Logging logic
  }
}
class UserService {
  constructor(private logger: Logger) {}
  addUser(user: User) {
    // Add user logic
    this.logger.log('User added');
  }
}

この例では、UserServiceクラスがLoggerクラスのインスタンスを必要とするとき、テスト中には実際のLoggerインスタンスの代わりにモックを注入できます。

これにより依存コンポーネントのコントロールが容易になります。