TypeScriptでのメンバ変数活用法10選

はじめに

TypeScriptはJavaScriptのスーパーセットとして、静的型付けやクラス、インターフェースなどの機能を提供しています。

特に、メンバ変数の活用はTypeScriptでのクラスベースのプログラミングの中心となります。

本記事では、TypeScriptでのメンバ変数の最大限の活用方法を10のコーディング方法を通じてご紹介します。

各コーディング方法には初心者でも理解しやすいよう詳細な説明とサンプルコードを添えて説明しています。

実際のコードの動きを深く理解するために、サンプルコードの後にはそのコードの動作結果に関する詳しい解説も付け加えています。

●TypeScriptのメンバ変数とは

メンバ変数は、クラスの中で定義される変数のことを指します。

これはクラスのインスタンスが生成される際に、それぞれのインスタンス固有のデータを持つためのものです。

JavaScriptでは、このような概念が直接的に存在しないため、TypeScriptでのクラスベースのプログラミングを行う際に、このメンバ変数の理解は非常に重要となります。

○メンバ変数の基本的な役割

クラス内のメソッドからアクセス可能なデータを保存するための変数として、メンバ変数が利用されます。

例えば、Personというクラスがあり、その中にnameやageといった情報を持つ場合、これらの情報はメンバ変数として定義されることが多いです。

このコードでは、Personというクラスを作成し、nameとageをメンバ変数として持つ例を表しています。

この例では、メンバ変数を定義し、その後インスタンスを生成しています。

class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

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

const tanaka = new Person("田中", 25);
tanaka.introduce();

上記のコードを実行すると、tanakaというインスタンスを使ってintroduceメソッドを呼び出すと、コンソールに「私の名前は田中で、年齢は25歳です。」と表示される結果となります。

TypeScriptのメンバ変数とは

TypeScriptのメンバ変数とは、クラス内で使用する変数のことを指します。これらの変数は、そのクラスのインスタンスが作成されるたびに、それぞれのインスタンスに紐づいたデータとして存在します。そのため、異なるインスタンス間でのデータの共有は行われません。

メンバ変数の基本的な役割

メンバ変数は、主に以下の3つの役割を果たします。

1. クラスの状態を保持する
2. クラスの動作を制御するための情報を提供する
3. 異なるメソッド間でデータの受け渡しを行う

これらの役割を正しく理解し、適切にメンバ変数を使用することで、クリーンでメンテナンス性の高いコードを書くことができます。

●メンバ変数の正しい使い方

メンバ変数の活用方法は多岐にわたりますが、ここではTypeScriptでの基本的な使い方を紹介します。

○サンプルコード1：クラス内でのメンバ変数の定義と利用

このコードでは、クラス内でメンバ変数を定義し、それを利用して情報を管理するシンプルな例を表しています。

この例では、Personクラスを定義し、その中でnameとageというメンバ変数を持っています。

class Person {
    // メンバ変数の定義
    name: string;
    age: number;

    // コンストラクタでの初期化
    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    // メソッド内でのメンバ変数の利用
    introduce(): string {
        return `私の名前は${this.name}、年齢は${this.age}歳です。`;
    }
}

// インスタンスの作成と利用
const taro = new Person("太郎", 25);
console.log(taro.introduce());

このサンプルコードを実行すると、コンソールに「私の名前は太郎、年齢は25歳です。」と表示されます。

この例では、Personクラスのインスタンスであるtaroを通して、nameやageといったメンバ変数のデータを取得し、その情報を元に自己紹介文を生成しています。

○サンプルコード2：アクセス修飾子を活用したメンバ変数の管理

TypeScriptでは、クラスのメンバ変数のアクセス制御を行うためのアクセス修飾子を提供しています。

アクセス修飾子を活用することで、メンバ変数の利用範囲や変更可能性を明示的に制御することが可能となります。

今回はアクセス修飾子を使用してメンバ変数を管理する方法について解説します。

このコードでは、public, private, protectedの3つのアクセス修飾子を使って、それぞれの役割と振る舞いに違いを理解することを目的としています。

この例では、それぞれの修飾子を使ったメンバ変数の定義方法と、そのアクセス制御の効果を表しています。

class Animal {
    public name: string;             // どこからでもアクセス可能
    private age: number;             // Animalクラス内からのみアクセス可能
    protected isDomestic: boolean;  // Animalクラスとその派生クラスからアクセス可能

    constructor(name: string, age: number, isDomestic: boolean) {
        this.name = name;
        this.age = age;
        this.isDomestic = isDomestic;
    }

    public describe(): string {
        return `これは${this.name}で、${this.age}歳です。`;
    }
}

class Dog extends Animal {
    constructor(name: string, age: number) {
        super(name, age, true);
    }

    public bark(): void {
        if (this.isDomestic) { // isDomesticはprotectedなので、Dogクラスからアクセス可能
            console.log("ワンワン!");
        }
    }
}

const dog = new Dog("ポチ", 5);
console.log(dog.describe());
dog.bark();

// 下記のコードはコンパイルエラーとなる
// console.log(dog.age);  // ageはprivateなので、外部からアクセスできない

上記のサンプルコードでは、Animalクラスが定義され、その中に3つのメンバ変数が定義されています。

nameはpublic修飾子が付与されており、どこからでもアクセス可能です。

ageはprivate修飾子が付与されているため、Animalクラスの外からはアクセスできません。

isDomesticはprotected修飾子が付与されており、Animalクラスおよびその派生クラス（ここではDogクラス）からのみアクセスが可能です。

このサンプルコードを実行すると、「これはポチで、5歳です。」と表示され、その後に「ワンワン!」と表示されることになります。

しかし、dog.ageにアクセスしようとするとコンパイルエラーが発生します。

これは、ageがprivate修飾子で定義されているため、クラスの外からアクセスすることができないからです。

○サンプルコード3：初期化を伴うメンバ変数の定義

TypeScriptでのクラスのメンバ変数は、オブジェクト指向の原則を活かして情報の隠蔽や管理を行います。

初期化を伴うメンバ変数の定義は、クラスのインスタンス生成時にデフォルト値を設定する際に使用されます。

具体的なコードを見てみましょう。

class Animal {
    // nameメンバ変数を初期化して定義
    public name: string = 'unknown';

    constructor(animalName?: string) {
        if (animalName) {
            this.name = animalName;
        }
    }
}

このコードでは、Animalというクラスを定義しています。

この例では、nameというメンバ変数にデフォルト値として’unknown’を割り当てています。

コンストラクタ内で、animalNameというオプショナルな引数を受け取り、その値が存在する場合は、nameメンバ変数を更新します。

このように、初期化を伴うメンバ変数は、オブジェクト生成時に初期値を持たせることができるので、不意のundefinedエラーを防ぐことができます。

さて、このコードを利用して実際の動きを見てみましょう。

const dog = new Animal();
console.log(dog.name);  // 出力内容はunknown

const cat = new Animal("Kitty");
console.log(cat.name);  // 出力内容はKitty

この実行時の動作において、Animalクラスを利用してdogというインスタンスを生成すると、nameメンバ変数は初期値の’unknown’を持ちます。

一方、catというインスタンスを生成する際には、”Kitty”という引数を渡しているので、nameメンバ変数は”Kitty”となります。

このような初期化を伴うメンバ変数の定義は、特にデフォルト値を設定したい場合や、インスタンス生成時に初期設定を行いたい場合に非常に役立ちます。

また、初期化を伴うメンバ変数は、デフォルト値だけでなく、関数や計算の結果を初期値として設定することも可能です。

class Rectangle {
    public width: number;
    public height: number;
    // 面積を計算するメンバ変数
    public area: number = this.calculateArea();

    constructor(width: number, height: number) {
        this.width = width;
        this.height = height;
    }

    private calculateArea(): number {
        return this.width * this.height;
    }
}

この例では、Rectangleクラスの中で、areaというメンバ変数がwidthとheightの乗算結果、つまり面積として初期化されるようにしています。

この機能を活用することで、クラスのインスタンス生成時に複雑な計算や初期設定を行うことが可能となります。

○サンプルコード4：readonlyを使った変更不可のメンバ変数

TypeScriptでのコーディングにおいて、特定のメンバ変数を変更不可能にしたい場面は多くあります。

例えば、オブジェクト生成時に一度だけ設定され、その後変更されるべきでない値や、アプリケーション全体で変更されることがない定数などがそれに該当します。

こうした変更を許さないメンバ変数を作成する場合、TypeScriptにはreadonlyという修飾子を使用することができます。

この修飾子を使うことで、初期化後にその変数の値が変更されることを防ぐことができます。

このコードでは、readonlyを使って変更不可のメンバ変数を定義する方法を表しています。

この例では、Personクラスにおいて、名前(name)としてのメンバ変数をreadonlyで宣言し、初期化しています。

class Person {
    readonly name: string;

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

    // 以下のメソッドはエラーとなる
    /*
    changeName(newName: string) {
        this.name = newName; // エラー: readonly変数は変更できません。
    }
    */
}

const tanaka = new Person('田中');
// tanaka.name = "鈴木"; // エラー: readonly変数は変更できません。

このコードで注目すべきは、nameメンバ変数がreadonly修飾子で宣言されているため、nameの値はオブジェクト生成時の初期化以外では変更できないという点です。

そのため、changeNameメソッドや直接nameに新しい値を代入しようとすると、コンパイルエラーが発生します。

この振る舞いにより、readonlyが付与されたメンバ変数の不意な変更を事前に防ぐことができ、安全なコードを記述する手助けとなります。

実際に上記のコードを実行すると、エラーとなる行はコメントアウトされているので、特にエラーは発生せずにプログラムは正常に動作します。

しかし、コメントアウトを外してreadonly変数を変更しようとすると、TypeScriptのコンパイラは即座にエラーを報告します。

これは、変更不可の変数に新しい値を代入しようとしたためです。

このような特性を活用すれば、変数の安全性を向上させるだけでなく、コードの品質も一段と高まることでしょう。

●メンバ変数の応用例

TypeScriptのメンバ変数の使い方をすでにいくつか紹介しましたが、さらに進んで応用例を探ることで、その実力をより深く理解することができます。

ここでは、TypeScriptでのメンバ変数のさまざまな応用方法を詳しく紹介します。

○サンプルコード5：静的メンバ変数の使用例

このコードでは、TypeScriptの静的メンバ変数を使って、クラスレベルで共有する変数の実装方法を表しています。

この例では、クラス内で定義された静的メンバ変数を利用して、インスタンスを作成せずにその値を取得・更新しています。

class Counter {
    // 静的メンバ変数の宣言
    static count: number = 0;

    // カウントアップするメソッド
    static countUp(): void {
        this.count++;
        console.log(`現在のカウント：${this.count}`);
    }
}

// クラスの静的メンバ変数を直接参照・操作
console.log(Counter.count); // 0
Counter.countUp();          // 現在のカウント：1

上記のサンプルコードでは、Counterというクラス内にcountという静的メンバ変数を定義しています。

そして、その値を更新するcountUpメソッドも静的メソッドとして提供しています。

Counter.countやCounter.countUp()のように、インスタンスを作成することなく、クラス名を使って直接静的メンバ変数や静的メソッドを利用することができます。

このコードを実行すると、最初に0と出力され、次にcountUpメソッドが呼び出された後に現在のカウント：1と出力されます。

静的メンバ変数は、クラス自体に関連する値を管理するときに便利で、インスタンス間で共有する値や設定などに使用できます。

このように、静的メンバ変数はインスタンスを生成せずに、クラス全体で共有したいデータを管理する際に大変有効です。

ただし、適切な使い方をすることが重要で、使いすぎるとコードの読みにくさや管理の難しさが生じる可能性もありますので注意が必要です。

○サンプルコード6：getterとsetterを用いたメンバ変数の制御

TypeScriptでのコーディングを行っている際、特定の条件下でメンバ変数の値の読み取りや書き込みを行いたいという要件が出てくることがあります。

そのような場面で非常に役立つのが、getterおよびsetterという機能です。

この機能を利用すると、メンバ変数の取得や設定の際にカスタムロジックを追加することが可能になります。

このコードではPersonというクラスを使って、ageというメンバ変数の値を取得・設定する際に特定のロジックを組み込んでいます。

この例では、年齢をセットする際に0未満の値を設定しようとした場合、0に修正して設定するようにしています。

class Person {
    private _age: number;

    constructor(age: number) {
        this._age = age;
    }

    // getter
    get age(): number {
        return this._age;
    }

    // setter
    set age(value: number) {
        if (value < 0) {
            this._age = 0;
        } else {
            this._age = value;
        }
    }
}

const person1 = new Person(-5);
console.log(person1.age); // この時点での年齢を表示
person1.age = 15;
console.log(person1.age); // 更新後の年齢を表示
person1.age = -3;
console.log(person1.age); // 再度、負の値をセットしようとした際の年齢を表示

このコードを実行すると、初めにPersonクラスのインスタンスを作成した際に、年齢を-5としてセットしていますが、setter内のロジックにより、この年齢は0に修正されます。

そのため、最初のconsole.log(person1.age)の実行時には0が表示されます。

その後、年齢を15に更新し、再度年齢を表示すると15が出力されます。

最後に、再度負の値をセットしようとしても、setterによって0に修正されるため、最終的な表示は0となります。

このように、getterとsetterを活用することで、メンバ変数へのアクセスをより柔軟に、かつ制御下におくことが可能です。

特に、外部からのアクセスを制限しつつ、内部の処理をカスタマイズしたい場合に非常に有効です。

○サンプルコード7：メンバ変数を用いた計算プロパティ

このコードではメンバ変数を活用して計算プロパティを実装する方法を表しています。

この例では、三角形の底辺と高さをメンバ変数として保持し、その面積を計算するプロパティを定義しています。

class Triangle {
    private _base: number; // 底辺
    private _height: number; // 高さ

    constructor(base: number, height: number) {
        this._base = base;
        this._height = height;
    }

    // 面積を計算するgetterプロパティ
    get area(): number {
        return this._base * this._height / 2;
    }
}

const triangle = new Triangle(10, 5);
console.log(`三角形の面積は${triangle.area}平方単位です。`);

このコードでは、_baseと_heightという二つのプライベートメンバ変数を持っています。

そして、面積を計算するためのgetterプロパティareaを定義しています。

このareaプロパティにアクセスすると、自動的に三角形の面積が計算されて返されます。

このコードを実行すると、出力結果は「三角形の面積は25平方単位です。」と表示されます。

このように、TypeScriptのメンバ変数と計算プロパティを組み合わせることで、効率的かつ直感的なコードを書くことができます。

○サンプルコード8：メンバ変数を活用したインスタンスメソッド

TypeScriptでは、クラスを定義する際にメンバ変数を使用することで、そのクラスのインスタンスが持つ状態を表現します。

これに加えて、インスタンスメソッドを使用することで、その状態に基づいて特定の動作や計算を行うことが可能となります。

このコードでは、クラスにメンバ変数を定義し、それを使ってインスタンスメソッドを実行する方法を表しています。

この例では、PersonクラスにfirstNameとlastNameというメンバ変数を持たせ、フルネームを取得するメソッドを作成しています。

// TypeScriptのクラス定義
class Person {
    // メンバ変数の定義
    firstName: string;
    lastName: string;

    // コンストラクタで初期化
    constructor(first: string, last: string) {
        this.firstName = first;
        this.lastName = last;
    }

    // メンバ変数を活用したインスタンスメソッド
    getFullName(): string {
        return `${this.firstName} ${this.lastName}`;
    }
}

// インスタンスの作成
let someone = new Person("Taro", "Yamada");

// インスタンスメソッドの呼び出し
let fullName = someone.getFullName();

上記のコードを実行すると、someoneというインスタンスのgetFullNameメソッドを呼び出し、”Taro Yamada”という文字列を取得します。

このように、メンバ変数をうまく活用することで、オブジェクト指向の設計原則に従い、データとそれを操作するメソッドを一つのクラス内に閉じ込めることが可能となります。

また、この方法を利用することで、クラス外部からメンバ変数への直接的なアクセスを避けることができ、変数の状態を安全に保つことが可能となります。

特に、複雑な計算やバリデーションが必要な場合、このような構造を取ることで、クラス内部の状態を一貫して保つことができます。

また、メンバ変数をより柔軟に活用するための方法として、インスタンスメソッドの中で、他のメンバ変数やメソッドを利用することも考えられます。

class Circle {
    radius: number;

    constructor(r: number) {
        this.radius = r;
    }

    // 円の面積を計算するメソッド
    getArea(): number {
        return 3.14 * this.radius * this.radius;
    }

    // 円の周の長さを計算するメソッド
    getCircumference(): number {
        return 2 * 3.14 * this.radius;
    }
}

let circle = new Circle(5);
let area = circle.getArea();  // こちらのメソッドを呼び出すことで、半径5の円の面積を取得できる
let circumference = circle.getCircumference();  // そして、このメソッドで円周の長さを取得できる

このように、メンバ変数をうまく活用することで、クラス内部の複雑な計算やデータ処理を一元的に管理することができます。

○サンプルコード9：クラス外からのメンバ変数のアクセス制御

TypeScriptにおいて、クラスのメンバ変数へのアクセス制御は、アクセス修飾子を活用して実現することができます。

アクセス修飾子には、public、private、protectedなどが存在します。

それぞれのアクセス修飾子がどのように動作するのかを、具体的なサンプルコードを用いて詳しく解説します。

このコードでは、異なるアクセス修飾子を用いたメンバ変数を持つクラスを表しています。

この例では、それぞれのメンバ変数に外部からアクセスしようとする場面を想定して、その動作を検証しています。

class Animal {
    public name: string;
    private age: number;
    protected type: string;

    constructor(name: string, age: number, type: string) {
        this.name = name;
        this.age = age;
        this.type = type;
    }

    // ageにアクセスするための公開メソッド
    getAge(): number {
        return this.age;
    }
}

// インスタンスを生成
const dog = new Animal('Buddy', 5, 'Dog');

console.log(dog.name); // Buddyと表示されます
// console.log(dog.age); // コンパイルエラーが発生します
console.log(dog.getAge()); // 5と表示されます
// console.log(dog.type); // コンパイルエラーが発生します

このコードにおいて、nameはpublic修飾子が付与されているため、クラスの外部から自由にアクセス可能です。

一方、ageはprivate修飾子が付与されているので、クラス外からは直接アクセスすることができません。

そのため、ageの値を取得するための公開メソッドgetAge()を定義しています。

また、typeはprotected修飾子が付与されているため、このクラスを継承したサブクラスからのみアクセスが可能となります。

ただし、このサンプルコード内ではサブクラスは定義していないので、クラスの外部からはtypeにアクセスすることはできません。

このようなアクセス制御の機能は、メンバ変数の保護や、外部からの不適切な操作を防ぐために非常に役立ちます。

アクセス修飾子を適切に使用することで、クラス設計時の自由度を高めることができるとともに、安全なコードを記述することが可能となります。

このコードを実行すると、Buddyという名前の犬が、5歳であることが確認できます。

ただし、ageやtypeへの直接のアクセスはブロックされているため、それらの情報は直接取得することはできません。

○サンプルコード10：メンバ変数を活用した継承とポリモーフィズム

TypeScriptでのプログラミングの中で、継承とポリモーフィズムはオブジェクト指向プログラミングの基本的なテクニックの一部です。

ここでは、これらの概念を取り入れつつ、メンバ変数の活用方法を詳細に解説します。

このコードでは、動物の階層構造を模倣するクラスを作成し、継承を用いて具体的な動物のクラスを生成しています。

さらに、ポリモーフィズムを活用して、異なる動物がそれぞれの特性に合わせた鳴き声を出すメソッドを実装します。

// 基底クラス Animal
class Animal {
    protected name: string;

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

    speak(): void {
        console.log(`${this.name}が何かの音を出します。`);
    }
}

// Animalクラスを継承するDogクラス
class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }

    // speakメソッドをオーバーライド
    speak(): void {
        console.log(`${this.name}がワンワンと鳴きます。`);
    }
}

// Animalクラスを継承するCatクラス
class Cat extends Animal {
    constructor(name: string) {
        super(name);
    }

    // speakメソッドをオーバーライド
    speak(): void {
        console.log(`${this.name}がニャーニャーと鳴きます。`);
    }
}

let dog = new Dog("ポチ");
dog.speak();

let cat = new Cat("ミーちゃん");
cat.speak();

このコードでは、基底クラスとしてAnimalを定義しています。

このクラスにはnameというメンバ変数が定義されており、動物の名前を保持します。

DogクラスとCatクラスはAnimalクラスを継承しており、それぞれの動物の特性を持つspeakメソッドがオーバーライドされています。

この例では、犬と猫の鳴き声がそれぞれ異なることを模倣しています。

speakメソッドをオーバーライドすることで、異なる動物のクラスでも共通のメソッド名を使用して、それぞれの動物特有の振る舞いを表現することが可能になります。

これがポリモーフィズムの一例です。

上記のコードを実行すると、次のような出力が得られるでしょう。

ポチがワンワンと鳴きます。
ミーちゃんがニャーニャーと鳴きます。

この出力結果からも、DogクラスとCatクラスでspeakメソッドが正しくオーバーライドされ、それぞれの動物の鳴き声が正確に出力されていることが確認できます。

また、メンバ変数を活用することで、継承やポリモーフィズムを更に活用することが可能です。

例えば、各動物が持つ特定の特性や能力をメンバ変数として持たせ、それを基に異なる動作をさせるといったことも考えられます。

下記のコードは、動物の速度をメンバ変数として持ち、その速度に応じて移動する距離を計算するメソッドを追加した例です。

class Animal {
    protected name: string;
    protected speed: number;

    constructor(name: string, speed: number) {
        this.name = name;
        this.speed = speed;
    }

    move(hours: number): void {
        let distance = this.speed * hours;
        console.log(`${this.name}が${distance}km移動します。`);
    }
}

class Cheetah extends Animal {
    constructor(name: string) {
        super(name, 80);
    }
}

let cheetah = new Cheetah("チーター");
cheetah.move(2);

このコードでは、チーターが2時間移動したときの距離を計算し、その結果が出力されます。

●注意点と対処法

TypeScriptでメンバ変数を扱う際には、いくつかの注意点が存在します。

その主要なものと、それを避けるための対処法を紹介します。

○不適切なアクセス修飾子の選択とその対策

このコードでは、アクセス修飾子の選択に関する注意点とその対処法を表しています。

この例では、publicなメンバ変数が外部から不適切に変更される危険性を表しています。

class User {
    public age: number; // これは外部から変更可能
}

外部から変更されるべきでない変数には、privateやprotectedといったアクセス修飾子を使用することで、安全にコードを記述することができます。

class User {
    private age: number; // これはクラス内からのみアクセス可能
}

○メンバ変数のオーバーロードに関する注意点

TypeScriptでは、メンバ変数のオーバーロードはサポートされていません。

そのため、同名のメンバ変数を異なる型で複数定義することはできません。

○nullやundefinedを許容する場合の注意点

このコードでは、nullやundefinedを許容する際の注意点を表しています。

この例では、strictNullChecksを有効にした場合、メンバ変数にnullやundefinedを許容するための記述方法を表しています。

class UserProfile {
    name: string | null;  // nameはstringまたはnullを許容する
}

しかし、これを行う場合、メンバ変数を使用する際にはnullチェックなどの追加的な処理が必要となる可能性が高まります。

●カスタマイズ方法

TypeScriptでは、メンバ変数をさらにパワフルに活用するためのカスタマイズ方法がいくつか存在します。

今回は、特に実践的で役立つカスタマイズ方法を2つ選び、詳しい解説とサンプルコードを交えてご紹介します。

○メンバ変数のデコレータを利用したカスタマイズ

TypeScriptには「デコレータ」という機能があり、これを使うことでメンバ変数に特定の振る舞いや機能を追加することができます。

デコレータは、クラスやメソッド、そしてメンバ変数などに対してメタデータを付与することができる非常に強力なツールです。

このコードでは、ログを出力するデコレータを使って、メンバ変数へのアクセス時に何かしらの動作を追加する例を表しています。

この例では、メンバ変数にアクセスするたびにコンソールにログを出力しています。

function log(target: any, key: string) {
  let value = target[key];
  const getter = () => {
    console.log(`取得: ${key} => ${value}`);
    return value;
  };
  const setter = (next: any) => {
    console.log(`設定: ${key} => ${next}`);
    value = next;
  };
  Object.defineProperty(target, key, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true
  });
}

class MyClass {
  @log
  public myValue: string;

  constructor(myValue: string) {
    this.myValue = myValue;
  }
}

const instance = new MyClass("初期値");
instance.myValue = "新しい値";
console.log(instance.myValue);

上記のサンプルコードを実行すると、次のようなログが出力されるでしょう。

取得: myValue => 初期値
設定: myValue => 新しい値
取得: myValue => 新しい値

デコレータを使用することで、メンバ変数にアクセスするたびの動作をカスタマイズすることができます。

○メンバ変数に関連するTypeScriptの設定オプション

TypeScriptには、メンバ変数の扱いをカスタマイズするための設定オプションが存在します。

たとえば、すべてのメンバ変数が明示的にアクセス修飾子を持つことを強制するオプションや、未使用のメンバ変数を検出して警告するオプションなどがあります。

tsconfig.jsonの中で設定することができる、メンバ変数に関連するオプションの例を紹介します。

{
  "compilerOptions": {
    "strictPropertyInitialization": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}

• strictPropertyInitialization：このオプションをtrueに設定すると、メンバ変数がコンストラクタ内で初期化されていない場合にエラーを発生させます。
• noUnusedLocals：このオプションをtrueに設定すると、未使用のローカル変数やメンバ変数を検出して警告します。
• noUnusedParameters：このオプションをtrueに設定すると、未使用の関数のパラメータを検出して警告します。

これらのオプションを活用することで、TypeScriptのコードの品質を向上させることが可能です。

特に大規模なプロジェクトでのメンテナンス性を高める際に役立ちます。

まとめ

TypeScriptは、型に基づいたJavaScriptのスーパーセットとして、多くの開発者に支持されています。

特にメンバ変数の活用は、TypeScriptでのクラス設計の中心となる部分です。

この記事では、メンバ変数の最大限の活用方法として、10の異なるコーディング手法を詳しく取り上げました。

TypeScriptでの開発を進める上で、メンバ変数の活用は避けて通れないテーマです。

この記事が、あなたのTypeScriptでのコーディング技術をさらに向上させる手助けとなることを願っています。