【TypeScript】ゲッター(getter)とセッター(setter)についての理解を深める

今回はTypeScriptにおけるゲッター(getter)とセッター(setter)について解説したいと思います。アクセス修飾子「privare」を付与した場合、外部から値を呼び出すことや取得することができなくなります。しかし、そういった時にゲッターとセッターを定義することで呼び出しと取得が可能になります。

メンター業務をしていて、難しい概念なのかゲッターとセッターの原理が理解できていない人が多い印象です。

この記事の内容

コード例
ゲッター(getter)
セッター(setter)
注意点
まとめ
参考

コード例

まずはゲッターとセッターを使用する前の準備をしましょう。

以下は基本的なクラス宣言のコード例です。

class Fruits {
  constructor(public fruitsname: string) {
  }

  say(): void {
    console.log("好きなフルーツは" + this.fruitsname + "です。")
  }
}

var favorite = new Fruits("ぶどう");
console.log(favorite.fruitsname);
=> ぶどう

favorite.say();
=> 好きなフルーツはぶどうです。

【TypeScript】基本となるTypeScriptのクラス宣言について解説TypeScriptのクラス宣言について簡単に解説しています。型を定義するということ以外、基本的にはJavaScriptと変わりませんが改めてみていきましょう。...

ここに、外部からアクセスできなくするアクセス修飾子「private」を付与します。

class Fruits {
  constructor(private _fruitsname: string) {
  }

  say(): void {
    console.log("好きなフルーツは" + this._fruitsname + "です。")
  }
}

var favorite = new Fruits("ぶどう");
console.log(favorite._fruitsname);
=> Property '_fruitsname' is private and only accessible within class 'Fruits'.

favorite.say();

private変数は変数名の直前に「_」を付ける決まりがあります。

privateを付与することで、Fruitsクラスにアクセスすることができなくなり「Property ‘_fruitsname’ is private and only accessible within class ‘Fruits’.」というようなエラーが出力されてしまっています。

このようにprivateを使用することで安全なプログラムを書くことができるようになります。しかし、値の設定や取得をしたい場合はどうすれば良いのでしょうか。

ここからがゲッターとセッターの出番になります。

ゲッター(getter)

private変数を取得したい場合は、ゲッターを定義する必要があります。

ゲッターを定義する際はgetというメソッドを定義し、その後ろに取得する時のメソッド名を記述します。以下のコードを見てみましょう。

class Fruits {
  constructor(private _fruitsname: string) {
  }

  say(): void {
    console.log("好きなフルーツは" + this._fruitsname + "です。")
  }

  get fruitsname() {
    return this._fruitsname;
  }
}

var favorite = new Fruits("ぶどう");
console.log(favorite.fruitsname);
=> ぶどう

favorite.say();
=> 好きなフルーツはぶどうです。

上記のように「get fruitsname()」というゲッターをセットすることで、「console.log(favorite.fruitsname);」を実行した際にゲッターが呼び出されるようになります。

セッター(setter)

一方でprivate変数に値を設定したい場合は、セッターを定義する必要があります。

セッターを定義する際はsetというメソッドを定義し、その後ろに設定する時のメソッド名を記述します。以下のコードを見てみましょう。

class Fruits {
  constructor(private _fruitsname: string) {
  }

  say(): void {
    console.log("好きなフルーツは" + this._fruitsname + "です。")
  }

  get fruitsname() {
    return this._fruitsname;
  }

  set fruitsname(newValue: string) {
    this._fruitsname = newValue;
  }
}

var favorite = new Fruits("ぶどう");
console.log(favorite.fruitsname);
=> ぶどう

favorite.say();
=> 好きなフルーツはぶどうです。

favorite.fruitsname = "バナナ";
console.log(favorite.fruitsname);
=> バナナ

favorite.say();
=> 好きなフルーツはバナナです。

上記のように「set fruitsname(newValue: string)」というセッターをセットすることで、private変数を上書きすることができます。

「favorite.fruitsname = “バナナ”」とすることでセッターの引数である「newValue :string」に代入され、そこから変数に再定義されます。

実行結果を見てもきちんとバナナに置き換わっているね。

注意点

ここまででゲッターとセッターについて見てきましたが、コンパイル時には1つ注意しなければならない点があります。

それはコンパイルするコマンドの末尾に「-t ES5」というオプションをつけなければならないということです。

通常であればtscコマンドでコンパイルを実行し、node.jsでJSを実行しています。しかし、ゲッターとセッターのコードをコンパイルする場合は「-t ES5」オプションをつけなければなりません。

【通常】
% tsc test.ts
=> error TS1056: Accessors are only available when targeting ECMAScript 5 and higher.というエラーが出力される

【ゲッター/セッター定義時】
% tsc test.ts -t ES5
% node test.js