TypeScriptでのgetterの完璧な使い方を解説！10選の実用サンプルコードを交えて徹底解説

はじめに
●TypeScriptのgetterとは
- ○getterの基本概念
●getterの使い方
●getterの応用例
●高度なgetterのテクニック
●getter使用時の注意点と対処法
●カスタマイズ方法
- ○getterの拡張とカスタマイズのアイディア
  - □動的なプロパティ名の利用
  - □キャッシュの導入
まとめ

はじめに

TypeScriptは、JavaScriptのスーパーセットとして注目を集めてきました。

TypeScriptを使用することで、型を持ったJavaScriptのコードを記述することができるようになります。

この特性は、大規模なプロジェクトでのバグを早期に発見したり、コードのリーダビリティを高めるのに非常に役立ちます。

この記事では、TypeScriptでのgetterの使い方に焦点を当てて解説します。

getterは、オブジェクトのプロパティ値を取得する際に使用される特別なメソッドの一つです。

JavaScriptにも存在するこの概念は、TypeScriptではさらに強力になっています。

この記事を読むことで、getterの基本的な使い方から高度なテクニック、さらには10の実用的なサンプルコードまで、TypeScriptのgetterの使い方を習得できるでしょう。

●TypeScriptのgetterとは

getterは、オブジェクトの特定のプロパティの値を取得するためのアクセサメソッドです。

このメソッドは、通常のプロパティのようにオブジェクトから値を取得する際に自動的に呼び出されます。

getterの最大の魅力は、値を取得する過程に何らかの処理を挟むことができる点です。

これにより、内部のプライベート変数を直接触ることなく、特定の条件下でのみアクセスを許可するなど、より柔軟なコード設計が可能となります。

○getterの基本概念

TypeScriptにおけるgetterは、次のような構文を使用して宣言されます。

class SampleClass {
    private _name: string;

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

    get name() {
        return this._name;
    }
}

このコードでは、_nameというプライベート変数を持つSampleClassというクラスを定義しています。

このクラスには、nameというgetterが定義されており、これを使用して_nameの値を取得できます。

インスタンスを作成し、getterを使用してみると次のようになります。

const sample = new SampleClass("Taro");
console.log(sample.name);  // Taro

上記のコードを実行すると、コンソールに「Taro」と表示されます。

●getterの使い方

TypeScriptにおいて、getterは非常に有用なアクセサの一つです。

これにより、オブジェクトのプロパティにアクセスする際の動作をカスタマイズできます。

ここでは、TypeScriptでのgetterの基本的な使い方を学び、実用的なサンプルコードを通じてその効果的な活用方法を理解していきます。

○サンプルコード1：基本的なgetterの使い方

まずは、TypeScriptでのgetterの基本的な使い方を見ていきましょう。

class Person {
    private _name: string;

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

    // nameのgetter
    get name(): string {
        return this._name;
    }
}

const taro = new Person("太郎");
console.log(taro.name);  // 太郎

このコードでは、Personクラスに_nameというプライベート変数を持ち、この変数の値を外部から読み取るためのgetterを定義しています。

getキーワードを使ってnameというgetterを定義することで、taro.nameという形式で直接プロパティにアクセスすることができます。

この例では、_nameを直接読み取る代わりにnameというgetterを通して_nameの値を取得しています。

getterを使用するメリットは、直接プロパティにアクセスすることなく、値を取得する際の処理をカスタマイズできる点にあります。

例えば、値を取得する前にログを出力する、特定の条件下でのみ値を返すなど、様々なカスタマイズが可能です。

さて、上記のサンプルコードを実行すると、コンソールに「太郎」という文字列が表示されます。

これは、taroというPersonオブジェクトのnamegetterを通じて、内部の_nameプロパティの値を正しく取得しているためです。

○サンプルコード2：getterを使用してのプライベート変数のアクセス

TypeScriptでのプログラミングにおいて、プライベート変数は外部から直接アクセスすることができません。しかしこれが不便な場面もあります。

例えば、ある条件下でのみプライベート変数の読み取りを許可したい、といった場合などです。

そんな時に役立つのが、getterを使用したアクセス方法です。

ここでは、getterを使ってプライベート変数にアクセスする方法を紹介します。

具体的には、クラス内にプライベート変数を定義し、その変数の値を取得するためのgetterを実装することで、安全に変数の値を読み取ることができるようになります。

class Person {
    // プライベート変数の定義
    private _name: string;

    // コンストラクタ
    constructor(name: string) {
        this._name = name;
    }

    // _nameのgetter
    get name() {
        // 何らかの処理や条件を追加することが可能
        return this._name;
    }
}

// 使用例
const taro = new Person("Taro");
console.log(taro.name); // Taro

このコードでは、Personクラス内に_nameというプライベート変数を定義しています。

この変数はコンストラクタで受け取った名前を保持しています。

そして、その名前を外部から安全に取得するためのgetterをnameという名前で実装しています。

この例では、getter内で特に変数の値に何らかの加工を行うことなくそのまま返していますが、必要に応じてgetter内で処理を追加することが可能です。

例えば、名前を大文字に変換して返すといった加工や、特定の条件下でのみ値を返すといった条件を追加することも考えられます。

上記のコードを実行すると、taro.nameを使ってプライベート変数_nameの値を取得することができ、結果としてコンソールにはTaroと表示されます。

○サンプルコード3：条件付きのgetter

TypeScriptのgetterの力強さをさらに引き出したい場合、条件分岐を利用して動的な値の取得を行うことができます。

ここでは、条件に応じて異なる値を返すgetterの実装方法を詳しく解説します。

下記のコードは、あるユーザーの年齢に応じて、成人か未成年かを判断するシンプルなクラスを表しています。

class User {
    private _age: number;

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

    // 年齢に応じて成人か未成年かを判断するgetter
    get isAdult(): boolean {
        // 20歳以上なら成人とみなす
        return this._age >= 20;
    }
}

このコードでは、Userクラス内で年齢をプライベート変数として保持しています。

そして、isAdultというgetterを使用して、年齢が20歳以上であればtrueを、それ未満であればfalseを返すようにしています。

この例では、プライベート変数_ageの値を元にして、動的に成人か未成年かを判断しています。

このUserクラスを利用すると、次のように動作します。

const user1 = new User(25);
console.log(user1.isAdult);  // trueと表示される

const user2 = new User(18);
console.log(user2.isAdult);  // falseと表示される

user1は25歳のため、isAdultgetterはtrueを返します。

一方、user2は18歳のため、isAdultgetterはfalseを返します。

条件付きのgetterは、インスタンスの状態に応じて動的な値を返す際に非常に便利です。

特に、クラスの内部状態に基づく複雑な計算や判断を隠蔽する場合に役立ちます。

このように、getterを使用することで、外部からのアクセスをシンプルに保ちつつ、内部の複雑なロジックをカプセル化することができるのです。

●getterの応用例

TypeScriptのgetterを深く理解し、基本的な使い方について学びました。しかし、getterの魅力はその応用例にも隠れています。

ここでは、実際のアプリケーションでgetterを活用するさまざまな方法を、具体的なサンプルコードを交えながら解説していきます。

○サンプルコード4：クラスのインスタンス内でのgetterの活用

まず、クラスのインスタンス内でのgetterの利用方法について見てみましょう。

クラス内のプライベート変数やプロパティの値を安全に取得するため、またその値に基づいた計算結果を取得するためにgetterは非常に便利です。

下記のサンプルコードは、商品の価格と税率をもとに、税込み価格を動的に取得するシンプルな例です。

class Product {
    private _price: number;
    private _taxRate: number;

    constructor(price: number, taxRate: number) {
        this._price = price;
        this._taxRate = taxRate;
    }

    // 税込み価格を取得するgetter
    get withTax(): number {
        return this._price * (1 + this._taxRate / 100);
    }
}

const item = new Product(1000, 10);  // 価格1000円、税率10%の商品を作成
console.log(item.withTax);  // 税込み価格を取得し、コンソールに表示

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

このクラスの中には、商品の価格を示す_priceと税率を示す_taxRateという2つのプライベート変数があります。

そして、withTaxというgetterを使って、これらの変数をもとに税込み価格を動的に計算して取得することができます。

この例では、商品の価格が1000円、税率が10%の場合、税込み価格として1100円が取得され、コンソールに表示されます。

このように、getterを使用することで、プライベート変数やプロパティに基づいた動的な値を安全に取得することができます。

特に、クラスの内部状態に基づいて変わるような値を外部から取得する場面で、getterは非常に強力なツールとして活躍します。

○サンプルコード5：配列やオブジェクトの情報を取得するgetter

TypeScriptのgetterは、オブジェクトのプロパティを取得する際のカスタムロジックを提供する非常に強力なツールです。

特に配列やオブジェクトといった複雑なデータ構造に対して、特定の情報を取得する際に役立ちます。

ここでは、配列やオブジェクトの情報を簡単に取得できるサンプルコードを紹介し、その使い方と実装の詳細を解説します。

このコードでは、Userクラスを使って、ユーザーのリストを管理しています。

このクラスには、usersというプロパティがあり、それはユーザーのオブジェクトの配列として保存されます。

そして、このクラスにはtopUserというgetterが実装されています。

このgetterは、最初のユーザーの情報を返すものとなっています。

class UserList {
    private _users: {name: string, age: number}[] = [];

    constructor(users: {name: string, age: number}[]) {
        this._users = users;
    }

    get topUser(): {name: string, age: number} | null {
        return this._users.length > 0 ? this._users[0] : null;
    }
}

UserListクラスをインスタンス化する際に、ユーザーの配列を渡すことができます。

そして、topUserというgetterを使用することで、最初のユーザーの情報を取得できます。

上記のコードを実際に使用する例を紹介します。

const userList = new UserList([
    {name: "田中太郎", age: 25},
    {name: "鈴木一郎", age: 30}
]);

console.log(userList.topUser); // 出力: {name: "田中太郎", age: 25}

この例では、2人のユーザー情報を持つUserListクラスのインスタンスを作成しています。

そして、topUser getterを使用して、最初のユーザー、つまり”田中太郎”さんの情報を取得しています。

○サンプルコード6：計算プロパティとしてのgetterの使用

TypeScriptでは、getterを活用することでプロパティの値を計算する際に有用な機能を提供します。

特に計算プロパティを使用する場面では、getterは不可欠と言えるでしょう。

ここでは、計算プロパティとしてのgetterの使い方を実用的なサンプルコードを用いて詳細に解説していきます。

計算プロパティは、オブジェクトのプロパティのように見えますが、実際には他のプロパティや値を基に動的に計算されるものを指します。

これにより、複数のプロパティの関連性を表現することができ、コードの読みやすさや再利用性を高めることが可能となります。

具体的なコードを見ながら、この計算プロパティの概念を深めていきましょう。

class Circle {
    constructor(private radius: number) {}

    // 半径を取得するgetter
    get getRadius() {
        return this.radius;
    }

    // 円の面積を計算するgetter
    get area() {
        return Math.PI * this.radius * this.radius;
    }
}

const circle = new Circle(5);
console.log(circle.getRadius);  // 5
console.log(circle.area);       // 約78.54

上記のCircleクラスには、radiusというプライベートプロパティが存在します。

この半径を基に、areaという計算プロパティをgetterを使って定義しています。

このareaを呼び出すことで、半径から動的に円の面積を計算することができます。

このように、計算プロパティは内部のプロパティや変数を使って動的に値を導出する際に非常に役立ちます。

そして、その計算過程をカプセル化することで、クラスやオブジェクトの外部からは計算の詳細を意識せずに結果のみを取得することができます。

こちらのサンプルコードを実行すると、circle.getRadiusは5と表示され、circle.areaは約78.54という値が表示されることとなります。

これにより、radiusの値が変更された場合でも、areaのgetterを呼び出すだけで新しい面積を簡単に取得することができます。

○サンプルコード7：他のメソッドと連携したgetterの利用

TypeScriptにおけるgetterは、単独での利用だけでなく、クラス内の他のメソッドとの連携にも活用できます。

ここでは、getterを使って他のメソッドと連携した実例をご紹介します。

class Score {
    private _points: number = 0;

    // ポイントを加算するメソッド
    addPoints(value: number) {
        if (value > 0) {
            this._points += value;
        }
    }

    // getterを使用して、現在のスコアを2倍にして取得
    get doublePoints() {
        return this._points * 2;
    }
}

let player = new Score();
player.addPoints(50);

// getterを呼び出す
console.log(player.doublePoints); // 100

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

このクラスには、ポイントを加算するメソッドaddPointsと、getterを使用して現在のポイントを2倍にして取得するdoublePointsが定義されています。

具体的な流れとしては、playerインスタンスを作成後、addPointsメソッドを呼び出して50ポイントを加算します。

その後、doublePoints getterを使用して、現在のポイントを2倍にした値を取得します。この例では、50ポイントを2倍にした値、すなわち100が出力されます。

このようにgetterは、クラス内の変数やメソッドとの連携で、柔軟なプロパティの取得や計算を行うことが可能です。

特に複雑な計算や条件を伴うプロパティの取得を行う際に、getterの活用は非常に有効です。

コードの結果として、console.log(player.doublePoints);の部分で、100という結果がコンソールに出力されます。

これは、先ほど加算した50ポイントを2倍にした結果となっています。

●高度なgetterのテクニック

TypeScriptにおけるgetterは、基本的な使い方から高度な使い方までさまざまなシーンで役立ちます。

ここでは、さらに高度なgetterの活用技術として、継承を使ったgetterの実装方法について解説します。

継承を使うことで、基底クラスのgetterをサブクラスで上書きしたり、拡張したりすることが可能となり、より柔軟なコード設計が実現できます。

○サンプルコード8：継承を活用したgetter

まず、継承を使ったgetterの活用法を表すサンプルコードを見てみましょう。

class Animal {
    private _name: string;

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

    // Animalクラスのgetter
    get name(): string {
        return this._name;
    }
}

class Cat extends Animal {
    private _sound: string = "にゃー";

    // CatクラスでAnimalクラスのgetterをオーバーライド
    get name(): string {
        return super.name + "（猫）";
    }

    get sound(): string {
        return this._sound;
    }
}

const myCat = new Cat("タマ");
console.log(myCat.name);  // タマ（猫）
console.log(myCat.sound);  // にゃー

このコードでは、動物を表すAnimalクラスを定義し、それを継承してCatクラスを定義しています。

Animalクラスにはnameというgetterが定義されており、Catクラスではこのgetterをオーバーライドして猫の名前の後ろに「（猫）」という文字を追加しています。

継承されたサブクラスでは、superキーワードを使用して基底クラスのメソッドやgetterにアクセスできます。

この例では、Catクラスのnamegetter内でsuper.nameを用いて、基底クラスのnamegetterの値にアクセスしています。

このように、継承を使ったgetterの実装は、既存のクラスを拡張する際や、特定のサブクラスに特有の動作を実現したい場合に非常に便利です。

実行結果として、myCat.nameを出力すると「タマ（猫）」、myCat.soundを出力すると「にゃー」と表示されます。

これにより、CatクラスがAnimalクラスのgetterを適切にオーバーライドして動作していることが確認できます。

○サンプルコード9：プロキシを使用したgetterのカスタマイズ

TypeScriptの世界には、オブジェクトの操作をカスタマイズできる「Proxy」が存在します。

特に、getterの動作をより柔軟にカスタマイズしたい場合には、Proxyを使用すると非常に有用です。

Proxyは、ターゲットオブジェクトと呼ばれるものに対して、特定の操作をトラップできるオブジェクトを生成することができます。

これにより、オブジェクトへのアクセスや値の設定などの動作をカスタマイズできます。

Proxyを使用してgetterをカスタマイズした簡単な例を紹介します。

この例では、特定のプロパティへのアクセスをトラップして、カスタマイズしたメッセージを返します。

// 対象となるオブジェクト
const target = {
  name: "太郎",
  age: 20
};

// Proxyを使用してgetterをカスタマイズ
const proxy = new Proxy(target, {
  get: (target, prop) => {
    if (prop === "name") {
      return `私の名前は${target[prop]}です。`;
    }
    return target[prop];
  }
});

console.log(proxy.name);  // このコードは「私の名前は太郎です。」と出力します。
console.log(proxy.age);   // このコードは「20」と出力します。

このコードでは、Proxyのインスタンスを作成しています。

getトラップは、プロパティへのアクセスがあるたびに呼び出される関数です。

nameプロパティへのアクセスがある場合、カスタマイズしたメッセージを返し、それ以外の場合は通常のプロパティの値を返します。

上記のサンプルコードを実行すると、次のような結果が得られます。

初めに、console.log(proxy.name);というコードが実行されると、「私の名前は太郎です。」というメッセージが出力されます。

次に、console.log(proxy.age);が実行されると、「20」という数値がそのまま出力されます。

このように、Proxyを使用することでgetterの動作を柔軟にカスタマイズできることが分かります。

特に、複数のプロパティに対して異なる動作をさせたい場合や、動的なプロパティの名前に対応する必要がある場合などには、Proxyが非常に役立ちます。

TypeScriptでのgetterの活用方法は多岐にわたりますが、Proxyを駆使することでさらに高度なカスタマイズが可能になります。

オブジェクトの操作を自在に操るこの技術は、プログラムの柔軟性や再利用性を向上させる重要な要素となります。

○サンプルコード10：デコレータと組み合わせたgetterの実装

TypeScriptのデコレータは、クラスやクラスのメンバーに対して特定の動作やメタデータを注入する際に用いられます。

デコレータは非常に強力で、getterやsetterと組み合わせることで、さらに高度なカスタマイズが可能になります。

まずはデコレータとは何か、簡単に触れてみましょう。

デコレータは、アットマーク(@)から始まる特別な構文を持つもので、クラスやそのメンバーにメタデータを追加するか、それらの動作を変更するためのものです。

実際のコードを通じて理解を深めていきましょう。

このコードでは、Loggingデコレータを作成して、getterでのアクセス時にログを出力する機能を実装しています。

// Loggingデコレータの実装
function Logging(target: any, propertyName: string, descriptor: PropertyDescriptor): PropertyDescriptor {
    const originalGetter = descriptor.get;

    // getterの挙動をカスタマイズ
    descriptor.get = function () {
        console.log(`【${propertyName}がアクセスされました】`);
        return originalGetter!.call(this);
    }

    return descriptor;
}

class UserProfile {
    private _name: string;

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

    // Loggingデコレータを使用したgetter
    @Logging
    get name() {
        return this._name;
    }
}

const user = new UserProfile('田中太郎');
console.log(user.name); // 【nameがアクセスされました】とログ出力後、"田中太郎"を出力

この例では、UserProfileクラスにnameというgetterが定義されており、そのgetterにLoggingデコレータを適用しています。

このLoggingデコレータは、getterへのアクセスが行われるときに、特定のログを出力するようにカスタマイズしています。

ここで重要なのは、デコレータ関数内でdescriptor.getの挙動をカスタマイズしている点です。

オリジナルのgetterの挙動をoriginalGetterに保存し、新しい挙動としてログ出力を追加しています。

このコードを実行すると、user.nameへのアクセス時に、「【nameがアクセスされました】」というログがコンソールに出力されるとともに、「田中太郎」という名前も取得できます。

デコレータを活用することで、getterやsetterの挙動を簡単にカスタマイズすることができます。

特に複雑なロジックや共通の挙動を多くのgetterやsetterに適用したい場合、デコレータは非常に役立ちます。

このデコレータとgetterの組み合わせは、実際の開発での設計やリファクタリング時にも有効です。

特にデバッグやログ出力、あるいは共通のエラーハンドリングなどを行いたい場合に、このテクニックは大変役立つでしょう。

●getter使用時の注意点と対処法

getterは非常に便利な機能ですが、適切に使用しないと予期しない問題やパフォーマンスの低下を引き起こす可能性があります。

ここでは、TypeScriptでgetterを使用する際の一般的な注意点と、それに対する対処法を詳細に解説します。

○注意点1：無限ループの発生

getter内で自身のプロパティを呼び出すと、無限ループが発生することがあります。

これは、getterが再帰的に呼び出され続けることで起こります。

class Example {
    private _value: number = 0;

    get value(): number {
        // このように自身のgetterを呼び出すと無限ループが発生
        return this.value;
    }
}

このコードでは、valueのgetterが自身を呼び出すことで無限ループが発生します。

対処法として、getter内で同名のプロパティを直接参照しないようにします。

代わりに、内部で使用する変数やプライベートプロパティを利用してください。

○注意点2：過度な計算

getterはプロパティのように簡単にアクセスできるため、計算を伴うgetterを頻繁に呼び出すと、パフォーマンスが低下する恐れがあります。

class HeavyCalculation {
    private _data: number[] = [1, 2, 3, 4, 5];

    get average(): number {
        // 重たい計算を伴うgetter
        return this._data.reduce((a, b) => a + b, 0) / this._data.length;
    }
}

この例では、averageのgetterは配列の平均を計算しています。

これが頻繁に呼び出されるとパフォーマンスが低下します。

対処法として、計算結果をキャッシュすることで、同じ計算を何度も繰り返さないようにします。

また、必要に応じて計算の重さを意識し、getterの代わりにメソッドを使用することも考慮します。

○注意点3：setterの不在

getterだけを定義し、setterを定義しない場合、そのプロパティは読み取り専用として扱われます。

これは意図的に読み取り専用のプロパティを作成する場合には有効ですが、setterの存在を忘れてしまうことも考えられます。

対処法として、プロパティが読み取り専用であることを意識して使用するか、setterも明示的に定義してください。

●カスタマイズ方法

getterは非常に便利な機能ですが、プロジェクトの要件や特定の状況によっては、そのままの使い方では十分ではないこともあります。

そこで、getterをカスタマイズして、さらに効果的に利用する方法を紹介します。

○getterの拡張とカスタマイズのアイディア

□動的なプロパティ名の利用

JavaScript（およびTypeScript）では、オブジェクトのプロパティ名を動的に設定することが可能です。

これをgetterと組み合わせることで、動的なプロパティ名に対して値を返すような挙動を実装することができます。

class DynamicProperty {
    private data: { [key: string]: any } = {};

    constructor() {
        this.data['name'] = 'Taro';
    }

    get [key: string]() {
        // keyに対応するデータが存在すればそれを返す
        return this.data[key];
    }
}

const instance = new DynamicProperty();
console.log(instance['name']);  // Taroを出力

このコードでは、動的にnameというプロパティ名に対してTaroという値を返すようなgetterを実装しています。

□キャッシュの導入

getterはプロパティにアクセスするたびに実行されます。

そのため、計算コストの高い操作をgetter内で行う場合は、その結果をキャッシュしておき、再計算を避けることでパフォーマンスの向上を図ることができます。

class ExpensiveCalculation {
    private cache: number | null = null;

    get result(): number {
        if (this.cache === null) {
            this.cache = this.calculate();
        }
        return this.cache;
    }

    private calculate(): number {
        // 計算コストの高い操作
        let sum = 0;
        for (let i = 0; i < 1000000; i++) {
            sum += i;
        }
        return sum;
    }
}

const instance = new ExpensiveCalculation();
console.log(instance.result);  // 初回は時間がかかるかもしれない
console.log(instance.result);  // キャッシュから取得するので高速

この例では、calculateメソッドは非常に計算コストの高い操作を行いますが、その結果をcacheに保存しておき、2回目以降のgetterの呼び出しではキャッシュから結果を返すことで、計算をスキップします。