JavaScriptでクラスを定義する際に書き込み様(set)と読み込み用(get)のプロパティを定義する仕組みを理解しよう

JavaScriptでクラスを定義する際に書き込み様(set)と読み込み用(get)のメソッドを定義する仕組み

JavaScriptのクラスには、プロパティ(というよりクラス変数)の扱いに関して「書き込み用(set)」と「読み込み用(get)」を定義して、コードの可読性を上げる仕組みがあります。

これをゲッター/セッターといいます。インスタンス化された状態で外から上書きをすることが可能なクラス変数を定義したり、「読み込み」と「書き込み」で処理を分け、コードの可読性を上げるために使われます。

構文

クラス内の書き方

構文意味
set プロパティー名(値){}setterを定義
get プロパティー名()getterを定義
setter / getter の仕様

クラス外からの呼び出し時の書き方

構文意味
インスタンス名.プロパティー名 = 値新しい値をクラス内の該当するプロパティーのSetterに代入する(Setter)
インスタンス名.プロパティー名;該当するプロパティーのgetterを実行する
setter / getter の仕様
補足

getter/setterに適用するプロパティー名はgetterとsetterで同じにする必要はありませんが、一般的に同じにするのがベストプラクティスになっています。

本ページのコードでも「SetterGetterFortargetVariable」というプロパティーに統一しています。

サンプルコード

setter /getterはデータの上書き・読み込みを可能にします。まずは完成形を確認します。

Output
getterで値を出力
Pug
table.table
			tbody
				tr
					th getterで値を出力
					td#targetText
JavaScript
const targetText = document.getElementById( 'targetText' );

//クラスを定義処理の塊
class targetClass {
  constructor(value1) {
		//class内で変数を定義
		this.targetVariable1 = value1;
  }
	//Setter:書き込み用
	set SetterGetterFortargetVariable(value1) {
		this.targetVariable1 = value1;
	}
	//Getter:読み込み用
	get SetterGetterFortargetVariable() {
		targetText.textContent = `私はメソッドです。受け取った引数は「${this.targetVariable1}」です。`;
	}
}

//Classのインスタンス化(Class内の処理の元になるデータを引数として渡す)
const targetInstance = new targetClass('User A');

//Setterを使って初期値「User A」を「User B」に上書きする
targetInstance.SetterGetterFortargetVariable = 'User B';

//Getterを使って上書きされた値を出力する
targetInstance.SetterGetterFortargetVariable;

クラス定義

このサンプルコードではまずクラス定義を行っています。中でgetterとsetterを定義しています。コンストラクターを使って初期値を代入しています。

サンプルコードの場合は「User A」になります。

JavaScript
//クラスを定義処理の塊
class targetClass {
  constructor(value1) {
		//class内で変数を定義
		this.targetVariable1 = value1;
  }
	//Setter:書き込み用
	set SetterGetterFortargetVariable(value1) {
		this.targetVariable1 = value1;
	}
	//Getter:読み込み用
	get SetterGetterFortargetVariable() {
		targetText.textContent = `私はメソッドです。受け取った引数は「${this.targetVariable1}」です。`;
	}
}

インスタンス化

下記コードでインスタンス化します。初期値として「User A」が渡されます。

JavaScript
//Classのインスタンス化(Class内の処理の元になるデータを引数として渡す)
const targetInstance = new targetClass('User A');

MaSetterを実行して上書き

Setterを実行して「User A」を「User B」に上書きしています。

JavaScript
//Setterを使って初期値「User A」を「User B」に上書きする
targetInstance.SetterGetterFortargetVariable = 'User B';

Getterを実行して現在の値を出力

Getterを実行して現在の値を出力しています。この場合は上書きされた「User B」と出力されます。

JavaScript
//Getterを使って上書きされた値を出力する
targetInstance.SetterGetterFortargetVariable;
インストラクター